/* === Farb-Variablen === */
         :root {
         --f1-red: #e10600;
         --f1-dark: #15151e;
         --f1-grey: #1f1f27;
         --f1-light: #f1f2f3;
         --f1-accent: #ff1801;
         --dark-bg: #111;
         --dark-card: #1e1e1e;
         --dark-text: #eee;
         --dark-border: #444;
         --light-bg: #f5f5f5;
         --light-card: #fff;
         --light-text: #111;
         --light-border: #ccc;
         }
         /* === Basis Layout === */
         body {
         font-family: "Roboto", Arial, sans-serif;
         background: var(--dark-bg) !important;
         margin: 0;
         padding: 0;
         color: var(--dark-text);
         line-height: 1.6;
         }
         body.light {
         background: var(--light-bg) !important;
         color: var(--light-text);
         }
         /* === Header === */
         header {
         background: var(--f1-red);
         color: #fff;
         padding: 20px;
         text-align: center;
         }
         header h1 {
         margin: 0;
         font-size: 2rem;
         }
         /* === Navigation === */
         nav {
         background: #000;
         display: flex;
         justify-content: center;
         align-items: center;
         gap: 1rem;
         padding: 12px;
         position: sticky;
         top: 0;
         z-index: 100;
         }
         nav a {
         padding: 6px 12px;
         text-decoration: none;
         color: #ccc;
         font-weight: bold;
         border-radius: 6px;
         transition: color 0.3s, background-color 0.3s;
         }
         nav a:hover {
         background: var(--f1-red);
         color: #fff;
         }
         nav a.active {
         color: #fff;
         background-color: var(--f1-red);
         border-radius: 4px;
         }
         /* Lightmode Navigation */
         body.light nav {
         background: #e4e4e4;
         color: #000;
         }
         body.light nav a {
         color: #000;
         }
         body.light nav a.active {
         color: #fff;
         }
		 
/* Dropdown Container */
nav .dropdown {
  position: relative;
  display: inline-block;
}

/* Dropdown Content */
nav .dropdown-content {
  position: absolute;
  top: 100%;
  left: 0;
  background: var(--dark-card);
  border-radius: 8px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.4);
  padding: 12px;
  z-index: 200;
  
    /* Breite anpassen */
  width: 600px;               /* Hier kannst du die Breite ändern */
  grid-template-columns: repeat(2, 1fr); /* Spalten anpassen, z.B. 2 statt 3 */
  gap: 8px;

  /* Mehrspaltig */
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;

  /* Animationsvorbereitung */
  opacity: 0;
  transform: translateY(-10px);
  pointer-events: none;           /* damit es nicht klickbar ist, solange unsichtbar */
  transition: opacity 0.3s ease, transform 0.3s ease;
}

/* Dropdown sichtbar beim Hover */
nav .dropdown:hover .dropdown-content {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;           /* klickbar sobald sichtbar */
}

/* Links */
nav .dropdown-content a {
  padding: 8px 10px;
  color: var(--dark-text);
  text-decoration: none;
  border-radius: 6px;
  transition: background 0.3s, color 0.3s, transform 0.2s;
  text-align: center;
  font-weight: bold;
}

/* Hover-Effekt für jeden Fahrer */
nav .dropdown-content a:hover {
  background: var(--f1-red);
  color: #fff;
  transform: translateY(-2px);
}

/* Lightmode */
body.light nav .dropdown-content {
  background: var(--light-card);
}

body.light nav .dropdown-content a {
  color: var(--light-text);
}

body.light nav .dropdown-content a:hover {
  background: var(--f1-red);
  color: #fff;
}



         /* === Theme Toggle Button === */
         #theme-toggle {
         margin-left: auto;
         background: transparent;
         border: none;
         cursor: pointer;
         font-size: 1.2rem;
         transition: transform 0.3s ease;
         color: inherit;
         }
         #theme-toggle:hover {
         transform: rotate(20deg);
         }
         /* === Sections / Cards === */
         section {
         padding: 25px;
         margin: 20px auto;
         border-radius: 10px;
         max-width: 1200px;
         box-shadow: 0 4px 10px rgba(0,0,0,0.4);
         background: var(--dark-card);
         color: var(--dark-text);
         }
         body.light section {
         background: var(--light-card);
         color: var(--light-text);
         box-shadow: 0 2px 6px rgba(0,0,0,0.15);
         }
		 /* === Main / Cards === */
         main {
         padding: 25px;
         margin: 20px auto;
         border-radius: 10px;
         max-width: 1200px;
         box-shadow: 0 4px 10px rgba(0,0,0,0.4);
         background: var(--dark-card);
         color: var(--dark-text);
         }
         body.light main {
         background: var(--light-card);
         color: var(--light-text);
         box-shadow: 0 2px 6px rgba(0,0,0,0.15);
         }
         /* === Headings === */
         h1, h2, h3, h4 {
         color: inherit;
         }
         h2 {
         border-left: 6px solid var(--f1-red);
         padding-left: 12px;
         margin-bottom: 20px;
         font-size: 1.6rem;
         font-weight: 700;
         }
         h3 {
         margin-top: 15px;
         font-size: 1.2rem;
         }
         /* === Tabellen (Allgemein) === */
         table {
         width: 100%;
         border-collapse: collapse;
         margin: 15px 0 25px;
         font-size: 0.85rem;
         }
         th {
         background: var(--f1-red);
         color: #fff;
         padding: 6px;
         }
         td {
         padding: 6px;
         text-align: center;
         border-bottom: 1px solid var(--dark-border);
         }
         /* Zebra-Streifen nur für Nicht-Standings */
         body:not(.light) table:not(.standings) tr:nth-child(even) { background:#2a2a36; }
         body.light table:not(.standings) tr:nth-child(even)       { background:#f2f2f2; }
         /* Light-/Darkmode Tabelle */
         body.light table:not(.standings) {
         background: var(--light-card);
         color: var(--light-text);
         border: 1px solid var(--light-border);
         }
         body:not(.light) table:not(.standings) {
         background: var(--dark-card);
         color: var(--dark-text);
         }
         /* Champion-Zeilen */
         tr.champion {
         background: #333;
         font-weight: bold;
         color: var(--f1-accent);
         }
         /* === Standings Tabellen === */
         .standings {
         border-collapse: collapse;
         font-size: 14px;
         text-align: center;
         }
         .standings td, .standings th {
         border: 1px solid #ccc;
         padding: 4px 6px;
         text-align: center;
         /*color: #000;*/
         }
         .standings th {
         color: #fff !important;
         }
         .standings tr:hover td {
         filter: brightness(0.9);
         transition: filter 0.3s ease;
         }
		/* NICHT MEHR NÖTIG
		.standings td:nth-child(3),
		.standings td:nth-child(4) {
		  background:#2c2c33;
		  color:#fff !important;
		}
		body.light .standings td:nth-child(3),
		body.light .standings td:nth-child(4) {
		  background:#f9f9f9;
		  color:#111 !important;
		}
		*/

         /* Season abhängig vom Theme */
         .driver-results td:nth-child(1) {
         background:#2c2c33;
         color:#fff !important;
         }
         body.light .driver-results td:nth-child(1) {
         background:#f9f9f9;
         color:#111 !important;
         }
         /* Sonderstatus */
         .standings td.dsq { background:#000; color:#fff !important; font-weight:bold; }
         .standings td.dnf { background:#E6CCFF; color:#000; font-weight:bold; }
         .standings td.dns { background:#FFFFFF; color:#000; font-weight:bold; }
         .standings td.nr { background:#FFFFFF; color:#000; font-weight:bold; }
         /* Podium */
         .standings td.p1 { background:#FFFF99; color:#000; }
         .standings td.p2 { background:#DDDDDD; color:#000; }
         .standings td.p3 { background:#FFCC99; color:#000; }
         .standings td.p4,
         .standings td.mid { background:#d2f9d2; color:#000; }
         .standings td.low { background:#87CEEB; color:#000; }
         /* === All-Time Tabelle === */
         table.alltime td:first-child {
         font-weight:700;
         padding:6px 10px;
         }
		 
         .alltime tr:hover td {
         filter: brightness(0.9);
         transition: filter 0.3s ease;
         }
         /* === Rules Tabelle === */
         .rules-table {
         border-collapse: collapse;
         margin: 1em 0;
         width: 100%;
         text-align: center;
         font-size: 0.9em;
         }
         .rules-table th,
         .rules-table td {
         border: 1px solid #ccc;
         padding: 6px;
         }
         /* Farben analog zu Standings */
         .rules-table td.p1 { background:#FFFF99; color:#000; }
         .rules-table td.p2 { background:#DDDDDD; color:#000; }
         .rules-table td.p3 { background:#FFCC99; color:#000; }
         .rules-table td.p4,
         .rules-table td.mid { background:#d2f9d2; color:#000; }
         .rules-table td.low { background:#87CEEB; color:#000; }
         .rules-table td.dnf { background:#E6CCFF; color:#000; font-weight:bold; }
         .rules-table td.dns { background:#FFFFFF; color:#000; font-weight:bold; }
         .rules-table td.nr { background:#FFFFFF; color:#000; font-weight:bold; }
         .rules-table td.dsq { background:#000; color:#fff; font-weight:bold; }
         /* === Fahrerfarben (für Tabellen + Badges) === */
         .driver-xinu            { background:#e6194B; color:#fff; }
         .driver-Ehrebrate       { background:#3cb44b; color:#fff; }
         .driver-doyousimi       { background:#ffe119; color:#111; }
         .driver-breiter-wagen   { background:#4363d8; color:#fff; }
         .driver-ungehemmter-Baum{ background:#f58231; color:#fff; }
         .driver-robostar        { background:#911eb4; color:#fff; }
         .driver-andri           { background:#46f0f0; color:#111; }
         .driver-marsm           { background:#f032e6; color:#fff; }
         .driver-thats_mau       { background:#bcf60c; color:#111; }
         .driver-meiseli         { background:#008080; color:#fff; }
         .driver-tst             { background:#800000; color:#fff; }
         .driver-dst             { background:#0082c8; color:#fff; }
         .driver-hydrant         { background:#fabebe; color:#111; }
         .driver-silae           { background:#aaffc3; color:#111; }
         .driver-toastedpilot    { background:#ffd8b1; color:#111; }
         .driver-dicker-wagen    { background:#808000; color:#fff; }
         .driver-captain-goon    { background:#000075; color:#fff; }
         /* === Teamfarben === */
         .team-ferrari     { background:#fe0000; border:2px solid #fe0000; color:#fff; }
         .team-alfaromeo   { background:#a50e2d; border:2px solid #a50e2d; color:#fff; }
         .team-mercedes    { background:#00a19c; border:2px solid #00a19c; color:#fff; }
         .team-redbull     { background:#15185f; border:2px solid #15185f; color:#fff; }
         .team-Mclaren     { background:#F58020; border:2px solid #F58020; color:#000; }
         .team-alpine      { background:#0c1e2c; border:2px solid #0c1e2c; color:#fff; }
         .team-racingpoint { background:#d0006f; border:2px solid #d0006f; color:#fff; }
         .team-astonmartin { background:#005b49; border:2px solid #005b49; color:#fff; }
         .team-haas        { background:#b6babd; border:2px solid #b6babd; color:#000; }
         /* === Team-Kombinationen (mit Verläufen) === */
         .team-Mclaren-redbull    { background:linear-gradient(135deg,#F58020 50%,#15185f 50%); color:#fff; }
         .team-alpine-mercedes    { background:linear-gradient(135deg,#0c1e2c 50%,#00a19c 50%); color:#fff; }
         .team-Mclaren-ferrari    { background:linear-gradient(135deg,#F58020 50%,#fe0000 50%); color:#fff; }
         .team-mercedes-redbull   { background:linear-gradient(135deg,#00a19c 50%,#15185f 50%); color:#fff; }
         .team-redbull-racingpoint{ background:linear-gradient(135deg,#15185f 50%,#d0006f 50%); color:#fff; }
         .team-racingpoint-astonmartin{ background:linear-gradient(135deg,#d0006f 50%,#005b49 50%); color:#fff; }
         /* === Records Grid (Hall of Fame) === */
         .records-grid {
         display: grid;
         grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
         gap: 1rem;
         margin: 1.5rem 0;
         }
         /* Records Item */
         .records-item {
         background: #1c1c1c;
         border-radius: 12px;
         padding: 1rem;
         box-shadow: 0 4px 8px rgba(0,0,0,0.4);
         transition: transform 0.2s ease, box-shadow 0.2s ease;
         border-left: 5px solid var(--f1-red); /* Default */
         }
         .records-item:hover {
         transform: translateY(-4px);
         box-shadow: 0 6px 14px rgba(0,0,0,0.6);
         }
         .records-item h4 {
         font-size: 1rem;
         color: #f5f5f5;
         margin-bottom: 0.5rem;
         display: flex;
         align-items: center;
         gap: 6px;
         }
         .records-item p {
         font-size: 0.95rem;
         color: #ccc;
         }
         .records-item strong {
         color: #ffd700;
         font-size: 1.1rem;
         }
         /* Records Lightmode */
         body.light .records-item {
         background: #fff;
         color: #111;
         box-shadow: 0 2px 6px rgba(0,0,0,0.15);
         }
         body.light .records-item h4 { color: #111; }
         body.light .records-item p  { color: #444; }
         /* Records – Fahrerfarben */
         .records-item.record-driver-xinu          { border-left-color: #e6194B; }
         .records-item.record-driver-Ehrebrate     { border-left-color: #3cb44b; }
         .records-item.record-driver-doyousimi     { border-left-color: #ffe119; }
         .records-item.record-driver-breiter-wagen { border-left-color: #4363d8; }
         .records-item.record-driver-ungehemmter-baum { border-left-color: #f58231; }
         .records-item.record-driver-robostar      { border-left-color: #911eb4; }
         .records-item.record-driver-andri         { border-left-color: #46f0f0; }
         .records-item.record-driver-marsm         { border-left-color: #f032e6; }
         .records-item.record-driver-thats_mau     { border-left-color: #bcf60c; }
         .records-item.record-driver-meiseli       { border-left-color: #008080; }
         .records-item.record-driver-tst           { border-left-color: #fabebe; }
         .records-item.record-driver-dst           { border-left-color: #ffd8b1; }
         .records-item.record-driver-hydrant       { border-left-color: #aaffc3; }
         .records-item.record-driver-silae         { border-left-color: #808000; }
         .records-item.record-driver-toastedpilot  { border-left-color: #000075; }
         .records-item.record-driver-dicker-wagen  { border-left-color: #800000; }
         .records-item.record-driver-captain-goon  { border-left-color: #9A6324; }
         /* Records – Teamfarben */
         .records-item.record-team-redbull     { border-left-color: #15185f; }
         .records-item.record-team-ferrari     { border-left-color: #fe0000; }
         .records-item.record-team-mercedes    { border-left-color: #00a19c; }
         .records-item.record-team-Mclaren     { border-left-color: #F58020; }
         .records-item.record-team-alpine      { border-left-color: #0c1e2c; }
         .records-item.record-team-astonmartin { border-left-color: #005b49; }
         .records-item.record-team-haas        { border-left-color: #b6babd; }
         .records-item.record-team-alfaromeo   { border-left-color: #a50e2d; }
         .records-item.record-team-racingpoint { border-left-color: #d0006f; }
		 
		.records-item.record-track-bahrain     { border-left-color: #d35400; }
		.records-item.record-track-imola       { border-left-color: #006400; }
		.records-item.record-track-monaco      { border-left-color: #800000; }
		.records-item.record-track-spain       { border-left-color: #e74c3c; }
		.records-item.record-track-canada      { border-left-color: #c0392b; }
		.records-item.record-track-austria     { border-left-color: #FF0000; }
		.records-item.record-track-belgium     { border-left-color: #FFD700; }
		.records-item.record-track-netherlands { border-left-color: #FF7F00; }
		.records-item.record-track-singapore   { border-left-color: #0c2461; }
		.records-item.record-track-japan       { border-left-color: #e84118; }
		.records-item.record-track-abudhabi    { border-left-color: #16a085; }
		.records-item.record-track-brazil      { border-left-color: #009739; }
		.records-item.record-track-vietnam     { border-left-color: #e74c3c; }
		.records-item.record-track-china       { border-left-color: #d32f2f; }
		.records-item.record-track-baku        { border-left-color: #6a1b9a; }
		.records-item.record-track-australia   { border-left-color: #00695c; }
		.records-item.record-track-portugal    { border-left-color: #34495e; }
		.records-item.record-track-silverstone { border-left-color: #00247d; }
		.records-item.record-track-hungary     { border-left-color: #008000; }
		.records-item.record-track-austin      { border-left-color: #3c3b6e; }
		.records-item.record-track-mexico      { border-left-color: #006847; }
		.records-item.record-track-lasvegas    { border-left-color: #8e44ad; }
		.records-item.record-track-monza       { border-left-color: #008C45; }
		.records-item.record-track-russia      { border-left-color: #d52b1e; }




		 
         /* === Fahrerprofile (Detail-Tabellen) === */
         .standings.driver-profile {
         margin: 28px 0;
         border-radius: 10px;
         overflow: hidden;
         border-collapse: collapse;
         width: 100%;
         box-shadow: 0 6px 24px rgba(0,0,0,.12);
         }
         /* Grundtypografie */
         .standings.driver-profile th,
         .standings.driver-profile td {
         padding: 12px 16px;
         font-size: .95rem;
         border: 1px solid;
         }
         /* Rahmenfarben */
         body.light .standings.driver-profile th,
         body.light .standings.driver-profile td { border-color: #ddd; }
         body:not(.light) .standings.driver-profile th,
         body:not(.light) .standings.driver-profile td { border-color: rgba(255,255,255,0.15); }
         /* Zellhintergründe */
         body.light .standings.driver-profile th:not([colspan]),
         body.light .standings.driver-profile td {
         background: #fff;
         color: #111 !important;
         }
         body:not(.light) .standings.driver-profile th:not([colspan]),
         body:not(.light) .standings.driver-profile td {
         background: rgba(255,255,255,.03);
         color: #e8e8e8 !important;
         }
         /* Header-Badge */
         .standings.driver-profile tr:first-child th[colspan] {
         text-align: center;
         font-weight: 700;
         letter-spacing: .03em;
         font-size: 1.1rem;
         text-transform: uppercase;
         padding: 14px;
         border: none;
         color: #fff !important;
         }
         /* Header-Badge Farben */
         .standings.driver-profile .p1  { background:linear-gradient(135deg,#d4af37,#b8860b) !important; }
         .standings.driver-profile .p2  { background:linear-gradient(135deg,#c0c0c0,#a9a9a9) !important; }
         .standings.driver-profile .p3  { background:linear-gradient(135deg,#cd7f32,#8b4513) !important; }
         .standings.driver-profile .mid { background:linear-gradient(135deg,#90ee90,#228b22) !important; color:#111 !important; }
         .standings.driver-profile .low { background:linear-gradient(135deg,#add8e6,#1e90ff) !important; color:#111 !important; }
         .standings.driver-profile .dnf { background:#800080 !important; color:#fff !important; }
         .standings.driver-profile .dsq { background:#000 !important; color:#fff !important; }
         .standings.driver-profile .dns { background:#555 !important; color:#fff !important; }
         .standings.driver-profile .nr { background:#555 !important; color:#fff !important; }
         /* === Highlights === */
         #highlights {
         margin: 0 auto;
         }
         #highlights .highlight {
         margin-bottom: 24px;
         padding: 16px 20px;
         border-left: 6px solid transparent;
         border-radius: 6px;
         background: rgba(255,255,255,0.05);
         }
         #highlights .highlight:first-of-type {
         margin-top: 20px;
         }
         /* Highlight Text */
         #highlights .year {
         font-size: 0.85rem;
         font-weight: bold;
         text-transform: uppercase;
         color: #888;
         display: block;
         margin-bottom: 4px;
         }
         #highlights h3 {
         font-size: 1.2rem;
         margin: 0 0 6px;
         }
         #highlights p {
         font-size: 0.9rem;
         margin: 0;
         }
         /* Highlight Fahrerfarben */
         #highlights .highlight.driver-xinu      { border-left-color:#e6194B !important; }
         #highlights .highlight.driver-Ehrebrate { border-left-color:#3cb44b !important; }
         #highlights .highlight.driver-doyousimi { border-left-color:#ffe119 !important; }
         #highlights .highlight.driver-breiter   { border-left-color:#4363d8 !important; }
         #highlights .highlight.driver-baum      { border-left-color:#f58231 !important; }
         #highlights .highlight.driver-robostar  { border-left-color:#911eb4 !important; }
         #highlights .highlight.driver-andri     { border-left-color:#46f0f0 !important; }
         #highlights .highlight.driver-marsm     { border-left-color:#f032e6 !important; }
         #highlights .highlight.driver-thatsmau  { border-left-color:#bcf60c !important; }
         #highlights .highlight.driver-meiseli   { border-left-color:#008080 !important; }
         /* Highlights Light-/Darkmode */
         body.light #highlights .highlight {
         background: #f9f9f9;
         color: #111;
         }
         body:not(.light) #highlights .highlight {
         background: rgba(255,255,255,0.05);
         color: #eee;
         }
         /* === Track Farben === */
         .track-bahrain     { background:linear-gradient(135deg,#d35400,#e67e22); color:#fff; }
         .track-imola       { background:linear-gradient(135deg,#006400,#228B22); color:#fff; }
         .track-monaco      { background:linear-gradient(135deg,#800000,#FF0000); color:#fff; }
         .track-spain       { background:linear-gradient(135deg,#e74c3c,#f39c12); color:#fff; }
         .track-canada      { background:linear-gradient(135deg,#c0392b,#bdc3c7); color:#fff; }
         .track-austria     { background:linear-gradient(135deg,#FF0000,#FFFFFF); color:#000; }
         .track-belgium     { background:linear-gradient(135deg,#FFD700,#000000,#FF0000); color:#fff; }
         .track-netherlands { background:linear-gradient(135deg,#FF7F00,#FF4500); color:#fff; }
         .track-singapore   { background:linear-gradient(135deg,#0c2461,#1e3799); color:#fff; }
         .track-japan       { background:linear-gradient(135deg,#e84118,#2f3640); color:#fff; }
         .track-abudhabi    { background:linear-gradient(135deg,#16a085,#1abc9c); color:#fff; }
         .track-brazil      { background:linear-gradient(135deg,#009739,#fedf00,#002776); color:#000 !important; }
         .track-vietnam     { background:linear-gradient(135deg,#e74c3c,#c0392b); color:#fff; }
         .track-china       { background:linear-gradient(135deg,#d32f2f,#f5f5f5); color:#000; }
         .track-baku        { background:linear-gradient(135deg,#6a1b9a,#8e24aa); color:#fff; }
         .track-australia   { background:linear-gradient(135deg,#00695c,#26a69a); color:#fff; }
         .track-portugal    { background:linear-gradient(135deg,#34495e,#2c3e50); color:#fff; }
         .track-silverstone { background:linear-gradient(135deg,#00247d,#cf142b,#fff); color:#fff !important; }
         .track-hungary     { background:linear-gradient(135deg,#008000,#ffffff,#ff0000); color:#000 !important; }
         .track-austin      { background:linear-gradient(135deg,#3c3b6e,#b22234); color:#fff; }
         .track-mexico      { background:linear-gradient(135deg,#006847,#fff,#ce1126); color:#000 !important; }
         .track-lasvegas    { background:linear-gradient(135deg,#8e44ad,#9b59b6,#f1c40f); color:#fff; }
         .track-monza       { background:linear-gradient(135deg,#008C45,#F4F5F0,#CD212A); color:#000 !important; }
		 .track-russia { background:linear-gradient(135deg,#d52b1e,#ffffff,#0039a6); color:#000 !important; }


         /* === Timeline === */
         .timeline {
         display: grid;
         grid-template-columns: repeat(34, 1fr);
         position: relative;
         margin: 20px auto;
         padding: 40px 20px;
         width: 100%;
         overflow: hidden;
         height: auto;
         align-items: center;
         }
         .timeline::before {
         content: "";
         position: absolute;
         top: 50%;
         left: calc(100% / (var(--count) * 2));
         right: calc(100% / (var(--count) * 2));
         height: 3px;
         background: #ccc;
         z-index: 0;
         transform: translateY(-50%);
         }
         .race-point {
         position: relative;
         text-align: center;
         flex: 1 1 0;
         min-width: 0;
         height: 140px;
         background: none !important;
         box-shadow: none !important;
         border: none !important;
         }
         .race-point:not(:first-child)::after {
         content: "";
         position: absolute;
         top: 50%;
         left: -50%;
         width: 100%;
         height: 3px;
         background: #ccc;
         z-index: 0;
         }
         /* Timeline Kreis */
         .race-point::before {
         content: "";
         position: absolute;
         top: 50%; left: 50%;
         transform: translate(-50%, -50%);
         width: 18px; height: 18px;
         border-radius: 50%;
         border: 3px solid #fff;
         background: #666;
         z-index: 2;
         box-shadow: 0 0 4px rgba(0,0,0,0.4);
         }
         /* Timeline Info */
         .race-point .info {
         position: absolute;
         top: calc(50% + 28px);
         left: 50%;
         transform: translateX(-50%);
         font-size: 0.75rem;
         line-height: 1.2;
         white-space: normal;
         }
         .race-point:nth-child(even) .info {
         top: auto;
         bottom: calc(50% + 28px);
         }
         .race-point .round { 
         font-weight: bold; display: block; font-size: 0.9rem;
         background:#2c2c33;
         color:#fff !important;
         }
         .race-point .track { 
         display: block; font-size: 0.8rem;
         background:#2c2c33;
         color:#fff !important;
         }
         .race-point .winner{ 
         display: block; font-size: 0.75rem; opacity: 0.8;
         background:#2c2c33;
         color:#fff !important;
         }
         body.light .race-point .round { 
         font-weight: bold; display: block; font-size: 0.9rem;
         background:#f9f9f9;
         color:#111 !important;
         }
         .race-point .track { 
         display: block; font-size: 0.8rem;
         background:#f9f9f9;
         color:#111 !important;
         }
         body.light .race-point .winner{ 
         display: block; font-size: 0.75rem; opacity: 0.8;
         background:#f9f9f9;
         color:#111 !important;
         }
         /* Timeline Farben – Teams */
         .race-point.team-ferrari::before     { background:#fe0000; }
         .race-point.team-alfaromeo::before   { background:#a50e2d; }
         .race-point.team-mercedes::before    { background:#00a19c; }
         .race-point.team-redbull::before     { background:#15185f; }
         .race-point.team-Mclaren::before     { background:#F58020; }
         .race-point.team-alpine::before      { background:#0c1e2c; }
         .race-point.team-racingpoint::before { background:#d0006f; }
         .race-point.team-astonmartin::before { background:#005b49; }
         .race-point.team-haas::before        { background:#b6babd; }
         /* Timeline Farben – Fahrer */
         .race-point.driver-xinu::before      { background:#e6194B !important; }
         .race-point.driver-Ehrebrate::before { background:#3cb44b !important; }
         .race-point.driver-doyousimi::before { background:#ffe119 !important; }
         .race-point.driver-breiter-wagen::before   { background:#4363d8 !important; }
         .race-point.driver-baum::before      { background:#f58231 !important; }
         .race-point.driver-robostar::before  { background:#911eb4 !important; }
         .race-point.driver-andri::before     { background:#46f0f0 !important; }
         .race-point.driver-marsm::before     { background:#f032e6 !important; }
         .race-point.driver-thatsmau::before  { background:#bcf60c !important; }
         .race-point.driver-meiseli::before   { background:#008080 !important; }
         /* === Collapsible (Regelwerk etc.) === */
         .collapsible-toggle {
         display: block;
         width: 100%;
         text-align: left;
         padding: 10px 14px;
         font-size: 1.1rem;
         font-weight: bold;
         background: #e5e7eb;
         border: none;
         border-radius: 8px;
         cursor: pointer;
         margin-bottom: 10px;
         transition: background 0.3s;
         }
         .collapsible-toggle:hover { background:#d1d5db; }
         .collapsible-content { display:none; }
         .collapsible.open .collapsible-content { display:block; }
         /* Details/Summary */
         summary {
         cursor: pointer;
         list-style: none;
         display: flex;
         align-items: center;
         }
         summary::-webkit-details-marker { display:none; }
         summary h2 {
         margin: 0;
         display: flex;
         align-items: center;
         }
         summary h2::after {
         content:"▶";
         font-size:1rem;
         margin-left:10px;
         transition: transform 0.2s ease;
         }
         details[open] summary h2::after { content:"▼"; }
         /* === Footer === */
         footer {
         background: #000;
         color: #888;
         padding: 20px;
         text-align: center;
         margin-top: 30px;
         font-size: 0.85rem;
         }
         body.light footer {
         background: #e4e4e4;
         color: #444;
         }
         .footer-content {
         display: flex;
         flex-direction: column;
         align-items: center;
         gap: 12px;
         }
         .season-chronik {
         font-size: 0.85rem;
         color: #ccc;
         }
         .season-chronik strong { color: var(--f1-accent); }
         .season-chronik span {
         margin: 0 4px;
         white-space: nowrap;
         }
         /* Social Buttons */
         .social-links {
         display: flex;
         justify-content: center;
         gap: 15px;
         margin-bottom: 8px;
         }
         .social-btn {
         display: flex;
         align-items: center;
         justify-content: center;
         width: 38px; height: 38px;
         border-radius: 50%;
         color: #fff;
         transition: transform 0.2s, opacity 0.3s;
         }
         .social-btn:hover {
         transform: scale(1.1);
         opacity: 0.85;
         }
         .social-btn.insta { background:#E4405F; }
         .social-btn.yt    { background:#FF0000; }
         /* === Race Summary Overlay === */
         .race-summary {
         display:none;
         position:fixed;
         z-index:9999;
         left:0; top:0;
         width:100%; height:100%;
         background:rgba(0,0,0,0.6);
         align-items:center;
         justify-content:center;
         }
         .race-summary.visible { display:flex; }
         .race-summary-content {
         background:#fff;
         color:#000;
         padding:20px;
         border-radius:12px;
         max-width:700px;
         width:90%;
         box-shadow:0 5px 15px rgba(0,0,0,0.3);
         }
         .race-close {
         position:absolute;
         top:15px; right:25px;
         font-size:28px;
         font-weight:bold;
         color:#fff;
         cursor:pointer;
         }
         body.light .race-summary {
         background: var(--light-card);
         color: var(--light-text);
         }
         /* === Instagram Embed Container === */
         .insta-embed {
         max-width: 540px;
         margin: 0 auto;
         padding: 10px;
         border-radius: 12px;
         overflow: hidden;
         transition: background 0.3s, box-shadow 0.3s;
         }
         /* Darkmode */
         body:not(.light) .insta-embed {
         background: var(--dark-card);
         box-shadow: 0 4px 12px rgba(0,0,0,0.6);
         border: 1px solid var(--dark-border);
         }
         /* Lightmode */
         body.light .insta-embed {
         background: var(--light-card);
         box-shadow: 0 2px 6px rgba(0,0,0,0.15);
         border: 1px solid var(--light-border);
         }
		 
		/* Overlay */
		#raceSummaryBox.race-summary {
		  display: none;               
		  position: fixed;
		  top: 0;
		  left: 0;
		  width: 100%;
		  height: 100%;
		  background: rgba(0,0,0,0.6);
		  z-index: 1000;

		  /* Verhindert outer scrollbar */
		  overflow: hidden;            
		}

		/* Sichtbar, wenn JS .visible hinzufügt */
		#raceSummaryBox.race-summary.visible {
		  display: block;
		}

		/* Modal-Content */
		#raceSummaryBox .race-summary-content {
		  position: absolute;            /* absolut im Overlay */
		  top: 50%;
		  left: 50%;
		  transform: translate(-50%, -50%); /* perfekt zentriert */
		  width: 80%;
		  max-height: 80vh;             /* maximal 80% der Viewport-Höhe */
		  overflow-y: auto;             /* scrollbar nur hier */
		  padding: 20px;
		  background: #fff;
		  border-radius: 10px;
		  box-shadow: 0 0 20px rgba(0,0,0,0.4);
		}

		/* Close-Button */
		#raceSummaryClose.race-close {
		  position: absolute;
		  top: 10px;
		  right: 15px;
		  font-size: 24px;
		  cursor: pointer;
		}
		
		.fastestlap {
		  color: #7030A0 !important;
		  font-weight: bold;
		}
		
		/* Pole Position */
		.pp {
		  text-decoration: underline !important;
		}
		.driver-image {
		  width: 100%;        /* nimmt die volle Breite des Elterncontainers */
		  max-width: 800px;   /* gleiche Maximalbreite wie die Tabelle */
		  display: block;     /* entfernt kleine Lücken unter Bildern */
		  margin: 0 auto 20px auto; /* zentrieren + Abstand nach unten */
		  height: auto;       /* behält Seitenverhältnis */
		  border-radius: 8px; /* optional: abgerundete Ecken */
		}

        /* Swiper container styles */
        .swiper {
            width: 100%;
            height: 700px;
            border-radius: 10px;
            box-shadow: 0 4px 20px rgba(0,0,0,0.1);
            margin: 20px 0;
        }
        
        .swiper-slide {
            text-align: center;
            font-size: 18px;
            background: #fff;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        
        .swiper-slide img {
            display: block;
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 10px;
        }
        
        /* Custom pagination colors */
        .swiper-pagination-bullet {
            background: #ddd !important;
            opacity: 0.7;
        }
        
        .swiper-pagination-bullet-active {
            background: #e10600 !important; /* Red active pagination */
            opacity: 1;
        }
        
        /* Custom navigation button colors */
        .swiper-button-next,
        .swiper-button-prev {
            color: #e10600 !important; 
            border-radius: 50% !important;
            width: 50px !important;
            height: 50px !important;
        }
        
        .swiper-button-next:hover,
        .swiper-button-prev:hover {
            transform: scale(1.1);
            transition: all 0.3s ease;
        }
        
        /* Responsive adjustments */
        @media (max-width: 768px) {
            .swiper {
                height: 300px;
            }
            
            .swiper-button-next,
            .swiper-button-prev {
                width: 40px !important;
                height: 40px !important;
            }
        }
		
		.swiper-slide {
	  position: relative;
	}
	
	/* === Swiper Captions === */
	.swiper .caption {
	  position: absolute;
	  bottom: 12px; /* etwas Abstand vom unteren Rand */
	  left: 50%;
	  transform: translateX(-50%);
	  background: rgba(0, 0, 0, 0.65); /* dunkler Hintergrund, halbtransparent */
	  color: var(--dark-text);
	  padding: 6px 14px;
	  font-size: 15px;
	  font-weight: 500;
	  border-radius: 6px;
	  box-shadow: 0 4px 10px rgba(0,0,0,0.4);
	  max-width: 90%;
	  text-align: center;
	}

	/* Lightmode Anpassung */
	body.light .swiper .caption {
	  background: rgba(255, 255, 255, 0.8);
	  color: var(--light-text);
	  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
	}

	/* Optional: kleine Animation beim Einblenden */
	.swiper .caption {
	  opacity: 0;
	  transform: translate(-50%, 10px);
	  transition: opacity 0.4s ease, transform 0.4s ease;
	}

	.swiper-slide-active .caption {
	  opacity: 1;
	  transform: translate(-50%, 0);
	}
	
	.banner {
	  width: 100%;
	  overflow: hidden;
	}

	.banner img {
	  width: 100%;              /* volle Breite */
	  height: 180px;            /* gewünschte Höhe, anpassbar */
	  object-fit: cover;        /* schneidet das Bild passend zu */
	  display: block;
	}