@import url("https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap");
html {
  font-family: "Nunito", sans-serif;
  font-optical-sizing: auto;
  font-weight: 600;
  font-style: normal;
}

/* Allgemeines Styling für das Layout */

.Gesamtdistanz {
  text-align: center;
  font-size: 25px;
}
/* Container für den Kopfbereich */
.header-container {
  z-index: 1000;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  display: grid;
  gap: 15px;
  padding: 20px;
  background-color: #f9f9f9;
  border-radius: 10px;
  transition: all 0.3s ease; /* Für sanfte Übergänge */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.header-container.minimized {
  padding: 10px 20px; /* Verkleinertes Padding */
  background-color: #ffffff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  top: -170px;
}

/* Stil für den gesamten Seiteninhalt unterhalb des Kopfbereichs */
.content {
  margin-top: 370px; /* Platz für den Kopfbereich */
  padding: 20px;
}

/* Flexibles Layout für verschiedene Bildschirmgrößen */
@media (min-width: 768px) {
  .header-container {
    grid-template-columns: repeat(3, 1fr); /* 3 gleich große Spalten */
    grid-template-areas:
      "title title title"
      "start boje rakken"
      "button button button"; /* Hinzufügen-Button über die gesamte Breite */
  }

  .content {
    margin-top: 210px; /* Platz für den Kopfbereich */
    padding: 20px;
  }

  .header-container.minimized {
    padding: 10px 20px; /* Verkleinertes Padding */
    background-color: #ffffff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    top: -80px;
  }
}

/* Stil für die Überschrift */
.header-container h1 {
  font-size: 24px;
  font-weight: bold;
  color: #333;
  text-align: center;
  grid-area: title; /* Positioniere die Überschrift */
}

/* Stil für Labels und Eingabefelder */
.header-container label {
  font-size: 14px;
  font-weight: bold;
  color: #555;
  margin-bottom: 5px;
}

.header-container input,
.header-container select,
.header-container button {
  padding: 10px;
  font-size: 14px;
  border: 1px solid #ccc;
  border-radius: 5px;
  background-color: #fff;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* Stil für die Spalten-Wrapper */
.header-container .input-wrapper {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.start {
  grid-area: start;
}

.boje {
  grid-area: boje;
}

.rakken {
  grid-area: rakken;
}

/* Stile für den Hinzufügen-Button */
.header-container button {
  background-color: #007bff;
  color: #fff;
  border: none;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.header-container button:disabled {
  background-color: #ccc;
  cursor: not-allowed;
}

.header-container button:hover:not(:disabled) {
  background-color: #0056b3;
}

/* Layout für kleine Bildschirme */
@media (max-width: 767px) {
  .header-container {
    grid-template-columns: 1fr; /* 1 Spalte auf kleinen Bildschirmen */
    grid-template-areas:
      "title"
      "start"
      "boje"
      "rakken"
      "button"; /* Alles untereinander */
  }

  h1 {
    text-align: left;
  }
}

/* Stile für den Hinzufügen-Button (Add-Button) */
.add-button {
  background-color: #007bff;
  color: #fff;
  border: none;
  cursor: pointer;
  transition: background-color 0.3s ease;
  grid-area: button; /* Positionierung im Grid */
}

.add-button:disabled {
  background-color: #ccc;
  cursor: not-allowed;
}

.add-button:hover:not(:disabled) {
  background-color: #0056b3;
}

/* Stile für den deleteAll-button */
.deleteAll-button {
  background-color: #ff0000;
  color: #fff;
  border: none;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  padding: 10px 15px;
  font-size: 16px;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s ease;

  /* Zentrierung des Buttons auf dem Bildschirm */
  position: relative;
  margin-top: 20px;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* Stile für den Settings-Button (oben rechts im Header) */
.settings-button {
  position: absolute;
  top: 20px;
  right: 20px;
  background-color: #28a745;
  color: #fff;
  border: none;
  padding: 10px 15px;
  font-size: 16px;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.settings-button:hover {
  background-color: #218838;
}

.save-button {
  position: absolute;
  top: 20px;
  left: 20px;
  background-color: #28a745;
  color: #fff;
  border: none;
  padding: 10px 15px;
  font-size: 16px;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.save-button:hover {
  background-color: #218838;
}

/*********************** Container für die Karten *****************************/

/* Container für die Kartenliste */
.connection-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(318px, 1fr)); /* Mindestbreite 350px für die Karten */
  gap: 20px;
  padding: 20px;
  overflow-x: hidden; /* Kein horizontales Scrollen in der Liste */
  touch-action: pan-y; /* Nur vertikales Scrollen erlauben */
}

/* Stil für die Connection Cards */
.connection-card {
  user-select: None;
  background-color: #f1f1f1;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  margin-bottom: 15px;
  position: relative;
  overflow-x: hidden; /* Kein horizontales Scrollen innerhalb der Karten */
  touch-action: pan-y; /* Nur vertikales Scrollen erlauben */
}
/* Die Überschrift, die über die ganze Karte geht */
.connection-card .boje-verbunden {
  color: #585858;
  font-size: 22px;
  font-weight: bold;
  margin-bottom: 15px; /* Abstand zur Icon-Sektion */
  display: block;
  text-align: left; /* Zentriere die Boje-Verbindung */
}

/* Grid für die 6 Icons */
.connection-card .icon-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* Zwei gleich große Spalten */
  gap: 10px; /* Abstand zwischen den Spalten */
}

/* Große Nummer im Hintergrund */
.connection-card::before {
  content: attr(data-number); /* Nutze das data-number-Attribut */
  position: absolute;
  top: -5px;
  right: 10px;
  font-size: 50px;
  color: rgba(0, 0, 0, 0.15); /* Sehr helle Farbe für den Hintergrundeffekt */
  font-weight: bold;
  z-index: 0;
  pointer-events: none; /* Interaktionen verhindern */
}

/* Stil für die einzelnen Informationen mit Icons */
.connection-card span {
  display: flex;
  align-items: center;
  font-size: 14px;
  color: #333;
}

/* Stil für die Icons innerhalb der Karten */
.connection-card i {
  margin-right: 8px;
  color: #007bff;
  font-size: 16px;
}

/* Design für den Mülleimer-Button */
.connection-card button.deleteButton {
  position: absolute;
  bottom: 5px;
  right: 0px;
  background-color: transparent;
  border: none;
  cursor: pointer;
  z-index: 1;
}

.connection-card button.deleteButton i {
  font-size: 20px;
  color: #ff0022b2; /* Rote Farbe für den Mülleimer */
}

/* Stile für größere Bildschirme */
@media (min-width: 768px) {
  .connection-list {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  }
}

/******************* ICONS *********************/

/* Farbe für spezifische Icons festlegen */
.icon-distanz {
  color: #1e8fff98; /* Blau für Distanz */
}

.icon-kurs {
  color: #1e8fff98; /* Grün für Kurs */
}

.icon-dauer {
  color: #1e8fff98; /* Orange für Dauer */
}

.icon-ankunft {
  color: #1e8fff98; /* Grau für Ankunft */
}

.icon-winkel {
  color: #1e8fff98; /* Türkis für Winkel */
}

.icon-geschwindigkeit {
  color: #1e8fff98; /* Gelb für Geschwindigkeit */
}

.icon-close {
  color: #ff000098; /* Gelb für Geschwindigkeit */
}

/****************** MAP ***********************/

/* Stile für den map-Button (oben links im Header) */
.map-button {
  position: absolute;
  top: 20px;
  left: 20px;
  background-color: #28a745;
  color: #fff;
  border: none;
  padding: 10px 15px;
  font-size: 16px;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.map-button:hover {
  background-color: #218838;
}

/* Das Overlay nimmt jetzt den gesamten Bildschirm ein */
.map-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6); /* Halbtransparentes Schwarz */
  display: none; /* Wird beim Öffnen angezeigt */
  z-index: 1000;
}

/* Das Content-Fenster ist jetzt fullscreen und scrollbar */
.map-content {
  position: relative;
  width: 100%;
  height: 100%;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  overflow-y: auto; /* Scrollen ermöglichen */
  box-sizing: border-box; /* Padding und Border werden berücksichtigt */
}

/* Schließen-Button oben rechts */
.map-close {
  position: absolute;
  top: 20px;
  right: 20px;
  background-color: #a728287a;
  color: #fff;
  border: none;
  padding: 10px 12px;
  font-size: 14px;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s ease;
  z-index: 1500;
}

.buoy-label {
  text-align: center;
  font-size: 12px;
  margin-top: 10px;
  pointer-events: none;
}

.map-DataOverlay {
  position: fixed;
  bottom: 10px;
  left: 10px;
  padding: 10px;
  background-color: rgba(255, 255, 255, 0.8);
  border: 1px solid #ccc;
  border-radius: 5px;
  z-index: 1000;
  font-size: 14px;
  pointer-events: none;
}

.map-DataOverlay p {
  margin: 5px 0;
}

.map-windrose {
  position: fixed;
  width: 20vh;
  height: 20vh;
  bottom: 150px;
  left: 10px;
  padding: 10px;
  background-color: rgba(255, 255, 255, 0.8);
  background-image: url(windrose.svg);
  background-size: contain; /* Größe des Hintergrundbildes anpassen */
  background-repeat: no-repeat; /* Verhindert das Wiederholen des Hintergrundbildes */
  background-position: center; /* Zentriert das Hintergrundbild */
  border: 1px solid #ccc;
  border-radius: 50%;
  z-index: 1000;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0.8;
  pointer-events: none;
}

#windpfeil {
  width: 20vh;
  height: 20vh;
  transition: transform 0.6s cubic-bezier(.68,-0.55,.27,1.55);
  transform-origin: center center; /* Drehen um das Zentrum */
  background-image: url(pfeil.svg);
  background-size: contain; /* Größe des Hintergrundbildes anpassen */
  background-repeat: no-repeat; /* Verhindert das Wiederholen des Hintergrundbildes */
  background-position: center; /* Zentriert das Hintergrundbild */
}



/****************** SETTINGS ***********************/

/* Das Overlay nimmt jetzt den gesamten Bildschirm ein */
.settings-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6); /* Halbtransparentes Schwarz */
  display: none; /* Wird beim Öffnen angezeigt */
  z-index: 2000;
}

/* Das Content-Fenster ist jetzt fullscreen und scrollbar */
.settings-content {
  position: relative;
  width: 100%;
  height: 100%;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  padding: 20px;
  overflow-y: auto; /* Scrollen ermöglichen */
  box-sizing: border-box; /* Padding und Border werden berücksichtigt */
}

/* Schließen-Button oben rechts */
.settings-close {
  position: absolute;
  top: 20px;
  right: 20px;
  background-color: #a728287a;
  color: #fff;
  border: none;
  padding: 10px 12px;
  font-size: 14px;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s ease;
  z-index: 10; /* Sicherstellen, dass der Button über der Tabelle liegt */
}

/* Tabelle und andere Inhalte innerhalb des Overlays */
#wetterTabelle {
  width: 100%;
  border-collapse: collapse;
  margin: 20px 0;
}

#wetterTabelle th,
#wetterTabelle td {
  padding: 10px;
  text-align: left;
  border-bottom: 1px solid #ddd;
}

#wetterTabelle th {
  background-color: #f4f4f4;
  font-weight: bold;
  color: #333;
}

#wetterTabelle tr:hover {
  background-color: #f1f1f1;
}

#wetterTabelle td {
  background-color: #fff;
}

/* Wetterdaten Eingabe-Felder */
.settings-content input {
  width: 100%;
  padding: 10px;
  margin-bottom: 15px;
  border: 1px solid #ccc;
  border-radius: 5px;
  box-sizing: border-box;
}

/********************************** Stil für den Range-Slider ***********************************/
/* Container für den Range-Slider */
.range-slider-container {
  margin-top: 50px;
  margin-bottom: -25px;
  display: flex;
  align-content: space-around;
  justify-content: space-evenly;
  align-items: flex-start;
  flex-direction: column;
  flex-wrap: wrap;
}

/* Stil für das Label des Range-Sliders */
.range-slider-label {
  font-weight: bold;
  display: block;
  margin-bottom: 0px;
  text-align: center; /* Zentriert das Label */
}

/* Flexbox-Container für die Slider und Werte */
.range-slider {
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  flex-direction: row;
  flex-wrap: nowrap;
  align-content: stretch;
}

/* Einzelne Slider-Gruppe für jeden Slider und seinen Wert */
.slider-group {
  display: flex;
  flex-direction: column; /* Stapelt den Slider und den Wert */
  align-items: center; /* Zentriert den Wert unter dem Slider */
}

/* Slider-Eingaben */
.range-slider-input {
  width: 100%;
  margin: 10px 0;
  appearance: none;
  height: 5px;
  background: #ddd;
  opacity: 0.9;
  transition: opacity 0.3s;
  border-radius: 5px;

  border: 1px solid #ccc;
  border-radius: 0px;
  box-sizing: border-box;
}

/* Stil für den Schieberegler */
.range-slider-input::-webkit-slider-thumb {
  appearance: none;
  width: 20px;
  height: 20px;
  background-color: #007bff;
  border-radius: 50%;
  cursor: pointer;
}

.range-slider-input::-moz-range-thumb {
  width: 20px;
  height: 20px;
  background-color: #007bff;
  border-radius: 50%;
  cursor: pointer;
}

/* Wertanzeige für den Range-Slider, jetzt zentriert */
.range-slider-value {
  font-size: 16px;
  margin-top: 5px; /* Abstand zum Slider */
  text-align: center; /* Zentriert den Text */
}