@charset "utf-8";
/* ==========================================================================
   1. STANDARDS & SCHRIFTEN (FÜR ALLE SEITEN)
   ========================================================================== */
body,
:where(td, th):not(:where([class^="ccn-"], [class*=" ccn-"]) *) {
     font-family: Arial, Helvetica, sans-serif;
     font-size: 16px;
     color: #1A1A1A;
}

body {
     margin: 0;
     background-color: #F7F7F7;
     padding-top: 200px;
}

html {
     scroll-padding-top: 220px;
}

/* ==========================================================================
   2. HEADER & LOGO (FÜR ALLE SEITEN)
   ========================================================================== */
header {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 140px;
     background-color: #FFFFFF;
     box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
     z-index: 1000;
}

.logo {
    float: left;
    width: 155px;
    height: 100px;
    margin: 20px 0 0 40px;
    overflow: hidden;
}

.logo img {
    width: 100%;    
    height: auto;      
    display: block;
}

.verein_name {
     float: right;
     margin: 42px 40px 0 0;
     text-align: right;
}

.verein_name h1 {
     font-size: 24px;
     color: #DC052D;
     font-weight: 700;
     line-height: 1.2;
     letter-spacing: -0.5px;
     margin: 0;
}

/* ==========================================================================
   3. NAVIGATION (HAUPTMENÜBAND & DROPDOWNS)
   ========================================================================== */
nav {
     position: fixed;
     top: 140px;
     left: 0;
     width: 100%;
     height: 60px;
     background-color: #DC052D;
     box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
     z-index: 999;
}

nav ul {
     list-style: none;
     width: 950px;
     margin: 0 auto;
     padding: 0;
     text-align: center;
     display: flex;
     justify-content: center;
     align-items: center;
     height: 100%; 
}

nav li {
     display: inline-block;
     position: relative;
     margin: 0 5px;
}

nav a {
     display: inline-block;
     height: 40px;         
     line-height: 40px;    
     padding-left: 20px;
     padding-right: 20px;
     text-decoration: none;
     color: #FFFFFF;
     font-weight: 600;
     font-size: 16px;
     border-radius: 20px;  
     transition: all 0.25s ease;
}

nav a:hover {
     background-color: #A80322; 
     color: #FFFFFF;
}

nav ul li a.activ_button {
     background-color: #FFFFFF;
     color: #DC052D;
}

nav li.hat_dropdown > a::after {
     content: "▾";
     margin-left: 6px;
     font-size: 14px;
}

nav ul ul {
     display: none;
     position: absolute;
     top: 40px; 
     left: 0;
     width: 230px;
     background-color: #FFFFFF;
     border-radius: 8px; 
     box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
     text-align: left;
     margin-top: 10px; 
     padding: 8px 0;
     flex-direction: column;
     height: auto;
}

nav ul ul::before {
     content: "";
     position: absolute;
     top: -15px;
     left: 0;
     width: 100%;
     height: 15px;
     background: transparent;
}

nav li:hover ul {
     display: flex;
}

nav li.hat_dropdown.dropdown_zu:hover ul {
     display: none;
}

nav ul ul li {
     display: block;
     width: 100%;
     height: auto;
     margin: 0; 
}

nav ul ul li a {
     display: block;
     width: auto;         
     height: auto;
     line-height: normal;
     padding: 12px 20px;
     font-weight: 500;
     color: #333333;
     border-radius: 0;   
     background-color: transparent; 
}

nav ul ul li a:hover {
     background-color: #F5F5F5;
     color: #DC052D;
}

/* ==========================================================================
   4. INHALTSBEREICH & TYPOGRAFIE
   ========================================================================== */
main {
     width: 100%;
     min-height: 700px;
     background-color: #FFFFFF;
     text-align: left;
}

.main-inner {
     width: 900px;
     margin: 0 auto;
     padding: 50px 0;
}

main h2:not(:where([class^="ccn-"], [class*=" ccn-"]) *) {
    font-size: 32px;
    color: #DC052D;
    margin-top: 0;
    margin-bottom: 24px;
    font-weight: 700;
    text-transform: uppercase;
}

main h3:not(:where([class^="ccn-"], [class*=" ccn-"]) *) {
     font-size: 24px;
     color: #0066B2; /* Bayern-Blau */
     margin-top: 35px;
     margin-bottom: 15px;
     font-weight: 700;
}

main h4:not(:where([class^="ccn-"], [class*=" ccn-"]) *),
.main-inner h4:not(:where([class^="ccn-"], [class*=" ccn-"]) *) {
    color: #1A1A1A !important;
    font-size: 24px;
    margin-top: 35px;
    margin-bottom: 15px;
    font-weight: 700;
}

main p:not(:where([class^="ccn-"], [class*=" ccn-"]) *) {
     font-size: 16px;
     line-height: 1.65;
     color: #333333;
     margin-top: 0;
     margin-bottom: 20px;
}

/* Trennlinie */
.trenner-anthrazit {
     border: 0;
     height: 1px;
     background-color: #1A1A1A;
     margin: 45px 0;
     opacity: 0.15;
}

/* Slogan */
.mia-san-mia {
     font-size: 26px;
     color: #DC052D;
     font-weight: 800;
     text-align: center;
     margin: 50px 0 20px 0;
     letter-spacing: 1px;
     text-transform: uppercase;
}

/* Bullet-Listen */
.bullet-liste {
     list-style-type: disc !important;
     padding-left: 20px !important;
     margin-bottom: 25px;
}

.bullet-liste li {
     margin-bottom: 12px;
     line-height: 1.6;
     color: #333333;
}

/* Infobox Hellgrau mit rotem Akzentstreifen */
.info-box-hell {
     background-color: #F5F5F5;
     border-left: 5px solid #DC052D;
     padding: 25px;
     margin: 35px 0;
     border-radius: 6px;
     box-shadow: 0 2px 8px rgba(0,0,0,0.02);
}

.info-box-hell p {
     color: #1A1A1A !important;
     margin: 0;
     font-size: 16px;
     line-height: 1.6;
}

.info-box-hell h3 {
     margin: 0 0 12px 0;
     color: #1A1A1A !important;
     font-size: 18px;
     font-weight: 700;
}

.info-box-hell li {
     font-size: 14.5px;
     color: #333333;
     margin-bottom: 8px;
     line-height: 1.5;
}

.text-quote {
     font-style: italic;
     font-weight: 500;
     text-align: left;
}

.text-left-medium {
     text-align: left;
     font-weight: 500;
}

.link-red {
     color: #DC052D;
     text-decoration: underline;
}

.gepaeck-hinweis {
     font-size: 15px;
     color: #333333;
     line-height: 1.6;
     margin: 25px 0 15px 0;
}

.sanktion-hinweis {
     color: #0066B2;
     font-weight: 700;
     font-size: 15px;
     text-align: center;
     margin-top: 35px;
     margin-bottom: 20px;
}

.form-hinweis {
     font-size: 13px;
     color: #666666;
     margin-top: 15px;
}

/* Farbakzente & Rahmen-Hilfsklassen */
.border-top-blue { border-top: 4px solid #0066B2 !important; }
.border-top-dark { border-top: 4px solid #1A1A1A !important; }
.border-top-red { border-top: 4px solid #DC052D !important; }

.text-blue { color: #0066B2 !important; }
.text-dark { color: #1A1A1A !important; }
.text-red { color: #DC052D !important; }

.box-subtext {
     font-size: 14px;
     color: #666666;
     margin-bottom: 12px;
     line-height: 1.4;
}

/* ==========================================================================
   5. BUTTONS & CALL-TO-ACTIONS
   ========================================================================== */
.btn-nav {
    display: inline-block;
    background-color: #DC052D;
    color: #FFFFFF !important;
    padding: 12px 28px;        
    font-size: 15px;
    font-weight: 700;
    border-radius: 20px;     
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: all 0.25s ease;
    box-shadow: 0 4px 10px rgba(220,5,45,0.12);
    border: none;
    cursor: pointer;
}

.btn-nav + .btn-nav,
.btn-nav + .btn-download,
.btn-download + .btn-nav,
.btn-download + .btn-download {
    margin-left: 25px;
}

.btn-nav:hover {
    background-color: #A50422;
    box-shadow: 0 6px 18px rgba(220,5,45,0.25);
    transform: translateY(-2px);
}

.btn-action {
    display: inline-block;
    background-color: #1A1A1A;
    color: #FFFFFF !important;
    padding: 12px 28px;
    font-size: 15px;
    font-weight: 700;
    border-radius: 4px;         
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: all 0.25s ease; 
    box-shadow: 0 4px 10px rgba(0,0,0,0.08);
    border: none;
    cursor: pointer;
}

.btn-action:hover {
    background-color: #333333;
    box-shadow: 0 6px 18px rgba(0,0,0,0.18);
    transform: translateY(-2px); 
}

.btn-download {
    display: inline-block;
    background-color: #1A1A1A;
    color: #FFFFFF !important;
    padding: 12px 28px; 
    font-size: 15px;
    font-weight: 700;
    border-radius: 20px;     
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: all 0.25s ease;
    box-shadow: 0 4px 10px rgba(0,0,0,0.08);
    border: none;
    cursor: pointer;
}

.btn-download:hover {
    background-color: #333333;
    box-shadow: 0 6px 18px rgba(0,0,0,0.18);
    transform: translateY(-2px); 
}

.btn-shadow-dark {
    box-shadow: 0 4px 12px rgba(26,26,26,0.15) !important;
}

.startseite-buttons {
    display: flex;
    gap: 15px;
}

.container-center-m20 {
    text-align: center;
    margin-top: 20px;
}

.button-margin-space {
    margin-top: 0;
    margin-bottom: 45px;
}

.button-margin-25 {
    margin-top: 25px;
    margin-bottom: 25px;
}

.button-margin-30 {
    margin-top: 30px;
}

/* ==========================================================================
   6. TERMINE & STATUS-BADGES
   ========================================================================== */
.termin-liste {
     display: flex;
     flex-direction: column;
     gap: 15px; 
     margin-top: 25px;
     margin-bottom: 40px;
}

.termin-zeile {
     display: flex;
     align-items: center;
     background-color: #F5F5F5; 
     border: 1px solid #E5E5E5;
     border-radius: 8px;
     padding: 15px 20px;
     transition: all 0.2s ease;
}

.termin-zeile:hover {
     background-color: #FFFFFF;
     box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

.termin-datum {
     background-color: #1A1A1A;
     color: #FFFFFF;
     width: 70px;
     height: 70px;
     border-radius: 6px;
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
     text-align: center;
     flex-shrink: 0; 
}

.termin-datum .tag {
     font-size: 24px;
     font-weight: 800;
     line-height: 1;
}

.termin-datum .monat {
     font-size: 11px;
     font-weight: 700;
     letter-spacing: 1px;
     margin-top: 2px;
}

.termin-details {
     flex-grow: 1; 
     padding-left: 25px;
     padding-right: 25px;
}

.termin-details h4 {
     font-size: 18px;
     color: #1A1A1A !important;
     margin: 0 0 6px 0;
     font-weight: 600;
}

.termin-details p {
     font-size: 14px;
     color: #666666 !important;
     margin: 0 !important; 
}

.termin-info-row {
    display: flex;
    flex-wrap: wrap;
    gap: 5px 10px;
    font-size: 14px;
    color: #666666;
}

.btn-termin {
    display: inline-block;
    padding: 9px 22px;       
    border-radius: 18px;     
    font-size: 14px;     
    font-weight: 700;      
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-decoration: none;
    text-align: center;
    background-color: #DC052D;
    color: #FFFFFF !important;
    transition: all 0.25s ease; 
    box-shadow: 0 3px 8px rgba(220, 5, 45, 0.15);
    cursor: pointer;
    border: none;
}

.btn-termin:hover {
    background-color: #A50422; 
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transform: translateY(-1px);
}

.termin-status {
    display: inline-block;
    padding: 9px 16px;
    border-radius: 18px; 
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
    text-align: center;
    width: auto;
    flex-shrink: 0;
    box-sizing: border-box;
}

.status-offen { background-color: #E6F4EA; color: #137333; }
.status-warteliste { background-color: #FEF7E0; color: #B06000; }
.status-geschlossen { background-color: #E8F0FE; color: #1A73E8; }

/* ==========================================================================
   7. RASTER-LAYOUTS & KACHELN
   ========================================================================== */
.feature-grid, .highlight-grid, .regeln-grid {
     display: flex;
     flex-wrap: wrap;
     gap: 20px;
     margin: 25px 0 40px 0;
}

.feature-box, .timeline-kachel {
     background-color: #F5F5F5;
     border: 1px solid #E5E5E5;
     border-radius: 8px;
     padding: 20px;
     flex-grow: 1;
     box-shadow: 0 4px 12px rgba(0,0,0,0.03);
     transition: all 0.25s ease;
     box-sizing: border-box;
}

.feature-grid .feature-box {
     width: calc(50% - 10px);
}

.feature-box:hover, .timeline-item:hover .timeline-kachel {
     background-color: #FFFFFF !important;
     box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06) !important;
     border-color: #0066B2 !important;
}

.feature-box h4, .timeline-kachel h4 {
     margin: 0 0 8px 0 !important;
     font-size: 18px;
     color: #1A1A1A;
     font-weight: 700;
}

.feature-box p, .timeline-kachel p {
     margin: 0 !important;
     font-size: 14.5px;
     color: #444444;
     line-height: 1.5;
}

/* VORSTAND GRID */
.vorstand-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin: 25px 0 40px 0;
}

.vorstand-grid-top-neg {
    margin-top: -20px !important;
}

.vorstand-box-3 {
    background-color: #FFFFFF;
    border: 1px solid #E5E5E5;
    border-radius: 8px;
    padding: 20px;
    width: calc(33.333% - 13.4px);
    box-sizing: border-box;
    text-align: center;
    box-shadow: 0 4px 12px rgba(0,0,0,0.03);
    border-top: 4px solid #DC052D;
}

.vorstand-box-2 {
    background-color: #FFFFFF;
    border: 1px solid #E5E5E5;
    border-radius: 8px;
    padding: 20px;
    width: calc(50% - 10px);
    box-sizing: border-box;
    text-align: center;
    box-shadow: 0 4px 12px rgba(0,0,0,0.03);
    border-top: 4px solid #0066B2;
}

.vorstand-box-compact {
    background-color: #F5F5F5;
    border: 1px solid #1A1A1A;
    border-radius: 6px;
    padding: 15px;
    width: calc(25% - 15px);
    box-sizing: border-box;
    text-align: center;
}

.vorstand-grid .funktion, .vorstand-grid .funktion-ausschuss {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 700;
    margin-bottom: 5px;
}

.vorstand-grid .funktion { color: #888888; }
.vorstand-grid .funktion-ausschuss { color: #1A1A1A; }
.vorstand-grid .name { font-size: 17px; color: #1A1A1A; font-weight: 700; margin-bottom: 3px; }
.vorstand-grid .ort { font-size: 14px; color: #666666; font-style: italic; }

/* FAHRTENREGELN & HIGHLIGHT BOXEN */
.regeln-box {
    background-color: #F5F5F5;
    border: 1px solid #E5E5E5;
    border-radius: 8px;
    padding: 22px;
    width: calc(50% - 10px);
    box-sizing: border-box;
    color: #1A1A1A;
    box-shadow: 0 4px 12px rgba(0,0,0,0.04);
}

.regeln-box-full-width {
    width: 100% !important;
}

.regeln-box h4 {
    margin: 0 0 15px 0;
    font-size: 19px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding-bottom: 0;
    border-bottom: none;
}

.regeln-box p {
    margin: 0 0 12px 0;
    font-size: 14.5px;
    color: #444444;
    line-height: 1.5;
}

.leitlinie-karte {
    background-color: #F5F5F5;
    border: 1px solid #E5E5E5;
    border-radius: 8px;
    padding: 22px;
    box-sizing: border-box;
    color: #1A1A1A;
    box-shadow: 0 4px 12px rgba(0,0,0,0.04);
    width: 100%;
    margin-bottom: 25px;
}

.leitlinie-karte h4 {
    margin: 0 0 10px 0;
    color: #1A1A1A;
    font-size: 19px;
    font-weight: 700;
    border-bottom: 2px solid #0066B2;
    padding-bottom: 8px;
}

.leitlinie-karte p {
    margin: 0;
    font-size: 14.5px;
    color: #444444;
    line-height: 1.5;
}

.verboten-liste {
    display: flex;
    flex-wrap: wrap;
    padding-left: 20px;
    margin: 0;
}

.verboten-liste li {
    width: 33.333%;
    margin-bottom: 8px;
    color: #333333;
    font-size: 16px;
}

.highlight-kachel {
    background-color: #F5F5F5; 
    border: 1px solid #E5E5E5;
    border-radius: 8px;
    padding: 22px;
    width: calc(50% - 10px);
    box-sizing: border-box;
    color: #1A1A1A;
    box-shadow: 0 4px 12px rgba(0,0,0,0.04);
}

.highlight-kachel h4 {
    margin: 0 0 10px 0;
    color: #1A1A1A;
    font-size: 19px;
    font-weight: 700;
    border-bottom: 2px solid #DC052D; 
    padding-bottom: 8px;
}

.highlight-kachel p {
    margin: 0;
    font-size: 14.5px;
    color: #444444;
    line-height: 1.5;
}

.highlight-kachel ul { margin: 10px 0 0 0; padding-left: 18px; color: #444444; }
.highlight-kachel li { margin-bottom: 6px; font-size: 14px; }

/* KONTAKT GRID & KACHELN */
.kontakt-auswahl-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin: 30px 0 45px 0;
}

.kontakt-option-box {
    background-color: #F5F5F5;
    border: 1px solid #E5E5E5;
    border-radius: 8px;
    padding: 25px;
    width: calc(50% - 10px);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    box-shadow: 0 4px 12px rgba(0,0,0,0.04);
    border-top: 4px solid #1A1A1A;
}

.kontakt-option-box h3 {
    margin: 0 0 12px 0;
    color: #1A1A1A;
    font-size: 20px;
    font-weight: 700;
}

.kontakt-option-box p {
    font-size: 14.5px;
    color: #555555;
    line-height: 1.5;
    margin: 0 0 20px 0;
}

/* ==========================================================================
   8. FORMULARE
   ========================================================================== */
.kontakt-formular, .anmelde-formular {
    background-color: #FBFBFB;
    border: 1px solid #E5E5E5;
    border-radius: 8px;
    padding: 30px;
    margin-top: 25px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.02);
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 700;
    color: #1A1A1A;
    font-size: 15px;
}

.form-control {
    width: 100%;
    padding: 10px 12px;
    font-size: 15px;
    border: 1px solid #CCCCCC;
    border-radius: 4px;
    box-sizing: border-box;
    background-color: #FFFFFF;
    font-family: inherit;
}

.form-control:focus {
    border-color: #DC052D;
    outline: none;
    box-shadow: 0 0 5px rgba(220, 5, 45, 0.2);
}

.checkbox-group {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 25px;
}

.checkbox-group input {
    margin-top: 4px;
}

.checkbox-group label {
    font-size: 14px;
    color: #555555;
    font-weight: normal;
    line-height: 1.4;
}

.btn-submit {
    background-color: #DC052D;
    color: #FFFFFF;
    border: none;
    padding: 12px 30px;
    font-size: 16px;
    font-weight: 700;
    border-radius: 4px;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: background-color 0.2s ease;
    margin-top: 20px;
}

.btn-submit:hover {
    background-color: #A50422;
}

.btn-kachel {
    margin-top: auto;
    text-transform: uppercase;
    background-color: #1A1A1A;
}

.btn-kachel:hover {
    background-color: #333333;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

/* ==========================================================================
   9. TABELLEN
   ========================================================================== */
.stadion-tabelle {
    width: 100%;
    border-collapse: collapse;
    margin: 25px 0 40px 0;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    border-radius: 6px;
    overflow: hidden;
}

.stadion-tabelle th {
    background-color: #F5F5F5;
    color: #1A1A1A;
    text-align: left;
    padding: 14px 18px;
    font-weight: 700;
    letter-spacing: 0.5px;
}

.stadion-tabelle td {
    padding: 14px 18px;
    border-bottom: 1px solid #E5E5E5;
    background-color: #FFFFFF;
}

.stadion-tabelle tr:nth-child(even) td {
    background-color: #FBFBFB;
}

.historie-tabelle-container {
    width: 100%;
    overflow-x: auto; 
    margin: 25px 0 40px 0;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    border-radius: 8px;
    border: 1px solid #E5E5E5;
}

.historie-tabelle {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
    font-size: 14px;
    background-color: #FFFFFF;
}

.historie-tabelle th {
    background-color: #F7F7F7; 
    color: #1A1A1A;
    padding: 14px 16px;
    font-weight: 700;
    font-size: 14.5px;
    white-space: nowrap;
}

.historie-tabelle td {
    padding: 12px 16px;
    border-bottom: 1px solid #E5E5E5;
    color: #444444;
    vertical-align: top;
    line-height: 1.4;
}

.historie-tabelle tr:last-child td {
    border-bottom: none;
}

.historie-tabelle tr:nth-child(even) td {
    background-color: #FBFBFB; 
}

.historie-tabelle tr:hover td {
    background-color: #F5F5F5; 
}

.jahr-zeitraum {
    color: #0066B2; 
    font-weight: 700;
    white-space: nowrap;
}

/* ==========================================================================
   10. ZEITSTRAHL / TIMELINE
   ========================================================================== */
.timeline { 
    position: relative; 
    max-width: 850px; 
    margin: 40px auto; 
    padding: 10px 0; 
}

.timeline::after { 
    content: ''; 
    position: absolute; 
    width: 2px;                  
    background-color: #E5E5E5;  
    top: 0; 
    bottom: 0; 
    left: 55px; 
    margin-left: -1px; 
    z-index: 1;                  
}

.timeline-item { 
    position: relative; 
    margin-bottom: 40px; 
    display: flex; 
    align-items: center; 
    z-index: 2;                  
}

.timeline-jahr { 
    background-color: #1A1A1A; 
    color: #FFFFFF; 
    font-weight: 700; 
    font-size: 13.5px; 
    width: 110px; 
    height: 40px; 
    line-height: 38px; 
    text-align: center; 
    border-radius: 20px; 
    flex-shrink: 0; 
    box-shadow: 0 4px 10px rgba(0,0,0,0.1); 
    border: 1px solid #FFFFFF; 
    letter-spacing: 0.3px; 
    box-sizing: border-box; 
    padding: 0 5px; 
    z-index: 3; 
}

.timeline-kachel { 
    background-color: #F5F5F5; 
    border: 1px solid #E5E5E5; 
    border-radius: 8px; 
    padding: 20px; 
    margin-left: 35px;           
    flex-grow: 1; 
    box-shadow: 0 4px 12px rgba(0,0,0,0.03); 
    transition: all 0.25s ease; 
    z-index: 3; 
}

.timeline-kachel em { color: #DC052D; font-weight: 600; }

/* ==========================================================================
   11. HERO, MEDIA, GALERIE & FOOTER
   ========================================================================== */
.hero-bereich {
     width: 100%;
     height: 620px; 
     background-image: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.6)), url("Bilder/startseite.jpg");
     background-size: cover;       
     background-position: center;   
     position: relative;
     display: flex;
     align-items: flex-end;         
}

.hero-text {
     width: 900px;                 
     margin: 0 auto;               
     padding-bottom: 40px;         
     box-sizing: border-box;
}

.hero-text h2 {
     font-size: 56px;   
     color: #FFFFFF;    
     font-weight: 800;
     margin: 0 0 10px 0;
     text-transform: uppercase;    
     letter-spacing: -1px;
}

.hero-text p {
     font-size: 24px;
     color: #FFFFFF;
     font-weight: 700;
     margin: 0;
}

.spotify-iframe {
     border-radius: 12px;
}

.maps-iframe {
     border: 0;
     width: 100%;
     height: 450px;
     border-radius: 8px;
     box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

.historie-abschluss-bild {
    width: 100%;
    margin: 40px 0;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.06);
    border: 1px solid #E5E5E5;
}

.historie-abschluss-bild img {
    width: 100%;
    height: auto;
    display: block;
}

footer {
     background-color: #1A1A1A;
     color: #FFFFFF;
     text-align: center;
     padding-top: 30px;
     padding-bottom: 30px;
     width: 100%;
     box-shadow: inset 0 4px 10px rgba(0, 0, 0, 0.3);
}

footer ul {
     list-style: none;
     margin: 0 0 15px 0;   
     padding: 0;
     display: flex;        
     justify-content: center;
     align-items: center;
}

footer li {
     display: inline-block;
     margin: 0 5px;       
}

footer a {
     color: #E5E5E5;
     text-decoration: none;
     font-weight: 600;     
     font-size: 15px;
     letter-spacing: 0.5px;
     transition: all 0.25s ease; 
}

footer a:hover {
     color: #DC052D;
}

.fanclub-nummer {
     font-size: 14px;
     color: #888888;
     margin: 0 0 8px 0;
     font-weight: 600;
     letter-spacing: 0.5px;
}

.copyright {
     font-size: 13px;
     color: #888888;
     margin: 0;
     font-weight: 400;
     letter-spacing: 0.3px;
     line-height: 1.4;
}

/* GALERIE */
.galerie-titel {
    padding: 15px 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    list-style: none;
    background-color: #F5F5F5; 
    border-bottom: 1px solid #E5E5E5; 
	transition: all 0.2s ease;
	border: 1px solid #E5E5E5; 
    border-radius: 8px;
} 

.galerie-titel:hover {
     background-color: #FFFFFF;
     box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

.epoch-badge {
    background-color: #1A1A1A; 
    color: #FFFFFF;
    padding: 5px 12px;
    margin-right: 15px;
    font-weight: bold;
    border-radius: 15px; 
    font-size: 0.9em;
}

.titel-text {
    color: #0066B2;
    font-size: 1.2em;
    font-weight: bold;
    text-transform: uppercase;
}

.galerie-container {
    padding: 20px;
}

iframe {
    display: block;
    width: 100%;
    height: 400px;
    border: 1px solid #E5E5E5;
    border-radius: 4px;
    background: #fff;
    overflow: auto;
}

.galerie-titel::after {
    content: "▼";
    margin-left: auto;
    color: #0066B2;
    font-size: 0.8em;
    transition: transform 0.3s ease;
}

.galerie-box[open] .galerie-titel::after {
    transform: rotate(180deg);
}

/* ==========================================================================
   12. CCNRUNTIME
   ========================================================================== */
:root {
    --ccn-accent: #DC052D;
    --ccn-accent-text: #FFFFFF;
    --ccn-text: #1A1A1A;
    --ccn-muted: #666666;
    --ccn-surface: #FFFFFF;
    --ccn-surface-alt: #F5F5F5;
    --ccn-border: #E5E5E5;
    --ccn-radius: 8px;
    --ccn-gap: 10px;
    --ccn-focus: #DC052D;
    --ccn-success: #137333;
    --ccn-danger: #DC052D;

    --ccn-button-bg: #FFFFFF;
    --ccn-button-text: #1A1A1A;
    --ccn-button-hover-bg: #F5F5F5;
    --ccn-button-border: #CCCCCC;
    --ccn-button-radius: 4px;
    --ccn-button-padding: 8px 18px;
    --ccn-button-font-weight: 700;
    --ccn-button-primary-bg: #DC052D;
    --ccn-button-primary-text: #FFFFFF;
    --ccn-button-primary-hover-bg: #A50422;

    --ccn-icon-button-radius: 50%;
    --ccn-icon-button-border: #DC052D;
    --ccn-icon-button-text: #DC052D;

    --ccn-link-color: #DC052D;
    --ccn-link-font-weight: 700;

    --ccn-segmented-active-bg: #1A1A1A;
    --ccn-segmented-active-text: #FFFFFF;

    --ccn-input-bg: #FFFFFF;
    --ccn-input-text: #1A1A1A;
    --ccn-input-border: #CCCCCC;
    --ccn-input-radius: 4px;
    --ccn-input-padding: 10px 12px;

    --ccn-chip-radius: 18px;
    --ccn-chip-border: #E5E5E5;
    --ccn-chip-active-bg: #1A1A1A;
    --ccn-chip-active-text: #FFFFFF;
    --ccn-badge-bg: #1A1A1A;
    --ccn-badge-text: #FFFFFF;
    --ccn-badge-radius: 15px;
    --ccn-badge-accent-bg: #DC052D;
    --ccn-badge-accent-text: #FFFFFF;

    --ccn-period-size: 32px;
    --ccn-period-weight: 700;
    --ccn-period-color: #DC052D;
    --ccn-divider: 1px solid #E5E5E5;

    --ccn-calendar-radius: 8px;
    --ccn-calendar-border: #E5E5E5;
    --ccn-calendar-weekday-text: #666666;
    --ccn-calendar-weekend-bg: #FBFBFB;
    --ccn-calendar-outside-bg: #F5F5F5;
    --ccn-calendar-outside-text: #888888;
    --ccn-calendar-item-radius: 4px;
    --ccn-calendar-watermark-display: none;

    --ccn-entry-gap: 15px;
    --ccn-entry-separator: 1px solid #E5E5E5;
    --ccn-entry-date-width: 70px;
    --ccn-entry-day-size: 24px;
    --ccn-entry-day-weight: 800;
    --ccn-entry-day-color: #DC052D;
    --ccn-entry-month-color: #1A1A1A;
    --ccn-entry-title-size: 18px;
    --ccn-entry-title-weight: 700;
    --ccn-entry-meta-color: #666666;
    --ccn-entry-keyword-color: #666666;
    --ccn-entry-facts-bg: #F5F5F5;
    --ccn-entry-facts-radius: 8px;
    --ccn-entry-facts-padding: 20px;
    --ccn-entry-label-color: #666666;
    --ccn-entry-compact-gap: 15px;
    --ccn-entry-compact-title-size: 18px;

    --ccn-preview-gap: 15px;
    --ccn-preview-padding: 15px 20px;
    --ccn-preview-border: 1px solid #E5E5E5;
    --ccn-preview-radius: 8px;
    --ccn-preview-bg: #F5F5F5;
    --ccn-preview-date-color: #DC052D;
    --ccn-preview-head-color: #1A1A1A;
    --ccn-preview-head-font-weight: 700;
    --ccn-news-date-color: #666666;

    --ccn-dialog-radius: 8px;
    --ccn-dialog-title-weight: 700;

    --ccn-form-columns: 1fr;
    --ccn-form-max-width: 100%;
    --ccn-form-row-gap: 8px;
    --ccn-form-column-gap: 20px;
    --ccn-form-align: start;
    --ccn-form-textarea-height: 150px;
    --ccn-label-color: #1A1A1A;
    --ccn-label-size: 15px;
    --ccn-label-weight: 700;
    --ccn-message-padding: 15px 20px;
    --ccn-message-border-width: 5px;
    --ccn-message-radius: 6px;
    --ccn-message-bg: #F5F5F5;
    --ccn-message-text: #1A1A1A;

    --ccn-album-tilt: 0;
    --ccn-album-frame-width: 10px;
    --ccn-album-frame-color: #F5F5F5;
    --ccn-album-frame-text: #1A1A1A;
    --ccn-album-shadow: none;
    --ccn-album-list-gap: 30px;
    --ccn-album-gallery-gap: 6px;
    --ccn-album-row-height: 200px;
    --ccn-album-row-height-small: 120px;
    --ccn-album-photo-radius: 4px;
    --ccn-album-placeholder: #F5F5F5;

    --ccn-table-border: #E5E5E5;
    --ccn-table-cell-padding: 14px 18px;
    --ccn-table-header-bg: #F5F5F5;
    --ccn-table-header-text: #1A1A1A;
    --ccn-table-stripe-bg: #FBFBFB;
}

ccn-dates-preview,
ccn-dates-display {
    display: block;
    margin: 25px 0 30px;
}

.termin-vorschau-link {
    margin-bottom: 0;
}

.galerie-album {
    margin: 25px 0 30px;
}

.galerie-album .ccn-album__back {
    color: #DC052D;
    font-weight: 700;
}

.ccn-dates-preview__list:empty::before {
    content: "Aktuell sind keine Termine geplant.";
    color: #666666;
}