/*##############################################*/
/* JOOMLA-Template-CSS-Dinge */
/*##############################################*/

.btn-motorsport-orange {
    background-color: #ff6600 !important;
    background-image: none !important;
    color: #ffffff !important;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;

    /* HIER PASSIRT DIE MAGIE: 8px oben/unten, 25px links/rechts */
    padding: 8px 25px !important;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border: 2px solid transparent !important;
    border-radius: 3px !important;
    box-shadow: none !important;
    transition: all 0.2s ease-in-out;
    line-height: 1.2;
    /* Verringert den Zeilenabstand im Button */
}

/* Hover-Effekt bleibt gleich, damit es schick aussieht */
.btn-motorsport-orange:hover {
    border-color: #ffffff !important;
    transform: scale(1.05);
}
/* ################# Accordionsteuerung #################*/
/* Das Design inklusive Schattensteuerung */
/* Erzwungenes Design für das spezifische Modul-HTML */
/* 1. Den Standard-Schatten ersetzen (im Block .custom-orange-acc ul.uk-accordion li) */
.custom-orange-acc ul.uk-accordion li {
    background: #ffffff !important;
    border: 1px solid #d5d5d5 !important;
    /* Rahmen minimal dunkler für mehr Tiefe */
    border-radius: 5px !important;
    margin-bottom: 15px !important;
    /* Dunklerer Schatten: von 0.08 auf 0.20 erhöht */
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.20) !important;
    overflow: hidden;
    list-style: none;
    transition: box-shadow 0.2s ease-in-out !important;
    /* Geschmeidiger Übergang */
}

/* 2. Den Hover-Schatten ersetzen (im Block .custom-orange-acc li:hover) */
.custom-orange-acc li:hover {
    /* Noch kräftigerer Schatten beim Drüberfahren: auf 0.30 erhöht */
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.30) !important;
    border-color: #c0c0c0 !important;
}

/* Den Titel-Balken anpassen */
.custom-orange-acc .uk-accordion-title {
    font-size: 1.1rem !important;
    font-weight: bold !important;
    padding: 15px !important;
    margin: 0 !important;
    display: block;
    /* Falls du den Hintergrund doch weiß lassen willst und nur die Schrift orange: */
    /* background: transparent !important; color: #ff6600 !important; */
}

/* Den Inhaltsteil anpassen */
.custom-orange-acc .uk-accordion-content {
    background: #fafafa !important; /* Hellgrauer Hintergrund innen */
    padding: 15px !important;
    border-top: 1px solid #eee !important;
    margin-top: 0 !important;
    color: #333 !important;
}

/* Hover-Effekt für die ganze Karte */
.custom-orange-acc li:hover {
    box-shadow: 0 8px 20px rgba(0,0,0,0.12) !important;
    border-color: #d2d2d2 !important;
}
/* Den Titel als Container vorbereiten */
.custom-orange-acc .uk-accordion-title {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important; /* Text bleibt links */
    flex-direction: row !important;         /* Normale Richtung (Text, dann Icon) */
    width: 100% !important;
    position: relative !important;
}

/* Das Icon (Pseudo-Element) ganz nach rechts schieben */
.custom-orange-acc .uk-accordion-title::before {
    content: ""; /* Falls UIkit das Icon über content steuert */
    margin-left: auto !important; /* Das ist der magische Befehl: schiebt alles nach rechts */
    order: 2 !important;          /* Stellt sicher, dass es nach dem Text kommt */
}

/* Falls dein Modul ein anderes Element für das Icon nutzt (z.B. ein span oder i) */
.custom-orange-acc .uk-accordion-title i,
.custom-orange-acc .uk-accordion-title span {
    margin-left: auto !important;
}
/* ################# Ende / Accordionsteuerung #################*/

/* ################# Racing-Tabelle #################*/
/* Design für die Renn-Tabellen (funktioniert überall in Joomla) */
.racing-table {
    width: 100%;
    max-width: 700px;
    border-collapse: collapse;
    font-family: sans-serif;
    border: 1px solid #444;
}
.racing-table td {
    padding: 10px;
    border: 1px solid #444;
}
.racing-label {
    color: #ff6600;
    font-weight: bold;
    width: 35%;
}
.racing-header {
    background-color: #ff6600;
    color: #fff;
    text-align: center;
    font-weight: bold;
}

/* AUTOMATIK FÜR DAS HANDY */
@media screen and (max-width: 600px) {
    .racing-table td {
        display: block; /* Erzwingt Untereinanderstehen */
        width: 100% !important;
        box-sizing: border-box;
    }
    .racing-label {
        border-bottom: none;
        padding-bottom: 2px;
    }
    .racing-value {
        padding-top: 2px;
        margin-bottom: 10px;
        background-color: #f9f9f9;
    }
}
/* ################# Ende-Racing-Tabelle #################*/

/* ################# Accordion-Listen-Layout #################*/
/* Entfernt das Box-Design für Listen im JP Accordion */
/* Erzwungene Korrektur für JP Accordion Listen */
/* 1. Den Hintergrund der Listen-Punkte radikal entfernen */
.jp-accordion .uk-accordion-content ul > li, 
.jp-accordion .uk-accordion-content ol > li,
.uk-accordion-content ul li,
.uk-accordion-content ol li {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    border: none !important;
    margin-bottom: 5px !important;
    padding-left: 5px !important; /* Kleiner Puffer zum Punkt */
    display: list-item !important; /* Erzwingt die Listen-Optik */
}

/* 2. Die Einrückung der gesamten Liste korrigieren */
.jp-accordion .uk-accordion-content ul, 
.jp-accordion .uk-accordion-content ol,
.uk-accordion-content ul,
.uk-accordion-content ol {
    margin-left: 20px !important;  /* Schiebt die ganze Liste nach rechts, damit Punkte Platz haben */
    padding-left: 10px !important;
    background: none !important;
    box-shadow: none !important;
    border: none !important;
}

/* 3. Punkte und Nummern wieder sichtbar machen */
.jp-accordion .uk-accordion-content ul li,
.uk-accordion-content ul li {
    list-style-type: disc !important;
    list-style-position: outside !important;
}

.jp-accordion .uk-accordion-content ol li,
.uk-accordion-content ol li {
    list-style-type: decimal !important;
    list-style-position: outside !important;
}

/* 4. Verhindern, dass UIkit Pseudo-Elemente (eigene Bullets) einfügt */
.jp-accordion .uk-accordion-content li::before,
.uk-accordion-content li::before {
    display: none !important;
    content: none !important;

}/* 1. Den Container der Liste radikal nach links zwingen */
/* Den negativen Wert verringern, bis es passt */
.jp-accordion ul, 
.jp-accordion ol,
div.uk-accordion-content ul,
div.uk-accordion-content ol {
    margin-left: 0 !important;   /* Von -20px auf -10px reduziert */
    margin-right: 20px !important; /* <--- DAS erzeugt den Abstand nach rechts */
    padding-left: 0 !important;
    width: calc(100% + 10px) !important; /* Breite entsprechend anpassen */
    list-style-position: inside !important;
}

/* Die Boxen (Listen-Elemente) - Design UND Breite kombiniert */
.jp-accordion li,
.uk-accordion-content li {
    background: #fff !important; 
    box-shadow: 0 2px 5px rgba(0,0,0,0.1) !important;
    border: 1px solid #eee !important;
    border-radius: 4px;
    
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-bottom: 10px !important; /* Abstand zwischen den einzelnen Boxen */
    
    padding: 10px 15px !important; /* Innenabstand: oben/unten 10px, links/rechts 15px */
    
    display: block !important;
    width: 100% !important;      
    box-sizing: border-box !important; 
}

/* 3. Den umschließenden Inhaltsbereich komplett öffnen */
.jp-accordion .uk-accordion-content {
    padding-left: 0 !important;
    margin-left: 0 !important;
}
/* ################# Ende-Accordion-Listen-Layout #################*/


/* ################# Punktetabelle-Layout #################*/
/* Punktetabelle Responsive Korrektur */
.punktetabelle {
    width: 100% !important;
    max-width: 800px;
    font-size: 12pt;
    border-collapse: collapse;
}

@media screen and (max-width: 600px) {
    .punktetabelle {
        font-size: 7.5pt !important; /* Verkleinert nur auf dem Handy */
    }
    .punktetabelle td {
        padding: 2px 1px !important;
    }
}
/* ################# Ende-Punktetabelle-Layout #################*/

/* ################# Blockquote/Zitate Formatierung #################*/

blockquote {
    border-left: 5px solid #ff6600 !important;
    padding: 15px !important;
    background: #f9f9f9 !important;
    font-style: italic;
    font-size: 1.1em;
    margin: 20px 0;
}

/* Entfernt den Standard-Abstand des ersten Absatzes im Zitat */
blockquote p {
    margin: 0 !important;
}

blockquote p.small-quote {
    font-size: 0.9rem !important;
    line-height: 1.4 !important;
    font-style: normal !important; /* Entfernt die Schrägstellung */
}

/* Stellt sicher, dass auch evtl. vorhandene Absätze darin nicht kursiv sind */
blockquote.small-quote p {
    font-style: normal !important;
}
/* ################# Ende Blockquote/Zitate Formatierung #################*/


/*############## News-Übersicht-Anpassung, wenn H1 ##################*/
/* Erzwingt die Änderung, auch wenn ein Inline-Style im Editor gesetzt wurde */
.p-3 h1[style*="text-align: center"],
.p-3 h1 {
    font-size: 0.9rem !important;
    /* Entspricht etwa normaler Textgröße */
    color: #ff8000 !important;
    /* Dein Orange */
    font-weight: normal !important;
    text-align: center !important;
    /* Behält die Zentrierung bei, falls gewünscht */
    display: block !important;
}
/*############## Ende-News-Übersicht-Anpassung, wenn H1 ##################*/

/*############## Hero-Buttons nur auf Startseite animieren ##################*/
/* Wenn der Body NICHT die Klasse .itemid-101 hat, schalte die Animation der Sektion hart aus */
body:not(.itemid-101) .home-anim-only {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
    /* Verhindert das "AOS"-Ausblenden */
    visibility: visible !important;
}
/*############## Ende-Hero-Buttons nur auf Startseite animieren ##################*/

/*############### Anpassung News-Karte: Datum, Linie & Textabstand ############*/

/* 1. Den gesamten Textbereich näher ans Bild rücken */
.uk-card-default .p-3 {
    padding-top: 1px !important; 
}

/* 2. Nur das Datum: Eigene Zeile, Linie und Abstand nach unten */
.uk-card-default .p-3 p.uk-text-small {
    display: block !important;       /* Datum bekommt wieder eine eigene Zeile */
    border-bottom: 1px solid #ff852d; /* Orange Linie */
    width: fit-content;              /* Linie nur so breit wie das Datum */
    margin: 0 auto 5px auto !important; /* Zentriert & 15px Abstand zum Text darunter */
    padding-bottom: 2px;             /* Abstand Text zur Linie */
}

/* 3. Nur der Intro-Text: Inline lassen, damit die Punkte (...) hinten kleben */
.uk-card-default .p-3 p:not(.uk-text-small) {
    display: inline !important;      
}

/* 4. Umbruch nach dem Text, damit der Button sauber darunter steht */
.uk-card-default .p-3::after {
    content: "";
    display: block;
    height: 15px; /* Abstand zwischen Textende und Weiterlesen-Button */
}


/* Den Weiterlesen-Button auf volle Breite und tiefer setzen */
.uk-card-default .p-3 .btn-primary {
    display: block !important;   /* Macht den Button zum Block-Element */
    width: 100% !important;      /* Volle Breite des Textfeldes */
    margin-top: 10px !important; /* Abstand nach oben, um ihn tiefer zu setzen */
    margin-left: 0 !important;   /* Kein seitlicher Abstand nötig bei 100% */
    margin-right: 0 !important;
    text-align: center;          /* Text im Button bleibt mittig */
}

/*############### Ende Anpassung ############*/

/*############### Sticky Section ############*/
/* Die Klasse der Section ansprechen */
/*############### Sticky Section REBOOT ############*/

/* Der Haupt-Balken */
.mein-sticky-section {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    z-index: 990;
    /* Hier ist deine gewünschte Transparenz */
    background: rgba(0, 0, 0, 0.9) !important; 
    backdrop-filter: blur(8px);
    margin: 0 !important;
    border: none !important;
    padding: 0 !important;
}

/* Wenn eingerastet */
.mein-sticky-section.at-position {
    position: relative !important;
    bottom: auto !important;
    /* Weiße Linie "überlappen" */
    margin-top: -2px !important; 
    box-shadow: none !important;
}

/* Erzwungene gleiche Höhe für die Spalten */
.mein-sticky-section .astroid-row-container > .row {
    display: flex !important;
    align-items: stretch !important;
}

/* Spalten und Container komplett transparent machen */
.mein-sticky-section .astroid-column,
.mein-sticky-section .container,
.mein-sticky-section .astroid-row-container {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* Die Haarlinie am Boden verstecken */
.mein-sticky-section::after {
    content: "";
    position: absolute;
    bottom: -1px;
    height: 2px;
    width: 100%;
    background: rgba(0, 0, 0, 0.9);
}
/*############### Ende Sticky Section ############*/

/* ============================================================
   JP TIMELINE CUSTOM STYLES
   ============================================================ */
/* Den Untertitel wie eine Blockquote stylen */
.main-timeline .timeline-content p.p-0.m-0 {
    font-style: italic;
    border-left: 4px solid #ff6600 !important; /* Der typische vertikale Strich links */
    padding-left: 15px !important;
    margin: 15px 0 !important;
    background: rgba(255, 255, 255, 0.2); /* Ein leichter heller Schimmer im Hintergrund */
    display: block;
    line-height: 1.6;
}
/* Den Strich unter der Überschrift lassen wir weg oder machen ihn dezenter, da die Blockquote nun den visuellen Akzent setzt */
.main-timeline .timeline-content h3 {
    margin-bottom: 5px !important;
    text-transform: uppercase; /* Optional: Headline in Großbuchstaben für mehr Kontrast */
}
/* Massiver, tiefer Schatten für die Timeline-Boxen */
.main-timeline .timeline-content {
    /* x-Versatz | y-Versatz | Unschärfe | Ausbreitung | Farbe */
    box-shadow: 0 20px 30px rgba(0, 0, 0, 0.4) !important;
    /* Optional: Eine ganz feine dunkle Kante oben, damit die Box noch plastischer wirkt */
    border-top: 1px solid rgba(255, 255, 255, 0.3);
    /* Sorgt dafür, dass der Schatten bei der Animation nicht abgehackt wird */
    transition: box-shadow 0.3s ease-in-out;
}
/* Effekt beim Drüberfahren - die Box scheint zu schweben */
.main-timeline .timeline-content:hover {
    box-shadow: 0 30px 40px rgba(0, 0, 0, 0.5) !important;
    transform: translateY(-5px);
}
/* Abstand nach der absolut letzten Box der Timeline */
.main-timeline {
    padding-bottom: 40px !important; /* Erhöhter Wert für den massiven Schatten */
    margin-bottom: 40px !important;
}
/* Sicherheitshalber für das letzte Timeline-Element selbst */
.main-timeline .timeline:last-child {
    padding-bottom: 60px !important;
}
/* Abstand für alle Timeline-Boxen nach innen */
.main-timeline .timeline {
    padding-left: 20px !important;
    padding-right: 20px !important;
}
/* Spezifische Anpassung für die inneren Inhaltsboxen */
.main-timeline .timeline-content {
    margin-left: 15px !important;
    margin-right: 15px !important;
}
/* Falls die Timeline im Zick-Zack verläuft (links/rechts abwechselnd): */
/* Linke Boxen etwas mehr nach rechts rücken */
.main-timeline .timeline:nth-child(odd) .timeline-content {
    margin-left: 15px !important;
}
/* Rechte Boxen etwas mehr nach links rücken */
.main-timeline .timeline:nth-child(even) .timeline-content {
    margin-right: 15px !important;
}
/* ============================================================
   ENDE - JP TIMELINE CUSTOM STYLES
   ============================================================ */