/* --- GMV Kirchberg - Dark Design (Rot/Grün/Schwarz) --- */


/* XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX */


/* 1. GRUNDGERÜST & HINTERGRUND */
body.site {
    background-color: #1a1a1a; /* Dunkelgrauer Hintergrund allgemein */
    color: #eeeeee; /* Standard-Text fast weiß */
}

/* Link-Farben allgemein */
a {
    color: #4caf50; /* Links in Grün */
    text-decoration: none;
}
a:hover {
    color: #ff3333; /* Beim Drüberfahren Rot */
}

/* 2. HEADER & FOOTER (Schwarz) */
.container-header, 
.container-footer {
    background-image: none !important;
    background-color: #000000 !important; /* Tiefschwarz */
    border-bottom: 2px solid #b71c1c; /* Rote Zierlinie unter dem Header */
    color: #ffffff;
}

/* 3. MENÜ (Weiß, Aktiv = Rot) */
/* Normale Menüpunkte */
.container-header .mod-menu > li > a {
    color: #ffffff !important;
    font-weight: bold;
    text-transform: uppercase; /* Optional: Großbuchstaben wirken oft aufgeräumter */
}

/* Aktiver Menüpunkt & Hover */
.container-header .mod-menu > li.active > a,
.container-header .mod-menu > li > a:hover {
    color: #ff3333 !important; /* Knalliges Rot */
    background: transparent; /* Kein Hintergrundbalken */
}

/* 4. INHALTS-BOXEN & TEXTE (Schwarz mit grüner Schrift) */

/* A) Die Boxen selbst (Artikel, einzelne Blog-Einträge) */
/* Definiert den schwarzen Hintergrund und Rahmen */
.card, 
.com-content-article, 
.item-page, 
.blog-item,      /* Der einzelne Beitrag im Blog */
.category-desc { /* Die Kategorie-Beschreibung */
    background-color: #000000;
    border: 1px solid #333333;
    border-radius: 5px;
    padding: 20px;
    margin-bottom: 20px; /* Abstand nach unten */
    box-shadow: 0 4px 8px rgba(0,0,0,0.5);
}

/* B) Der Container drumherum (.blog) muss unsichtbar sein */
/* WICHTIG für Blog-Ansicht: Macht den "Sack" durchsichtig */
.blog {
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
}

/* C) Störende Trennlinien entfernen */
.blog-items, .blog-item {
    border-bottom: none !important;
    border-top: none !important;
}

/* D) TEXTFARBEN (Deine Farben retten) */
/* Fließtext in Hellgrün */
.card-body, .com-content-article, .blog-item {
    color: #66bb6a; 
}


/* XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX */


/* --- CLEAN GRID: Videothek & Co (Basis-Layout) --- */

/* 1. Das Raster definieren (.blog ist der Hauptcontainer) */
.videothek-grid .blog {
    display: grid;
    /* Automatische Spalten: Mindestens 300px breit, füllen den Rest */
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 25px; /* Etwas mehr Luft zwischen den Boxen */
    margin-top: 20px;
}

/* 2. Joomla-Zwischencontainer auflösen */
/* Das behalten wir bei, damit Leading/Intro-Artikel sich schön mischen */
.videothek-grid .items-leading,
.videothek-grid .items-row,
.videothek-grid .blog-items {
    display: contents;
}

/* 3. Die Artikel-Boxen stylen */
.videothek-grid .blog-item,
.videothek-grid .item {
    background-color: #000000;
    border: 1px solid #333333;
    border-radius: 5px;
    padding: 20px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.5);
    
    /* Wichtig: Volle Breite der Raster-Zelle nutzen */
    width: 100%;
    margin: 0;
    
    /* Inhalt vertikal ausrichten */
    display: flex;
    flex-direction: column;
    height: 100%;
    box-sizing: border-box;
}

/* 4. Textfarbe im Beitrag */
.videothek-grid .item-content,
.videothek-grid .card-body {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

/* 5. Button nach unten drücken */
.videothek-grid .readmore {
    margin-top: auto;
    padding-top: 15px;
    text-align: right;
}

/* 6. Bilder bändigen */
.videothek-grid img {
    max-width: 100%;
    height: auto;
    display: block;
}


/* XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX */


/* --- OPTIK & TEXTE --- */

/* 1. Das leuchtende Grün für den Text */
.videothek-grid .item-content,
.videothek-grid .card-body {
    color: #00ff00 !important; /* Neon-Grün */
}

/* 2. Button "Weiterlesen" -> "Ansehen ?" (Die sichere Methode) */
.videothek-grid .readmore a {
    background-color: #b71c1c;      /* Hintergrund Rot */
    color: transparent !important;  /* Macht "Weiterlesen" unsichtbar */
    font-size: 0 !important;        /* Schrumpft den alten Text auf 0 Pixel */
    display: inline-block;          /* Damit der Button eine Form hat */
    padding: 8px 20px;              /* Größe des Buttons */
    border-radius: 4px;             /* Runde Ecken */
    text-decoration: none;
    border: none;                   /* Entfernt evtl. Ränder */
}

/* Der neue Text */
.videothek-grid .readmore a::after {
    content: "Ansehen ?";           /* Dein Wunschtext */
    color: #ffffff;                 /* Schriftfarbe Weiß */
    font-size: 1rem !important;     /* Schriftgröße wieder normal (ca 16px) */
    font-weight: bold;
    display: block;
    line-height: 1.2;               /* Zeilenhöhe korrigieren */
}

/* Hover-Effekt (Maus drüber) */
.videothek-grid .readmore a:hover {
    background-color: #00ff00;      /* Hintergrund wird Grün */
}

/* Hover-Textfarbe (damit man es auf Grün lesen kann) */
.videothek-grid .readmore a:hover::after {
    color: #000000;                 /* Text wird Schwarz (besser lesbar auf Neon-Grün) */
}


/* XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX */


/* Überschriften (H1, H2...) in Rot */
h1, h2, h3, h4, h5 {
    color: #d32f2f !important; 
    font-weight: bold;
}

/* 5. BUTTONS (Rot/Grün) */
/* Haupt-Buttons (Rot mit weißem Text) */
.btn-primary, .btn-danger {
    background-color: #b71c1c;
    border-color: #b71c1c;
    color: #ffffff;
}

/* Hover-Effekt für Buttons (Grün werden) */
.btn-primary:hover, .btn-danger:hover {
    background-color: #2e7d32; /* Dunkles Grün */
    border-color: #2e7d32;
}

/* "Weiterlesen"-Buttons oder Sekundär-Buttons */
.readmore a {
    background-color: #2e7d32; /* Grün */
    color: white;
    padding: 5px 10px;
    border-radius: 3px;
}

/* --- MetisMenu Pfeile entfernen (Button ausblenden) --- */
.container-header .mod-menu .mm-toggler {
    display: none !important; /* Den Button komplett entfernen */
}

/* --- Bild im Menü zentrieren --- */
/* Da der Button weg ist, gehört der Platz jetzt allein dem Bild */
.container-header .mod-menu > li > a {
    display: flex !important;
    justify-content: center; /* Horizontal mittig */
    align-items: center;     /* Vertikal mittig */
    width: 100%;             /* Nutzt den ganzen Platz */
    padding: 5px;            /* Etwas Luft */
}

/* Bild-Größe begrenzen */
.container-header .mod-menu > li > a > img {
    max-height: 128px;        /* Höhe anpassen wie gewünscht */
    width: auto;
    object-fit: contain;
    margin: 0 auto;          /* Zentriert das Bild sicherheitshalber */
}


/* XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX */


/* =========================================
   UNIVERSAL BUTTON "INTERESSE"
   ========================================= */

.btn-interest {
    display: inline-block;       /* Wichtig, damit er Breite/Höhe hat */
    background-color: #b71c1c;   /* Dein Rot */
    color: #ffffff !important;   /* Weiße Schrift */
    padding: 10px 25px;          /* Innenabstand (macht den Button dick) */
    border-radius: 5px;          /* Abgerundete Ecken */
    text-decoration: none;       /* Kein Unterstrich */
    font-weight: bold;
    border: 1px solid #b71c1c;   /* Rahmen in gleicher Farbe */
    transition: all 0.3s ease;   /* Weicher Übergang beim Hover */
    
    /* Optional: Schatten für 3D-Effekt */
    box-shadow: 0 4px 6px rgba(0,0,0,0.3);
}

/* Hover-Effekt (Maus drüber) */
.btn-interest:hover {
    background-color: #00ff00;   /* Dein Grün */
    color: #000000 !important;   /* Schwarze Schrift */
    border-color: #00ff00;
    transform: translateY(-2px); /* Button hüpft minimal hoch */
    box-shadow: 0 6px 8px rgba(0,0,0,0.5);
}


/* XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX */


/* --- Ignite Gallery an Dark Mode anpassen --- */

/* 1. Hintergrund der Galerie-Container transparent machen */
.ig-gallery-wrap, 
.ig-main-wrap,
.ig-thumbs-container {
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* 2. Textfarben in der Galerie (Beschreibungen) */
.ig-description, .ig-filename {
    color: #eeeeee !important; /* Helle Schrift */
}

/* 3. Thumbnails (Kleine Vorschaubilder) */
.ig-thumb-image {
    border: 1px solid #333333 !important; /* Dunkler Rand statt Weiß */
    background-color: #000000 !important;
}

/* Hover-Effekt für Thumbs */
.ig-thumb-image:hover {
    border-color: #4caf50 !important; /* Grün beim Drüberfahren */
    opacity: 1 !important;
}

/* 4. Pagination (Seitenzahlen unten) */
.ig-pagination a {
    background-color: #333 !important;
    color: #fff !important;
}
.ig-pagination a.ig-active-page {
    background-color: #b71c1c !important; /* Rot für aktive Seite */
}


/* XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX */


/* --- HEADER ANPASSUNGEN (Kompakt & Mittig) --- */

/* 1. Den schwarzen Balken straffen */
.container-header {
    padding-top: 0 !important;      /* Kein Abstand oben */
    padding-bottom: 0 !important;   /* Kein Abstand unten */
    min-height: auto !important;    /* Höhe passt sich dem Inhalt an */
}

/* 2. Logo (und alles im Header) zentrieren */
.container-header .navbar-brand {
    display: flex;
    justify-content: center;        /* Mittig ausrichten */
    align-items: center;
    width: 100%;                    /* Nimmt die ganze Breite */
    margin-right: 0 !important;
}

/* Logo-Bild Eigenschaften */
.container-header .navbar-brand img {
    height: auto;
    max-height: 100px; /* Optional: Falls du das Logo etwas kleiner willst, hier ändern */
    width: auto;
}

/* 3. Menü zentrieren (zur Sicherheit) */
.container-header .mod-menu {
    justify-content: center;
    margin-bottom: 0;
}

/* XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX */


/* --- LOGO-STEUERUNG (Nur Startseite) --- */

/* 1. Auf allen Unterseiten (alles außer ID 101) das Logo ausblenden */
body:not(.itemid-101) .container-header .navbar-brand {
    display: none !important;
}

/* 2. Optional: Den Balken auf Unterseiten noch schlanker machen */
/* Da nur noch das Menü da ist, können wir den Platz minimieren */
body:not(.itemid-101) .container-header {
    min-height: 0 !important;
}


/* XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX */


/* --- SONDERREGEL: Führender Artikel über volle Breite --- */
.videothek-grid .items-leading .blog-item {
    grid-column: 1 / -1; /* Nimm von der ersten bis zur letzten Rasterlinie alles */
    width: 100%;
    margin-bottom: 25px; /* Etwas Abstand zu den kleinen Kacheln darunter */
}

/* Optional: Damit das Intro-Bild im führenden Artikel nicht riesig wird, falls gewünscht */
.videothek-grid .items-leading .blog-item img {
    max-height: 400px; /* Begrenzung der Höhe, damit man nicht ewig scrollen muss */
    width: auto;
    object-fit: cover;
    margin: 0 auto;
}


/* XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX */


/* =========================================
   SPEZIAL-ANPASSUNGEN FÜR FOTOTHEK & LINKS
   ========================================= */

/* 1. LAYOUT: Dehnen statt Auffüllen (Nur für Fotothek!) */
/* Wirkt nur, wenn die Klasse "fotothek-stretch" gesetzt ist */
.fotothek-stretch .blog {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) !important;
}

/* =========================================
   FOTOTHEK: Manuellen Link zum Button machen
   ========================================= */

/* Wir zielen auf den Link (a) im letzten Absatz (p:last-child) der Kachel */
.videothek-grid .item-content p:last-child a {
    display: table;             /* Nötig, damit margin-left funktioniert */
    margin-left: auto;          /* Schiebt den Button nach rechts */
    margin-top: 15px;           /* Abstand zum Text darüber */
    
    background-color: #b71c1c;  /* Rot */
    color: #ffffff !important;  /* Weiße Schrift */
    font-weight: bold;
    font-size: 1rem;
    padding: 8px 20px;
    border-radius: 4px;
    text-decoration: none;
    border: none;
    transition: all 0.3s ease;
}

/* Hover Effekt (Grün) */
.videothek-grid .item-content p:last-child a:hover {
    background-color: #00ff00;
    color: #000000 !important;
}


/* XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX */


/* =========================================
   FOTOTHEK: Führende Artikel (Highlights)
   ========================================= */

/* 1. Führende Artikel über die volle Breite strecken */
/* Wirkt auf alle Artikel im Bereich "items-leading" */
.videothek-grid .items-leading .blog-item {
    grid-column: 1 / -1 !important; /* Von ganz links bis ganz rechts */
    width: 100%;
    margin-bottom: 40px; /* Mehr Abstand zum nächsten Block */
}

/* 2. Bilder in führenden Artikeln groß machen */
.videothek-grid .items-leading .blog-item img {
    width: 80%;       /* Volle Breite der Box nutzen wäre 100% */
    height: auto;      /* Höhe automatisch anpassen */
    max-height: 600px; /* Optional: Damit es auf riesigen Bildschirmen nicht zu hoch wird */
    object-fit: cover; /* Schneidet das Bild sauber zu, falls nötig */
}

/* =========================================
   KORREKTUR: Verlinkte Bilder (Sicherheits-Regel)
   ========================================= */

/* Damit das verlinkte Bild NICHT wie ein Button aussieht UND groß bleibt */
.videothek-grid .item-content a:has(img) {
    display: block !important;    /* Wichtig: Der Link wird zum Block-Element */
    width: 100% !important;       /* Er muss die volle Breite ausfüllen */
    
    background-color: transparent !important; /* Kein roter Hintergrund */
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
}

/* Sicherstellen, dass das Bild darin auch wirklich mitwächst */
.videothek-grid .item-content a:has(img) img {
    width: 100%;
    height: auto;
    display: block; /* Verhindert kleine Abstände unten */
}


/* XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX */


/* =========================================
   AUDIOTHEK: VINYL-EFFEKT & PLAYER
   ========================================= */

/* Container für die ganze Karte */
.vinyl-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: visible; /* Wichtig, damit die Platte rausragen kann */
}

/* Der Bereich für Bilder (Cover + Platte) */
.vinyl-wrapper {
    position: relative;
    width: 200px;  /* Feste Breite für das Cover */
    height: 200px; /* Feste Höhe */
    margin: 0 auto 15px auto; /* Zentriert + Abstand nach unten */
    cursor: pointer;
}

/* Das Cover (liegt oben drauf) */
.vinyl-wrapper .album-cover {
    position: relative;
    z-index: 10; /* Muss höher sein als die Platte */
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 4px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.5); /* Schatten für Tiefe */
}

/* Die Schallplatte (liegt dahinter) */
.vinyl-wrapper .record-disk {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 98%;
    height: 98%;
    z-index: 5; /* Tiefer als Cover */
    transition: all 0.6s cubic-bezier(0.4, 0.0, 0.2, 1); /* Weiche Bewegung */
}

/* --- ANIMATION BEI HOVER --- */
/* Wenn man über den Wrapper fährt, rutscht die Platte nach rechts */
.vinyl-wrapper:hover .record-disk {
    left: 40%; /* Schiebt die Platte zu 40% raus */
    transform: rotate(180deg); /* Dreht sie dabei leicht */
}

/* --- ANIMATION BEI AUDIO-PLAY (Optionaler Profi-Trick) --- */
/* Falls wir später JS nutzen wollen, dreht sie sich endlos */
@keyframes spin { 100% { transform: rotate(360deg); } }


/* --- DER PLAYER --- */
.audio-player {
    width: 100%;
    height: 35px; /* Kompakt */
    margin-top: 10px;
    border-radius: 20px;
}


/* XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX */


/* =========================================
   VINYL LOGIK: DREHEN BEI MUSIK
   ========================================= */

/* 1. Die Animation definieren (Einmal im Kreis) */
@keyframes spinVinyl {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* 2. Zustand "Musik läuft" (wird per JS gesetzt) */
/* Die Klasse .is-playing wird dem Wrapper hinzugefügt */
.vinyl-wrapper.is-playing .record-disk {
    left: 40% !important; /* Platte bleibt draußen */
    
    /* Endlos-Drehung: 2 Sekunden pro Runde, linear, unendlich */
    animation: spinVinyl 2s linear infinite; 
}


/* XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX */


/* =========================================
   FIX: HEADER IMMER IM VORDERGRUND
   ========================================= */
/* Wir geben dem Header und dem klebrigen Container den höchsten "Stapel-Wert" */
header.header, .container-header, .sticky-header {
    position: relative; /* Stellt sicher, dass z-index wirkt */
    z-index: 9999 !important; /* Ein sehr hoher Wert übertrumpft alles andere */
}


/* XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX */


/* =========================================
   FIX: WEISSE RÄNDER IN BOXEN ENTFERNEN
   ========================================= */
/* Erzwingt transparenten Hintergrund für innere Artikel-Bereiche */
.videothek-grid .item-content,
.videothek-grid .page-header,
.videothek-grid .article-info {
    background-color: transparent !important;
    color: #eeeeee !important; /* Helle Schrift zur Sicherheit */
    border: none !important;   /* Eventuelle Standard-Rahmen entfernen */
}


/* =========================================
   FIX: HARTE WEISSE CARD-RÄNDER ENTFERNEN
   ========================================= */
/* Wir zwingen alle Joomla-Standard-Karten dazu, ihren Rahmen zu vergessen */
.videothek-grid .card, 
.videothek-grid .card-body {
    border: none !important;
    background-color: transparent !important;
    box-shadow: none !important;
}

/* Falls Bilder selbst einen weißen Rahmen haben (passiert manchmal) */
.videothek-grid .item-image,
.videothek-grid img {
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
}


/* =========================================
   FIX: WEISSE STREIFEN ENTFERNEN (Aggressiv)
   ========================================= */
.videothek-grid .intro-banner,
.videothek-grid .intro-banner .item-content {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    border: none !important;
}


/* XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX */


/* =========================================
   DESIGN: INTRO BANNER (Horizontal)
   ========================================= */

/* Der Rahmen um die ganze Box (Dunkelgrau, nicht weiß!) */
.intro-banner {
    border: 1px solid #333 !important; /* Dunkler Rahmen */
    border-radius: 8px;
    background-color: #000 !important; /* Schwarz füllen */
    overflow: hidden;
    margin-bottom: 0;
    padding: 0 !important;
}

/* Abstandshalter zwischen den Boxen (die Linie) */
hr.intro-divider {
    border: 0;             /* Standard-Rahmen weg */
    height: 4px;           /* Höhe der Linie */
    margin: 30px 0;
    opacity: 1;
    /* Verlauf: Transparent -> Rot -> Transparent */
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0), #b71c1c, rgba(0, 0, 0, 0));
}

/* Layout: Flexbox vorbereiten */
.intro-banner .item-content {
    display: flex;
    flex-direction: column; /* Handy: untereinander */
    width: 100%;
}

/* AB TABLET (Wenn Platz ist): Nebeneinander */
@media (min-width: 768px) {
    .intro-banner .item-content {
        flex-direction: row; /* Nebeneinander */
        align-items: center; /* Vertikal mittig */
    }

    /* Das Bild links */
    .intro-banner .intro-image {
        flex: 0 0 40%; /* 40% Breite */
        max-width: 350px;
    }

  /* Update für "Weg A" - Bilder bestimmen die Höhe */
.intro-banner .intro-image img {
    width: 100%;       /* Nutzt die volle Breite des linken Drittels */
    height: auto;      /* WICHTIG: Höhe passt sich dem Bild an (kein Verzerren) */
    max-height: 300px; /* Sicherheit: Falls ein Bild doch riesig ist, wird hier gestoppt */
    object-fit: cover; /* Schneidet Ränder ab, falls es nicht perfekt passt */
    display: block;
}

    /* Der Text rechts */
    .intro-banner .intro-text-wrapper {
        padding: 20px 30px;
        flex: 1; /* Restlicher Platz */
        text-align: left;
    }

    .intro-banner h3 {
        margin-top: 0;
        margin-bottom: 20px;
        color: #b71c1c; /* Rot */
        font-size: 1.5rem;
    }
}

/* Der Button Style */
.btn-intro {
    background-color: #b71c1c;
    color: #fff !important;
    padding: 10px 30px;
    border-radius: 4px;
    text-decoration: none;
    font-weight: bold;
    display: inline-block;
}
.btn-intro:hover {
    background-color: #00ff00;
    color: #000 !important;
}


/* XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX */


/* =========================================
   FIX: TABELLEN RAHMEN (Alle Linien sichtbar machen)
   ========================================= */

/* 1. Die Tabelle selbst */
.videothek-grid table {
    border-collapse: collapse; /* Verhindert doppelte Linien */
    width: 100%;               /* Nutzt die volle Breite */
    margin-bottom: 20px;       /* Abstand nach unten */
    background-color: transparent; /* Kein weißer Hintergrund */
}

/* 2. Die einzelnen Zellen (td) und Kopfzeilen (th) */
.videothek-grid table td, 
.videothek-grid table th {
    border: 1px solid #666666 !important; /* Sichtbarer grauer Rahmen */
    padding: 12px;             /* Etwas Luft zum Atmen für den Text */
    vertical-align: middle;    /* Text schön mittig in der Höhe */
    color: #ffffff;            /* Weiße Schrift sicherstellen */
}

/* Optional: Die Kopfzeile der Tabelle etwas hervorheben */
.videothek-grid table th {
    font-weight: bold;
    background-color: rgba(255, 255, 255, 0.1); /* Ganz leicht aufgehellt */
    border-bottom: 2px solid #b71c1c !important; /* Rote Linie unter dem Kopf */
}


/* XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX */


/* =========================================
   STARTSEITE: NAVIGATIONS-GRID (Bilder only)
   ========================================= */
.home-nav-grid {
    display: grid;
    grid-template-columns: 1fr; /* Handy: 1 Spalte (alles untereinander) */
    gap: 30px;                  /* Etwas mehr Luft zwischen den Bällen */
    
    /* NEU: Zentrierung & Begrenzung */
    max-width: 1000px;          /* Die Gruppe wird nie breiter als 1000px */
    margin: 0 auto 40px auto;   /* Oben 0, Rechts Auto, Unten 40, Links Auto -> ZENTRIERT! */
    padding: 0 20px;            /* Sicherheitsabstand zum Rand auf kleinen Handys */
    justify-items: center;      /* Zwingt die Bilder exakt in die Mitte ihrer Zelle */
}

/* Die einzelne Kachel */
.home-nav-item {
    display: block;
    text-decoration: none;
    transition: transform 0.3s ease;
}

/* Das Bild rund & schick machen */
.home-nav-item img {
    width: 150px;       
    height: 150px;
    object-fit: cover;
    border-radius: 50%; /* Kreisrund */
    border: 3px solid #b71c1c; /* Roter Ring */
    box-shadow: 0 5px 15px rgba(0,0,0,0.5);
    transition: border-color 0.3s ease; /* Weicher Farbwechsel */
}

/* Hover-Effekt: Reinzoomen & Farbe */
.home-nav-item:hover {
    transform: scale(1.1); /* Zoomt etwas stärker (1.1) da kein Text mehr stört */
}
.home-nav-item:hover img {
    border-color: #00ff00; /* Ring wird grün */
    box-shadow: 0 0 15px #00ff00; /* Leuchter-Effekt (Glow) dazu! */
}

/* AB TABLET (2 Spalten) */
@media (min-width: 600px) {
    .home-nav-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
/* AB PC (4 Spalten) */
@media (min-width: 992px) {
    .home-nav-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}


/* XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX */


/* =========================================
   STARTSEITE: TERMINKALENDER
   ========================================= */
.event-list {
    max-width: 800px;
    margin: 0 auto; /* Zentriert die Liste */
}

.event-item {
    display: flex;
    align-items: center;
    background-color: rgba(255,255,255,0.05); /* Ganz leicht aufgehellter Hintergrund */
    border-radius: 8px;
    margin-bottom: 15px;
    padding: 10px;
    border: 1px solid #333;
    transition: all 0.3s ease;
}
.event-item:hover {
    border-color: #00ff00; /* Grüner Rahmen beim Drüberfahren */
    background-color: rgba(255,255,255,0.1);
}

/* Das rote Datums-Kästchen */
.event-date {
    background-color: #b71c1c;
    color: #fff;
    padding: 10px;
    border-radius: 6px;
    text-align: center;
    min-width: 70px; /* Feste Breite */
    margin-right: 20px;
}
.event-date .day {
    display: block;
    font-size: 1.5rem;
    font-weight: bold;
    line-height: 1;
}
.event-date .month {
    display: block;
    font-size: 0.8rem;
    text-transform: uppercase;
}

/* Der Text daneben */
.event-info h4 {
    margin: 0;
    color: #ffffff;
    font-size: 1.1rem;
}
.event-info p {
    margin: 5px 0 0 0;
    color: #aaaaaa; /* Grau für Details */
    font-size: 0.9rem;
}


/* XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX */


/* =========================================
   OFFLINE SEITE - BASIEREND AUF INSPEKTOR
   ========================================= */

/* 1. Den weißen Kasten (.offline-card) durchsichtig machen */
.offline-card {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    border: none !important;
}

/* 2. Das Joomla-Logo (.logo-icon) ausblenden */
.logo-icon {
    display: none !important;
}

/* 3. Den Login-Bereich darunter (.login) ausblenden */
.login {
    display: none !important;
}

/* 4. Sicherstellen, dass der Header-Bereich keinen Rand hat */
.header {
    border: none !important;
}


/* XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX */