@media (min-width: 992px) {
    /* 1. Wir aktivieren das native Joomla-Grid für den Header */
    .container-header {
        display: grid !important;
        grid-template-columns: auto 1fr !important; /* Spalte 1 fürs Logo, Spalte 2 fürs Menü */
        align-items: center !important;
    }

    /* 2. LOGO: Wir zwingen es in die ERSTE Spalte (ganz nach links) */
    .container-header .grid-child:has(.navbar-brand),
    .container-header .brand {
        grid-column: 1 !important;
        grid-row: 1 !important;
    }

    /* 3. MENÜ: Wir zwingen es in die ZWEITE Spalte (nach rechts) */
    .container-header .grid-child:has(.mod-menu),
    .container-header .menu {
        grid-column: 2 !important;
        grid-row: 1 !important;
        justify-self: end !important; /* Schiebt das Menü innerhalb seiner Spalte nach rechts */
    }

    /* 4. MENÜPUNKTE: Horizontal nebeneinander ausrichten */
    .container-header ul.mod-menu,
    .container-header ul.menu,
    .container-header .navbar-nav {
        display: flex !important;
        flex-direction: row !important;
        list-style: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* 5. Abstand zwischen den einzelnen Menü-Links */
    .container-header ul.menu > li,
    .container-header .navbar-nav > li {
        margin-left: 25px !important;
        margin-right: 0 !important;
    }
}

/* Diese Regeln gelten für ALLE Bildschirmgrößen (auch Smartphones) */
.container-header {
    display: grid !important;
    grid-template-columns: auto 1fr !important; /* Logo links, Topbar/Menü rechts daneben */
    align-items: center !important;
    gap: 10px; /* Optional: Kleiner Abstand zwischen Logo und Menü */
}

/* LOGO: Erste Spalte auf allen Geräten */
.container-header .grid-child:has(.navbar-brand),
.container-header .brand {
    grid-column: 1 !important;
    grid-row: 1 !important;
}

/* MENÜ/TOPBAR: Zweite Spalte auf allen Geräten */
.container-header .grid-child:has(.mod-menu),
.container-header .menu,
.container-header .navbar-toggler { /* .navbar-toggler sorgt dafür, dass auch das Hamburger-Icon rechts sitzt */
    grid-column: 2 !important;
    grid-row: 1 !important;
    justify-self: end !important; 
}


/* Entfernt die Unterstreichung des Website-Titels im Header */
.container-header .navbar-brand a,
.container-header .site-title a,
.container-header .brand a {
    text-decoration: none !important;
    box-shadow: none !important; /* Entfernt eventuelle feine Linien unter dem Text */
}

/* Verhindert, dass die Unterstreichung beim Drüberfahren (Hover) wiederkommt */
.container-header .navbar-brand a:hover,
.container-header .site-title a:hover,
.container-header .brand a:hover {
    text-decoration: none !important;
    box-shadow: none !important;
}

/* Stadtrallye */
.container-component {
  border: 0px solid cyan;
  padding: 0 !important;
  margin:0 !important;
  
}
.sr-startseite {
  border: 0px solid green;
}
.sr-einleitung {
  border: 0px solid blue;
}

.rallye-box {
    display: flex;
    align-items: center;
    gap: 3rem;
    max-width: 1200px;
    margin: 3rem auto;
    padding: 2rem;
}

.rallye-image,
.rallye-content {
    flex: 1;
}

.rallye-image img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 14px;
    box-shadow: 0 10px 30px rgba(0,0,0,.15);
}

.rallye-content h3 {
    margin-top: 0;
    color: #2c5e3f;
    font-size: 2rem;
}

.rallye-content ul {
    margin: 1.5rem 0;
    padding-left: 1.2rem;
}

.rallye-content li {
    margin-bottom: .7rem;
    font-size: 1.1rem;
    line-height: 1.5;
}

/* Responsive */
@media (max-width: 768px) {
    .rallye-box {
        flex-direction: column;
        text-align: center;
        gap: 2rem;
    }

    .rallye-content ul {
        display: inline-block;
        text-align: left;
    }
}



.XXXcontainer-header  {
    /* Pfad zum Hintergrundbild festlegen */
    background-image: url("https://myrallye.de/images/stadtrallye/top/top_02.jpg");
    
    /* Bild proportional skalieren und den Container komplett füllen */
    #background-size: cover;
    
    /* Bild im Container zentrieren */
    background-position: left;
    
    /* Wiederholung des Bildes verhindern, falls der Container größer ist */
    background-repeat: no-repeat;
    
    /* Optionale Mindesthöhe, damit das Bild sichtbar ist (z. B. für Banner) */
    #min-height: 100vh; 
}






/* ==========================================================================
   DESKTOP & TABLET: Kacheln nebeneinander mit fester Breite
   ========================================================================== */
ul.inline-menu-images {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: flex-start; 
    align-items: stretch;        
    gap: 20px;                   
    list-style: none;
    padding: 0;
    margin: 0;
}

ul.inline-menu-images li {
    margin: 0;
    padding: 0;
}

ul.inline-menu-images li a {
    display: flex;
    flex-direction: column;      
    align-items: center;
    text-decoration: none;
    font-weight: 500;
    
    width: 250px;                /* Feste Breite auf Desktop */
    box-sizing: border-box;
    
    border: 1px solid #cccccc;  
    border-radius: 8px;          
    padding: 0 0 15px 0;         
    overflow: hidden;            
    background-color: #f9f9f9;  
    transition: all 0.2s ease;  
}

ul.inline-menu-images li a:hover {
    border-color: #007bc4;      
    transform: translateY(-3px); 
    box-shadow: 0 4px 10px rgba(0,0,0,0.1); 
}

ul.inline-menu-images li a img {
    width: 250px;                /* Feste Breite auf Desktop */
    height: 160px;               
    object-fit: cover;           
    margin-bottom: 12px;         
}


/* ==========================================================================
   SMARTPHONE (max. 768px): Volle Artikelbreite (Kein leerer Rand mehr)
   ========================================================================== */
@media (max-width: 768px) {
    ul.inline-menu-images {
        flex-direction: column;
        align-items: stretch;    /* Erzwingt, dass die Kacheln die volle Breite nutzen */
        gap: 20px;               
        padding: 0;              /* Nutzt exakt den Raum, den der Artikel-Text auch hat */
        margin: 0;
    }

    ul.inline-menu-images li {
        width: 100%;
    }

    ul.inline-menu-images li a {
        width: 100%;             /* Kachel dehnt sich auf volle Textbreite aus */
        max-width: none;         /* Hebt die 250px-Grenze auf dem Smartphone auf */
    }

    /* Das Bild passt sich jetzt flexibel der vollen Kachelbreite an */
    ul.inline-menu-images li a img {
        width: 100%;             /* Bild geht von ganz links bis ganz rechts in der Kachel */
        max-width: none;         
        height: 180px;           /* Etwas höher für Smartphones, damit es nicht zu gestreckt wirkt */
        object-fit: cover;       
    }
    
    ul.inline-menu-images li a {
        text-align: center;      /* Zentriert den Menütext unter dem breiten Bild */
    }
}