/* ================================
   Basis: Variablen für Light & Dark
   ================================ */
   
   
:root {
  --bg-color: #ffffff;
  --text-color: #353535;
  --header-bg: linear-gradient(90deg, #ff9800, #f44336);
  --header-text: #ffffff;
  --subheader-bg: #f0f0f0;
  --subheader-text: #606060;
  --footer-bg: #f0f0f0;
  --accent1: #e8cc50; /* Gold für Platz 1 */
  --accent2: silver;  /* Silber für Platz 2 */
  --accent3: #ecb480; /* Bronze für Platz 3 */
  --card-bg: #ffffff;
  --card-border: #d0d0d0;
  --highlight: #004080;
}

[data-theme="dark"] {
  --bg-color: #121212;
  --text-color: #e0e0e0;
  --header-bg: linear-gradient(90deg, #ff5722, #c2185b);
  --header-text: #f0f0f0;
  --subheader-bg: #1e1e1e;
  --subheader-text: #bbbbbb;
  --footer-bg: #1e1e1e;
  --accent1: #d4af37;
  --accent2: #888888;
  --accent3: #d28a5d;
  --card-bg: #1e1e1e;
  --card-border: #333;
  --highlight: #80c0ff;
}

/* ================================
   Basis Layout
   ================================ */
   
   *,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  background-color: var(--bg-color);
  color: var(--text-color);
}

body {
  max-width: 1000px;  /* gewünschte maximale Breite */
  margin: 0 auto;      /* zentriert */
  padding: 0;          /* Padding innerhalb Container, nicht Body */
  background-color: var(--bg-color);
  font-family: "Segoe UI", Roboto, Arial, Helvetica, sans-serif;
  color: var(--text-color);
  font-family: "Segoe UI", Roboto, Arial, Helvetica, sans-serif;
  color: var(--text-color);
}

/* ================================
   Kopfzeilen
   ================================ */
.kopfzeile {
  background: var(--subheader-bg);
  color: var(--subheader-text);
  font-weight: bold;
  border-radius: 8px;
  display: flex;
  flex-direction: column; /* Überschrift oben, Info-Zeile darunter */
  gap: 10px;
  width: 100%;
  margin: 0 0 15px 0; /* nur unten Abstand */
  padding: 10px 15px;
  margin: 20px 0 15px 0;
}

.row1 {
  display: flex;
  align-items: center;
  justify-content: space-between; /* Logo links, Titel rechts */
  gap: 15px;
}

.row1 img.kopflogo {
  max-height: 150px;
}

.row2 {
  display: flex;
  justify-content: space-between; /* gleichmäßig über die Breite verteilt */
  align-items: center;
  flex-wrap: wrap; /* falls kleiner Bildschirm */
  gap: 10px;
}

.row2 p {
  margin: 0;
  flex: 1; /* Optional: gleiche Breite für alle Elemente */
  text-align: center; /* zentriert jeden Block */
}

/* ================================
   Tabelle
   ================================ */
table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 15px 0;
  border-radius: 10px;
  overflow: hidden;
  background: var(--card-bg);
 /* box-shadow: 0 2px 10px rgba(0,0,0,0.15);*/
}

td {
  padding: 10px;
  text-align: center;
  border-bottom: 1px solid var(--card-border);
}



.ueberschrift {
  border-bottom: 2px solid var(--card-border);
  background: var(--subheader-bg);
  text-align: center;
  font-weight: bold;
  font-size: 1.1em;
}

.zeile {
  padding: 8px;
}

/* Erste Spalte mit Labels */
.spalte1 {
  width: 140px;
  text-align: left;
  padding-right: 8px;
  font-style: italic;
  font-weight: bold;
}

/* IDs / Slots */
.spalteID {
  width: 140px;
}

.id {
  color: var(--text-color);
  font-weight: bold;
  font-size: 1.6em;
}

/* ================================
   Inhalte
   ================================ */
.rennzeit, .sollrunden {
  color: var(--text-color);
  font-weight: bold;
  font-size: 1.2em;
}

.position {
  font-weight: bold;
  font-size: 1.2em;
  color: var(--text-color);
}

.position1 {
  font-weight: bold;
  font-size: 1.6em;
  background-color: var(--accent1);
  color: #fff;
}

.position2 {
  font-weight: bold;
  font-size: 1.4em;
  background-color: var(--accent2);
  color: #fff;
}

.position3 {
  font-weight: bold;
  font-size: 1.3em;
  background-color: var(--accent3);
  color: #fff;
}

.fahrer {
  font-size: 0.95em;
  font-weight: bold;
}

.fahrzeug {
  font-size: 0.9em;
}

.rundenzeit, .runden {
  font-weight: bold;
}

.schnzeit, .schnzeitrunde {
  font-weight: bold;
  color: var(--highlight);
}

.restrunden {
  color: var(--text-color);
  font-weight: bold;
  font-size: 1.1em;
}

/* Tankbalken */
table.tankbar {
  width: 100%;
  height: 20px;
  border: 1px solid var(--card-border);
  border-radius: 5px;
  overflow: hidden;
  margin: 0;
  padding: 0;
}
td.tankbarcolor { background-color: #00cc00; }
td.tankbarcolor2 { background-color: var(--subheader-bg); }
td.tankbarcolorres { background-color: #ff0000; }

/* ================================
   Fußzeile
   ================================ */
.fusszeile {
  margin: 0px;
  background: var(--footer-bg);
  line-height: 50px;
  border-radius: 8px;
  padding: 0 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--text-color);
}

.fusszeile p {
  margin: 0;
  padding: 0;
}

/* ================================
   Hilfsklassen
   ================================ */
.right { text-align: right; }
.left { text-align: left; }
.center { text-align: center; }