/*
  Copyright 2018 - 2026 Tobias Grundmann

  This file is part of Windenfahrerplan.

  Windenfahrerplan is free software: you can redistribute it and/or modify
  it under the terms of version 3 of the GNU General Public License as
  published by the Free Software Foundation

  Windenfahrerplan is distributed in the hope that it will be useful,
  but WITHOUT ANY WARRANTY; without even the implied warranty of
  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
  GNU General Public License for more details.

  You should have received a copy of the GNU General Public License
  along with Windenfahrerplan.  If not, see <http://www.gnu.org/licenses/>.
*/

/* ============================================================
   0. FONT IMPORT
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap');

/* ============================================================
   1. DESIGN TOKENS
   ============================================================ */
:root {
  /* M3 Farbrollen (Light scheme, blau-primär) */
  --md-sys-color-primary:               #1a56a4;
  --md-sys-color-primary-hover:         #3d74be;
  --md-sys-color-on-primary:            #ffffff;
  --md-sys-color-primary-container:     #d6e4ff;

  --md-sys-color-error:                 #ba1a1a;
  --md-sys-color-error-hover:           #8b1212;
  --md-sys-color-on-error:              #ffffff;

  --md-sys-color-surface:               #f5f6fa;
  --md-sys-color-on-surface:            #1a1c22;
  --md-sys-color-on-surface-variant:    #44495a;
  --md-sys-color-surface-container-low: #e8edf5;
  --md-sys-color-surface-container:     #dde3ee;
  --md-sys-color-surface-container-high:#cdd3de;
  --md-sys-color-outline-variant:       #c1c7d4;
  --md-sys-color-inverse-surface:       #2d3141;
  --md-sys-color-inverse-on-surface:    #f0f1f8;
  --md-sys-color-scrim:                 rgba(0, 0, 0, 0.32);

  /* Semantische Statusfarben (keine M3-Rollen) */
  --color-status-yes:       #2db55d;
  --color-status-maybe:     #d4b800;
  --color-status-no:        #c62828;
  --color-status-elsewhere: #0d7490;
  --color-status-noentry:   #dbeeff;
  --color-light-green:      #00e84a;
  --color-light-yellow:     #ffe000;
  --color-light-red:        #ff2222;
  --color-weather-precip:   #1565c0;

  /* M3 Shape */
  --md-sys-shape-extra-small: 4px;
  --md-sys-shape-small:       8px;
  --md-sys-shape-medium:      12px;
  --md-sys-shape-large:       16px;
  --md-sys-shape-full:        9999px;

  /* Abstände (4dp-Raster) */
  --md-spacing-1: 4px;
  --md-spacing-2: 8px;
  --md-spacing-3: 12px;
  --md-spacing-4: 16px;
  --md-spacing-6: 24px;

  /* Elevation (Box-Shadows) */
  --md-elevation-1: 0 1px 2px rgba(0,0,0,0.12), 0 1px 3px rgba(0,0,0,0.08);
  --md-elevation-2: 0 2px 6px rgba(0,0,0,0.14), 0 1px 4px rgba(0,0,0,0.10);
  --md-elevation-3: 0 4px 12px rgba(0,0,0,0.18), 0 2px 6px rgba(0,0,0,0.12);

  /* Motion */
  --md-transition-standard: 200ms cubic-bezier(0.2, 0, 0, 1);
  --md-transition-short:    100ms cubic-bezier(0.2, 0, 0, 1);
}

/* ============================================================
   2. BASE / RESET
   ============================================================ */
*, *::before, *::after {
  box-sizing: border-box;
}

body {
  font-family: 'Roboto', Helvetica, Arial, sans-serif;
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: var(--md-sys-color-on-surface);
  background-color: var(--md-sys-color-surface);
  overflow-x: auto;
}

legend {
  width: 100%;
}

fieldset {
  border: 0;
}

hr {
  border: none;
  border-top: 1px solid var(--md-sys-color-outline-variant);
}

/* ============================================================
   3. LAYOUT — Header
   ============================================================ */
.header_grid {
  width: fit-content;
  display: grid;
  grid-template-areas: "h_img h_h h_motto";
}

.h_img {
  grid-area: h_img;
  margin-right: 10px;
}

.h_h {
  grid-area: h_h;
}

.h_motto {
  grid-area: h_motto;
}

.header_div {
  position: relative;
}

.header_div img {
  width: 5em;
}

#motto {
  border: 1.5px solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-small);
  color: var(--md-sys-color-on-surface);
  font-size: 1.2em;
  font-weight: bold;
  transform: rotate(-20deg);
  vertical-align: top;
  width: fit-content;
  text-align: center;
  font-family: monospace;
  padding: var(--md-spacing-1);
}

@media only screen and (max-width: 1000px) {
  .header_grid {
    width: fit-content;
    display: grid;
    grid-template-areas:
      "h_motto h_motto"
      "h_img   h_h";
  }

  .h_img {
    display: flex;
    flex-flow: column;
    justify-content: center;
  }

  .h_motto {
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-end;
  }

  #motto {
    transform: rotate(-10deg);
  }
}

/* ============================================================
   4. TYPOGRAPHY
   ============================================================ */
h1 {
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 2rem;
  margin: 0;
}

#hinweistext {
  padding: 0.39em 1em;
  margin-left: 0;
  margin-right: 0;
  margin-top: 0.5em;
}

#hinweistextaenderungszeit {
  font-size: 0.75em;
  color: var(--md-sys-color-on-surface-variant);
}

.row_head {
  text-align: right;
  font-size: 0.85em;
  font-weight: 400;
  color: var(--md-sys-color-on-surface-variant);
}

.row_number {
  text-align: center;
  font-size: 0.5em;
  color: var(--md-sys-color-on-surface-variant);
}

/* ============================================================
   5. TABLE — Kalender-Raster, Sticky-Mechanik
   ============================================================ */
.x_scrollable {
  position: relative;
  max-height: 80vh;
  max-width: max-content;
  overflow: scroll;
}

table.bereitschaftTable {
  border-collapse: separate;
  text-align: center;
  border-spacing: 0;
}

table.bereitschaftTable td,
table.bereitschaftTable th {
  white-space: nowrap;
  height: 25px;
  font-weight: 400;
  border-bottom: 1px solid var(--md-sys-color-outline-variant);
  border-right:  1px solid var(--md-sys-color-outline-variant);
  transition: background-color var(--md-transition-short);
}

/* Sticky Kopfzeile (Datum) — z-index 1 */
table.bereitschaftTable tr:first-child td,
table.bereitschaftTable tr:first-child th {
  top: 0;
  position: sticky;
  z-index: 1;
  background-color: var(--md-sys-color-surface-container-low);
  border-top: 1px solid var(--md-sys-color-outline-variant);
}

/* Sticky Terminzeile — z-index 1 */
table.bereitschaftTable tr.terminzeile td,
table.bereitschaftTable tr.terminzeile th {
  top: 29px;
  position: sticky;
  z-index: 1;
  background-color: var(--md-sys-color-surface);
}

/* Ecken oben links — z-index 4 */
#datum-header-1, #datum-header-2 {
  position: sticky;
  z-index: 4;
  background-color: var(--md-sys-color-surface-container-low);
}

#termin-header-1, #termin-header-2 {
  position: sticky;
  z-index: 4;
  background-color: var(--md-sys-color-surface);
}

/* Ecken beim Horizontalscroll abdunkeln */
table.column_shrinking #datum-header-1,
table.column_shrinking #datum-header-2 {
  background-color: var(--md-sys-color-surface-container);
}

table.column_shrinking #termin-header-1,
table.column_shrinking #termin-header-2 {
  background-color: var(--md-sys-color-surface-container-high);
}

table.bereitschaftTable td:first-child,
table.bereitschaftTable th:first-child {
  border-left: 1px solid var(--md-sys-color-outline-variant);
}

/* Sticky Spalten 1+2 — z-index 2 */
table.bereitschaftTable td:nth-child(1),
table.bereitschaftTable th:nth-child(1) {
  min-width: 23px;
  position: sticky;
  left: 0;
  z-index: 2;
}

table.bereitschaftTable td:nth-child(2),
table.bereitschaftTable th:nth-child(2) {
  position: sticky;
  left: 23px;
  z-index: 2;
}

/* Spalte 2 schmäler beim Horizontalscroll */
.column_shrinking td:nth-child(2),
.column_shrinking th:nth-child(2) {
  max-width: 50px;
  text-overflow: ellipsis;
  overflow: hidden;
  font-size: 0.85em;
}

/* Zeilen-Striping — Hintergrundfarben für JS-Gradient-Überblendung */
table.bereitschaftTable tr:nth-child(even) {
  background-color: var(--md-sys-color-surface);
}

table.bereitschaftTable tr:nth-child(odd) {
  background-color: var(--md-sys-color-surface-container-low);
}

/* Explizite Hintergründe für sticky Spalten 1+2 je Zeile */
table.bereitschaftTable tr:nth-child(even) > td:nth-child(-n+2),
table.bereitschaftTable tr:nth-child(even) > th:nth-child(-n+2) {
  background-color: var(--md-sys-color-surface);
}

table.bereitschaftTable tr:nth-child(odd) > td:nth-child(-n+2),
table.bereitschaftTable tr:nth-child(odd) > th:nth-child(-n+2) {
  background-color: var(--md-sys-color-surface-container-low);
}

/* Sticky Spalten beim Horizontalscroll abdunkeln */
table.column_shrinking tr:nth-child(even) > td:nth-child(-n+2),
table.column_shrinking tr:nth-child(even) > th:nth-child(-n+2) {
  background-color: var(--md-sys-color-surface-container-high);
}

table.column_shrinking tr:nth-child(odd) > td:nth-child(-n+2),
table.column_shrinking tr:nth-child(odd) > th:nth-child(-n+2) {
  background-color: var(--md-sys-color-surface-container);
}

/* ============================================================
   6. KOMPONENTEN — Buttons, Modals, Formulare, Dropdowns
   ============================================================ */

/* --- Buttons ----------------------------------------------- */
.button {
  padding: 0.5em 1.5em;
  margin-left: 0;
  margin-right: 0;
  margin-top: 0.5em;
  border-radius: var(--md-sys-shape-full);
  white-space: nowrap;
  background-color: var(--md-sys-color-primary);
  color: var(--md-sys-color-on-primary);
  border: 0;
  min-width: 8em;
  font-family: inherit;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.031em;
  cursor: pointer;
  transition: background-color var(--md-transition-standard),
              box-shadow var(--md-transition-standard);
}

.button:hover {
  background-color: var(--md-sys-color-primary-hover);
  color: var(--md-sys-color-on-primary);
  box-shadow: var(--md-elevation-1);
}

#fahrerLoeschen,
#terminLoeschen {
  float: right;
  vertical-align: top;
}

#fahrerLoeschen:hover,
#terminLoeschen:hover {
  background-color: var(--md-sys-color-error);
}

/* --- Modals / Dialoge -------------------------------------- */
.modal {
  display: none;
  position: fixed;
  z-index: 10;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: var(--md-sys-color-scrim);
}

.overlayHidden {
  display: none;
}

.overlay {
  box-shadow: var(--md-elevation-3);
  border-radius: var(--md-sys-shape-large);
  margin: 1em;
  display: inline-block;
  background-color: var(--md-sys-color-surface-container-low);
  position: -webkit-sticky;
  position: sticky;
}

#errorPopup {
  padding: 1em;
  border: 2px solid var(--md-sys-color-error);
  position: sticky;
  top: 10%;
  left: 10%;
}

.close {
  display: block;
  margin: 0;
}

.close span {
  float: right;
  font-size: 2em;
  cursor: pointer;
  color: var(--md-sys-color-on-surface-variant);
  transition: color var(--md-transition-short);
}

.close span:hover {
  color: var(--md-sys-color-primary);
}

/* --- Formulare --------------------------------------------- */
#neuerFahrerForm,
#hinweisForm,
#terminForm,
#ampelForm {
  padding: 0.5em;
}

.right {
  float: right;
  text-align: right;
}

.input_grid {
  width: fit-content;
  display: grid;
  align-items: start;
  grid-template-columns: 2fr 1fr;
}

.input_grid legend {
  color: var(--md-sys-color-on-surface);
  font-weight: 500;
  font-size: 1rem;
}

.input_grid label {
  width: fit-content;
  grid-column: 1 / span 2;
  margin-top: var(--md-spacing-3);
}

legend {
  width: fit-content;
  grid-column: 1 / span 2;
}

.input_grid textarea {
  grid-column: 1 / span 3;
  border: 1.5px solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-extra-small);
  padding: var(--md-spacing-1) var(--md-spacing-2);
  margin-bottom: var(--md-spacing-3);
  background-color: var(--md-sys-color-surface);
  font-family: inherit;
  font-size: 0.875rem;
  color: var(--md-sys-color-on-surface);
  transition: border-color var(--md-transition-short);
}

.input_grid textarea:focus {
  border-color: var(--md-sys-color-primary);
  outline: none;
}

.input_grid input[type="text"],
.input_grid input[type="date"],
.input_grid input[type="number"] {
  border: 1.5px solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-extra-small);
  padding: var(--md-spacing-1) var(--md-spacing-2);
  background-color: var(--md-sys-color-surface);
  font-family: inherit;
  font-size: 0.875rem;
  color: var(--md-sys-color-on-surface);
  transition: border-color var(--md-transition-short);
}

.input_grid input[type="text"]:focus,
.input_grid input[type="date"]:focus,
.input_grid input[type="number"]:focus {
  border-color: var(--md-sys-color-primary);
  outline: none;
}

.input_grid input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--md-sys-color-primary);
  outline-offset: 2px;
}

.input_grid .input_div {
  text-align: end;
  grid-column: 3;
}

.input_grid .popup_buttons {
  grid-column: 1 / span 3;
}

#captcha_label {
  font-weight: 400;
}

.error {
  font-weight: 700;
  color: var(--md-sys-color-error);
}

/* --- Dropdowns (Verfügbarkeits-Auswahlmenü) ---------------- */
.timeslots {
  display: flex;
  padding: 0;
  margin: 0;
  height: 100%;
}

.dropdownCont {
  position: relative;
  flex: 1 1 100px;
  padding: 0;
  margin: 0;
  cursor: pointer;
}

/* Aktive Zelle (Dropdown offen): M3 State Layer mit Primary */
.dropdownActive {
  background: linear-gradient(90deg,
    rgba(26, 86, 164, 0),
    rgba(26, 86, 164, 0.06),
    rgba(26, 86, 164, 0.12));
}

/* Pfeil-Pointer zur offenen Dropdown-Karte */
.dropdownActive::after {
  content: " ";
  position: absolute;
  left: 17px;
  top: 2px;
  border-width: 10px;
  border-style: solid;
  border-color: transparent var(--md-sys-color-surface) transparent transparent;
  z-index: 5;
}

/* Dropdown-Panel — M3 Menu */
.dropdown {
  display: inline-block;
  position: absolute;
  top: -1em;
  left: 36px;
  box-shadow: var(--md-elevation-2);
  border-radius: var(--md-sys-shape-medium);
  background-color: var(--md-sys-color-surface);
  z-index: 5;
}

.dropdownTitle {
  padding: 0.5em;
  white-space: nowrap;
  color: var(--md-sys-color-on-surface);
  font-size: 0.875rem;
}

.dropdownHeader {
  display: block;
  position: absolute;
  top: 0;
  left: 105%;
  z-index: 5;
  box-shadow: var(--md-elevation-2);
  border-radius: var(--md-sys-shape-medium);
  text-align: left;
  background-color: var(--md-sys-color-surface);
  padding: 0.5em;
  font-weight: 400;
  white-space: nowrap;
  color: var(--md-sys-color-on-surface);
}

/* Einzelne Optionszeile — M3 Menu Item */
.dropdownOption {
  border-radius: var(--md-sys-shape-small);
  border: 1px solid var(--md-sys-color-outline-variant);
  margin: var(--md-spacing-2);
  white-space: nowrap;
  font-weight: 500;
  font-size: 0.75rem;
  letter-spacing: 0.031em;
  padding-top: 0.2em;
  padding-bottom: 0.2em;
  padding-left: 0.5em;
  padding-right: 0.5em;
  transition: background var(--md-transition-standard);
}

.dropdownOption.early  { text-align: left; }
.dropdownOption.late   { text-align: right; }
.dropdownOption.midday { text-align: center; }

.dropdownOption.noentry {
  font-weight: 400;
}

/* ============================================================
   7. STATUSFARBEN — Dropdown-Option-Gradienten
   #f5f6fa = --md-sys-color-surface (muss literal in Gradienten stehen)
   ============================================================ */

/* JA */
.dropdownOption.yes.early  { background: linear-gradient(270deg, #f5f6fa, #f5f6fa, var(--color-status-yes)); }
.dropdownOption.yes.midday { background: linear-gradient(270deg, #f5f6fa, var(--color-status-yes), #f5f6fa); }
.dropdownOption.yes.late   { background: linear-gradient( 90deg, #f5f6fa, #f5f6fa, var(--color-status-yes)); }
.dropdownOption.yes:hover  { background: var(--color-status-yes); }

/* VIELLEICHT */
.dropdownOption.maybe.early  { background: linear-gradient(270deg, #f5f6fa, #f5f6fa, var(--color-status-maybe)); }
.dropdownOption.maybe.midday { background: linear-gradient(270deg, #f5f6fa, var(--color-status-maybe), #f5f6fa); }
.dropdownOption.maybe.late   { background: linear-gradient( 90deg, #f5f6fa, #f5f6fa, var(--color-status-maybe)); }
.dropdownOption.maybe:hover  { background: var(--color-status-maybe); }

/* NEIN */
.dropdownOption.no.early  { background: linear-gradient(270deg, #f5f6fa, #f5f6fa, var(--color-status-no)); }
.dropdownOption.no.midday { background: linear-gradient(270deg, #f5f6fa, var(--color-status-no), #f5f6fa); }
.dropdownOption.no.late   { background: linear-gradient( 90deg, #f5f6fa, #f5f6fa, var(--color-status-no)); }
.dropdownOption.no:hover  { background: var(--color-status-no); }

/* WOANDERS */
.dropdownOption.elsewhere.early  { background: linear-gradient(270deg, #f5f6fa, #f5f6fa, var(--color-status-elsewhere)); }
.dropdownOption.elsewhere.midday { background: linear-gradient(270deg, #f5f6fa, var(--color-status-elsewhere), #f5f6fa); }
.dropdownOption.elsewhere.late   { background: linear-gradient( 90deg, #f5f6fa, #f5f6fa, var(--color-status-elsewhere)); }
.dropdownOption.elsewhere:hover  { background: var(--color-status-elsewhere); }

/* KEIN EINTRAG */
.dropdownOption.noentry.early  { background: linear-gradient(270deg, #f5f6fa, #f5f6fa, var(--color-status-noentry)); }
.dropdownOption.noentry.midday { background: linear-gradient(270deg, #f5f6fa, var(--color-status-noentry), #f5f6fa); }
.dropdownOption.noentry.late   { background: linear-gradient( 90deg, #f5f6fa, #f5f6fa, var(--color-status-noentry)); }
.dropdownOption.noentry:hover  { background: var(--color-status-noentry); }

/* ============================================================
   8. RESSOURCEN-INDIKATOREN — Ampel
   ============================================================ */
table.staticResourceTable,
td.resource {
  background-color: var(--md-sys-color-surface-container-low);
  text-align: center;
  border-collapse: collapse;
  border: 1px solid var(--md-sys-color-outline-variant);
}

.ampel {
  border-radius: var(--md-sys-shape-small);
  display: flex;
  flex-direction: row;
  justify-content: center;
  background-color: var(--md-sys-color-on-surface-variant);
  padding: var(--md-spacing-1);
}

.light {
  border: 0;
  border-radius: var(--md-sys-shape-full);
  width: 0.8em;
  height: 0.8em;
  margin: 0.2em;
  padding: 0.2em;
  transition: opacity var(--md-transition-short),
              box-shadow var(--md-transition-short);
}

.light_off {
  opacity: 0.30;
}

.light_on {
  box-shadow: 0 0 8px 4px currentColor, 0 0 16px 4px currentColor;
  opacity: 1;
}

.light:hover {
  opacity: 1;
  cursor: pointer;
  box-shadow: 0 0 10px 5px currentColor, 0 0 20px 6px currentColor;
}

.green  { background-color: var(--color-light-green);  color: var(--color-light-green); }
.yellow { background-color: var(--color-light-yellow); color: var(--color-light-yellow); }
.red    { background-color: var(--color-light-red);    color: var(--color-light-red); }

/* ============================================================
   8b. AMPEL-DIALOG
   ============================================================ */

/* Grid: eine Spalte pro Gerät, automatisch umgebrochen */
.ampel_dialog_grid {
  grid-column: 1 / span 3;
  display: flex;
  flex-wrap: wrap;
  gap: var(--md-spacing-4);
  margin-bottom: var(--md-spacing-3);
}

/* Eine Zelle = Ampel + Beschriftung */
.ampel_dialog_cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--md-spacing-1);
}

/* Ampel-Gehäuse im Dialog — gleiche Optik wie in der Tabelle */
.ampel_dialog_ampel {
  display: flex;
  flex-direction: row;
  align-items: center;
  background-color: var(--md-sys-color-on-surface);
  border-radius: var(--md-sys-shape-small);
  padding: var(--md-spacing-1);
  gap: 0;
}

/* Radio-Inputs verstecken — Auswahl erfolgt über die Labels */
.ampel_radio {
  display: none;
}

/* Labels fungieren als Lampen; Basis-Layout identisch zu .light */
.ampel_dialog_ampel label.light {
  cursor: pointer;
  display: block;
  border-radius: var(--md-sys-shape-full);
  width: 1.1em;
  height: 1.1em;
  margin: 0.2em;
  transition: opacity var(--md-transition-short),
              box-shadow var(--md-transition-short);
}

/* Nicht ausgewählt = gedimmt */
.ampel_radio:not(:checked) + label.light {
  opacity: 0.30;
  box-shadow: none;
}

/* Ausgewählt = leuchtet (identisch zu .light_on in der Tabelle) */
.ampel_radio:checked + label.light {
  opacity: 1;
  box-shadow: 0 0 8px 4px currentColor, 0 0 16px 4px currentColor;
}

/* Hover auf nicht ausgewählter Lampe */
.ampel_radio:not(:checked) + label.light:hover {
  opacity: 0.65;
}

/* Gerätename unter der Ampel */
.ampel_dialog_label {
  font-size: 0.8em;
  color: var(--md-sys-color-on-surface-variant);
  text-align: center;
  white-space: nowrap;
}

/* ============================================================
   9. WETTER-ANZEIGE
   ============================================================ */
.weather_head {
  font-weight: 400;
  height: 80px;
}

.weather_tag {
  padding: 0;
}

img.weather_img {
  width: 1.5em;
  padding: 0;
  margin: 0;
}

.weather_grid {
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
}

.prec_div:nth-child(even) {
  background-color: rgba(0, 0, 0, 0.05) !important;
}

.weather_div {
  position: relative;
  display: inline-block;
  font-size: 0.8em;
}

.weathertext {
  font-weight: 700;
  font-size: 1em;
}

/* Tooltip — M3 Plain Tooltip */
.weather_div .weathertext {
  opacity: 0;
  visibility: hidden;
  background-color: var(--md-sys-color-inverse-surface);
  color: var(--md-sys-color-inverse-on-surface);
  text-align: center;
  padding: 4px 8px;
  border-radius: var(--md-sys-shape-extra-small);
  position: absolute;
  z-index: 6;
  width: 280px;
  bottom: 100%;
  left: -80%;
  transition: opacity var(--md-transition-short),
              visibility 0s var(--md-transition-short);
}

.weather_div:hover .weathertext {
  opacity: 1;
  visibility: visible;
  box-shadow: var(--md-elevation-2);
  transition: opacity var(--md-transition-short),
              visibility 0s;
}

/* Tooltip-Pfeil */
.weather_div .weathertext::after {
  content: " ";
  position: absolute;
  top: 100%;
  left: 10%;
  margin-left: -10px;
  border-width: 10px;
  border-style: solid;
  border-color: var(--md-sys-color-inverse-surface) transparent transparent transparent;
}

.weatherblue {
  color: var(--color-weather-precip);
}

.weather_link,
.extra_link {
  padding-left: 1em;
  transition: color var(--md-transition-short);
}

.weather_link:hover,
.extra_link:hover {
  color: var(--md-sys-color-primary);
  cursor: pointer;
}

/* ============================================================
   10. ZÄHLER-BALKEN
   ============================================================ */
.bereitschaft,
.counter_td {
  padding: 0;
  margin: 0;
}

.counter_grid {
  padding: 0;
  margin: 0;
  display: flex;
  flex-flow: column;
}

.counter_line {
  display: flex;
  flex: 1 1 auto;
}

.counter_back {
  position: relative;
  display: inline-block;
  flex: 1 1 auto;
  border-radius: var(--md-sys-shape-extra-small);
}

/* Auto-kontrastierender Text durch Invertier-Trick */
.counter_val {
  font-size: 90%;
  background: inherit;
  background-clip: text;
  color: transparent;
  filter: invert(1) grayscale(1) contrast(5);
}

/* ============================================================
   11. LEGENDE
   ============================================================ */
#legendeTable,
#legendeTable th {
  border-collapse: collapse;
  border: 1px solid var(--md-sys-color-outline-variant);
  background-color: var(--md-sys-color-surface);
}

#legende {
  color: var(--md-sys-color-on-surface);
}

#legende small,
.version {
  color: var(--md-sys-color-on-surface-variant);
  font-size: 0.75em;
}

/* ============================================================
   12. UTILITY-KLASSEN
   ============================================================ */

/* Klickbare / sortierbare Elemente */
.active {
  color: var(--md-sys-color-primary);
  cursor: pointer;
  transition: color var(--md-transition-short);
}

.active:hover,
.active:focus {
  color: var(--md-sys-color-primary-hover);
}

.sorting .active:hover,
.sorting .active:focus {
  color: var(--md-sys-color-primary);
}

/* Sortierpfeil */
.sort_symbol {
  color: rgba(26, 86, 164, 0.28);
}

.sorting .sort_symbol {
  color: var(--md-sys-color-primary);
}

.termin:hover,
.bereitschaft:hover {
  cursor: pointer;
}

.tag,
.termin {
  text-align: center;
  padding-left: 0.5em;
  padding-right: 0.5em;
}

.fahrerDiv {
  text-align: left;
  font-weight: 400;
  white-space: nowrap;
}

.fahrerFeature {
  text-align: center;
  font-size: 0.6em;
  color: var(--md-sys-color-on-surface-variant);
  padding-left: 0.3em;
  padding-right: 0.3em;
}

/* Erzwingt Spaltenbreite ohne das inline-Textlayout zu beeinflussen:
   block-Element mit height:0 trägt zur Spaltenbreite bei, aber nicht
   zur Zeilenbreite des sichtbaren Inhalts */
.fahrerFeatureSizer {
  display: block;
  height: 0;
  overflow: hidden;
  white-space: nowrap;
}

#hinweisButton {
  display: inline-block;
}

/* ============================================================
   13. RESPONSIVE — max-width: 1000px
   (Header-Layout-Umbruch bereits in Sektion 3)
   ============================================================ */
@media only screen and (max-width: 1000px) {
  .button {
    min-width: 6em;
  }
}