/* ==========================================================================
   ARCHITEKTURPREIS - user.css
   Neue Abschnitte immer unten anhängen (nächste Nummer) und hier im Inhalt ergänzen.
   Inhalt:
   1. Variablen                         11. Button "Melden Sie sich bei uns"
   2. Basis (Schrift, Links, Überschr.) 12. Einblenden beim Scrollen
   3. Buttons                           13. Startseite
   4. Kopfbereich                       14. Seitenmenü links
   5. Topbar                            15. Rote Seiten und Team
   6. Hamburger-Button                  16. Leistungen
   7. Menü-Overlay                      17. Beiträge, Brotkrumen, Navigation
   8. Suche im Overlay                  18. Kontaktseite
   9. Banner und Streifen               19. Referenzen
   10. Footer                           20. Impressum und Datenschutz
   ========================================================================== */


/* ==========================================================================
   1. VARIABLEN
   ========================================================================== */

:root {
    --cassiopeia-color-primary: #c90d0d;      /* Hauptrot (wie Joomla-3-Seite) */
    --cassiopeia-color-secondary: #3dabe8;    /* Akzentblau */
    --cassiopeia-color-hover: #9c1218;        /* Dunkelrot (Hover primär) */
    --archpreis-menu-hover: #c47979;          /* Pastellrot (Link-Hover im Menü) */
    --archpreis-light: #ffffff;
    --archpreis-dark: #333333;
    --ri-dauer: 0.8s;                         /* Einblenden beim Scrollen: Dauer */
    --ri-takt: 0.2s;                          /* Einblenden beim Scrollen: Takt zwischen den Elementen */
}


/* ==========================================================================
   2. BASIS
   Schrift, Hilfsklassen, Links, Überschriften
   ========================================================================== */

/* Schrift für die ganze Website (wie Joomla 3) */
body {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 14px;
    line-height: 1.5;
    -webkit-font-smoothing: subpixel-antialiased;
    -webkit-text-stroke: 1px transparent;
    overflow-anchor: none; /* Firefox: Scroll-Anker aus, damit das Schrumpfen des Kopfes die Scroll-Position nicht verschiebt */
}

p,
span,
li,
.com-content-article__body {
    font-size: 14px !important;
}

/* Hilfsklassen aus der Joomla-3-Version */
.subblau { font-size: 24px; font-weight: bold; color: #3DABE8; }
.subrot { font-size: 24px; font-weight: bold; color: #c51b23; }
.subrotkleiner { font-size: 20px; font-weight: normal; color: #c51b23; }
.gesperrt { font-size: 11px; letter-spacing: 2px; }
.klein { font-size: 9px; font-weight: normal; }

/* Links im Inhaltstext: Rot, bei Hover Hellblau */
main a,
main a:link,
main a:visited,
.com-content a {
    color: var(--cassiopeia-color-primary) !important;
    text-decoration: none !important;
    border-bottom: 1px transparent solid !important;
    transition: color 0.2s ease, border-color 0.2s ease !important;
}

main a:hover,
main a:focus,
main a:active,
.com-content a:hover,
.com-content a:active {
    color: var(--cassiopeia-color-secondary) !important;
    text-decoration: none !important;
}

/* LINKS GENERELL: nie unterstrichen (Hover, Fokus, Aktiv); Aktiv wie Hover in Hellblau */
a:hover, a:focus, a:active { text-decoration: none; }

/* Überschriften */
h1, h2, h3, h4 {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: 700;
    margin-top: 20px;
    margin-bottom: 10px;
}
h1 { font-size: 56px; line-height: 1.1; text-transform: uppercase; }
h2 { font-size: 38px; line-height: 1; text-transform: uppercase; }
h3 { font-size: 24px; line-height: 1.1; }
h4 { font-size: 18px; line-height: 1.3; margin-top: 10px; }

/* Handy: kein seitliches Überlaufen (Menü außerhalb) */
@media (max-width: 991.98px) { html, body { overflow-x: clip; } }


/* ==========================================================================
   3. BUTTONS (ALLE GLEICH)
   ========================================================================== */

.btn {
    border-radius: 0;
    text-transform: uppercase;
    font-size: 14px;
    line-height: 20px;
    padding: 8px 30px;
}

/* Gefüllt (z. B. "Melden Sie sich bei uns") */
.btn-primary {
    background-color: var(--cassiopeia-color-primary);
    border-color: #ffffff;
    color: #ffffff;
}

/* Nur Rahmen, auf rotem Grund (z. B. im Streifen) */
.btn-outline-light {
    background-color: transparent;
    border-color: #ffffff;
    color: #ffffff;
}

/* Beide beim Drüberfahren */
.btn-primary:hover,
.btn-outline-light:hover {
    background-color: var(--cassiopeia-color-secondary);
    border-color: #ffffff;
    color: #ffffff;
}

/* Nach oben: dezent mit Rahmen, fährt von rechts herein, beim Hover kräftig */
.back-to-top-link {
    text-decoration: none;
    width: 44px;
    height: 44px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    line-height: 1;
    color: var(--cassiopeia-color-primary);
    background-color: rgba(255, 255, 255, 0.85);
    border: 1px solid var(--cassiopeia-color-primary);
    border-radius: 0;
    box-shadow: none;
    transform: translateX(120%);
    transition: transform 0.4s ease, background-color 0.3s ease, color 0.3s ease;
}
.back-to-top-link.visible {
    transform: translateX(0);
}
.back-to-top-link:hover {
    color: #ffffff;
    background-color: var(--cassiopeia-color-primary);
}


/* ==========================================================================
   4. KOPFBEREICH
   Sticky, schmal beim Scrollen, Verlauf auf roten Seiten
   ========================================================================== */

.container-header {
    background-color: var(--cassiopeia-color-primary);
    background-image: none;
    padding: 0.8rem 0;
    transition: padding 0.3s ease;
}

/* HTML-Modul im Kopf (Logo + Menü) nutzt die volle Breite */
.container-header .mod-custom {
    width: 100%;
}

/* Logo am Desktop in Originalgröße */
@media (min-width: 501px) {
    .container-header .mod-custom img {
        max-width: none;
        width: auto;
    }
}

/* Handy (bis 500 px): Logo breit, Hamburger rechts außen */
@media (max-width: 500px) {
    .container-header .container-nav,
    .container-header .grid-child.container-nav {
        padding-right: 0;
        margin-right: 0;
    }

    .container-header .mod-custom .col-7 {
        width: 65%;
    }

    .container-header .mod-custom .col-5 {
        width: 35%;
        padding-right: 0;
    }

    .container-header .mod-custom img {
        width: 100%;
        max-width: 290px;
        min-width: 220px;
        height: auto;
        display: block;
        padding-top: 10px;
    }
}

/* Schmaler Kopf beim Runterscrollen: Topbar weg, Logo + 10 px oben/unten (Klasse setzt user.js) */
.container-header.ri-head-compact {
    padding-top: 10px;
    padding-bottom: 10px;
}

.container-header.ri-head-compact .container-topbar {
    max-height: 0;
    padding: 0;
    opacity: 0;
}

.container-header.ri-head-compact .navbar-toggler {
    width: 3rem;
    height: 3rem;
}

.container-header.ri-head-compact .navbar-brand {
    padding-top: 0;
    padding-bottom: 0;
    margin-top: 0;
    margin-bottom: 0;
}

.container-header.ri-head-compact .container-nav,
.container-header.ri-head-compact .mod-custom,
.container-header.ri-head-compact .moduletable,
.container-header.ri-head-compact .navbar {
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 0;
    padding-bottom: 0;
}

/* Rote Seiten (mit Banner-Bild): kleiner Farbverlauf unter dem Kopf, solange das rote Bild dahinter liegt (Klasse setzt user.js) */
.container-header.ri-head-grad::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    height: 20px;
    background: linear-gradient(to bottom, var(--cassiopeia-color-primary), rgba(201, 13, 13, 0));
    pointer-events: none;
}

/* Handy/Tablet: Kopf (Logo + Hamburger) fährt beim Runterscrollen weg und beim Hochscrollen sofort wieder ein (Klasse ri-head-weg setzt user.js) */
@media (max-width: 991.98px) {
    .container-header { position: sticky !important; top: 0; transition: padding 0.3s ease, transform 0.3s ease; }
    .container-header.ri-head-weg { transform: translateY(-100%); }
}


/* ==========================================================================
   5. TOPBAR (KONTAKTZEILE OBEN RECHTS)
   ========================================================================== */

.container-topbar {
    background-color: transparent;
    padding: 0.3rem 0 0 0;
    max-width: 1320px;
    margin-left: auto;
    margin-right: auto;
}

/* Max-Höhe für das weiche Wegfahren beim Schrumpfen */
.container-header .container-topbar {
    max-height: 80px;
    overflow: hidden;
    transition: max-height 0.3s ease, opacity 0.3s ease, padding 0.3s ease;
}

/* Inhalt rechtsbündig */
.container-header .container-topbar,
.container-topbar .mod-custom {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    width: 100%;
}

.container-topbar .topbar-kontakt-wrapper {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    gap: 1.5rem;
    padding-right: 30px;
    position: relative;
    top: -8px; /* Text nicht an der Oberkante abschneiden */
}

/* Feine, transparente Schrift */
.container-topbar *,
.container-topbar a,
.container-topbar span {
    color: rgba(255, 255, 255, 0.45) !important;
    font-size: 0.68rem !important;
    font-weight: 300;
    letter-spacing: 0.3px;
    text-decoration: none !important;
    border-bottom: none !important;
    box-shadow: none !important;
    transition: color 0.15s ease !important;
}

.container-topbar a:hover,
.container-topbar span:hover,
.container-topbar .topbar-item:hover * {
    color: #ffffff !important;
    text-decoration: none !important;
}

.container-topbar i[class*="fa-"] {
    font-size: 0.72rem !important;
    display: inline-block;
    font-weight: 400;
    vertical-align: middle;
}

/* Handy (bis 500 px): Topbar ausblenden */
@media (max-width: 500px) {
    .container-topbar,
    .container-topbar .topbar-kontakt-wrapper,
    .container-topbar .mod-custom {
        display: none;
        visibility: hidden;
        opacity: 0;
        height: 0 !important;
        padding: 0;
        margin: 0;
    }
}


/* ==========================================================================
   6. HAMBURGER-BUTTON
   Zustand A (Menü zu): drei Balken. Zustand B (Menü offen): X
   ========================================================================== */

.navbar-toggler {
    display: block !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    padding: 0;
    background: transparent;
    margin: 0 0 0 auto !important;
    z-index: 10150;
    cursor: pointer;
    position: relative;
    width: 4.5rem;
    height: 4.5rem;
}

/* Standard-Icon von Joomla ausblenden */
.navbar-toggler * {
    display: none;
}

/* Zustand A: drei Balken */
.navbar-toggler::before {
    content: "";
    position: absolute;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 2.5rem;
    height: 7px;
    background-color: #ffffff;
    box-shadow: 0 -13px 0 0 #ffffff, 0 13px 0 0 #ffffff !important;
    border-radius: 4px;
    display: block !important;
    font-size: 0;
    transition: transform 0.2s ease !important;
}

/* Zustand B: erste Achse des X */
body:has(.navbar-collapse.show) .navbar-toggler::before {
    box-shadow: none !important;
    transform: translate(-50%, -50%) rotate(45deg) !important;
}

/* Zustand B: zweite Achse des X (im geschlossenen Zustand unsichtbar) */
.navbar-toggler::after {
    content: "";
    position: absolute;
    top: 50% !important;
    left: 50% !important;
    width: 2.5rem;
    height: 7px;
    background-color: #ffffff;
    border-radius: 4px;
    transform: translate(-50%, -50%) rotate(-45deg) !important;
    z-index: 10155;
    display: none !important;
}

body:has(.navbar-collapse.show) .navbar-toggler::after {
    display: block !important;
}


/* ==========================================================================
   7. MENÜ-OVERLAY (VOLLBILD) UND LINKS
   ========================================================================== */

.navbar-collapse {
    position: fixed;
    top: 0;
    right: -100vw;
    width: 100vw;
    height: 100vh;
    background-color: var(--cassiopeia-color-primary);
    z-index: 10100;
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start !important;
    padding: 6rem 2rem 2rem 2rem;
    transition: right 0.4s cubic-bezier(0.25, 1, 0.5, 1) !important;
    overflow-y: auto;
}

.navbar-collapse.show {
    right: 0;
}

.navbar-collapse .mod-menu {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    width: 100% !important;
    margin-bottom: 2rem;
    padding: 0;
}

/* Keine Unterstreichungen, Linien oder Zierelemente im Menü */
.navbar-collapse a,
.navbar-collapse a:hover,
.navbar-collapse a:focus {
    text-decoration: none !important;
    border-bottom: none !important;
    box-shadow: none !important;
}

.navbar-collapse a::after,
.navbar-collapse a::before {
    display: none !important;
    content: none !important;
}

/* Untermenüs im Overlay ausblenden */
.navbar-collapse ul ul {
    display: none;
    visibility: hidden;
    opacity: 0;
    height: 0;
    margin: 0;
    padding: 0;
}

/* Abstand im Menü (statt Trennzeichen-Menüpunkte): nach Kontakt (169) und nach Sitemap (224) */
.navbar-collapse .item-169,
.navbar-collapse .item-224 {
    margin-bottom: 28px;
}

/* Hauptlinks: fett, groß, weiß */
.navbar-collapse .mod-menu a {
    color: #ffffff !important;
    font-size: 2.3rem !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    display: inline-block !important;
    transform: scaleX(1.1) !important;
    transform-origin: center !important;
    line-height: 0.95 !important;
    overflow: visible !important;
    padding: 0 0.6rem !important;
    margin: 0 !important;
    background: transparent !important;
    transition: color 0.2s ease !important;
}

.navbar-collapse .mod-menu a:hover {
    color: var(--archpreis-menu-hover) !important;
}

/* Aktiver Hauptlink: weißer Rahmen, Text sitzt unten auf */
.navbar-collapse .mod-menu .active a,
.navbar-collapse .mod-menu .current a {
    padding: 6px 10px 0 0 !important;
    margin-bottom: 0 !important;
    border: 2px solid #ffffff !important;
    display: inline-block !important;
    line-height: 0.75 !important;
    height: auto !important;
}

@media (max-width: 500px) {
    .navbar-collapse .mod-menu .active a,
    .navbar-collapse .mod-menu .current a {
        line-height: 0.65 !important;
    }
}

/* Kleine Links (Impressum / Datenschutz / Sitemap) */
.navbar-collapse .mod-menu a.legal-link {
    color: #ffffff !important;
    font-size: 1.05rem !important;
    font-weight: 500 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    padding: 0.1rem 0 !important;
    transform: none !important;
    line-height: 1.4 !important;
    margin: 0 !important;
    transition: color 0.2s ease !important;
}

.navbar-collapse .mod-menu a.legal-link:hover {
    color: var(--archpreis-menu-hover) !important;
}

/* Aktiver kleiner Link: kompakter Rahmen, Text sitzt unten auf */
.navbar-collapse .active a.legal-link,
.navbar-collapse .current a.legal-link {
    padding: 5px 8px 0 0 !important;
    border: 1.5px solid #ffffff !important;
    display: table !important;
    margin: 0 auto !important;
    line-height: 0.75 !important;
    height: auto !important;
}


/* ==========================================================================
   8. SUCHE IM OVERLAY (weißer Rahmen mit Leuchteffekt)
   Menü zu: ausgeblendet. Menü offen: unten mittig. Handy (bis 500 px): aus.
   ========================================================================== */

body:not(:has(.navbar-collapse.show)) .container-header [class*="finder"],
body:not(:has(.navbar-collapse.show)) .container-header form[action*="search"] {
    display: none;
}

body:has(.navbar-collapse.show) .container-header [class*="finder"],
body:has(.navbar-collapse.show) .container-header form[action*="search"] {
    display: block;
    position: fixed !important;
    bottom: 4.5rem;
    left: 50%;
    transform: translateX(-50%) !important;
    width: 100% !important;
    max-width: 290px;
    z-index: 10120;
}

@media (max-width: 500px) {
    body:has(.navbar-collapse.show) .container-header [class*="finder"],
    body:has(.navbar-collapse.show) .container-header form[action*="search"],
    .container-header [class*="finder"],
    .container-header form[action*="search"] {
        display: none;
        visibility: hidden;
        opacity: 0;
        height: 0 !important;
    }
}

/* Eingabefeld: weißer Rahmen, Leuchteffekt, zentrierter Text */
.container-header form input {
    border: 2px solid #ffffff !important;
    background-color: transparent !important;
    border-radius: 0;
    box-shadow: 0 0 12px rgba(255, 255, 255, 0.4) !important;
    color: #ffffff !important;
    padding: 0.5rem 0.8rem;
    font-size: 1.1rem !important;
    width: 100%;
    text-align: center;
}

.container-header form input::placeholder {
    color: #ffffff;
    text-align: center;
    letter-spacing: 0.5px;
    opacity: 1;
    text-transform: capitalize;
}


/* ==========================================================================
   9. BANNER UND STREIFEN UNTER DEM BANNER
   Rote Seiten: Banner-Bereich über die ganze Breite rot, Rest der Seite bleibt weiß
   Text unter dem Banner (Position top-a): roter Streifen mit Hund und einfliegenden Texten
   ========================================================================== */

.container-banner {
    background-color: var(--cassiopeia-color-primary);
}

.container-top-a {
    grid-column: full-start / full-end;
    background-color: var(--cassiopeia-color-primary);
    color: #ffffff;
    margin-top: -2rem;
}
.container-top-a h2, .container-top-a h3 { color: #ffffff; }
.container-top-a h2 { font-size: 38px; line-height: 38px; }
.container-top-a h3 { font-size: 18px; line-height: 1.3; margin-top: 10px; }

/* Hund mit Wurst: GIF als Hintergrund über die volle Breite, unten 20 px abgeschnitten */
.container-top-a .ri-hund {
    background: url('/images/SYSTEMBILDER/hund_mit_wurst_lauf.gif') no-repeat right bottom -1.4vw / 100% auto;
    padding-bottom: calc(12% - 1.4vw);
}

@media (min-width: 992px) {
    .container-top-a .ri-hund {
        padding-bottom: calc(5% - 1.4vw);
    }
}


/* Einfliegen: Titel steht, dann Untertitel, Text und Button nacheinander */
@keyframes ri-fadeindown {
    from { opacity: 0; transform: translateY(-40px); }
    to   { opacity: 1; transform: translateY(0); }
}
.ri-js .container-top-a .ri-hund .col-lg-12 > :not(h2) { opacity: 0; }
.ri-anim .container-top-a .ri-hund .col-lg-12 > :not(h2) { animation: ri-fadeindown 0.8s ease forwards; }
.ri-anim .container-top-a .ri-hund .col-lg-12 > :nth-child(2) { animation-delay: 0.8s; }
.ri-anim .container-top-a .ri-hund .col-lg-12 > :nth-child(3) { animation-delay: 1.6s; }
.ri-anim .container-top-a .ri-hund .col-lg-12 > :nth-child(4) { animation-delay: 2.4s; }


/* ==========================================================================
   10. FOOTER
   ========================================================================== */

/* Hintergrundbild (Berge) mit weißem Verlauf oben, feste Höhe 300 px */
footer.container-footer,
.container-footer.footer.full-width {
    background-color: #ffffff;
    background-image: linear-gradient(to bottom, #ffffff 0, rgba(255, 255, 255, 0) 100px), url('/images/SYSTEMBILDER/berge-architektur-preis.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center bottom;
    margin-top: 1em;
    height: 300px !important;
    min-height: 300px;
    padding: 2rem 0 0 0;
}

/* Inhalts-Korridor: drei Blöcke nebeneinander */
.container-footer .grid-child,
footer .grid-child {
    max-width: 1320px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-right: 25%;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: flex-start;
}

/* Kompakt: kein Abstand zwischen Zeilen und Modulen */
.container-footer .mod-custom,
.footer p,
.footer span,
.footer br {
    flex: 0 0 30%;
    width: 30%;
    margin: 0;
    padding: 0;
    background: transparent;
}

/* Textfarbe dunkel, ausgenommen .subrot */
.footer,
.footer p,
.footer div:not(.subrot),
.footer span:not(.subrot),
.footer li {
    color: #333333;
}

/* Links im Footer: Rot, bei Hover Hellblau */
.footer a,
.footer a:link,
.footer a:visited,
.footer joomla-hidden-mail a {
    color: #c51b23;
    text-decoration: none;
    border-bottom: none;
    box-shadow: none;
    transition: color 0.15s ease !important;
}

.footer a:hover,
.footer a:focus {
    color: #3dabe8;
    text-decoration: none;
}

/* Handy und Tablet */
@media (max-width: 992px) {
    .container-footer .grid-child,
    footer .grid-child {
        max-width: 100%;
        width: 100%;
        flex-wrap: wrap;
        margin-left: 0;
        padding-top: 1.5rem;
        padding-right: 7px;
    }

    footer.container-footer,
    .container-footer.footer.full-width {
        height: auto !important;
        min-height: 0;
        padding-bottom: 4rem;
    }

    .footer .mod-custom {
        flex: 0 0 100%;
        width: 100%;
    }
}

@media (min-width: 993px) {
    footer.container-footer,
    .container-footer.footer.full-width {
        padding-top: 4rem;
    }
}

/* FOOTER AM DESKTOP NIEDRIGER: weniger Weiß über den Adressen (Höhe 210 statt 300 px, kein Innen- und Außenabstand oben, auch kein Abstand unter den Startseiten-Kästen und dem leeren Bottom-B-Bereich); am Handy bleibt alles wie oben */
@media (min-width: 993px) {
    footer.container-footer,
    .container-footer.footer.full-width {
        margin-top: 0;
        padding-top: 0;
        height: 210px !important;
        min-height: 210px;
    }
    .container-bottom-b > * { margin: 0; }
}

/* FOOTER: Name links wie auf der Joomla-3-Seite (Span .subrot: 20 px, Zeilenhöhe 25 px, Hauptrot) */
.footer .subrot { font-size: 20px !important; line-height: 25px; color: var(--cassiopeia-color-primary); }


/* ==========================================================================
   11. BUTTON "MELDEN SIE SICH BEI UNS" (fixiert unten rechts, rot)
   Modul auf Position bottom-b, Inhalt: <a class="btn btn-primary">
   ========================================================================== */

#mod-custom128 {
    position: fixed;
    right: 0;
    bottom: 0;
    z-index: 1000;
}

#mod-custom128 .btn-primary {
    background-color: var(--cassiopeia-color-primary);
    border-color: #ffffff;
    border-radius: 0;
    text-transform: uppercase;
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.25);
}

#mod-custom128 .btn-primary:hover {
    background-color: var(--cassiopeia-color-secondary);
    border-color: #ffffff;
    box-shadow: 0 -4px 14px rgba(0, 0, 0, 0.4);
}

/* Desktop: ragt unten halb heraus, fährt beim Drüberfahren hoch */
@media (min-width: 993px) {
    #mod-custom128 {
        bottom: -0.9rem;
        transition: bottom 0.3s ease;
    }

    #mod-custom128:hover {
        bottom: 0;
    }
}

/* Mobil-Layout: ausblenden */
@media (max-width: 992px) {
    #mod-custom128 {
        display: none;
    }
}


/* ==========================================================================
   12. EINBLENDEN BEIM SCROLLEN
   ========================================================================== */

/* EINBLENDEN BEIM SCROLLEN (Startseite): Klassen ri-vor / ri-sichtbar setzt user.js; Titel kommt 20 px von oben, Kästen 20 px von unten. Dauer und Takt hier einstellen. Als Animation (nicht Transition), weil Links per !important keine Transition erlauben */
@keyframes ri-ein-unten { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
@keyframes ri-ein-oben { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: none; } }
.ri-vor { opacity: 0; }
.ri-vor.ri-sichtbar { animation: ri-ein-unten var(--ri-dauer) ease both; }
.flip-titel.ri-vor.ri-sichtbar, .flip-text.ri-vor.ri-sichtbar { animation-name: ri-ein-oben; }
.flip-text.ri-vor.ri-sichtbar { animation-delay: var(--ri-takt); }
@media (min-width: 992px) {
    .flip-box.ri-vor.ri-sichtbar:nth-child(1) { animation-delay: calc(var(--ri-takt) * 2); }
    .flip-box.ri-vor.ri-sichtbar:nth-child(2) { animation-delay: calc(var(--ri-takt) * 3); }
    .flip-box.ri-vor.ri-sichtbar:nth-child(3) { animation-delay: calc(var(--ri-takt) * 4); }
    .flip-box.ri-vor.ri-sichtbar:nth-child(4) { animation-delay: calc(var(--ri-takt) * 5); }
}
@media (prefers-reduced-motion: reduce) {
    .ri-vor { opacity: 1; }
    .ri-vor.ri-sichtbar { animation: none; }
}


/* ==========================================================================
   13. STARTSEITE
   ========================================================================== */

/* STARTSEITE: vier Teaser-Kästen (Beitrag Home: .flip-titel, .flip-text, .flip-reihe mit 4x a.flip-box); Hover blendet rotes Bild in blaues Bild über */
.flip-titel { margin: 18px 0 10px; font-size: 36px; line-height: 1.2; text-align: center; text-transform: uppercase; color: var(--cassiopeia-color-primary); }
.flip-text { margin: 0 0 20px; font-size: 24px; line-height: 1.3; text-align: center; color: var(--archpreis-dark); }
.flip-reihe { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; max-width: 1140px; margin: 0 auto 36px; }
.flip-reihe .flip-box { position: relative; display: block; height: 280px; overflow: hidden; border: 0 !important; }
.flip-reihe .flip-box img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }
.flip-reihe .flip-box .hinten { opacity: 0; }
.flip-reihe .flip-box:hover .hinten { opacity: 1; }
.flip-reihe .flip-box::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; box-shadow: inset 0 0 45px rgba(255, 255, 255, 0.45); opacity: 0; transition: opacity 0.6s ease; pointer-events: none; }
.flip-reihe .flip-box:hover::after { opacity: 1; }
.flip-reihe .flip-box img { transition: opacity 0.4s ease, transform 0.8s ease; }
.flip-reihe .flip-box:hover img { transform: scale(1.03); }
.flip-reihe .flip-box span { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); padding: 8px 30px; border: 1px solid #ffffff; background-color: var(--cassiopeia-color-primary); font-size: 14px; line-height: 20px; text-transform: uppercase; color: #f5f5f5; opacity: 0; transition: opacity 0.4s ease; }
.flip-reihe .flip-box:hover span { opacity: 1; }
@media (hover: none) {
    .flip-reihe .flip-box span { opacity: 1; }
}
@media (min-width: 992px) {
    .flip-text { margin-bottom: 32px; }
}
@media (max-width: 991.98px) {
    .flip-reihe { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 575.98px) {
    .flip-reihe { grid-template-columns: 1fr; }
}
@media (min-width: 993px) {
    .flip-reihe { margin-bottom: 0; }
}

/* STARTSEITE: Hauptbild (Banner) fällt beim Laden von oben ein (Seitenklasse im Menüpunkt Home: seite-start; Dauer wie Abschnitt 12) */
.seite-start .container-banner { overflow: hidden; }
.seite-start .container-banner > * { animation: ri-ein-oben var(--ri-dauer) ease both; }
@media (prefers-reduced-motion: reduce) {
    .seite-start .container-banner > * { animation: none; }
}


/* ==========================================================================
   14. SEITENMENÜ LINKS (Über uns, Leistungen, Referenzen, Team)
   Kästchen: Menüpunkte mit Menü-Link-CSS-Klasse btn-light-white (rote Seiten) bzw. btn-light-red (weiße Seiten), nur Link: rot20px / weiss20px
   Modul: Modulstil Cassiopeia-noCard
   ========================================================================== */

/* Seitenmenü links: alle Kästchen so breit wie der längste Name */
.container-sidebar-left .mod-menu {
    width: max-content;
}

/* Seitenmenü links: Kästchen (Menüpunkte mit Menü-Link-CSS-Klasse btn-light-white) */
.container-sidebar-left .btn-light-white {
    display: block;
    margin: 0 0 10px;
    padding: 5px 20px 0 20px;
    border: 1px solid #ffffff;
    font-size: 14px;
    line-height: 36px;
    color: #ffffff;
    text-decoration: none;
    transition: 0.3s;
}
.container-sidebar-left .btn-light-white:hover,
.container-sidebar-left .current > .btn-light-white {
    background-color: #ffffff;
    color: var(--archpreis-menu-hover);
}

/* Link "Wir über uns" ohne Kasten */
.container-sidebar-left .weiss20px {
    display: block;
    padding: 2px 0;
    color: #ffffff;
    text-decoration: none;
}

/* Titel des Moduls: Großbuchstaben mit kurzer Linie darunter (gilt auch auf den roten Seiten) */
.container-sidebar-left h3 {
    font-size: 20px;
    line-height: 1.2;
    text-transform: uppercase;
    margin: 20px 0 15px;
}

/* Kästchen: roter Rahmen, aktiv und beim Drüberfahren rot mit weißer Schrift */
.container-sidebar-left .btn-light-red {
    display: block;
    margin: 0 0 10px;
    padding: 5px 20px 0 20px;
    border: 1px solid var(--cassiopeia-color-primary);
    font-size: 14px;
    line-height: 36px;
    color: #1a1a1a;
    text-decoration: none;
    transition: 0.3s;
}
.container-sidebar-left .btn-light-red:hover,
.container-sidebar-left .current > .btn-light-red {
    background-color: var(--cassiopeia-color-primary);
    color: #ffffff;
}

/* Link ohne Kasten in Rot (z. B. "Unser Team") */
.container-sidebar-left .rot20px {
    display: block;
    padding: 2px 0;
    color: var(--cassiopeia-color-primary);
    text-decoration: none;
}

/* SEITENMENÜ LINKS: nie unterstrichen (auch nicht der aktive Punkt) */
.container-sidebar-left .mod-menu a, .container-sidebar-left .mod-menu .current > a { text-decoration: none !important; }

/* Seiten mit Seitenmenü links (Über uns, Leistungen, Referenzen): Beitragstitel nur am Handy/Tablet sichtbar (Desktop: Titel steht im Menümodul links); Aussehen wie der Modultitel */
@media (min-width: 992px) {
    body.has-sidebar-left:not(.has-sidebar-right):not(.seite-rot):not(.seite-referenzen) .com-content-article:not(:has(.pagenavigation)) .page-header { display: none; }
}
@media (max-width: 991.98px) {
    body.has-sidebar-left:not(.has-sidebar-right):not(.seite-rot) .com-content-article .page-header h1 { font-size: 20px; line-height: 1.2; text-transform: uppercase; color: #212529; margin: 20px 0 15px; }
}

/* Kästchen-Link im Beitragstext (Link-Klasse btn-light-red im Beitrag): wie die Kästchen im Seitenmenü */
main a.btn-light-red, main a.btn-light-red:link, main a.btn-light-red:visited { display: inline-block; margin: 0 10px 10px 0; padding: 5px 20px 0 20px; border: 1px solid var(--cassiopeia-color-primary); font-size: 14px; line-height: 36px; color: #1a1a1a !important; text-decoration: none; border-bottom: 1px solid var(--cassiopeia-color-primary) !important; transition: 0.3s; }
main a.btn-light-red:hover, main a.btn-light-red:focus, main a.btn-light-red:active { background-color: var(--cassiopeia-color-primary); color: #ffffff !important; }

/* Desktop, Seiten mit Seitenmenü links: Oberkante des Beitrags (Foto) auf Höhe der Oberkante des Modultitels (z. B. "ÜBER UNS"); nicht bei Leistungen (dort hat .leist-titel schon seinen eigenen Abstand) */
@media (min-width: 992px) {
    body.has-sidebar-left:not(.has-sidebar-right):not(.seite-rot):not(.seite-referenzen) .com-content-article:not(:has(.leist-titel)) { padding-top: 25px; }
}

/* Seitenmenü: auch Eltern-Punkt (active) rot, wenn eine versteckte Auflistung geöffnet ist */
.container-sidebar-left .active > .btn-light-red { background-color: var(--cassiopeia-color-primary); color: #ffffff; }


/* ==========================================================================
   15. ROTE SEITEN UND TEAM
   Menüpunkt, Reiter "Seite anzeigen", Seitenklasse: seite-rot
   Personenseiten: Foto rechts in voller Breite, Text schmal davor (Foto: Modul RI14 auf Position sidebar-right, Bildhöhe 750)
   ========================================================================== */

body.seite-rot,
.seite-rot .site-grid {
    background-color: var(--cassiopeia-color-primary);
    color: #ffffff;
}
.seite-rot h1, .seite-rot h2, .seite-rot h3, .seite-rot h4, .seite-rot a {
    color: #ffffff;
}

/* Links im Inhalt bleiben weiß (überschreibt die rote Linkfarbe mit !important aus Abschnitt 2) */
.seite-rot main a,
.seite-rot main a:link,
.seite-rot main a:visited {
    color: #ffffff !important;
}

.seite-rot .page-header h1 {
    font-size: 30px;
    line-height: 39px;
}

@media (min-width: 992px) {
    /* Foto 510 px breit (volle Breite, damit der Verlauf nicht abgeschnitten wird), reicht nach links */
    .seite-rot .container-sidebar-right {
        width: 510px;
        margin-left: calc(100% - 510px);
    }
    /* Text liegt über dem Verlauf des Fotos und bleibt schmal */
    .seite-rot .container-component {
        position: relative;
        z-index: 1;
    }
    .seite-rot .com-content-article {
        max-width: 450px;
    }
}

/* Handy und Tablet: erst der Name, dann das Foto, dann der Text */
@media (max-width: 991.98px) {
    .seite-rot.has-sidebar-right .site-grid {
        grid-template-areas:
            ". banner banner banner banner ."
            ". top-a top-a top-a top-a ."
            ". top-b top-b top-b top-b ."
            ". ptitle ptitle ptitle ptitle ."
            ". side-r side-r side-r side-r ."
            ". comp comp comp comp ."
            ". side-l side-l side-l side-l ."
            ". bot-a bot-a bot-a bot-a ."
            ". bot-b bot-b bot-b bot-b .";
    }
    .seite-rot.has-sidebar-right .container-component,
    .seite-rot.has-sidebar-right main,
    .seite-rot.has-sidebar-right .com-content-article {
        display: contents;
    }
    .seite-rot.has-sidebar-right .page-header {
        grid-area: ptitle;
    }
    .seite-rot.has-sidebar-right .com-content-article__body {
        grid-area: comp;
    }
}

/* TEAM-SEITE: Gruppenfoto mit Namens-Links (Seitenklasse: seite-rot seite-team; Beitrag mit .team-foto und .team-kopf) */
.seite-team .com-content-article { max-width: none; position: relative; }
.seite-team .team-foto { position: relative; width: 650px; max-width: 100%; margin: 0 0 0 auto; }
.seite-team .team-foto img { display: block; width: 100%; height: auto; }
.seite-team .team-foto a { position: absolute; padding: 6px 10px; border: 1px solid #ffffff !important; font-size: 11px; line-height: 1; text-transform: uppercase; color: #ffffff !important; text-decoration: none; transition: 0.3s; }
.seite-team .team-foto a:hover { background-color: #ffffff; color: var(--cassiopeia-color-primary) !important; }
.seite-team .page-header h1 { font-size: 20px; line-height: 1.2; text-transform: uppercase; margin: 20px 0 15px; }
.seite-team .team-kopf { position: absolute; left: 0; top: 60px; width: 300px; z-index: 2; }
.seite-team .team-kopf h1 { font-size: 30px; line-height: 39px; text-transform: uppercase; margin-top: 0; }
.seite-team .team-namen { margin-top: 25px; }
@media (max-width: 991.98px) {
    .seite-team .com-content-article__body { display: flex; flex-direction: column; }
    .seite-team .team-kopf { display: contents; }
    .seite-team .team-kopf h1 { order: 1; }
    .seite-team .team-foto { order: 2; width: 100%; margin: 10px 0 20px; }
    .seite-team .team-text { order: 3; }
    .seite-team .team-namen { order: 4; margin-top: 20px; }
    .seite-team .team-foto a { font-size: 9px; padding: 4px 6px; }
}

/* LINKS AUF ROTEN SEITEN: bei Hover Hellblau (wie auf den weißen Seiten) */
.seite-rot main a:hover, .seite-rot main a:focus, .seite-rot main a:active { color: var(--cassiopeia-color-secondary) !important; }

/* PFEIL "ZURÜCK ZUM TEAMBILD" wie bei den Galerie-Tools (Menü-Link-CSS-Klasse: team-zurueck, Link-Titelattribut: Zurück zum Teambild) */
.container-sidebar-left .team-zurueck { display: block; margin-top: 10px; font-size: 0; line-height: 1; text-decoration: none; opacity: 0.5; transition: opacity 0.3s ease-in-out; }
.container-sidebar-left .team-zurueck::before { content: "\2039"; display: block; font: 700 80px/1 Arial, sans-serif; color: #ffffff; }
.container-sidebar-left .team-zurueck:hover { opacity: 1; }

/* Team-Seite: Annette-Link auf dunkles Shirt, Einfliegen, roter Bereich bis zum unteren Bildschirmrand */
.team-foto a[href$="annette-burghardt"] { left: 62.5% !important; top: 65.5% !important; }
.team-foto a[href$="achim-huwe"] { left: 16.5% !important; }
.seite-team .page-header h1.ri-vor.ri-sichtbar, .team-kopf h1.ri-vor.ri-sichtbar, .team-text.ri-vor.ri-sichtbar, .team-namen.ri-vor.ri-sichtbar { animation-name: ri-ein-oben; }
.team-text.ri-vor.ri-sichtbar { animation-delay: var(--ri-takt); }
.team-namen.ri-vor.ri-sichtbar { animation-delay: calc(var(--ri-takt) * 2); }
.team-foto.ri-vor.ri-sichtbar { animation-delay: var(--ri-takt); }
@media (min-width: 993px) {
    .seite-team .site-grid { min-height: calc(100vh - 164px); align-content: start; }
}

/* Team-Seite am Handy/Tablet: Foto immer über die volle Bildschirmbreite (wie auf der Startseite), nicht im Textrand */
@media (max-width: 991.98px) {
    body.seite-team { overflow-x: clip; }
    .seite-team .team-foto { width: 100vw; max-width: none; margin: 10px 0 20px calc(50% - 50vw); }
}


/* ==========================================================================
   16. LEISTUNGEN
   ========================================================================== */

/* LEISTUNGEN: Raster mit 7 Bildkästen (Beitrag: .leist-titel, .leist-text, .leist-raster mit .leist-block, versteckte .leist-pop) und Pop-up-Fenster (.ri-pop, baut user.js) */
.leist-titel { margin: 20px 0 10px; font-size: 24px; line-height: 1.1; font-weight: 700; text-transform: uppercase; color: var(--cassiopeia-color-primary); }
.leist-text { margin: 0 0 30px; }
.leist-raster { display: grid; grid-template-columns: repeat(3, 1fr); gap: 38px 30px; }
.leist-block h3 { min-height: 53px; margin: 0 0 10px; font-size: 24px; line-height: 1.1; font-weight: 700; text-transform: uppercase; color: var(--cassiopeia-color-primary); }
.leist-box { position: relative; display: block; aspect-ratio: 1 / 1; overflow: hidden; border: 0 !important; cursor: pointer; }
.leist-box img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity 0.4s ease, transform 0.8s ease; }
.leist-box .hinten { opacity: 0; }
.leist-box:hover .hinten, .leist-box:focus .hinten { opacity: 1; }
.leist-box:hover img { transform: scale(1.03); }
.leist-box::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; box-shadow: inset 0 0 45px rgba(255, 255, 255, 0.45); opacity: 0; transition: opacity 0.6s ease; pointer-events: none; }
.leist-box:hover::after { opacity: 1; }
.leist-pop { display: none; }
.leist-titel.ri-vor.ri-sichtbar, .leist-text.ri-vor.ri-sichtbar { animation-name: ri-ein-oben; }
.leist-text.ri-vor.ri-sichtbar { animation-delay: var(--ri-takt); }
.leist-block.ri-vor.ri-sichtbar:nth-child(3n + 2) { animation-delay: var(--ri-takt); }
.leist-block.ri-vor.ri-sichtbar:nth-child(3n + 3) { animation-delay: calc(var(--ri-takt) * 2); }
@media (max-width: 991.98px) {
    .leist-raster { grid-template-columns: repeat(2, 1fr); }
    .leist-block.ri-vor.ri-sichtbar:nth-child(n) { animation-delay: 0s; }
}
@media (max-width: 575.98px) {
    .leist-raster { grid-template-columns: 1fr; }
    .leist-block h3 { min-height: 0; }
}
/* Pop-up-Fenster */
.ri-pop { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 1000000; display: flex; align-items: center; justify-content: center; padding: 20px; background-color: rgba(0, 0, 0, 0.6); opacity: 0; transition: opacity 0.3s ease; overflow-y: auto; }
.ri-pop.ri-pop-auf { opacity: 1; }
.ri-pop-fenster { position: relative; box-sizing: border-box; width: 760px; max-width: 100%; max-height: 100%; overflow-y: auto; padding: 20px; background-color: #ffffff; color: #333333; box-shadow: 0 0 30px rgba(0, 0, 0, 0.5); }
.ri-pop-inhalt { overflow: hidden; }
.ri-pop-inhalt img { float: left; width: 300px; max-width: 100%; height: auto; margin: 0 20px 10px 0; }
.ri-pop-inhalt h3 { margin: 10px 0 20px; font-size: 24px; line-height: 1.1; font-weight: 700; text-transform: uppercase; color: var(--cassiopeia-color-primary); }
.ri-pop-zu { position: absolute; top: 4px; right: 8px; padding: 0 6px; border: 0; background: none; font-size: 28px; line-height: 1; color: var(--cassiopeia-color-primary); cursor: pointer; transition: color 0.2s ease; }
.ri-pop-zu:hover { color: var(--cassiopeia-color-secondary); }
.ri-pop-offen { overflow: hidden; }
@media (max-width: 575.98px) {
    .ri-pop-inhalt img { float: none; display: block; width: 100%; margin: 0 0 10px; }
}


/* ==========================================================================
   17. BEITRÄGE, BROTKRUMEN, BEITRAGSNAVIGATION
   ========================================================================== */

/* Beitragsnavigation Zurück / Weiter (dezent wie auf der alten Seite) */
main .pagenavigation { margin: 40px 0 20px; text-align: center; }
main .pagenavigation .pagination { display: inline-flex; border: 1px solid #e6e6e6; }
main .pagenavigation a.btn { display: block; min-width: 100px; padding: 15px 28px; border: 0 !important; border-radius: 0; background-color: #fafafa; color: var(--cassiopeia-color-primary) !important; font-size: 14px; line-height: 20px; box-shadow: none; }
main .pagenavigation a.btn + a.btn { border-left: 1px solid #e6e6e6 !important; }
main .pagenavigation a.btn [class^="icon-"] { display: none; }
main .pagenavigation a.btn:hover, main .pagenavigation a.btn:focus { background-color: rgba(196, 121, 121, 0.9); color: #fff !important; }

/* Brotkrumen und Titel der Auflistungen wie auf der alten Seite */
.mod-breadcrumbs.breadcrumb { --bs-breadcrumb-divider-color: #ccc; padding: 0 !important; margin: 0 0 20px; background: none; font-size: 14px; }
.mod-breadcrumbs .icon-location::before { content: "\f015"; color: #333; }
.mod-breadcrumbs a { color: var(--cassiopeia-color-primary); text-decoration: none; }
.mod-breadcrumbs a:hover, .mod-breadcrumbs a:focus { color: var(--cassiopeia-color-secondary); text-decoration: none; }
.mod-breadcrumbs .active, .mod-breadcrumbs .breadcrumb-item.active { color: #777; }
.com-content-category h1, .com-content-category-blog h1 { font-size: 30px; line-height: 1.1; color: var(--cassiopeia-color-primary); }

/* Beitragsseiten wie alte Seite: Titel 24px rot, Text 25px Zeilenhöhe, Untertitel 20px */
body:not(.seite-rot) .com-content-article .page-header h1 { font-size: 24px; line-height: 1.1; color: var(--cassiopeia-color-primary); }
body:not(.seite-rot) .com-content-article__body:not(:has(.leist-raster, .flip-reihe, .team-foto)) { line-height: 25px; color: #333; }
.com-content-article__body .subrotkleiner { font-size: 20px !important; }
.com-content-article__body .subrot { font-size: 24px !important; }


/* ==========================================================================
   18. KONTAKTSEITE
   ========================================================================== */

/* Kontaktseite wie alte Seite */
.com-contact { color: #333; line-height: 20px; }
.com-contact .page-header { margin-bottom: 20px; }
.com-contact .page-header h1 { font-size: 30px; line-height: 1.1; color: var(--cassiopeia-color-primary); }
.com-contact .contact-name { text-transform: none; }
.com-contact h2, .com-contact dt { display: none; }
.com-contact dl, .com-contact dd { margin: 0; }
#contact-form { background-color: #f5f5f5; border: 1px solid #e3e3e3; border-radius: 4px; padding: 19px; margin: 0 0 20px; color: #333; }
#contact-form legend { font-size: 21px; line-height: 36px; margin: 0 0 20px; }
#contact-form .control-group { display: flex; align-items: flex-start; margin: 0 0 20px; }
#contact-form .control-label { flex: 0 0 180px; padding-top: 5px; }
#contact-form .controls { flex: 1 1 auto; min-width: 0; }
#contact-form .field-spacer .control-label { flex-basis: auto; }
#contact-form input[type="text"], #contact-form input[type="email"], #contact-form textarea { width: 100%; max-width: 420px; height: 34px; padding: 6px 12px; font-size: 14px; color: #555; border: 1px solid #ccc; border-radius: 4px; background-color: #fff; }
#contact-form textarea { height: 140px; }
#contact-form .btn { padding: 8px 28px; font-size: 14px; color: #fff; background-color: rgba(196, 121, 121, 0.9); border: 1px solid #c17272; border-radius: 0; }
#contact-form .btn:hover, #contact-form .btn:focus { background-color: var(--cassiopeia-color-primary); border-color: var(--cassiopeia-color-primary); }
@media (max-width: 575.98px) {
    #contact-form .control-group { display: block; }
    #contact-form .control-label { padding: 0 0 5px; }
}

/* Links in Modulen (Position main-bottom/main-top) wie im Inhalt; Kontakt-Reiter wie auf der alten Seite */
.main-top a:not(.btn), .main-top a:not(.btn):visited, .main-bottom a:not(.btn), .main-bottom a:not(.btn):visited { color: var(--cassiopeia-color-primary); text-decoration: none; }
.main-top a:not(.btn):hover, .main-top a:not(.btn):focus, .main-bottom a:not(.btn):hover, .main-bottom a:not(.btn):focus { color: var(--cassiopeia-color-secondary); }
.com-contact joomla-tab[orientation] > div[role="tablist"] { background: none; box-shadow: none; border: 0; }
.com-contact joomla-tab[orientation] [role="tab"] { position: relative; margin: 0 2px -1px 0; padding: 10px 15px; color: var(--cassiopeia-color-primary); background: #fff; border: 1px solid #ddd; border-radius: 4px 4px 0 0; box-shadow: none; }
.com-contact joomla-tab[orientation] [role="tab"]:hover, .com-contact joomla-tab[orientation] [role="tab"]:focus { color: var(--cassiopeia-color-secondary); }
.com-contact joomla-tab[orientation] [role="tab"][aria-selected="true"] { color: #fff; background: rgba(196, 121, 121, 0.9); border-color: #c17272; z-index: 1; }
.com-contact joomla-tab[orientation] [role="tab"]::after { display: none; }
.com-contact joomla-tab[orientation] > joomla-tab-element { background: #fff; border: 1px solid #ddd; border-radius: 0 4px 4px 4px; box-shadow: none; padding: 15px; }


/* ==========================================================================
   19. REFERENZEN
   Menü-Seitenklasse seite-referenzen (Kategorie-Blog); Auflistung als Liste: zusätzlich seite-liste
   ========================================================================== */

/* Referenzen (Menü-Seitenklasse seite-referenzen, Kategorie-Blog): Kachelraster, Spaltenzahl nach Breite, 1 px Abstand; Hover: Bild verschwommen + rot, Titel fährt von unten ein */
.seite-referenzen .blog-items { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 1px; margin: 0; }
.seite-referenzen .blog-item { position: relative; overflow: hidden; aspect-ratio: 4 / 3; margin: 0; padding: 0; background: #eee; }
.seite-referenzen .blog-item .item-image { margin: 0; width: 100%; height: 100%; float: none; }
.seite-referenzen .blog-item .item-image a, .seite-referenzen .blog-item .item-image img { display: block; width: 100%; height: 100%; }
.seite-referenzen .blog-item .item-image img { object-fit: cover; transition: filter 0.4s ease, transform 0.4s ease; }
.seite-referenzen .blog-item::after { content: ""; position: absolute; inset: 0; background: rgba(201, 13, 13, 0.55); opacity: 0; transition: opacity 0.4s ease; pointer-events: none; }
.seite-referenzen .blog-item .item-content { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; justify-content: flex-end; padding: 0 15px 15px; font-size: 0; line-height: 0; color: transparent; }
.seite-referenzen .blog-item .item-content > :not(.page-header) { display: none; }
.seite-referenzen .blog-item .page-header { line-height: 1.25; margin: 0; padding: 0; border: 0; margin-bottom: -40px; opacity: 0; transition: margin-bottom 0.4s ease, opacity 0.4s ease; }
.seite-referenzen .blog-item .page-header h2 { margin: 0; font-size: 18px; line-height: 1.25; text-transform: none; color: #ffffff; }
.seite-referenzen .blog-item .page-header a, .seite-referenzen .blog-item .page-header a:link, .seite-referenzen .blog-item .page-header a:visited, .seite-referenzen .blog-item .page-header a:hover { color: #ffffff !important; border-bottom: 0 !important; text-decoration: none !important; }
.seite-referenzen .blog-item .page-header a::after { content: ""; position: absolute; inset: 0; z-index: 3; }
.seite-referenzen .blog-item:hover::after, .seite-referenzen .blog-item:focus-within::after { opacity: 1; }
.seite-referenzen .blog-item:hover .item-image img, .seite-referenzen .blog-item:focus-within .item-image img { filter: blur(3px); transform: scale(1.04); }
.seite-referenzen .blog-item:hover .page-header, .seite-referenzen .blog-item:focus-within .page-header { margin-bottom: 0; opacity: 1; }
.seite-referenzen .com-content-category-blog__counter { display: none; }
@media (max-width: 575.98px) { .seite-referenzen .blog-items { grid-template-columns: repeat(2, 1fr); } .seite-referenzen .blog-item .page-header h2 { font-size: 14px; } }
@media (hover: none) { .seite-referenzen .blog-item::after { opacity: 1; background: linear-gradient(to top, rgba(201, 13, 13, 0.8), rgba(201, 13, 13, 0) 55%); } .seite-referenzen .blog-item .page-header { margin-bottom: 0; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .seite-referenzen .blog-item *, .seite-referenzen .blog-item::after { transition: none !important; } }

/* Mehr laden (Referenzen) */
body.seite-referenzen .ri-mehr { display: block; margin: 25px auto; padding: 5px 30px 0 30px; border: 1px solid var(--cassiopeia-color-primary); background: #ffffff; font-size: 14px; line-height: 36px; color: var(--cassiopeia-color-primary); cursor: pointer; transition: 0.3s; }
body.seite-referenzen .ri-mehr:hover, body.seite-referenzen .ri-mehr:focus { background: var(--cassiopeia-color-primary); color: #ffffff; }
body.seite-referenzen .ri-mehr[disabled] { opacity: 0.5; cursor: default; }

/* Link "Als Liste anzeigen" neben Breadcrumbs */
nav[aria-label="Breadcrumbs"] a.ri-liste { color: var(--cassiopeia-color-primary) !important; text-decoration: none; position: absolute; right: 0; top: 0; font-size: 13px; line-height: 21px; }
nav[aria-label="Breadcrumbs"] a.ri-liste:hover, nav[aria-label="Breadcrumbs"] a.ri-liste:focus { color: var(--cassiopeia-color-secondary) !important; }

body.seite-referenzen .com-content-category-blog .category-desc:empty { display: none; }

/* Referenz-Einzelseite: Titel dicht unter den Breadcrumbs */
body.seite-referenzen .com-content-article .page-header h1 { margin-top: 0; }

/* Auflistung als Liste (Seitenklasse: seite-referenzen seite-liste, Menüpunkt = Kategorie-Blog) */
body.seite-referenzen.seite-liste .blog-items { display: block; }
body.seite-referenzen.seite-liste .blog-item { aspect-ratio: auto; overflow: visible; background: transparent; border-bottom: 1px solid #dddddd; }
body.seite-referenzen.seite-liste .blog-item::after { display: none; }
body.seite-referenzen.seite-liste .blog-item .item-image { display: none; }
body.seite-referenzen.seite-liste .blog-item .item-content { position: static; display: block; padding: 0; }
body.seite-referenzen.seite-liste .blog-item .page-header { margin: 0; padding: 10px 0; opacity: 1; }
body.seite-referenzen.seite-liste .blog-item .page-header h2 { font-size: 16px; color: var(--cassiopeia-color-primary); transition: color 0.2s ease; }
body.seite-referenzen.seite-liste .blog-item .page-header a, body.seite-referenzen.seite-liste .blog-item .page-header a:link, body.seite-referenzen.seite-liste .blog-item .page-header a:visited { color: var(--cassiopeia-color-primary) !important; }
body.seite-referenzen.seite-liste .blog-item:hover .page-header a, body.seite-referenzen.seite-liste .blog-item:focus-within .page-header a { color: var(--cassiopeia-color-secondary) !important; }


/* ==========================================================================
   20. IMPRESSUM UND DATENSCHUTZ
   ========================================================================== */

/* Impressum (177) und Datenschutz (199): Zwischenüberschriften klein und rot */
body.itemid-177 .com-content-article__body h3, body.itemid-199 .com-content-article__body h2 { font-weight: normal; text-transform: none; font-size: 16px; line-height: 1.3; color: var(--cassiopeia-color-primary); margin: 25px 0 8px; }


/* ==========================================================================
   21. SUCHVORSCHLÄGE IM MENÜ-OVERLAY
   Liste steht über dem Suchfeld, weiß mit dunkler Schrift, Treffer rot unterlegt.
   Das Suchfeld sitzt 4,5rem über dem Formularrand, deshalb bottom: 4,5rem + Feldhöhe + Abstand.
   ========================================================================== */
.container-header form.mod-finder .awesomplete { display: block; }
.container-header form.mod-finder .awesomplete > ul { top: auto; bottom: calc(4.5rem + 54px); margin: 0; background: #ffffff; border: 0; border-radius: 0; box-shadow: 0 0 12px rgba(0, 0, 0, 0.35); text-shadow: none; text-align: left; }
.container-header form.mod-finder .awesomplete > ul::before { display: none; }
.container-header form.mod-finder .awesomplete > ul > li { padding: 8px 12px; font-size: 15px !important; font-weight: 400 !important; letter-spacing: 0 !important; line-height: 1.3; color: #212529 !important; }
.container-header form.mod-finder .awesomplete > ul > li mark { background: var(--cassiopeia-color-primary); color: #ffffff !important; padding: 0 2px; }
.container-header form.mod-finder .awesomplete > ul > li:hover, .container-header form.mod-finder .awesomplete > ul > li[aria-selected="true"] { background: #f0f0f0; }
.container-header form.mod-finder .awesomplete > ul > li:hover mark, .container-header form.mod-finder .awesomplete > ul > li[aria-selected="true"] mark { background: var(--cassiopeia-color-primary); color: #ffffff !important; }