/* 1. Alle Container-Abstände auf Null */
.header, 
.container-header, 
.container-nav, 
.navbar {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    min-height: 0 !important; /* Entfernt die Standard-Mindesthöhe */
}

/* 2. Banner-Abstände entfernen */
.container-header .navbar-brand {
    padding: 0 !important;
    margin: 0 !important;
    line-height: 1 !important; /* Verhindert Zeilenabstand-Puffer */
}

/* 3. Menü-Abstände entfernen */
.container-header .navbar-nav > li > a {
    padding-top: 0px !important; /* Nur minimaler Klickbereich */
    padding-bottom: 0px !important;
}
.container-header .search { margin: 0 !important; }
/* Optional: Wenn noch mehr Platz gespart werden soll */
.footer .container-inner {
    padding-block: 0 !important;
}

.site-grid {
    max-width: 1340px;
    margin-left: auto;
    margin-right: auto;
}
.flex-item {
  flex: 0 1 auto; /* Verhindert das automatische "Auseinanderziehen" */
  max-width: 100%;
}
@media (max-width: 991.98px) {
    /* 1. Den gesamten Navigations-Container auf volle Breite und Flex setzen */
    .container-header .container-nav {
        display: flex !important;
        justify-content: flex-end !important; /* Schiebt ALLES in diesem Container nach rechts */
        width: 100%;
    }

    /* 2. Den Hamburger-Button explizit rechts positionieren */
    .navbar-toggler {
        margin-left: auto !important; 
        margin-right: 0 !important;
    }

    /* 3. Das Logo/Banner links lassen */
    .navbar-brand {
        margin-right: auto !important;
    }
}




@charset "UTF-8";:root{--cassiopeia-color-primary:#038d94;--cassiopeia-color-link:#224faa;--link-color:#224faa;--link-color-rgb:34,79,170;--cassiopeia-color-hover:#038d94;--link-hover-color:#038d94;--link-hover-color-rgb:66,64,119}
@media only screen and (max-width: 768px) {
    img.no-mobile {
        display: none !important;
    }
}
body, p {
    white-space: normal;
    word-wrap: break-word;
    overflow-wrap: break-word;
}
@media (max-width: 480px) {
    body, 
    p, 
    article, 
    .content {
        white-space: normal;
        word-wrap: break-word;
        overflow-wrap: break-word;
    }
}
@media (max-width: 480px) {
    p {
        text-align: left !important;
        word-break: normal !important;
        white-space: normal !important;
    }
}
/* =======================================
   Joomla 5 – Handy-Optimierung
   - Bilder ausblenden
   - Text sauber umbrechen
   - Blocksatz auf kleinen Bildschirmen deaktivieren
======================================= */

/* Bilder auf Handys ausblenden */
@media (max-width: 768px) {
    img.no-mobile {
        display: none !important;
    }
}

/* Bilder floaten auf Handy aufheben und zentrieren */
@media (max-width: 768px) {
    p img {
        float: none !important;              /* float rechts/links aufheben */
        display: block !important;           /* Block anzeigen */
        margin: 0 auto 10px auto !important; /* zentrieren + Abstand unten */
    }
}

/* Text auf Handys sauber umbrechen, Blocksatz deaktivieren */
@media (max-width: 768px) {
    p, article, .content {
        text-align: left !important;        /* linksbündig, kein Blocksatz */
        white-space: normal !important;     /* überflüssige Leerzeichen ignorieren */
        word-break: normal !important;      /* normale Wortumbrüche */
        overflow-wrap: break-word !important; /* lange Wörter umbrechen */
    }
}
/* Footer Höhe reduzieren (Padding oben/unten) */
.footer {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
}
/* Den äußeren Bereich auf volle Breite setzen */
.container-banner {
    padding-left: 0 !important;
    margin-left: 0 !important;
}

/* Den inneren Inhalts-Container nach links zwingen */
.container-banner .grid-child {
    margin-left: 0 !important;
    padding-left: 0 !important;
}

/* Falls das Modul selbst noch Abstände hat */
.banneritem {
    margin-left: 0 !important;
    display: block;
}
/* 1. Standard-Logo (Desktop) bleibt wie es ist */

/* 2. Nur für mobile Geräte (Handy/Tablet) */
@media (max-width: 991.98px) {
    .container-header .navbar-brand img {
        /* Versteckt das originale Logo-Bild */
        display: none !important;
    }

    .container-header .navbar-brand {
        /* Fügt das neue mobile Bild als Hintergrund ein */
        background-image: url('/images/handylogo3hell.png') !important;
        background-size: contain;
        background-repeat: no-repeat;
        display: inline-block;
        
        /* WICHTIG: Hier die Breite und Höhe deines mobilen Bildes angeben */
        width:  260px; 
        height:  70px;
    }
}
.bild-abgehoben {
  box-shadow: 0 0px 10px rgba(0,0,0,0.3); /* Schatten nach unten */
  border-radius: 8px; /* Leicht abgerundete Ecken passen gut zum Schatten */
  transition: all 0.3s ease; /* Macht Änderungen (z.B. beim Hover) weich */
}