/* ============================================================================
 * Eventbuch24 - Farbschema System
 * Erstellt: 2024
 * Autor: Heiko Thoms
 * ============================================================================ */

/* Gemeinsames Mapping für alle Themes - wird für jedes Theme automatisch angewendet */
:root, [data-theme] {
  /* Bootstrap-Variablen mit unseren --eb Farben überschreiben */
  --bs-primary: var(--eb-primary);
  --bs-primary-dark: var(--eb-primary-dark);
  --bs-secondary: var(--eb-secondary);
  --bs-success: var(--eb-success);
  --bs-info: var(--eb-info);
  --bs-warning: var(--eb-warning);
  --bs-danger: var(--eb-danger);
  --bs-light: var(--eb-bg-secondary);
  --bs-dark: var(--eb-body-color);
  
  /* Kompatibilität mit alten Variablennamen */
  --bs-link-color: var(--eb-link);
  --bs-link-hover-color: var(--eb-link-hover);
  --bs-body-color: var(--eb-body-color);
  --bs-body-bg: var(--eb-body-bg);
  --bs-border-color: var(--eb-border-color);
  
  /* Alte Variablennamen auf neue --eb-Namen mappen */
  --akzentFarbe: var(--eb-accent);
  --linkBesuchtFarbe: var(--eb-link-visited);
  --hintergrundFarbeSekundaer: var(--eb-bg-secondary);
  --hintergrundFarbeTertiaer: var(--eb-bg-tertiary);
  --ueberschriftFarbe: var(--eb-heading-color);
  --codeHintergrundFarbe: var(--eb-code-bg);
  --codeRandFarbe: var(--eb-code-border);
}

/* Standard Farbschema (Professional - NEUES STANDARD) */
:root {
  --eb-primary: #3E6990;        /* gedecktes Blau als Hauptfarbe */
  --eb-primary-dark: #2A4D6E;   /* dunkleres Blau für Hover & Active */
  --eb-secondary: #7A9CB0;      /* helleres Blau als Sekundärton */
  --eb-accent: #B1624E;         /* dezentes Rot als Akzentfarbe */
  --eb-link: #3E6990;           /* Links in Hauptfarbe */
  --eb-link-hover: #2A4D6E;     /* dunkleres Blau beim Hover */
  --eb-link-visited: #3E6990;
  --eb-body-color: #333333;     /* dunkles Grau für Text */
  --eb-body-bg: #FFFFFF;        /* weißer Hintergrund */
  --eb-bg-secondary: #F5F7FA;   /* sehr helles Grau für Sektionen */
  --eb-bg-tertiary: #EDF2F7;    /* helleres Grau für Kontrast */
  --eb-heading-color: #2C3E50;  /* dunkles Blaugrau für Überschriften */
  --eb-danger: #E74C3C;         /* Standard Rot beibehalten */
  --eb-border-color: #D9E2EC;   /* helles Grau für Rahmen */
  --eb-code-bg: #F8FAFC;        /* sehr helles Grau für Code */
  --eb-code-border: #3E6990;    /* Hauptfarbe für Code-Rahmen */
  --eb-success: #2ECC71;        /* Standard Grün beibehalten */
  --eb-warning: #F39C12;        /* Standard Orange beibehalten */
  --eb-info: #3498DB;           /* Standard Info-Blau beibehalten */
}

/* ============================================================================
 * FARBSCHEMA: Orange Coral (ehemals Standard)
 * ============================================================================ */
[data-theme="orange-coral"] {
  --eb-primary: #F07058;         /* Warmes Korallenrot als Hauptfarbe */
  --eb-primary-dark: #8f4335;    /* Dunkleres Rot für Hover-Effekte */
  --eb-secondary: #FF8C69;       /* Helleres Lachsrot als Sekundärfarbe */
  --eb-accent: #4A90E2;          /* Blaue Akzentfarbe für Kontrast */
  --eb-link: #F07058;            /* Links in Hauptfarbe */
  --eb-link-hover: #8f4335;      /* Dunkleres Rot für Hover-Effekte */
  --eb-link-visited: #F07058;    /* Besuchte Links in Hauptfarbe */
  --eb-body-color: #555;         /* Dunkles Grau für Text */
  --eb-body-bg: #fff;            /* Weißer Hintergrund */
  --eb-bg-secondary: #dadada;    /* Helles Grau für Sektionen */
  --eb-bg-tertiary: #f5f5f5;     /* Sehr helles Grau für zusätzlichen Kontrast */
  --eb-heading-color: rgb(59,60,66); /* Dunkles Anthrazit für Überschriften */
  --eb-danger: #FF0040;          /* Leuchtendes Rot für Warnungen */
  --eb-border-color: lightgrey;  /* Helles Grau für Rahmen */
  --eb-code-bg: #f9f9f9;         /* Sehr helles Grau für Code-Hintergrund */
  --eb-code-border: #f36d33;     /* Orange für Code-Rahmen */
  --eb-success: #28a745;         /* Standard Bootstrap-Grün für Erfolg */
  --eb-warning: #ffc107;         /* Standard Bootstrap-Gelb für Warnungen */
  --eb-info: #17a2b8;            /* Standard Bootstrap-Blau für Infos */
}

/* ============================================================================
 * FARBSCHEMA 1: Ocean Blue (Blau/Türkis) - auch als separate Auswahl
 * ============================================================================ */
[data-theme="ocean-blue"] {
  --eb-primary: #2E86AB;         /* Mittleres Meeresblau als Hauptfarbe */
  --eb-primary-dark: #1B5E7A;    /* Dunkleres Blau für Hover-Effekte */
  --eb-secondary: #5DADE2;       /* Helleres Himmelblau als Sekundärfarbe */
  --eb-accent: #F39C12;          /* Warmes Orange als Akzentfarbe */
  --eb-link: #2E86AB;            /* Links in Hauptfarbe */
  --eb-link-hover: #1B5E7A;      /* Dunkleres Blau für Hover-Effekte */
  --eb-link-visited: #2E86AB;    /* Besuchte Links in Hauptfarbe */
  --eb-body-color: #2C3E50;      /* Dunkles Blaugrau für Text */
  --eb-body-bg: #F8FAFB;         /* Sehr helles Blaugrau für Hintergrund */
  --eb-bg-secondary: #E3F2FD;    /* Helles Himmelblau für Sektionen */
  --eb-bg-tertiary: #D6EAF8;     /* Mittleres Himmelblau für zusätzlichen Kontrast */
  --eb-heading-color: #1B4F72;   /* Dunkles Marineblau für Überschriften */
  --eb-danger: #E74C3C;          /* Standard Rot für Warnungen */
  --eb-border-color: #B3D9F2;    /* Helles Blau für Rahmen */
  --eb-code-bg: #EBF5FF;         /* Sehr helles Blau für Code-Hintergrund */
  --eb-code-border: #2E86AB;     /* Hauptfarbe für Code-Rahmen */
  --eb-success: #27AE60;         /* Sattes Grün für Erfolg */
  --eb-warning: #F39C12;         /* Warmes Orange für Warnungen */
  --eb-info: #3498DB;            /* Helles Blau für Infos */
}

/* ============================================================================
 * FARBSCHEMA 2: Forest Green (Grün/Natur)
 * ============================================================================ */
[data-theme="forest-green"] {
  --eb-primary: #27AE60;         /* Sattes Waldgrün als Hauptfarbe */
  --eb-primary-dark: #1E8449;    /* Dunkleres Grün für Hover-Effekte */
  --eb-secondary: #58D68D;       /* Helleres Mintgrün als Sekundärfarbe */
  --eb-accent: #D4A574;          /* Warmes Holzbraun als Akzentfarbe */
  --eb-link: #27AE60;            /* Links in Hauptfarbe */
  --eb-link-hover: #1E8449;      /* Dunkleres Grün für Hover-Effekte */
  --eb-link-visited: #27AE60;    /* Besuchte Links in Hauptfarbe */
  --eb-body-color: #2C3E50;      /* Dunkles Blaugrau für Text */
  --eb-body-bg: #F8FDF9;         /* Sehr helles Mintgrün für Hintergrund */
  --eb-bg-secondary: #E8F5E8;    /* Helles Pastellgrün für Sektionen */
  --eb-bg-tertiary: #D5F3D5;     /* Mittleres Pastellgrün für zusätzlichen Kontrast */
  --eb-heading-color: #1B4332;   /* Dunkles Tannengrün für Überschriften */
  --eb-danger: #E74C3C;          /* Standard Rot für Warnungen */
  --eb-border-color: #A8D5A8;    /* Helles Grün für Rahmen */
  --eb-code-bg: #F0FFF0;         /* Sehr helles Mintgrün für Code-Hintergrund */
  --eb-code-border: #27AE60;     /* Hauptfarbe für Code-Rahmen */
  --eb-success: #2ECC71;         /* Leuchtendes Grün für Erfolg */
  --eb-warning: #F39C12;         /* Warmes Orange für Warnungen */
  --eb-info: #17A2B8;            /* Türkisblau für Infos */
}

/* ============================================================================
 * FARBSCHEMA 3: Royal Purple (Lila/Violett)
 * ============================================================================ */
[data-theme="royal-purple"] {
  --eb-primary: #8E44AD;         /* Kräftiges Violett als Hauptfarbe */
  --eb-primary-dark: #6C3483;    /* Dunkleres Violett für Hover-Effekte */
  --eb-secondary: #BB8FCE;       /* Helleres Lavendel als Sekundärfarbe */
  --eb-accent: #F4D03F;          /* Leuchtendes Gold als Akzentfarbe */
  --eb-link: #8E44AD;            /* Links in Hauptfarbe */
  --eb-link-hover: #6C3483;      /* Dunkleres Violett für Hover-Effekte */
  --eb-link-visited: #8E44AD;    /* Besuchte Links in Hauptfarbe */
  --eb-body-color: #2C3E50;      /* Dunkles Blaugrau für Text */
  --eb-body-bg: #FDFBFF;         /* Sehr helles Lavendel für Hintergrund */
  --eb-bg-secondary: #F4ECFF;    /* Helles Lavendel für Sektionen */
  --eb-bg-tertiary: #EBDEF0;     /* Mittleres Lavendel für zusätzlichen Kontrast */
  --eb-heading-color: #4A235A;   /* Dunkles Königsviolett für Überschriften */
  --eb-danger: #E74C3C;          /* Standard Rot für Warnungen */
  --eb-border-color: #D2B4DE;    /* Helles Lavendel für Rahmen */
  --eb-code-bg: #FAF5FF;         /* Sehr helles Lavendel für Code-Hintergrund */
  --eb-code-border: #8E44AD;     /* Hauptfarbe für Code-Rahmen */
  --eb-success: #27AE60;         /* Sattes Grün für Erfolg */
  --eb-warning: #F39C12;         /* Warmes Orange für Warnungen */
  --eb-info: #AF7AC5;            /* Mittleres Lila für Infos */
}

/* ============================================================================
 * FARBSCHEMA 4: Midnight Dark (Dunkel/Elegant)
 * ============================================================================ */
[data-theme="midnight-dark"] {
  --eb-primary: #E67E22;         /* Warmes Orange als Hauptfarbe für Kontrast auf dunklem Grund */
  --eb-primary-dark: #D35400;    /* Dunkleres Orange für Hover-Effekte */
  --eb-secondary: #F39C12;       /* Helleres Gold als Sekundärfarbe */
  --eb-accent: #85C1E9;          /* Helles Blau als Akzentfarbe für Kontrast */
  --eb-link: #E67E22;            /* Links in Hauptfarbe */
  --eb-link-hover: #D35400;      /* Dunkleres Orange für Hover-Effekte */
  --eb-link-visited: #E67E22;    /* Besuchte Links in Hauptfarbe */
  --eb-body-color: #ECF0F1;      /* Helles Grau für Text (guter Kontrast) */
  --eb-body-bg: #2C3E50;         /* Dunkles Blaugrau als Hintergrund */
  --eb-bg-secondary: #34495E;    /* Etwas helleres Blaugrau für Sektionen */
  --eb-bg-tertiary: #3F5B6C;     /* Noch helleres Blaugrau für zusätzlichen Kontrast */
  --eb-heading-color: #F8F9FA;   /* Fast weißes Grau für Überschriften */
  --eb-danger: #E74C3C;          /* Leuchtendes Rot für Warnungen */
  --eb-border-color: #5D6D7E;    /* Mittleres Blaugrau für Rahmen */
  --eb-code-bg: #34495E;         /* Etwas helleres Blaugrau für Code-Hintergrund */
  --eb-code-border: #E67E22;     /* Hauptfarbe für Code-Rahmen */
  --eb-success: #27AE60;         /* Sattes Grün für Erfolg */
  --eb-warning: #F39C12;         /* Warmes Orange für Warnungen */
  --eb-info: #3498DB;            /* Helles Blau für Infos */
}

/* ============================================================================
 * FARBSCHEMA 5: BVB Dortmund Dark (Schwarz/Gelb - Dunkle Variante)
 * ============================================================================ */
[data-theme="bvb-dortmund-dark"] {
  --eb-primary: #FDE100;         /* BVB-Gelb als Hauptfarbe */
  --eb-primary-dark: #E6CB00;    /* Dunkleres Gelb für Hover-Effekte */
  --eb-secondary: #FFE135;       /* Helleres Gelb als Sekundärfarbe */
  --eb-accent: #C0C0C0;          /* Silber als Akzentfarbe für Kontrast */
  --eb-link: #FDE100;            /* Links in BVB-Gelb */
  --eb-link-hover: #E6CB00;      /* Dunkleres Gelb für Hover-Effekte */
  --eb-link-visited: #FDE100;    /* Besuchte Links in BVB-Gelb */
  --eb-body-color: #ffffff;      /* Weißer Text für optimalen Kontrast */
  --eb-body-bg: #000000;         /* Schwarzer Hintergrund */
  --eb-bg-secondary: #1A1A1A;    /* Dunkelgraue Sektionen */
  --eb-bg-tertiary: #2B2B2B;     /* Etwas helleres Dunkelgrau für zusätzlichen Kontrast */
  --eb-heading-color: #FDE100;   /* Überschriften in BVB-Gelb */
  --eb-danger: #FF4444;          /* Leuchtendes Rot für Warnungen */
  --eb-border-color: #333333;    /* Dunkelgrau für Rahmen */
  --eb-code-bg: #1A1A1A;         /* Dunkelgrauer Code-Hintergrund */
  --eb-code-border: #FDE100;     /* BVB-Gelb für Code-Rahmen */
  --eb-success: #00FF00;         /* Leuchtendes Grün für Erfolg */
  --eb-warning: #FDE100;         /* BVB-Gelb für Warnungen */
  --eb-info: #FDE100;            /* BVB-Gelb für Infos */
}

/* ============================================================================
 * FARBSCHEMA: BVB Dortmund (Gelb/Schwarz - Helle Variante)
 * ============================================================================ */
[data-theme="bvb-dortmund"] {
  --eb-primary: #000000;        /* Schwarz als Hauptfarbe */
  --eb-primary-dark: #333333;   /* Dunkleres Schwarz für Hover & Active */
  --eb-secondary: #1A1A1A;      /* Dunkles Grau als Sekundärton */
  --eb-accent: #C0C0C0;         /* Silber als Akzentfarbe */
  --eb-link: #000000;           /* Schwarze Links */
  --eb-link-hover: #333333;     /* Dunkleres Schwarz beim Hover */
  --eb-link-visited: #000000;
  --eb-body-color: #000000;     /* Schwarzer Text */
  --eb-body-bg: #FDE100;        /* Gelber Hintergrund */
  --eb-bg-secondary: #FFE135;   /* Helleres Gelb für Sektionen */
  --eb-bg-tertiary: #FFF494;    /* Noch helleres Gelb für Kontrast */
  --eb-heading-color: #000000;  /* Schwarze Überschriften */
  --eb-danger: #FF4444;         /* Rot beibehalten */
  --eb-border-color: #000000;   /* Schwarze Rahmen */
  --eb-code-bg: #FFFAE6;        /* Sehr helles Gelb für Code */
  --eb-code-border: #000000;    /* Schwarzer Rahmen für Code-Blöcke */
  --eb-success: #00AA00;        /* Dunkleres Grün für besseren Kontrast auf Gelb */
  --eb-warning: #FF8800;        /* Orange als Warnfarbe */
  --eb-info: #0066CC;           /* Dunkles Blau für Info */
}

/* ============================================================================
 * FARBSCHEMA 6: HOWUT Ultramarathon (Naturfarben/Outdoor)
 * ============================================================================ */
[data-theme="howut"] {
  --eb-primary: #4A772F;          /* kräftiges Waldband-Grün */
  --eb-primary-dark: #2F4F2F;     /* dunkles Tannengrün */
  --eb-secondary: #BFA78A;        /* heller Beigeton (Haut, Hintergrund) */
  --eb-accent: #6A4D39;           /* braune Kontur, kontraststark */
  --eb-link: #4A772F;             /* Link in grün */
  --eb-link-hover: #2F4F2F;       /* dunkler beim Hover */
  --eb-link-visited: #4A772F;
  --eb-body-color: #1C1C1C;       /* fast schwarz, wie Außenkontur */
  --eb-body-bg: #F5F1EB;          /* heller warmer Hintergrund */
  --eb-bg-secondary: #DCD2C0;     /* heller Kontrast für Sektionen */
  --eb-bg-tertiary: #EAE3D6;
  --eb-heading-color: #4A772F;    /* Überschriften in grün */
  --eb-danger: #A82D2D;           /* dunkles Rot */
  --eb-border-color: #6A4D39;
  --eb-code-bg: #F5F1EB;
  --eb-code-border: #4A772F;
  --eb-success: #3B8B3B;          /* positives Grün */
  --eb-warning: #C19A2D;          /* goldgelber Ton */
  --eb-info: #5B7A91;             /* gedecktes Blau für Info */
}

/* ============================================================================
 * FARBSCHEMA: HOWUT Dark (Dunkles Natur/Outdoor-Theme)
 * ============================================================================ */
[data-theme="howut-dark"] {
  --eb-primary: #6A994E;          /* helleres Grün als Hauptfarbe für Kontrast auf dunklem Grund */
  --eb-primary-dark: #4A772F;     /* ursprüngliches Grün als dunklere Variante */
  --eb-secondary: #BFA78A;        /* heller Beigeton (beibehalten) */
  --eb-accent: #D4A574;           /* hellerer Braunton für besseren Kontrast */
  --eb-link: #8FBC8F;             /* helleres Grün für Links auf dunklem Hintergrund */
  --eb-link-hover: #A8D5A8;       /* noch helleres Grün beim Hover */
  --eb-link-visited: #8FBC8F;
  --eb-body-color: #E8E6E1;       /* helles Beige für Text (guter Kontrast) */
  --eb-body-bg: #1A1A14;          /* sehr dunkles Olivgrün als Hintergrund */
  --eb-bg-secondary: #2A2A20;     /* etwas helleres dunkles Olivgrün für Sektionen */
  --eb-bg-tertiary: #3A3A2A;      /* noch helleres dunkles Olivgrün */
  --eb-heading-color: #8FBC8F;    /* helles Grün für Überschriften */
  --eb-danger: #C74545;           /* helleres Rot für bessere Sichtbarkeit */
  --eb-border-color: #3A3A2A;     /* dezentes dunkles Olivgrün für Rahmen */
  --eb-code-bg: #2A2A20;          /* dunkler Code-Hintergrund */
  --eb-code-border: #6A994E;      /* grüner Rahmen für Code-Blöcke */
  --eb-success: #6A994E;          /* helleres Grün für Success */
  --eb-warning: #D4A574;          /* hellerer Goldton für Warnungen */
  --eb-info: #7A9AAB;             /* helleres Blau für Info */
}

/* ============================================================================
 * FARBSCHEMA 7: Trailrunner (Blau/Gelb – passend zum Charity‑Trailrun Logo)
 * ============================================================================ */
[data-theme="traylrunner"] {
  --eb-primary: #0078C8;        /* kräftiges Himmelblau – Logo-Hintergrund */
  --eb-primary-dark: #005389;   /* dunkleres Blau für Hover & Active */
  --eb-secondary: #5BB4E7;      /* helles Blau als Sekundärton */
  --eb-accent: #F2D915;         /* leuchtendes Gelb (Laufschuh & Rucksack) */
  --eb-link: #0078C8;           /* Links in Hauptfarbe */
  --eb-link-hover: #005389;     /* dunkleres Blau beim Hover */
  --eb-link-visited: #0078C8;   /* besuchte Links in Hauptfarbe */
  --eb-body-color: #1E2A32;     /* sehr dunkles Anthrazit, guter Kontrast */
  --eb-body-bg: #EAF7FF;        /* zartes Blau als Seiten‑Hintergrund */
  --eb-bg-secondary: #D1ECFF;   /* noch helleres Blau für Sektionen */
  --eb-bg-tertiary: #BDE3FF;    /* mittleres Hellblau für zusätzlichen Kontrast */
  --eb-heading-color: #0F3A56;  /* sattes Dunkelblau für Überschriften */
  --eb-danger: #E74C3C;         /* Standard Rot für Warnungen */
  --eb-border-color: #A8D5F8;   /* dezentes Rahmenblau */
  --eb-code-bg: #E3F4FF;        /* helles Blau für Code-Hintergrund */
  --eb-code-border: #0078C8;    /* Hauptfarbe für Code-Rahmen */
  --eb-success: #2ECC71;        /* Standard Grün für Erfolg */
  --eb-warning: #F2D915;        /* Gelb als Warnfarbe (Akzentfarbe) */
  --eb-info: #3498DB;           /* helles Informationsblau */
}

/* ============================================================================
 * FARBSCHEMA 8: Traylrunner Dark (Dunkles Blau/Gelb – passend zum Charity‑Trailrun Logo)
 * ============================================================================ */
[data-theme="traylrunner-dark"] {
  --eb-primary: #F2D915;        /* leuchtendes Gelb als Hauptfarbe (umgekehrt zum Light-Theme) */
  --eb-primary-dark: #D4BE0F;   /* dunkleres Gelb für Hover & Active */
  --eb-secondary: #5BB4E7;      /* helles Blau als Sekundärton (beibehalten) */
  --eb-accent: #0078C8;         /* kräftiges Blau als Akzentfarbe (umgekehrt zum Light-Theme) */
  --eb-link: #5BB4E7;           /* helleres Blau für bessere Lesbarkeit auf dunklem Grund */
  --eb-link-hover: #8CCDFF;     /* noch helleres Blau beim Hover */
  --eb-link-visited: #5BB4E7;   /* besuchte Links in hellblau */
  --eb-body-color: #E8F4FF;     /* sehr helles Blau für Text (guter Kontrast) */
  --eb-body-bg: #0F1A24;        /* sehr dunkles Blau als Hintergrund */
  --eb-bg-secondary: #162736;   /* etwas helleres dunkles Blau für Sektionen */
  --eb-bg-tertiary: #1D3347;    /* noch helleres dunkles Blau für zusätzlichen Kontrast */
  --eb-heading-color: #F2D915;  /* Gelb für Überschriften */
  --eb-danger: #E74C3C;         /* Standard Rot für Warnungen */
  --eb-border-color: #1D3347;   /* dezentes dunkles Blau für Rahmen */
  --eb-code-bg: #162736;        /* dunkler Code-Hintergrund */
  --eb-code-border: #F2D915;    /* gelber Rahmen für Code-Blöcke */
  --eb-success: #2ECC71;        /* Standard Grün für Erfolg */
  --eb-warning: #F2D915;        /* Gelb als Warnfarbe (gleich wie Hauptfarbe) */
  --eb-info: #5BB4E7;           /* helles Blau für Infos (gleich wie Link-Farbe) */
}

/* ============================================================================
 * FARBSCHEMA 9: Professional (Schlichte, professionelle Farbgebung)
 * ============================================================================ */
[data-theme="professional"] {
  --eb-primary: #3E6990;        /* gedecktes Blau als Hauptfarbe */
  --eb-primary-dark: #2A4D6E;   /* dunkleres Blau für Hover & Active */
  --eb-secondary: #7A9CB0;      /* helleres Blau als Sekundärton */
  --eb-accent: #B1624E;         /* dezentes Rot als Akzentfarbe */
  --eb-link: #3E6990;           /* Links in Hauptfarbe */
  --eb-link-hover: #2A4D6E;     /* dunkleres Blau beim Hover */
  --eb-link-visited: #3E6990;
  --eb-body-color: #333333;     /* dunkles Grau für Text */
  --eb-body-bg: #FFFFFF;        /* weißer Hintergrund */
  --eb-bg-secondary: #F5F7FA;   /* sehr helles Grau für Sektionen */
  --eb-bg-tertiary: #EDF2F7;    /* helleres Grau für Kontrast */
  --eb-heading-color: #2C3E50;  /* dunkles Blaugrau für Überschriften */
  --eb-danger: #E74C3C;         /* Standard Rot beibehalten */
  --eb-border-color: #D9E2EC;   /* helles Grau für Rahmen */
  --eb-code-bg: #F8FAFC;        /* sehr helles Grau für Code */
  --eb-code-border: #3E6990;    /* Hauptfarbe für Code-Rahmen */
  --eb-success: #2ECC71;        /* Standard Grün beibehalten */
  --eb-warning: #F39C12;        /* Standard Orange beibehalten */
  --eb-info: #3498DB;           /* Standard Info-Blau beibehalten */
}

/* ============================================================================
 * FARBSCHEMA 10: Professional Dark (Dunkle Version des Professional Themes)
 * ============================================================================ */
[data-theme="professional-dark"] {
  --eb-primary: #4A7AA8;        /* helleres Blau als Hauptfarbe für Kontrast auf dunklem Grund */
  --eb-primary-dark: #3E6990;   /* ursprüngliches Blau als dunklere Variante */
  --eb-secondary: #7A9CB0;      /* helleres Blau als Sekundärton (beibehalten) */
  --eb-accent: #C67C6D;         /* helleres Rot als Akzentfarbe für besseren Kontrast */
  --eb-link: #7A9CB0;           /* helleres Blau für Links auf dunklem Hintergrund */
  --eb-link-hover: #A8C3D6;     /* noch helleres Blau beim Hover */
  --eb-link-visited: #7A9CB0;   /* besuchte Links in hellblau */
  --eb-body-color: #E2E8F0;     /* helles Grau für Text (guter Kontrast) */
  --eb-body-bg: #1A202C;        /* dunkles Blaugrau als Hintergrund */
  --eb-bg-secondary: #2D3748;   /* etwas helleres dunkles Blaugrau für Sektionen */
  --eb-bg-tertiary: #3A4A61;    /* noch helleres dunkles Blaugrau für zusätzlichen Kontrast */
  --eb-heading-color: #A8C3D6;  /* helles Blau für Überschriften */
  --eb-danger: #E74C3C;         /* Standard Rot für Warnungen */
  --eb-border-color: #3A4A61;   /* dezentes dunkles Blaugrau für Rahmen */
  --eb-code-bg: #2D3748;        /* dunkler Code-Hintergrund */
  --eb-code-border: #4A7AA8;    /* blaue Hauptfarbe für Code-Rahmen */
  --eb-success: #2ECC71;        /* Standard Grün für Erfolg */
  --eb-warning: #F39C12;        /* Standard Orange für Warnungen */
  --eb-info: #7A9CB0;           /* helleres Blau für Infos (gleich wie Link-Farbe) */
}

/* ============================================================================
 * Theme Switcher UI Komponenten
 * ============================================================================ */
.theme-switcher {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 9999;
  background: var(--eb-body-bg);
  border: 2px solid var(--eb-primary);
  border-radius: 10px;
  padding: 15px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

/* Versteckter Theme-Switcher - nur Symbol anzeigen */
.theme-switcher.hidden {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  padding: 0;
  overflow: hidden;
  transform: scale(0.9);
  opacity: 0.8;
}

.theme-switcher.hidden h4,
.theme-switcher.hidden .theme-options {
  display: none;
}

.theme-switcher:hover {
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
  transform: translateY(-2px);
}

.theme-switcher h4 {
  margin: 0 0 10px 0;
  color: var(--eb-heading-color);
  font-size: 14px;
  font-weight: bold;
  text-align: center;
}

.theme-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.theme-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border: 1px solid var(--eb-border-color);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  background: var(--eb-body-bg);
}

.theme-option:hover {
  background: var(--eb-bg-secondary);
  border-color: var(--eb-primary);
}

.theme-option.active {
  background: var(--eb-primary);
  color: white;
  border-color: var(--eb-primary-dark);
}

.theme-color-preview {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.theme-option-label {
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
}

/* Farbvorschauen für die verschiedenen Themes */
.theme-option[data-theme="professional"] .theme-color-preview {
  background: linear-gradient(45deg, #3E6990 50%, #FFFFFF 50%);
}

.theme-option[data-theme="professional-dark"] .theme-color-preview {
  background: linear-gradient(45deg, #4A7AA8 50%, #1A202C 50%);
}

.theme-option[data-theme="ocean-blue"] .theme-color-preview {
  background: linear-gradient(135deg, #3498DB 50%, #00BFFF 50%);
}

.theme-option[data-theme="orange-coral"] .theme-color-preview {
  background: linear-gradient(45deg, #F07058 50%, #8f4335 50%);
}

.theme-option[data-theme="forest-green"] .theme-color-preview {
  background: linear-gradient(45deg, #27AE60 50%, #1E8449 50%);
}

.theme-option[data-theme="royal-purple"] .theme-color-preview {
  background: linear-gradient(45deg, #8E44AD 50%, #6C3483 50%);
}

.theme-option[data-theme="midnight-dark"] .theme-color-preview {
  background: linear-gradient(45deg, #E67E22 50%, #2C3E50 50%);
}

.theme-option[data-theme="bvb-dortmund"] .theme-color-preview {
  background: linear-gradient(45deg, #000000 50%, #FDE100 50%);
}

.theme-option[data-theme="bvb-dortmund-dark"] .theme-color-preview {
  background: linear-gradient(45deg, #FDE100 50%, #000000 50%);
}

.theme-option[data-theme="howut"] .theme-color-preview {
  background: linear-gradient(45deg, #8B4513 50%, #654321 50%);
}

.theme-option[data-theme="howut-dark"] .theme-color-preview {
  background: linear-gradient(45deg, #6A994E 50%, #1A1A14 50%);
}

.theme-option[data-theme="traylrunner"] .theme-color-preview {
  background: linear-gradient(45deg, #0078C8 50%, #F2D915 50%);
}

.theme-option[data-theme="traylrunner-dark"] .theme-color-preview {
  background: linear-gradient(45deg, #F2D915 50%, #0F1A24 50%);
}

/* Responsive Design für mobile Geräte */
@media (max-width: 768px) {
  .theme-switcher {
    top: 10px;
    right: 10px;
    padding: 10px;
    transform: scale(0.9);
  }
  
  .theme-options {
    gap: 6px;
  }
  
  .theme-option {
    padding: 6px 8px;
  }
  
  .theme-color-preview {
    width: 16px;
    height: 16px;
  }
  
  .theme-option-label {
    font-size: 11px;
  }
}

/* Smooth Transitions für Theme-Wechsel */
* {
  transition: background-color 0.3s ease, color 0.1s ease, border-color 0.9s ease;
}

/* ============================================================================
 * Universelles Card‑Heading Styling für alle Themes
 * ============================================================================ */
[data-theme] .card-heading,
[data-theme] .card-heading-transparent {
  background-color: var(--eb-primary) !important;
  color: var(--eb-body-bg) !important;
}

[data-theme] .card-heading h2,
[data-theme] .card-heading .card-title {
  color: var(--eb-body-bg) !important;
}

/* ============================================================================
 * Callout-Pfeil Anpassungen für alle Themes
 * ============================================================================ */

/* Callout-Dark Pfeil nach unten - soll immer die Hintergrundfarbe des Callouts haben */
.callout-dark.heading-arrow-bottom:after {
  border-top-color: var(--eb-bg-secondary, #252525) !important;
}

/* Callout-Dark Pfeil nach oben - soll immer die Hintergrundfarbe des Callouts haben */
.callout-dark.heading-arrow-top:after {
  border-bottom-color: var(--eb-bg-secondary, #252525) !important;
}

/* ============================================================================
 * Callout-Dark Bereiche für alle Themes
 * ============================================================================ */

/* Universal Callout‑Dark Styles – greifen ausschließlich auf CSS‑Variablen zu */
.callout-dark,
section.callout-dark{
  background-color: var(--eb-bg-secondary) !important;
  color: var(--eb-body-color) !important;
}

.callout-dark h1,
.callout-dark h2,
.callout-dark h3,
.callout-dark h4,
.callout-dark h5,
.callout-dark h6{
  color: var(--eb-heading-color) !important;
}

.callout-dark p{
  color: var(--eb-body-color) !important;
}

/* ============================================================================
 * Universelle Wrapper-Container für alle Themes
 * ============================================================================ */
/* Universeller Wrapper-Container für alle Themes */


/* Sekundäre Elemente mit transparentem Hintergrund */
:is(
  section,
  .section
) {
  background-color: transparent !important;
  color: var(--eb-body-color) !important;
}


/* ============================================================================
 * Universelle Header-Anpassungen für alle Themes
 * ============================================================================ */
#header {
  background-color: var(--eb-body-bg) !important;
  border-bottom: 2px solid var(--eb-primary);
}

#topNav {
  background-color: var(--eb-body-bg) !important;
}

#topBar {
  background-color: var(--eb-bg-secondary) !important;
  color: var(--eb-body-color) !important;
}


/* Navigation-Links für midnight-dark */
[data-theme="midnight-dark"] .nav-main a,
[data-theme="midnight-dark"] .nav-pills a,
[data-theme="midnight-dark"] .top-links a {
  color: var(--eb-primary) !important;
}

[data-theme="midnight-dark"] .nav-main a:hover,
[data-theme="midnight-dark"] .nav-pills a:hover,
[data-theme="midnight-dark"] .top-links a:hover {
  color: var(--eb-link-hover) !important;
}

[data-theme="midnight-dark"] .theme-switcher {
  background: var(--eb-bg-secondary);
  border-color: var(--eb-primary);
}

[data-theme="midnight-dark"] .theme-option {
  background: var(--eb-body-bg);
  color: var(--eb-body-color);
}

[data-theme="midnight-dark"] .theme-option:hover {
  background  : var(--eb-bg-secondary);
}

/* Footer komplett midnight-dark Theme */
[data-theme="midnight-dark"] footer,
[data-theme="midnight-dark"] .footer,
[data-theme="midnight-dark"] #footer {
  background: var(--eb-body-bg) !important;
  background-color: var(--eb-body-bg) !important;
  background-image: none !important;
  color: var(--eb-body-color) !important;
  border-top: 2px solid var(--eb-primary) !important;
}

/* Footer Copyright-Bereich für midnight-dark */
[data-theme="midnight-dark"] #footer > .copyright {
  background-color: var(--eb-body-bg) !important;
  color: var(--eb-body-color) !important;
}

/* Header-Anpassungen für BVB - werden entfernt, da universelle Regel */
/* Navigation-Links für BVB Dark */
[data-theme="bvb-dortmund-dark"] .nav-main a,
[data-theme="bvb-dortmund-dark"] .nav-pills a,
[data-theme="bvb-dortmund-dark"] .top-links a {
  color: var(--eb-primary) !important;
}

[data-theme="bvb-dortmund-dark"] .nav-main a:hover,
[data-theme="bvb-dortmund-dark"] .nav-pills a:hover,
[data-theme="bvb-dortmund-dark"] .top-links a:hover {
  color: var(--eb-link-hover) !important;
}

[data-theme="bvb-dortmund-dark"] .theme-switcher {
  background: var(--eb-bg-secondary);
  border-color: var(--eb-primary);
}

[data-theme="bvb-dortmund-dark"] .theme-option {
  background: var(--eb-body-bg);
  color: var(--eb-body-color);
}

[data-theme="bvb-dortmund-dark"] .theme-option:hover {
  background: var(--eb-bg-secondary);
}

[data-theme="bvb-dortmund-dark"] .theme-option.active {
  background: var(--eb-primary);
  color: #000000;
}

/* Icon-Anpassungen für BVB Dark Theme */
[data-theme="bvb-dortmund-dark"] .event-card--program .event-card__icon {
  color: #000000 !important; /* Schwarzer Pokal für besseren Kontrast */
}

[data-theme="bvb-dortmund-dark"] .event-card--program .fa-trophy {
  color: #000000 !important; /* Schwarzer Pokal für besseren Kontrast */
}

/* Vollständige Layout-Abdeckung für BVB Dark Theme */
[data-theme="bvb-dortmund-dark"] body,
[data-theme="bvb-dortmund-dark"] html {
  background-color: var(--eb-body-bg) !important;
  color: var(--eb-body-color) !important;
}

/* Footer komplett BVB Dark Theme */
[data-theme="bvb-dortmund-dark"] footer,
[data-theme="bvb-dortmund-dark"] .footer,
[data-theme="bvb-dortmund-dark"] #footer {
  background: var(--eb-body-bg) !important;
  background-color: var(--eb-body-bg) !important;
  background-image: none !important;
  color: var(--eb-body-color) !important;
  border-top: 2px solid var(--eb-primary) !important;
}

/* Footer Copyright-Bereich für BVB Dark */
[data-theme="bvb-dortmund-dark"] #footer > .copyright {
  background-color: var(--eb-body-bg) !important;
  color: var(--eb-body-color) !important;
}

/* Icon-Anpassungen für BVB Theme */
[data-theme="bvb-dortmund"] .event-card--program .event-card__icon {
  color: white !important; /* Weißer Pokal für besseren Kontrast auf schwarzem Grund */
}

[data-theme="bvb-dortmund"] .event-card--program .fa-trophy {
  color: white !important; /* Weißer Pokal für besseren Kontrast auf schwarzem Grund */
}


/* ============================================================================
 * Verzeichnisbaum - Bearbeiten-Icons in Linkfarbe
 * ============================================================================ */

/* Icons in Action-Buttons des Verzeichnisbaums - allgemeine Regel */
.action-buttons button i,
.action-buttons a button i {
  color: var(--eb-link) !important;
}

.action-buttons button:hover i,
.action-buttons a:hover button i {
  color: var(--eb-link-hover) !important;
}

/* Spezifische Icons für verschiedene Aktionen */
.action-buttons [class*="fa-"] {
  color: var(--eb-link) !important;
}

.action-buttons button:hover [class*="fa-"] {
  color: var(--eb-link-hover) !important;
}

/* Hover-Effekte für Verzeichnisbaum-Elemente */
.tree-header:hover,
.article-content:hover {
  background-color: var(--eb-bg-tertiary) !important;
  border-radius: 4px;
  border: 1px solid var(--eb-border-color) !important;
}

/* Buttons im Verzeichnisbaum */
.directory-tree button:hover {
  background-color: var(--eb-bg-secondary) !important;
}

/* =============================================================================
 * Icons und Optionen Theme-Integration
 * ============================================================================ */

/* Options-Icons in der LinkFarbe */
.fa, .fas, .far, .fab, .fal {
  color: var(--eb-link) !important;
}

/* Hover-Zustand für Icons */
.fa:hover, .fas:hover, .far:hover, .fab:hover, .fal:hover,
a:hover .fa, a:hover .fas, a:hover .far, a:hover .fab, a:hover .fal {
  color: var(--eb-link-hover) !important;
}

/* Spezielle Icon-Anpassungen */
.btn .fa, .btn .fas, .btn .far, .btn .fab, .btn .fal {
  color: inherit !important; /* Buttons behalten ihre eigene Farbe */
}

/* Table Action Icons */
td .fa, td .fas, td .far, td .fab, td .fal,
th .fa, th .fas, th .far, th .fab, th .fal {
  color: var(--eb-link) !important;
}

td a:hover .fa, td a:hover .fas, td a:hover .far, td a:hover .fab, td a:hover .fal,
th a:hover .fa, th a:hover .fas, th a:hover .far, th a:hover .fab, th a:hover .fal {
  color: var(--eb-link-hover) !important;
}

/* ============================================================================
 * Switch Primary Color Override
 * Stellt sicher, dass alle Switcher mit switch-primary Klasse die primary-Farbe verwenden
 * Überschreibt Standard-Farbschema-Dateien durch korrekte Ladereihenfolge
 * ============================================================================ */

/* Standard Switch Primary - wird nach orange.css geladen und überschreibt es */
.switch.switch-primary > input:checked + .switch-label,
.switch.switch-primary.switch-round > input:checked + .switch-label {
    background-color: var(--eb-primary);
    border-color: var(--eb-primary);
}

/* Runder Switch Primary - Punkt-Farbe */
.switch-primary.switch-round > input:checked + .switch-label:after {
    color: var(--eb-primary);
}

/* Fallback für Browser ohne CSS-Variablen */
:root .switch.switch-primary > input:checked + .switch-label,
:root .switch.switch-primary.switch-round > input:checked + .switch-label {
    background-color: #F07058;
    border-color: #F07058;
}

:root .switch-primary.switch-round > input:checked + .switch-label:after {
    color: #F07058;
} 

/* =============================================================================
 * body
 * ========================================================================== */
 body {
	color: var(--eb-body-color);
	font-size: 16px;
	font-family: 'Source Sans Pro', sans-serif;
	line-height: 1.5;
	font-weight: normal;
	position: relative;
}

/* =============================================================================
 * font classes
 * ========================================================================== */

.font_serif_2 {
	font-family: 'Playfair Display', Georgia, Times, serif;
}

/* =============================================================================
 * headlines
 * ========================================================================== */

h1, h2, h3, h4, h5, h6 {
	margin-bottom: 25px;
	line-height: 1.3;
	color: var(--eb-heading-color);
	word-wrap: break-word;
}

h1 {
	font-size: 45px;
	padding-top: 0;
}

h2 {
	font-size: 35px;
}

h3 {
	font-size: 28px;
}

h4 {
	font-size: 25px;
}

h5 {
	font-size: 20px;
}

h6 {
	font-size: 18px;
}

h1, .heading-1 {
	font-size: 27px;
	color: var(--eb-heading-color);
}

/* =============================================================================
 * Heikos Abschnitt
 * ========================================================================== */

/* -------------------------------------------------
 * Globale Button-Variablen (Duplikate vermeiden)
 * ------------------------------------------------- */
:root {
  --btn-text-color: var(--eb-body-bg);
}

[data-theme="bvb-dortmund"] {
  --btn-text-color: #000000; /* Schwarzer Text */
}

[data-theme="midnight-dark"] {
  --btn-text-color: #ffffff; /* Weißer Text */
}

a:link {
	color: var(--eb-link);
	text-decoration:none;
}
a:visited {
	color: var(--eb-link-visited);
	text-decoration:none;
}
a:active {
	color: var(--eb-link-hover);
	text-decoration:none;
}
a:hover {
	color: var(--eb-link-hover);
	text-decoration:none;
}

body {
      background-color: var(--eb-body-bg);
      margin: 0; /* Entfernt Standard-Margin */
      padding: 0; /* Entfernt Standard-Padding */
    }

.btn-primary {
  color: var(--btn-text-color);
  background-color: var(--eb-primary);
  border-color: var(--eb-primary);
}

.btn-primary:hover {
  color: var(--btn-text-color);
  background-color: var(--eb-primary-dark);
  border-color: var(--eb-primary-dark);
}

.btn-primary:focus, .btn-primary.focus {
  box-shadow: 0 0 0 0.2rem var(--eb-primary-dark);
}

.btn-primary.disabled, .btn-primary:disabled {
  color: var(--btn-text-color);
  background-color: var(--eb-primary);
  border-color: var(--eb-primary);
}

.btn-primary:not(:disabled):not(.disabled):active, .btn-primary:not(:disabled):not(.disabled).active,
.show > .btn-primary.dropdown-toggle {
  color: var(--btn-text-color);
  background-color: var(--eb-primary-dark);
  border-color: var(--eb-primary-dark);
}

.btn-primary:not(:disabled):not(.disabled):active:focus, .btn-primary:not(:disabled):not(.disabled).active:focus,
.show > .btn-primary.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem var(--eb-primary-dark);
}

.btn-outline-primary {
  color: var(--eb-primary);
  background-color: transparent;
  background-image: none;
  border-color: var(--eb-primary);
}

.btn-outline-primary:hover {
  color: var(--eb-body-bg);
  background-color: var(--eb-primary);
  border-color: var(--eb-primary);
}

.btn-outline-primary:focus, .btn-outline-primary.focus {
  box-shadow: 0 0 0 0.2rem var(--eb-primary-dark);
}

.btn-outline-primary.disabled, .btn-outline-primary:disabled {
  color: var(--eb-primary);
  background-color: transparent;
}

.btn-outline-primary:not(:disabled):not(.disabled):active, .btn-outline-primary:not(:disabled):not(.disabled).active,
.show > .btn-outline-primary.dropdown-toggle {
  color: var(--eb-body-bg);
  background-color: var(--eb-primary);
  border-color: var(--eb-primary);
}

.btn-outline-primary:not(:disabled):not(.disabled):active:focus, .btn-outline-primary:not(:disabled):not(.disabled).active:focus,
.show > .btn-outline-primary.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem var(--eb-primary-dark);
}

/* =============================================================================
 * Bootstrap Card Theme-Integration
 * ========================================================================== */

/* Card Basis-Styling mit Theme-Variablen */
.card {
  background-color: var(--eb-bg-secondary, #fff) !important;
  border: 1px solid var(--eb-primary, #dee2e6) !important;
  color: var(--eb-body-color, #212529) !important;
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
  transition: all 0.3s ease;
}

.card:hover {
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
  border-color: var(--eb-primary-dark, var(--eb-primary, #dee2e6)) !important;
}

/* Card Header */
.card-header {
  background-color: var(--eb-primary, #f8f9fa) !important;
  color: var(--eb-body-bg, #212529) !important;
  border-bottom: 1px solid var(--eb-primary-dark, var(--eb-primary, #dee2e6)) !important;
  padding: 0.75rem 1.25rem;
  margin-bottom: 0;
  font-weight: 500;
}

/* Card Body */
.card-body {
  background-color: var(--eb-bg-secondary, #fff) !important;
  color: var(--eb-body-color, #212529) !important;
  padding: 1.25rem;
}

/* Card Footer */
.card-footer {
  background-color: var(--eb-body-bg, #f8f9fa) !important;
  color: var(--eb-body-color, #6c757d) !important;
  border-top: 1px solid var(--eb-primary, #dee2e6) !important;
  padding: 0.75rem 1.25rem;
}

/* Card Title */
.card-title {
  color: var(--eb-body-color, #212529) !important;
  margin-bottom: 0.75rem;
}

/* Card Text */
.card-text {
  color: var(--eb-body-color, #212529) !important;
}

/* Card Links */
.card-link {
  color: var(--eb-primary, #007bff) !important;
}

.card-link:hover {
  color: var(--eb-primary-dark, var(--eb-primary, #0056b3)) !important;
  text-decoration: none;
}

/* Spezielle Anpassungen für dunkle Themes */
[data-theme="midnight-dark"] .card,
[data-theme="bvb-dortmund"] .card {
  box-shadow: 0 0.125rem 0.25rem rgba(255, 255, 255, 0.1);
}

[data-theme="midnight-dark"] .card:hover,
[data-theme="bvb-dortmund"] .card:hover {
  box-shadow: 0 0.5rem 1rem rgba(255, 255, 255, 0.2);
}

/* Card Group Anpassungen */
.card-group > .card {
  border-color: var(--eb-primary, #dee2e6) !important;
}

/* Card Deck Anpassungen */
.card-deck .card {
  background-color: var(--eb-bg-secondary, #fff) !important;
}

/* List Group in Cards */
.card .list-group-item {
  background-color: var(--eb-bg-secondary, #fff) !important;
  color: var(--eb-body-color, #212529) !important;
  border-color: var(--eb-primary, #dee2e6) !important;
}

.card .list-group-item:hover {
  background-color: var(--eb-body-bg, #f8f9fa) !important;
}

/* Explizite Wiederherstellung der Statistik-Box-Farben */
.box-gray > div:nth-child(1) {
  background-color: #333333 !important;
}
.box-gray > div:nth-child(2) {
  background-color: #4a4a4a !important;
}
.box-gray > div:nth-child(3) {
  background-color: #5f5f5f !important;
}
.box-gray > div:nth-child(4) {
  background-color: #797979 !important;
}

/* =============================================================================
 * Tabellen Theme-Integration
 * ========================================================================== */

/* Standard Tabellen */
.table {
  background-color: var(--eb-bg-secondary, #fff) !important;
  color: var(--eb-body-color, #212529) !important;
}

.table th {
  background-color: var(--eb-primary, #f8f9fa) !important;
  color: var(--eb-body-bg, #212529) !important;
  border-color: var(--eb-primary-dark, #dee2e6) !important;
}

.table td {
  background-color: var(--eb-bg-secondary, #fff) !important;
  color: var(--eb-body-color, #212529) !important;
  border-color: var(--eb-primary, #dee2e6) !important;
}

.table-striped tbody tr:nth-of-type(odd) {
  background-color: var(--eb-body-bg, #f8f9fa) !important;
}

.table-hover tbody tr:hover {
  background-color: var(--eb-primary, #f5f5f5) !important;
  color: var(--eb-body-bg, #212529) !important;
}

/* Import wird im Template direkt geladen */

/*
Eigene Eventbuchspezifische CSS
*/

/*Tabellen by Heiko*/
.table_with_border
{
border: 1px solid var(--eb-border-color);
background: var(--eb-bg-secondary);
font-size:100%;
}

.table_without_border
{
border: 0px solid var(--eb-border-color);
font-size:100%;
}
.head_left {
font-weight:bold;
border-bottom: 1px solid var(--eb-border-color);
border-right: 1px solid var(--eb-border-color);
padding: 3px 0px 5px 5px; /*top right bottom left*/
vertical-align:top;
}

.head_middle {
font-weight:bold;
vertical-align:top;
border-bottom: 1px solid var(--eb-border-color);
border-right: 1px solid var(--eb-border-color);
padding: 3px 0px 5px 5px; /*top right bottom left*/
}

.head_right {
font-weight:bold;
vertical-align:top;
border-bottom: 1px solid var(--eb-border-color);
padding: 3px 5px 5px 5px; /*top right bottom left*/
}

.column_left {
border-right: 1px solid var(--eb-border-color);
vertical-align:top;
padding: 7px 2px 7px 5px; /*top right bottom left*/
}
.column_left_bold {
font-weight:bold;
border-right: 1px solid var(--eb-border-color);
vertical-align:top;
padding: 5px 2px 0px 5px; /*top right bottom left*/
}

.column_middle {
border-right: 1px solid var(--eb-border-color);
vertical-align:top;
padding: 5px 2px 7px 5px; /*top right bottom left*/
}

.column_middle_bold {
font-weight:bold;
border-right: 1px solid var(--eb-border-color);
vertical-align:top;
padding: 5px 2px 0px 5px; /*top right bottom left*/
}

.column_right {
vertical-align:top;
padding: 5px 2px 7px 5px; /*top right bottom left*/
}

.column_right_center {
padding: 5px 2px 7px 5px; /*top right bottom left*/
text-align:center;
vertical-align:top;
}

.unten {
background: var(--eb-bg-secondary);
border:solid var(--eb-border-color);
border-width: 0px 0px 1px 0px; /*top right bottom left*/
padding: 0px 0px 0px 0px; /*top right bottom left*/
}

hr {
	
}

.code-example {
	background-color: var(--eb-code-bg);
	border-left: 3px solid var(--eb-code-border);
	padding: 10px;
	margin: 20px 0;
	overflow: auto;
	font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', monospace;
	font-size: 14px;
	border-radius: 4px;
}

/* Universelle Inline-Code Klasse für das gesamte Eventbuch-System */
code:not(.conversation code) {
	background-color: var(--eb-code-bg);
	color: var(--eb-body-color);
	padding: 2px 6px;
	border-radius: 3px;
	font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', monospace;
	font-size: 0.9em;
	border: 1px solid var(--eb-code-border);
}

.custom-container-no-padding {
  max-width: 1480px;
  margin: -40px auto 0; /* Verschiebt das Element um 10px nach oben */
  padding: 0;
  box-sizing: border-box;
  background-color: var(--eb-body-bg); /* Setzt die Hintergrundfarbe des Containers auf weiß */
}

.custom-container {
    max-width: 14800px;
    margin: 20px auto 0 auto; /* Abstand oben (20px), zentriert horizontal */
    padding: 10px;
    box-sizing: border-box;
    background-color: var(--eb-body-bg);
}

.button-container {
    max-width: 1480px;            /* Maximale Breite des Containers, beschränkt auf 1440px */
    margin: 0 auto;               /* Zentriert den Container horizontal durch automatischen linken und rechten Außenabstand */
    padding: 0px;                 /* Kein innerer Rand innerhalb des Containers */
    box-sizing: border-box;       /* Sorgt dafür, dass Padding und Border zur Gesamtbreite des Elements gezählt werden */
    background-color: var(--eb-body-bg);      /* Setzt die Hintergrundfarbe des Containers auf weiß */
    
    display: flex;                /* Verwendet Flexbox, um ein flexibles Layout zu erstellen */
    flex-wrap: wrap;              /* Optional: Elemente werden umgebrochen, wenn sie den verfügbaren Platz überschreiten */
    gap: 10px;                    /* Fügt einen Abstand von 10 Pixeln zwischen den Elementen hinzu */
    /* justify-content: space-around;  Zentriert die Elemente und fügt Platz zwischen ihnen hinzu, vorübergehend deaktiviert */
    flex-grow: 1;                 /* Erlaubt jedem Element, den verfügbaren Platz gleichmäßig zu nutzen */
    flex-basis: 0;                /* Startet mit einer Basisbreite von 0, um den Platz gleichmäßig zu verteilen */
}

/* =============================================================================
 * Eventbuch Navigation System - UI/UX Components
 * ========================================================================== */

/* Breadcrumb Navigation */
.eb-breadcrumb {
    margin-bottom: 1.5rem;
}

.eb-breadcrumb .breadcrumb {
    background-color: var(--eb-bg-tertiary);
    border-radius: 8px;
    padding: 12px 16px;
    margin-bottom: 0;
    border: 1px solid var(--eb-border-color);
}

.eb-breadcrumb .breadcrumb-item {
    font-size: 14px;
    font-weight: 500;
}

.eb-breadcrumb .breadcrumb-item a {
    color: var(--eb-link);
    text-decoration: none;
    transition: color 0.2s ease;
}

.eb-breadcrumb .breadcrumb-item a:hover {
    color: var(--eb-link-hover);
}

.eb-breadcrumb .breadcrumb-item.active {
    color: var(--eb-body-color);
    font-weight: 600;
}

.eb-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
    color: var(--eb-border-color);
    content: "/";
    margin: 0 8px;
}

/* Event Card System - Konsistentes Design für Termine, Programme und Preise */
.event-card {
    background: var(--eb-body-bg);
    border: 1px solid var(--eb-border-color);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.event-card:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    transform: translateY(-2px);
    border-color: var(--eb-primary);
}

/* Event Card Status Modifier */
.event-card--upcoming {
    /* Standard Design - keine zusätzlichen Styles nötig */
}

.event-card--past {
    opacity: 0.75;
    background: var(--eb-bg-tertiary);
}

.event-card--past .event-card__title {
    color: var(--eb-body-color);
    opacity: 0.8;
}

.event-card--cancelled {
    background: var(--eb-bg-tertiary);
    border-color: var(--eb-danger);
    border-width: 2px;
}

.event-card--cancelled::before {
    content: "ABGESAGT";
    position: absolute;
    top: 10px;
    right: 10px;
    background: var(--eb-danger);
    color: white;
    padding: 4px 8px;
    font-size: 10px;
    font-weight: bold;
    border-radius: 4px;
    z-index: 1;
}

/* Event Card Header */
.event-card__header {
    display: flex;
    align-items: flex-start;
    margin-bottom: 16px;
    gap: 12px;
}

.event-card__icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    background: var(--eb-primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 18px;
}

.event-card__title-section {
    flex-grow: 1;
    min-width: 0;
}

.event-card__event-name {
    font-size: 12px;
    font-weight: 500;
    color: var(--eb-primary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}

.event-card__title {
    font-size: 20px;
    font-weight: 700;
    color: var(--eb-heading-color);
    margin: 0;
    line-height: 1.3;
    word-wrap: break-word;
}

/* Event Card Content */
.event-card__content {
    margin-bottom: 20px;
}

.event-card__meta {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.event-card__meta-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: var(--eb-body-color);
}

.event-card__meta-icon {
    width: 16px;
    color: var(--eb-primary);
    flex-shrink: 0;
}

.event-card__meta-value {
    font-weight: 500;
}

/* Event Card Actions */
.event-card__actions {
    display: flex;
    gap: 12px;
    justify-content: space-between;
    align-items: center;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .event-card {
        padding: 16px;
        margin-bottom: 16px;
    }
    
    .event-card__header {
        margin-bottom: 12px;
    }
    
    .event-card__title {
        font-size: 18px;
    }
    
    .event-card__actions {
        flex-direction: column;
        gap: 8px;
    }
    
    .event-card__actions .eb-btn {
        width: 100%;
        text-align: center;
    }
}

/* Event Cards Grid Container */
.eb-navigation-container {
    width: 100%;
}

.event-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

@media (min-width: 768px) {
    .event-cards-grid {
        grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    }
}

@media (min-width: 1200px) {
    .event-cards-grid {
        grid-template-columns: repeat(auto-fit, minmax(450px, 1fr));
    }
}

/* Eventbuch Button System */
.eb-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 20px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    border-radius: 8px;
    border: 2px solid transparent;
    transition: all 0.2s ease;
    cursor: pointer;
    min-height: 44px; /* Touch-freundlich */
    box-sizing: border-box;
}

.eb-btn:hover {
    text-decoration: none;
    transform: translateY(-1px);
}

.eb-btn:active {
    transform: translateY(0);
}

.eb-btn i {
    font-size: 16px;
}

/* Button Variants */
.eb-btn--show {
    background: transparent;
    border-color: var(--eb-primary);
    color: var(--eb-primary);
}

.eb-btn--show:hover {
    background: var(--eb-primary);
    color: var(--eb-body-bg);
}

.eb-btn--edit {
    background: transparent;
    border-color: var(--eb-accent);
    color: var(--eb-accent);
}

.eb-btn--edit:hover {
    background: var(--eb-accent);
    color: var(--eb-body-bg);
}

.eb-btn--delete {
    background: transparent;
    border-color: var(--eb-danger);
    color: var(--eb-danger);
}

.eb-btn--delete:hover {
    background: var(--eb-danger);
    color: var(--eb-body-bg);
}

.eb-btn.eb-btn--primary {
    background: var(--eb-primary) !important;
    border-color: var(--eb-accent) !important;
    color: var(--eb-body-bg) !important;
}

.eb-btn.eb-btn--primary:hover {
    background: var(--eb-primary-dark) !important;
    border-color: var(--eb-accent) !important;
    color: var(--eb-body-bg) !important;
}

.eb-btn--secondary {
    background: transparent;
    border-color: var(--eb-border-color);
    color: var(--eb-body-color);
}

.eb-btn--secondary:hover {
    background: var(--eb-bg-tertiary);
    border-color: var(--eb-body-color);
    color: var(--eb-body-color);
}

/* Button Sizes */
.eb-btn--small {
    padding: 8px 12px;
    font-size: 12px;
    min-height: 36px;
}

.eb-btn--large {
    padding: 16px 24px;
    font-size: 16px;
    min-height: 52px;
}

/* Button Block (Full Width) */
.eb-btn--block {
    width: 100%;
    display: flex;
}

/* Button Group for Actions */
.eb-btn-group {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

@media (max-width: 768px) {
    .eb-btn-group {
        flex-direction: column;
    }
    
    .eb-btn-group .eb-btn {
        width: 100%;
    }
}

/* Button Icon Color Fix - Nur für spezifische Button-Kontexte */
/* Sorgt dafür dass Icons in Buttons die gleiche Farbe wie der Button-Text haben */

/* Legacy Button System */
button:not(.box-gradient button) i,
a button:not(.box-gradient button) i,
.btn:not(.box-gradient .btn) i {
    color: inherit !important;
}

/* Moderne Eventbuch Buttons - Icon Color Fix */
.eb-btn i,
.eb-btn i.fa,
.eb-btn i[class*="fa-"],
.eb-btn--primary i,
.eb-btn--primary i.fa,
.eb-btn--primary i[class*="fa-"],
a.eb-btn i,
a.eb-btn i.fa,
a.eb-btn i[class*="fa-"] {
    color: inherit !important;  
}

/* FontAwesome spezifische Icon Farbe in Buttons */
.eb-btn i:before,
.eb-btn i.fa:before,
.eb-btn--primary i:before,
.eb-btn--primary i.fa:before,
a.eb-btn i:before,
a.eb-btn i.fa:before {
    color: inherit !important;
}

/* Direkte Ansprache für die Calendar-Icons */
.eb-btn .fa-calendar:before,
.eb-btn--primary .fa-calendar:before,
a.eb-btn .fa-calendar:before {
    color: currentColor !important;
}

/* Event Card Icon Color Fix - Gleiche Lösung wie für Buttons */
/* Sorgt dafür dass Icons in Event-Card-Icons die richtige Farbe haben */

.event-card__icon i,
.event-card__icon i.fa,
.event-card__icon i[class*="fa-"] {
    color: inherit !important;
}

/* FontAwesome spezifische Icon Farbe in Event-Card-Icons */
.event-card__icon i:before,
.event-card__icon i.fa:before {
    color: inherit !important;
}

/* Direkte Ansprache für alle FontAwesome Icons in Event-Card-Icons */
.event-card__icon .fa-calendar:before,
.event-card__icon .fa-trophy:before,
.event-card__icon .fa:before,
.event-card__icon [class*="fa-"]:before {
    color: currentColor !important;
}

/* Spezielle Icon-Farben für dunkle Themes */
/* Bei dunklen Themes sollen Icons in Hintergrundfarbe sein für besseren Kontrast */
[data-theme="midnight-dark"] .event-card__icon,
[data-theme="bvb-dortmund"] .event-card__icon {
    color: var(--eb-body-bg) !important;
}

.seitenleiste h2 {
  font-size: 16px;
  color: var(--eb-heading-color);
}


/* =============================================================================
 * Responsive Images
 * ========================================================================== */
 .img-fluid {
  background-color: transparent !important;
  max-width: 100%;
  height: auto;
}

/* Theme-Toggle-Button */
.theme-toggle-btn {
  position: fixed;
  top: 20px;
  right: 20px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--eb-primary);
  color: var(--eb-body-bg);
  border: 2px solid var(--eb-body-bg);
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10000;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.theme-toggle-btn:hover {
  transform: scale(1.1);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

/* =============================================================================
 * Hall-Of-Fame Tab Navigation Styling
 * ========================================================================== */

/* Medal Badges */
.badge-gold {
    background-color: #FFD700;
    color: #000;
}
.badge-silver {
    background-color: #C0C0C0;
    color: #000;
}
.badge-bronze {
    background-color: #CD7F32;
    color: #fff;
}

/* Responsive Badge Größe */
@media (max-width: 768px) {
    .badge {
        font-size: 80%;
    }
}

/* Hall of Fame Tab Navigation */
.hall-of-fame-tabs .nav-tabs {
    border-bottom: 2px solid var(--eb-primary);
}

.hall-of-fame-tabs .nav-link {
    color: var(--eb-body-color);
    font-weight: 500;
    padding: 12px 16px;
    border-radius: 8px 8px 0 0;
    border: 2px solid transparent;
    transition: all 0.2s ease;
    margin-bottom: -2px;
}

.hall-of-fame-tabs .nav-link:hover {
    color: var(--eb-primary);
    background-color: var(--eb-bg-tertiary);
    border-color: var(--eb-bg-tertiary);
}

.hall-of-fame-tabs .nav-link.active {
    font-weight: 700;
    color: var(--eb-primary);
    background-color: var(--eb-body-bg);
    border-color: var(--eb-primary) var(--eb-primary) var(--eb-body-bg);
    border-width: 2px;
    border-bottom: 2px solid var(--eb-body-bg);
}

.hall-of-fame-tabs .nav-link i {
    margin-right: 8px;
    color: inherit !important;
}

/* Hall of Fame Tab Content */
.hall-of-fame-content .tab-pane {
    padding: 20px 15px;
    background-color: var(--eb-body-bg);
    border-radius: 0 0 8px 8px;
}

/* Hall of Fame Table Hover Effect */
.hall-of-fame-content .table tbody tr:hover {
    background-color: var(--eb-bg-tertiary) !important;
}

/* Hall of Fame Action Buttons */
.hall-of-fame-content .btn-outline-primary {
    color: var(--eb-primary);
    border-color: var(--eb-primary);
}

.hall-of-fame-content .btn-outline-primary:hover {
    color: var(--eb-body-bg);
    background-color: var(--eb-primary);
    border-color: var(--eb-primary);
}

/* Ensure icons inherit color in tabs */
.hall-of-fame-tabs .nav-link i:before,
.hall-of-fame-tabs .nav-link i.fa:before,
.hall-of-fame-tabs .nav-link .fa:before {
    color: inherit !important;
}

/* Dark mode specific adjustments */
[data-theme="midnight-dark"] .hall-of-fame-tabs .nav-link.active,
[data-theme="bvb-dortmund"] .hall-of-fame-tabs .nav-link.active {
    border-bottom-color: var(--eb-body-bg);
}

/* Navigation-Links für Traylrunner-Dark */
[data-theme="traylrunner-dark"] .nav-main a,
[data-theme="traylrunner-dark"] .nav-pills a,
[data-theme="traylrunner-dark"] .top-links a {
  color: var(--eb-link) !important;
}

[data-theme="traylrunner-dark"] .nav-main a:hover,
[data-theme="traylrunner-dark"] .nav-pills a:hover,
[data-theme="traylrunner-dark"] .top-links a:hover {
  color: var(--eb-link-hover) !important;
}

[data-theme="traylrunner-dark"] .theme-switcher {
  background: var(--eb-bg-secondary);
  border-color: var(--eb-primary);
}

[data-theme="traylrunner-dark"] .theme-option {
  background: var(--eb-body-bg);
  color: var(--eb-body-color);
}

[data-theme="traylrunner-dark"] .theme-option:hover {
  background: var(--eb-bg-secondary);
}

[data-theme="traylrunner-dark"] .theme-option.active {
  background: var(--eb-primary);
  color: #0F1A24; /* Dunkler Text auf gelbem Hintergrund für besseren Kontrast */
}

/* Icon-Anpassungen für Traylrunner-Dark Theme */
[data-theme="traylrunner-dark"] .event-card--program .event-card__icon {
  color: var(--eb-body-bg) !important; /* Dunkler Hintergrund für besseren Kontrast */
}

/* Footer komplett Traylrunner-Dark Theme */
[data-theme="traylrunner-dark"] footer,
[data-theme="traylrunner-dark"] .footer,
[data-theme="traylrunner-dark"] #footer {
  background: var(--eb-body-bg) !important;
  background-color: var(--eb-body-bg) !important;
  background-image: none !important;
  color: var(--eb-body-color) !important;
  border-top: 2px solid var(--eb-primary) !important;
}

/* Footer Copyright-Bereich für Traylrunner-Dark */
[data-theme="traylrunner-dark"] #footer > .copyright {
  background-color: var(--eb-body-bg) !important;
  color: var(--eb-body-color) !important;
}

.theme-option[data-theme="howut"] .theme-color-preview {
  background: linear-gradient(45deg, #8B4513 50%, #654321 50%);
}

.theme-option[data-theme="howut-dark"] .theme-color-preview {
  background: linear-gradient(45deg, #6A994E 50%, #1A1A14 50%);
}

.theme-option[data-theme="traylrunner"] .theme-color-preview {
  background: linear-gradient(45deg, #0078C8 50%, #F2D915 50%);
}

.theme-option[data-theme="traylrunner-dark"] .theme-color-preview {
  background: linear-gradient(45deg, #F2D915 50%, #0F1A24 50%);
}

.theme-option[data-theme="professional"] .theme-color-preview {
  background: linear-gradient(45deg, #3E6990 50%, #FFFFFF 50%);
}

.theme-option[data-theme="professional-dark"] .theme-color-preview {
  background: linear-gradient(45deg, #4A7AA8 50%, #1A202C 50%);
}

/* Navigation-Links für HOWUT-Dark */
[data-theme="howut-dark"] .nav-main a,
[data-theme="howut-dark"] .nav-pills a,
[data-theme="howut-dark"] .top-links a {
  color: var(--eb-link) !important;
}

[data-theme="howut-dark"] .nav-main a:hover,
[data-theme="howut-dark"] .nav-pills a:hover,
[data-theme="howut-dark"] .top-links a:hover {
  color: var(--eb-link-hover) !important;
}

[data-theme="howut-dark"] .theme-switcher {
  background: var(--eb-bg-secondary);
  border-color: var(--eb-primary);
}

[data-theme="howut-dark"] .theme-option {
  background: var(--eb-body-bg);
  color: var(--eb-body-color);
}

[data-theme="howut-dark"] .theme-option:hover {
  background: var(--eb-bg-secondary);
}

[data-theme="howut-dark"] .theme-option.active {
  background: var(--eb-primary);
  color: #1A1A14; /* Dunkler Text auf grünem Hintergrund für besseren Kontrast */
}

/* Icon-Anpassungen für HOWUT-Dark Theme */
[data-theme="howut-dark"] .event-card--program .event-card__icon {
  color: var(--eb-body-bg) !important; /* Dunkler Hintergrund für besseren Kontrast */
}

/* Footer komplett HOWUT-Dark Theme */
[data-theme="howut-dark"] footer,
[data-theme="howut-dark"] .footer,
[data-theme="howut-dark"] #footer {
  background: var(--eb-body-bg) !important;
  background-color: var(--eb-body-bg) !important;
  background-image: none !important;
  color: var(--eb-body-color) !important;
  border-top: 2px solid var(--eb-primary) !important;
}

/* Footer Copyright-Bereich für HOWUT-Dark */
[data-theme="howut-dark"] #footer > .copyright {
  background-color: var(--eb-body-bg) !important;
  color: var(--eb-body-color) !important;
}

/* Navigation-Links für Professional-Dark */
[data-theme="professional-dark"] .nav-main a,
[data-theme="professional-dark"] .nav-pills a,
[data-theme="professional-dark"] .top-links a {
  color: var(--eb-link) !important;
}

[data-theme="professional-dark"] .nav-main a:hover,
[data-theme="professional-dark"] .nav-pills a:hover,
[data-theme="professional-dark"] .top-links a:hover {
  color: var(--eb-link-hover) !important;
}

[data-theme="professional-dark"] .theme-switcher {
  background: var(--eb-bg-secondary);
  border-color: var(--eb-primary);
}

[data-theme="professional-dark"] .theme-option {
  background: var(--eb-body-bg);
  color: var(--eb-body-color);
}

[data-theme="professional-dark"] .theme-option:hover {
  background: var(--eb-bg-secondary);
}

[data-theme="professional-dark"] .theme-option.active {
  background: var(--eb-primary);
  color: var(--eb-body-bg);
}

/* Icon-Anpassungen für Professional-Dark Theme */
[data-theme="professional-dark"] .event-card--program .event-card__icon {
  color: var(--eb-body-bg) !important; /* Heller Text für besseren Kontrast */
}

/* Footer komplett Professional-Dark Theme */
[data-theme="professional-dark"] footer,
[data-theme="professional-dark"] .footer,
[data-theme="professional-dark"] #footer {
  background: var(--eb-body-bg) !important;
  background-color: var(--eb-body-bg) !important;
  background-image: none !important;
  color: var(--eb-body-color) !important;
  border-top: 2px solid var(--eb-primary) !important;
}

/* Footer Copyright-Bereich für Professional-Dark */
[data-theme="professional-dark"] #footer > .copyright {
  background-color: var(--eb-body-bg) !important;
  color: var(--eb-body-color) !important;
}