:root {
  --primary: #6b947e;         /* frisches, klares Grün */
  --accent: #4e576b;          /* sanftes Mintgrün */
  --bg: #f9f9fb;
  --card: #ffffff;
  --shadow: rgba(0, 0, 0, 0.2);
  --text: #1a1a1a;
  --danger: #e74c3c;
  --max-width: 800px;
}
html, body {
  overscroll-behavior-y: none !important;
  overscroll-behavior-x: none !important;
  background-color: #d1dfdc !important; /* Fallback, damit nie weiß */
}
/* 🔒 Cockpits fixieren – kein Scrollen, kein Verschieben */




body {
  background-image: url("images/hole12pond.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

/* Mobile Hintergrund ab max. Breite von 768px */
@media (max-width: 800px) {
  body {
    background-image: url("images/carttree.png");
    background-attachment: scroll; /* optional, für mobile flüssiger */
  }
}    


html, body {
  height: 100%; 
  margin: 0;
  padding: 0;
    overflow-x: hidden;

}

#gpsDistanz.klein {
  font-size: 0.9em;
  color: #555;
  margin-top: 0.3em;
}


header,
#caddy-header,
#lochInfos,
#schlagInput,
#schlaege,
#navigation,
#statistik,
#exportReset,
#scorecardInput,
#neueScorecard,
#confirmModal .modal-content {
  background: rgba(255, 255, 255, 0.7); /* halbtransparentes Weiß */
  backdrop-filter: blur(5px);           /* starker Blur */
  -webkit-backdrop-filter: blur(5px);   /* für Safari */
  box-shadow: 0 0px 20px rgba(0, 0, 0, 0.5);
}



/* Einheitlicher Stil für Eingabefelder und Dropdowns */
input[type="text"],
select {
  font-size: 1rem;
  padding: 8px 12px; /* etwas weniger für zentrierten Text */
  border: 1px solid #ccc;
  border-radius: 8px;
  background-color: #fff;
  height: 44px;
  box-sizing: border-box;
  vertical-align: middle;
  line-height: 1.5;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  cursor: pointer;
  transition: border-color 0.3s, box-shadow 0.3s;
}

/* Hintergrund-Pfeil im Dropdown */
select {
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.41.59L6 5.17l4.59-4.58L12 2l-6 6-6-6z' fill='%23666'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 12px;
  padding-right: 36px; /* Platz für Icon */
}


select:focus,
input[type="text"]:focus {
  outline: none;
}



input[type="text"],
select,
button {
  font-family: 'Poppins', sans-serif;
}




body {
  font-family: 'Poppins', sans-serif;
}

h1, h2, h3 {
  font-family: 'Poppins', sans-serif;
}


.floating-testdata-btn {
  position: fixed;
  left: 24px;
  bottom: 24px;
  z-index: 9999;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: 
    repeating-conic-gradient(from 0deg, #6b947e 0deg 10deg, #4e576b 10deg 20deg),
    linear-gradient(135deg, #232946 0%, #6b947e 100%);
  color: #fff;
  box-shadow:
    0 0 24px 6px #6b947e88,
    0 2px 24px 0 #232946cc,
    0 0 0 8px #ffffff10 inset;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.2rem;
  border: none;
  cursor: pointer;
  transition: 
    background 0.3s, 
    box-shadow 0.3s, 
    transform 0.18s,
    filter 0.3s;
  backdrop-filter: blur(8px) saturate(1.5);
  overflow: hidden;
  animation: floating-glow 2.5s infinite alternate;
}

.floating-testdata-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 70% 30%, #fff8 0%, #0000 70%);
  opacity: 0.18;
  z-index: 1;
}

.floating-testdata-btn i {
  z-index: 2;
  filter: drop-shadow(0 0 6px #fff8);
  transition: transform 0.3s cubic-bezier(.68,-0.55,.27,1.55);
}

.floating-testdata-btn:hover {
  background: 
    repeating-conic-gradient(from 0deg, #4e576b 0deg 10deg, #6b947e 10deg 20deg),
    linear-gradient(135deg, #6b947e 0%, #232946 100%);
  box-shadow:
    0 0 48px 12px #6b947ecc,
    0 4px 32px 0 #232946cc,
    0 0 0 12px #ffffff18 inset;
  transform: scale(1.13) rotate(-6deg);
  filter: brightness(1.15) saturate(1.2);
}

.floating-testdata-btn:active i {
  transform: scale(0.92) rotate(12deg);
}

@keyframes floating-glow {
  0%   { box-shadow: 0 0 24px 6px #6b947e88, 0 2px 24px 0 #232946cc, 0 0 0 8px #ffffff10 inset; }
  100% { box-shadow: 0 0 48px 16px #6b947ecc, 0 8px 32px 0 #232946cc, 0 0 0 16px #ffffff18 inset; }
}

ul#schlagListe li.ghost {
  opacity: 0.4;
  transform: scale(1.02);
  background: #e0fbe5;
}


.container {
  max-width: var(--max-width);
  margin: auto;
  padding: 1rem;
}
.container {
  margin-top: 60px !important;   /* Wert nach Bedarf, z. B. 70–120px */
}
/* Standard: Icon links vom Text */
button i,
button .material-icons {
  font-size: 1.1rem;
  vertical-align: middle;
  margin-right: 0.5rem;
}

/* Icon rechts vom Text */
button.icon-right i,
button.icon-right .material-icons {
  margin-left: 0.7rem;  /* mehr Abstand links */
  margin-right: 0;      /* kein rechter Abstand nötig */
}

header {
  color: rgb(53, 53, 53);
  text-align: center;
  padding: 1.5rem 1rem;
  margin-top: 20px;
  border-radius: 30px;
  box-shadow: 0 4px 12px var(--shadow);
}

/* Header-Container */
.caddy-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  padding: 1rem 1.5rem;
  position: relative;
  z-index: 10;
}

/* Linke Seite: Logo | Text */
.header-left {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 1rem;
  min-width: 0;
  min-height: 110px;        /* mehr Höhe links */
  padding-block: .5rem;
}

/* Logo (größer) */
/* Logo (größer + Schatten) */
.header-logo {
  display: block;
  max-height: 120px;         /* Logo-Größe hier anpassen */
  width: auto;
  height: auto;
  filter: drop-shadow(0 4px 6px rgba(0,0,0,0.4)); /* dunkler Schatten für Light Mode */
}




/* Light/Dark Logo-Umschaltung (ohne JS) */
.light-logo { display: block; }
.dark-logo  { display: none; }
body.dark .light-logo { display: none; }
body.dark .dark-logo  { display: block; }

/* Text linksbündig */
.header-text { text-align: left; }

.main-title {
  font-family: 'Yeseva One', serif;
  font-size: 2rem;
  color: #4b4b4b;
  margin: 0 0 .25rem;
}

body.dark .main-title {
  color: #ebebeb;
}
.course-name,
.creator-name {
  font-size: .95rem;
  color: #666;
  margin: .125rem 0;
}

/* Linkfarben */
.course-name a,
.creator-name a {
  color: #645430;
  text-decoration: underline;
  transition: color .3s ease;
}
.course-name a:hover,
.creator-name a:hover { color: #382600; }

body.dark .course-name a,
body.dark .creator-name a { color: #e6cfa2; }
body.dark .course-name a:hover,
body.dark .creator-name a:hover { color: #f7e7c7; }

/* Mobile */
@media (max-width: 710px) {
  .header-left { grid-template-columns: 1fr; }
  .header-logo { margin-bottom: .35rem; max-height: 72px; }
  .header-text { text-align: left; } /* auch mobil linksbündig */
}

@media (max-width: 730px) {
  .header-left {
    display: grid;
    grid-template-columns: auto 1fr;  /* Logo | Main Title */
    grid-auto-rows: auto;
    align-items: center;
    justify-items: start;             /* Title linksbündig neben Logo */
    row-gap: .25rem;
  }

  /* Logo links, Größe wie gewünscht */
  .header-logo {
    grid-column: 1;
    grid-row: 1;
    max-height: 100px;
    margin-top: -20px;
    margin-bottom: -20px;
  }

  /* Nur der Main Title rechts neben dem Logo */
  .header-text { 
    display: contents;                /* Kinder als Grid-Items verwenden */
  }

  .main-title {
    grid-column: 2;
    grid-row: 1;
    text-align: left;
    margin: 0;                        /* kompakt neben dem Logo */
  }

  /* Course & Creator getrennt vom Title: volle Breite, mittig unterhalb */
  .course-name,
  .creator-name {
    grid-column: 1 / -1;              /* über beide Spalten */
    justify-self: center;             /* horizontal mittig */
    text-align: center;               /* Text mittig */
    margin: .1rem 0;
  }

  /* Mehr Abstand zwischen Main Title und Course Name */
  .course-name {
    margin-top: 1.5rem;
  }
}


/* Neue Switch-Gruppen */
.switches-wrapper {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  flex-wrap: wrap;
  justify-content: flex-end;
  flex: 1 1 auto;
  min-width: 200px;
}

.switch-block {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

/* Icons – sachlich, klar (Material Symbols) */
.switch-icon {
  font-size: 20px; /* statt 1.2rem, wirkt präziser */
  line-height: 1;
  color: #8a8f98;                 /* neutral grau */
  opacity: .9;
  text-shadow: 0 0 6px rgba(255, 255, 255, 0.4); /* leichter weißer Glow */
  transition: color .2s ease, opacity .2s ease;
}
body:not(.dark) .switch-icon--light {
  color: #e2a600; /* Sonnengelb */
  text-shadow: 0 0 8px rgba(255, 215, 0, 0.8);
}
body:not(.dark) .switch-icon--dark {
  color: #555555; /* Dunkelgrau */
  text-shadow: 0 0 8px rgba(85, 85, 85, 0.8);
}

/* Dark Mode – body.dark */
body.dark .switch-icon--light {
  color: #cccccc; /* Hellgrau */
  text-shadow: 0 0 8px rgba(204, 204, 204, 0.8);
}
body.dark .switch-icon--dark {
  color: #4DB6E6; /* Blau */
  text-shadow: 0 0 8px rgba(77, 182, 230, 0.8);
}

/* ============================
   Toggle-Switch wie bisher
   ============================ */
.checkbox { display: none; }

.switch { display: inline-block; }

.slider {
  width: 60px;
  height: 30px;
  background-color: #cfcfcf;
  border-radius: 20px;
  overflow: hidden;
  display: flex;
  align-items: center;
  border: 4px solid transparent;
  box-shadow: 
    0 0 10px 0 rgb(0 0 0 / 25%) inset,
    0 0 10px rgba(0, 0, 0, 0.5);
  cursor: pointer;
}

.slider::before {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  background-color: #fff;
  transform: translateX(-30px);
  border-radius: 20px;
  box-shadow: 0 0 10px 3px rgb(0 0 0 / 25%);
}

/* Checked-Zustände */
.checkbox:checked ~ .slider       { background-color: #2196F3; }
.checkbox:checked ~ .slider::before { transform: translateX(30px); }
.checkbox:active  ~ .slider::before { transform: translate(0); }

/* Animation DEAKTIVIERT – standardmäßig */
.slider, .slider::before { transition: none; }

/* Animation AKTIVIERT – nur wenn body das Attribut hat */
body[data-animated] .slider,
body[data-animated] .slider::before { transition: 0.3s; }

/* ============================
   Responsive zentriert ab 700px ↓
   ============================ */
@media (max-width: 730px) {
  .caddy-header {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .header-left,
  .switches-wrapper {
    justify-content: center;
    align-items: center;
    text-align: center;
  }
}




/* ============================
   HEADER & SWITCHES – STABIL & RESPONSIVE
   ============================ */



#micButton {
  position: fixed;
  bottom: 101px;
  right: 20px;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background-color: rgb(99, 99, 99);
  border: 2px solid rgb(126, 126, 126);
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5),
              0 4px 8px rgba(0, 0, 0, 0.4);
  cursor: pointer;
  z-index: 9999;
  transition: all 0.3s ease;
}

#micButton svg {
  width: 30px;
  height: 30px;
  fill: white;
  transition: fill 0.3s ease, filter 0.3s ease;
}

#micButton.active svg {
  fill: #e8fffd;
  filter: drop-shadow(0 0 4px #b1ece6);
}

#micButton.active {
  box-shadow: 0px 0px 1px rgb(151, 243, 255) inset,
    0px 0px 2px rgb(151, 243, 255) inset, 0px 0px 10px rgb(151, 243, 255) inset,
    0px 0px 40px rgb(151, 243, 255), 0px 0px 100px rgb(151, 243, 255),
    0px 0px 5px rgb(151, 243, 255);
  border: 2px solid rgb(255, 255, 255);
  background-color: rgb(146, 180, 184);
}

#micButton.active .mic-icon {
  fill: white;
}




nav#lochButtons {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0.6rem;
  margin: 1.5rem auto;
  max-width: 100%;
}

#lochButtons button {
  border-radius: 12px;
  padding: 0.5rem 1rem;
  background: rgba(0, 0, 0, 0.6);
  box-shadow: 0 0px 8px rgb(0, 0, 0);
  backdrop-filter: blur(6px);
  font-weight: bold;
  font-size: 17px;
  border: 0.25em solid rgba(210, 210, 210, 0.185);

}

#lochButtons button.active {
  background:
    repeating-linear-gradient(
      135deg,
      rgba(250, 250, 250, 0.4) 0px,
      rgba(240, 240, 240, 0.4) 8px,
      rgba(200, 200, 200, 0.4) 8px,
      rgba(200, 200, 200, 0.4) 16px
    ),
    linear-gradient(160deg, rgba(250, 250, 250, 0.65), rgba(200, 200, 200, 0.55));
  background-position: 0 0; /* fixiert -> kein Wandern */
  border: 0.25em solid rgba(210, 210, 210, 0.7);
  box-shadow: 0 0px 15px rgb(0, 0, 0);
  color: rgba(40, 40, 40, 0.9);
  font-weight: 600;
  backdrop-filter: blur(6px);
}




.disclaimer {
  margin-bottom: -0.5em;
  color: #858585;
  font-size: 0.8em;
}



nav button {
  aspect-ratio: 2 / 1;
  font-weight: 600;
  font-size: 1rem;
  border: none;
  background: var(--accent);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15); /* flacherer Schatten */
  transition: transform 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;
}

nav button:hover {
  background: var(--primary);
  box-shadow: 0 0px 12px rgba(0, 0, 0, 0.25);
}

nav button.active {
  background: #618a82;
  box-shadow: 0 0px 10px rgba(0, 0, 0, 0.2);

}


main section {
  background: var(--card);
  border-radius: 30px;
  padding: 1.2rem;
  margin-bottom: 1.5rem;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.15); /* <– dein Wunsch */
}
/* Oberer Bereich */
.top-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 2rem;
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(8px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  position: sticky;
  top: 0;
  z-index: 1000;
}

.top-title {
  font-size: 1.4rem;
  font-weight: bold;
  color: var(--text, #1a1a1a);
  font-family: 'Poppins', sans-serif;
}

/* Switches nebeneinander */
.top-control-group {
  display: flex;
  align-items: center;
  gap: 2rem;
}

.switch-wrapper {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.switch-icon {
  font-size: 1.2rem;
  line-height: 1;
}



/* iOS-Switch */
.ios-switch {
  width: 52px;
  height: 32px;
  background-color: #e9e9eb;
  border-radius: 16px;
  cursor: pointer;
  transition: background-color 0.25s ease-in-out;
  position: relative;
  display: block;
}

.ios-slider {
  position: absolute;
  width: 28px;
  height: 28px;
  background: white;
  border-radius: 50%;
  top: 2px;
  left: 2px;
  transition: all 0.25s ease-in-out;
  box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.15),
              0px 3px 1px rgba(0, 0, 0, 0.06);
}



.flex-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1rem;
}

.input-group {
  flex: 1 1 200px;
  display: flex;
  flex-direction: column;
}

.button-row {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

#multiCount {
  padding: 0.7rem;
  border-radius: 10px;
  border: 1px solid #ccc;
}


.schnelltrenner {
  margin: 1.5rem 0 1rem;
  text-align: center;
  color: #666;
  font-size: 0.95rem;
  position: relative;
}

.schnelltrenner hr {
  border: none;
  height: 1px;
  background: #ccc;
  margin: 1rem 0;
}

.multi-flex {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: flex-start; /* 👈 Ändert von "flex-end" auf "flex-start" */
  margin-bottom: 1rem;
}




.multi-flex .input-group.commentar-gruppe {
  margin-right: 1rem; /* 👈 zusätzlicher Abstand nur rechts vom Kommentar */
}




.quick-multi.active {
  background-color: var(--primary) !important;
  color: white !important;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.4) !important;
}


.multi-flex .input-group {
  flex: 1 1 200px;
}

.multi-flex button {
  flex: 0 0 auto;
  padding: 14.4px 20px;
  margin-top: 2.05rem;  
  height: auto;           /* 👈 Höhe nicht fix erzwingen */
  line-height: 1.2;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.4);
  border: 2px solid #ffffff;

}


#restMeter {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  margin-bottom: 0;
  transition: max-height 0.6s ease, opacity 0.6s ease, margin-bottom 0.6s ease;
}

#restMeter.visible {
  max-height: 40px; /* reicht für 1 Zeile */
  opacity: 1;
  margin-bottom: 1.2rem;
}



.tracking-button {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.7rem 1.4rem;
  font-size: 1rem;
  font-weight: 600;
  border: none;
  border-radius: 999px;
  background-color: #6b947e;
  color: white;
  cursor: pointer;
  transition: background-color 0.4s ease, transform 0.4s ease, width 0.4s ease;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
  white-space: nowrap;
}
.tracking-button span {
  display: inline-block;
  transition: width 0.4s ease;
}
.tracking-button {
  min-width: 240px; /* optional für konsistentes Layout */
}


.tracking-button:hover {
  background-color: #5b7f6b;
}

.tracking-button.tracking-aktiv {
  background-color: #e74c3c;
}

.tracking-button.tracking-aktiv:hover {
  background-color: #c0392b;
}

#trackingBtnIcon {
  transition: transform 0.3s ease;
}

.tracking-button.tracking-aktiv #trackingBtnIcon {
  transform: rotate(90deg);
}

.tracking-button.tracking-wiederstart {
  background-color: #6d8325; /* orange-gelb */
}


#addBtn {
margin-top: 2rem;
padding: 8px 20px;
}


#multiAddBtn {
  margin-top: 33px;
}




.quick-multi  {
    border-radius: 12px !important;
  border: 2px solid #ffffff !important;

  box-shadow: none !important;
}

#exportReset {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  gap: 10px; /* optionaler Abstand zwischen Buttons */
  margin-bottom: 100px; /* statt z. B. 5rem oder mehr */

}

/* Unter 598px: Buttons untereinander */





#exportReset button:nth-child(2) {
background-color: #c0392b;  /* kräftiges Rot */
}

#exportReset button:nth-child(2):hover {
background-color: #b13122;  /* kräftiges Rot */
}

#exportPdfBtn,
#resetBtn {
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.4);
  border: 2px solid #ffffff;
}

#exportReset {
  border-radius: 30px;
  padding: 1.5rem;
  text-align: center;
  
}




button {
  background: var(--accent);
  color: white;
  border: none;
  padding: 0.8rem 1.2rem;
  border-radius: 16px;
  font-weight: bold;
  cursor: pointer;
  transition: background 0.2s;
}

button:hover {
  background: #434c5e;
}

input, select {
  width: 100%;
  padding: 0.7rem;
  margin-top: 0.5rem;
  margin-bottom: 1rem;
  border-radius: 10px;
  border: 1px solid #ccc;
}

ul#schlagListe {
  list-style: none;
  padding: 0;
  margin: 0;
}

#schlagListe li {
  background-color: #f3f3f3 !important;
  margin: 20px 0;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.25); 
  border: 3px solid #ffffff; /* ← Dünne graue Umrandung */
  padding: 0.8rem 1rem;
  border-radius: 25px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 1rem;
}

#schlaege {
  padding: 0.75rem 1.5rem;  /* oben/unten + links/rechts */
}


ul#schlagListe li button {
  background: none;
  border: none;
  color: #e53935;
  font-size: 1.2rem;
  cursor: pointer;
}

#navigation {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}

#navigation button {
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.6);
  border: 2px solid #ffffff;
}


.nav-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px; /* Abstand zwischen Text und Icon */
  padding: 15px 20px;
}

.drag-handle {
  cursor: grab;
  font-size: 1.2rem;
  color: #666;
  user-select: none;
}

.schlag-text {
  flex-grow: 1;
}

#schlagListe button {
  background: none;
  border: none;
  cursor: pointer;
  color: #d11a2a;
  font-size: 1.2rem;
}





.schlag-li {
  opacity: 1;
  transition: opacity 0.3s ease;
}



  #navigation {
    display: flex;
    gap: 1rem; /* falls du Abstand behalten willst */
  }

  /* Buttons gleich breit machen und Inhalt zentrieren */
  #navigation button {
    flex: 1 1 0;
    min-width: 0;            /* verhindert Überlauf */
    display: flex;           /* macht den Button zum Flex-Container */
    align-items: center;     /* vertikal zentrieren */
    justify-content: center; /* horizontal zentrieren */
  
}



.modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  backdrop-filter: blur(5px); 
}


.modal-content {
  background: white;
  padding: 2rem;
  border-radius: 20px;
  text-align: center;
  max-width: 400px;
  width: 90%;
  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
  animation: pop-in 0.2s ease-out;
}

.modal-buttons {
  margin-top: 1.5rem;
  display: flex;
  gap: 1rem;
  justify-content: center;
  
}


.modal-buttons button {
  padding: 0.6rem 1.2rem;
  border: none;
  border-radius: 10px;
  font-weight: bold;
  cursor: pointer;
  transition: background 0.2s;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.4);
  border: 2px solid #ffffff;
}

#confirmYes {
  background: #c0392b;
  color: white;
}

#confirmYes:hover {
  background: #a3362a;
}

#confirmNo {
  background: #667985;
}

#confirmNo:hover {
  background: rgb(77, 91, 92);

}

.hidden {
  display: none;
}


@keyframes pop-in {
  from {
    transform: scale(0.9);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}





.multi-flex .dropdown-schlaganzahl {
  flex: 0 0 0px;
}



.input-group select,
.input-group input[type="text"] {
  height: 45px;
  padding: 10px 12px;
  font-size: 1rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  line-height: 1.5;
}


#quickMultiButtons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem;
  flex: 1 1 auto; /* Flexibles Verhalten für die Buttons */
}


#quickMultiButtons button {
  color: white;
  border: none;
  border-radius: 7px;
  font-weight: bold;
  cursor: pointer;
  transition: background 0.2s;
}






.scorecard-meta {
  display: flex;
  gap: 2rem;
  font-size: 1.1rem;
  margin-bottom: 0.5rem;
  color: #232946;
  justify-content: flex-end;
  align-items: center;
}
.export-style .scorecard-meta.export-position {
  margin-top: 0.4rem;
  flex-direction: column;
  align-items: flex-start;   /* ⬅️ statt center */
  font-size: 1.1rem;
  color: #37474f;
}

.export-style .scorecard-title {
  text-align: center;
  font-size: 2.1rem;
  margin-bottom: 0.3rem;
}


#scorecardImage {
  display: none;
  width: 1000px; /* feste Breite */
  padding: 3rem;
  background: #f1f3f5;
  font-family: 'Poppins', sans-serif;
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
  transform: scale(1);
  transform-origin: top left;
}


/* 🌐 Allgemeine Scorecard-Styles */
.scorecard-wrapper {
  background: #ebedf0;
  border-radius: 16px;
  padding: 2.5rem 2rem;
  max-width: 820px;
  font-family: 'Poppins', sans-serif;
  border: none;
  box-shadow: none;
}

#spielerName {
  cursor: text; 
}


/* 🧩 Header mit Logo */
.scorecard-header {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin-bottom: 2rem;
  padding-bottom: 1rem;
  border-bottom: 2px solid #ccc;
  justify-content: flex-start;
}

.scorecard-logo {
  height: 80px;
  width: 80px;
  object-fit: contain;
}

.scorecard-wrapper .scorecard-logo {
  border-radius: 12px;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.15);
}

/* 📛 Titel */
.scorecard-title {
  font-size: 1.9rem;
  font-weight: 700;
  color: #2c3e50;
}

/* 📊 Tabelle */
#scorecardTable {
  width: 100%;
  border-collapse: collapse;
  border-radius: 12px;
  overflow: hidden;
  font-size: 1.1rem;
}

#scorecardTable th,
#scorecardTable td {
  padding: 14px 18px;
  text-align: center;
}

#scorecardTable td {
  border-bottom: 1px solid #ddd;
  color: #1a1a1a;
}

#scorecardTable thead {
  background: #f6f8fa;
  color: #34495e;
  font-weight: 600;
}

#scorecardTable tfoot {
  background: #f0f4f8;
  font-weight: bold;
}


#scorecardTable td:first-child {
  background: rgb(240, 241, 255); /* oder #ffffff oder var(--card) */
}
/* Blau NUR für “normale” Loch-Zeilen */


.scorecard-subtotal td:first-child,
.scorecard-total    td:first-child {
  background-color: inherit !important;   /* = gleiches Beige wie die Zeile */
}

.scorecard-subtotal { /*sub-total-Zeile*/
    font-weight: bold;

  background-color: #f5f2f0 !important; 
  color: #222222;
}


.scorecard-wrapper tfoot tr td { /*total-Zeile*/
  background-color: #e6e3dc !important; 
  font-weight: bold;
}




/* Action-Buttons im Modal */
.modal-buttons {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-top: 1rem;
}

.modal-buttons button {
  padding: 0.6rem 1.2rem;
  font-weight: 600;
  cursor: pointer;
  background: var(--accent);
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
  color: white;
}


/* Sicherstellen, dass Modal versteckt ist */
.modal.hidden {
  display: none;
}

.modal-buttons button:hover {
  background: #434c5e;
}
/* Modal-Container selbst abrunden */
#imageModal .modal-content {
  border-radius: 16px;
  overflow: hidden; /* stellt sicher, dass das Bild die Ecken nicht überschreitet */
}

/* Vorschau-Bild abrunden */
#modalImage {
  display: block;
  max-width: 100%;
  height: auto;
  border: 3px solid #ffffff; /* Ersetze #123456 durch deinen Wunsch-Hex-Farbcode, oder nutze var(--your-color-variable) */
  box-shadow: 0 0px 25px rgba(0, 0, 0, 0.3);
  border-radius: 15px;
}


/* 📤 Export-Stil */
.export-style {
  background: #ebedf0;
  padding: 3rem 2rem;
  border-radius: 0;
  width: 100%;
  font-family: 'Poppins', sans-serif;
}

.export-style .scorecard-header {
  border-bottom: 2px solid #ccc;
  padding-bottom: 1rem;
  margin-bottom: 2rem;
  border-radius: 0;
}

.export-style .scorecard-logo {
  border-radius: 0;
  box-shadow: none;
}

.export-style .scorecard-title {
  font-size: 2rem;
  font-weight: 700;
  color: #2c3e50;
}

.export-style #scorecardTable {
  border: 2px solid #c2c2c2;
  background: #ffffff;
  font-size: 1.1rem;
}

.export-style #scorecardTable th,
.export-style #scorecardTable td {
  border: 1px solid #c0c0c0;
}

.export-style #scorecardTable thead {
  background: #f6f8fa;
  font-weight: 600;
  color: #37474f;
}

.export-style #scorecardTable tfoot {
  background: #f0f4f8;
  font-weight: bold;
  color: #263238;
}

.export-style .schlag-dunkelgruen,
.export-style .schlag-gruen,
.export-style .schlag-blau,
.export-style .schlag-gelb,
.export-style .schlag-orange,
.export-style .schlag-rot {
  font-weight: 600;
}

/* Scorecard-Farben für verschiedene Schläge */
.export-style .schlag-dunkelgruen {
  background: #b7eacb;
  color: #146c43;
}
.export-style .schlag-gruen {
  background: #d5f5d5;
  color: #1e7f1e;
}
.export-style .schlag-blau {
  background: #d8ecff;
  color: #0e63b1;
}
.export-style .schlag-gelb {
  background: #fff6c2;
  color: #d68b00;
}
.export-style .schlag-orange {
  background: #ffd6b0;
  color: #b85b00;
}
.export-style .schlag-rot {
  background: #ffd6d6;
  color: #c0392b;
}

/* Spalte Herren: hellblau */
#scorecardTable td.cell-herren {
  background-color: #eaf4fb;
  color: #1a1a1a;
}

/* Spalte Damen: rosa */
#scorecardTable td.cell-damen {
  background-color: #fbeaf0;
  color: #1a1a1a;
}

/* Optional auch für die Fußzeile */
#sumMeterHerren {
  background-color: #eaf4fb;
}

#sumMeterDamen {
  background-color: #fbeaf0;
}


/* 🎛️ Scorecard-Export-Buttons */
.scorecard-buttons {
  display: flex;
  gap: 1rem;
  margin-top: 1rem;
  flex-wrap: wrap;
  justify-content: space-between;
}

.scorecard-btn {
  flex: 1 1 30%;
  min-width: 120px;
  padding: 0.8rem 1.2rem;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.6);
  border: 2px solid #ffffff;
}



.scorecard-extra-line {
  margin-top: 23px;
  margin-bottom: -30px;       /* 👈 HIER: Abstand nach unten reduzieren */
  padding-bottom: 0px;      /* 👈 ebenfalls kein zusätzliches Padding unten */
  padding-top: 12px;
  font-size: 0.9em;
  line-height: 1.6;
  text-align: center;
  color: #444;
  font-style: normal;
  border-top: 1px solid #ccc;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  opacity: 0.9;
  white-space: nowrap;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.1rem; /* Abstand zwischen den Blöcken */
}


/* ✅ Zwischenzeilen: Loch 1–9, 10–18, nochmal 1–9 */












@media (max-width: 395px) and (min-width: 390px) {
  #navigation button {
    font-size: 0.712rem !important;      /* statt 0.8rem */
    padding: 0.9rem 0.97rem !important;
  }

}





@media (max-width: 600px) {
  .scorecard-buttons {
    flex-direction: column;
    gap: 0.8rem;
  }

  .scorecard-btn {
    flex: 1 1 100%;
    width: 100%;
  }
}







@media (min-width: 604px) {

#exportPdfBtn,
#resetBtn {
  max-width: 400px;
  width: 100%;
  justify-content: center;
}
}
@media (max-width: 586px) and (min-width: 503px) {

  #addBtn {
margin-top: -1rem;
padding: 8px 40px;
}
}


@media (max-width: 600px) {

  /* Navigation-Buttons kleiner und kompakter */



  .modal-content {
    padding: 1.5rem;
    width: 80%;
  }
}





@media (min-width: 445px) and (max-width: 454px) {
  #navigation button {
    font-size: 0.75rem;
    padding: 0.9rem 1rem;
  }
}

  

@media (max-width: 445px) {

  #navigation button {
    font-size: 0.75rem;
    padding: 0.9rem 1rem;
  }
  }


@media (min-width: 408px) and (max-width: 416px) {
  #navigation button {
    font-size: 0.75rem;         /* etwas kleiner als 0.9rem */
    padding: 0.8rem 1rem;    /* etwas schmaler als 0.9rem/1.15rem */
  }
  /* Icon-Offsets beibehalten */
  .nav-section button:nth-child(1) i { margin-left:  -6px; }
  .nav-section button:nth-child(2) i { margin-right: -6px; }
}




@media (max-width: 407px) {
  #navigation button {
    font-size: 0.7rem;      /* statt 0.8rem */
    padding: 0.65rem 0.9rem;/* statt 0.75rem 1rem */
  }
  .nav-section button:nth-child(1) i { margin-left:  -6px; }
  .nav-section button:nth-child(2) i { margin-right: -6px; }
}

@media (max-width: 392px) {
  #navigation button {
    font-size: 0.67rem;     /* statt 0.75rem */
  }
  .nav-section button i {
    display: none;
  }
}
/* 3) Extra-kleine Phones bis 375px */
@media (max-width: 375px) {
  #navigation button {
    font-size: 0.65rem;     /* statt 0.75rem */
  }
  .nav-section button i {
    display: none;
  }
}

/* 4) Ultra-klein bis 357px */
@media (max-width: 330px) {
  #navigation button {
    font-size: 0.6rem;      /* statt 0.7rem */
    padding: 0.4rem 0.7rem; /* statt 0.5rem 0.8rem */
  }
}


@media (max-width: 809px) {

  /* Navigation-Buttons kleiner und kompakter */
#multiAddBtn {
margin-top: 0;  
}
}


@media (max-width: 602px) and (min-width: 475px) {

.quick-multi {
  margin-top: -15px !important;
}
}


@media (max-width: 474px) {
.dropdown-schlaganzahl {
  margin-bottom: -0.85rem; /* oder z. B. 16px */
}

.quick-multi {
  margin: 1px !important;
}


}
@media (max-width: 666px) {
  #exportReset {
    flex-direction: column;
    align-items: stretch;
  }

  #exportReset button {
    width: 100%;
    max-width: none;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}




@media (max-width: 850px) {

  /* Loch-Buttons besser sichtbar – 3 Spalten */
  nav#lochButtons {
    grid-template-columns: repeat(5, 1fr);
  }
}

@media (max-width: 600px) {

  /* Loch-Buttons besser sichtbar – 3 Spalten */
  nav#lochButtons {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (max-width: 500px) {

  /* Loch-Buttons besser sichtbar – 3 Spalten */
  nav#lochButtons {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 370px) {

  /* Loch-Buttons besser sichtbar – 3 Spalten */
  nav#lochButtons {
    grid-template-columns: repeat(2, 1fr);
  }
}





/* ---------- Floating Cockpit Bars (v3) ---------- */
:root{
  --overlap:        14px;    /* wie weit die Bar im Rand steckt        */
  --radius:         40px;    /* Rundung der sichtbaren Box             */
  --blur:            9px;    /* Glas‑Blur                              */
  --bottom-height:  40px;    /* sichtbare Bottom‑Höhe + Overlap‑Puffer */
}

/* Grund‑Container ------------------------------------------------------ */
.floating-bar{
  position:fixed;
  left:0;
  right:0;
  z-index:9998;
  pointer-events:none;                /* Klicks nur im Wrapper */
  opacity:0;
  --y: 0;                             /* wird animiert */
  transform:translateY(var(--y));
  transition:transform 2s cubic-bezier(.4,0,.2,1), opacity .45s; 
  padding-inline:10px;
}

.floating-bar.top    { top:    calc(-1 * var(--overlap)); --y:-120%; }
.floating-bar.bottom { bottom: calc(-1 * var(--overlap)); --y: 120%; }
.floating-bar.show   { opacity:1; --y: 0%; }      /* sichtbar */





/* Wrapper -------------------------------------------------------------- */
.floating-bar > .bar-content {
  pointer-events: auto;
  max-width: 500px;
  backdrop-filter: blur(10px) saturate(1.3);
  -webkit-backdrop-filter: blur(10px) saturate(1.3);
  border-radius: 20px;
  margin: 8px auto;
  padding: 0.6rem 1rem;
}

/* Top-Cockpit */
.floating-bar.top > .bar-content {
  border-radius: 0 0 var(--radius) var(--radius);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25) !important; /* kein inset, normaler Schatten */
  background: rgba(255, 255, 255, 0.75) !important;      /* heller Hintergrund */
  border: none !important;
}

/* Bottom-Cockpit */
.floating-bar.bottom > .bar-content {
  border-radius: var(--radius) var(--radius) 0 0 !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 1rem !important;
  padding: 0.8rem 1rem 1.4rem;
  backdrop-filter: blur(20px) saturate(1.1) !important;
  -webkit-backdrop-filter: blur(4px) saturate(1.1) !important;
  background: rgba(255, 255, 255, 0.25) !important;
  border: none !important;
}




/* Buttons in der Bottom‑Bar */
.floating-bar.bottom .nav-btn{
  color:#fff;
  padding:.8em 1.6em;
  border-radius:var(--radius);
  font-size:.95rem;
  font-weight:600;
  box-shadow:0 0 10px rgba(0,0,0,.35);
  transition:background .2s, transform .2s, box-shadow .2s;
}


/* Opacity-Steuerung statt display: none */
.floating-bar.hidden {
  display: block;
}
/* Überschrift */
.floating-bar #lochUeberschrift,
.floating-bar #floatingLochUeberschrift{
  font-size:1.15rem;
  font-weight:600;
  color:#1c2635;
  margin:0;
  text-align:center;
}

/* übrige Elemente ausblenden */
.floating-bar .tracking-button,
.floating-bar .disclaimer,
.floating-bar #tippText,
.floating-bar #restMeter{display:none!important;}

/* Mobile Tweaks -------------------------------------------------------- */
@media (max-width: 480px) {
  .floating-bar > .bar-content {
    max-width: 100%;
    padding: 1rem;
  }
  .floating-bar #lochUeberschrift {
    font-size: 1rem;
  }
}



.floating-bar h2,
.floating-bar #lochUeberschrift,
.floating-bar .cockpit-zusatzinfo {
  width: 100%;
  text-align: center;
  margin-left: 0;
  margin-right: 0;
}




/* =====================================================
   Cockpit‑Navigation – 3 Buttons  ( ←  +  → )
   ===================================================== */

/* ---------- 1 · Rahmen & Grundoptik ---------- */
.cockpit-nav .nav-btn,
.cockpit-nav .nav-btn-add {
  width: 84px;
  height: 54px;
  box-sizing: border-box;
  border-radius: 32px;
  border: 3px solid #d6c4af !important;
  background: rgba(29, 16, 8, 0.72);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.12em;
  padding-inline: 10px;
  font-size: 1rem;
  cursor: pointer;

  /* SMOOTHER transition */
  transition:
    background 0.25s cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.2s ease-in-out,
    border 0.3s ease,
    opacity 0.25s ease;
}


/* ---------- Popped: sanfter Bounce ---------- */
.cockpit-nav .nav-btn.popped,
.cockpit-nav .nav-btn-add.popped {
  animation: popIn 0.3s ease-out forwards;
  z-index: 10;
  box-shadow:
    0 0 0 14px rgba(60, 220, 160, 0.08),
    0 8px 24px 5px rgba(80, 220, 180, 0.18);
}

@keyframes popIn {
  0%   { transform: scale(0.85); opacity: 0; }
  60%  { transform: scale(1.06); opacity: 1; }
  100% { transform: scale(1); }
}



/* Pop‑Animation (bestehende Klasse) */
.cockpit-nav .nav-btn.popped,
.cockpit-nav .nav-btn-add.popped{
  transform: scale(1.1);
  box-shadow: 0 0 0 16px rgba(60,220,160,.12),
              0 8px 32px 6px rgba(80,220,180,.22);
  z-index: 10;
}

/* ---------- 2 · Typografie ---------- */
.cockpit-nav .nav-btn .material-symbols-outlined{
  font-size: 1.5rem;
  opacity: .60;
  line-height: 1;
  text-shadow: 0 0 2px rgba(255,255,255,.7);
}
.cockpit-nav .nav-btn .loch-number{
  font-size: 1.2rem;
  font-weight: 800;
  opacity: .60;
  text-shadow: 0 0 2px rgba(255,255,255,.7);
}

/* ---------- 3 · Position‑Feintuning ---------- */
/* Basis‑Versatz */
#cockpitPrevBtn{  justify-content:flex-start; }
#cockpitNextBtn{  justify-content:flex-end;   }

#cockpitPrevBtn .material-symbols-outlined,
#cockpitPrevBtn .loch-number{ transform: translateX(-4px); }

#cockpitNextBtn .material-symbols-outlined,
#cockpitNextBtn .loch-number{ transform: translateX(4px); }

/* Einstellig (digits‑1) – etwas weiter innen */
#cockpitPrevBtn.digits-1  .material-symbols-outlined,
#cockpitPrevBtn.digits-1  .loch-number{ transform: translateX(-6px); }

#cockpitNextBtn.digits-1  .material-symbols-outlined,
#cockpitNextBtn.digits-1  .loch-number{ transform: translateX(6px); }

/* Zweistellig (digits‑2) – gleicher Versatz (behält 6 px) */
#cockpitPrevBtn.digits-2  .material-symbols-outlined,
#cockpitPrevBtn.digits-2  .loch-number{ transform: translateX(-6px); }

#cockpitNextBtn.digits-2  .material-symbols-outlined,
#cockpitNextBtn.digits-2  .loch-number{ transform: translateX(6px); }

/* Ohne Zahl (digits‑0) – Duo zentriert, kein Versatz */
#cockpitPrevBtn.digits-0,
#cockpitNextBtn.digits-0{ justify-content:center; }

#cockpitPrevBtn.digits-0 .material-symbols-outlined,
#cockpitPrevBtn.digits-0 .loch-number,
#cockpitNextBtn.digits-0 .material-symbols-outlined,
#cockpitNextBtn.digits-0 .loch-number{ transform:none; }



/* ============================================================
   🌙 DARK MODE – Final Style (überarbeitet)
   ============================================================ */
body.dark {
  --primary: #a1d9c2;
  --accent: #aab4c1;
  --bg: #121212;
  --card: #1e1e1e;
  --shadow: rgba(0, 0, 0, 0.6);
  --text: #f1f1f1;
  --danger: #ff6b6b;
}



body.dark html,
body.dark body {
  background-color: var(--bg);
  color: var(--text);
}

/* Glasige Karten */
body.dark header,
body.dark #lochInfos,
body.dark #schlagInput,
body.dark #schlaege,
body.dark #navigation,
body.dark #statistik,
body.dark #exportReset,
body.dark #scorecardInput,
body.dark #neueScorecard,
body.dark #confirmModal .modal-content,
body.dark main section,
body.dark .scorecard-wrapper,
body.dark .export-style {
  background: rgba(28, 28, 30, 0.6);
  color: var(--text);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  box-shadow: 0 0 24px rgba(0, 0, 0, 0.6);
  border-radius: 30px;
}

/* Floating Cockpits */
body.dark .floating-bar > .bar-content {
  background: rgba(40, 40, 40, 0.63) !important;
  color: var(--text) !important;
  backdrop-filter: blur(14px) saturate(1.4) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.4) !important;
  box-shadow:  0 0 6px rgba(0, 0, 0, 0.815) !important;
}

body.dark .course-name,
body.dark .creator-name {
  color: #f0f0f0; /* helle Farbe für Dark Mode */
}

/* Cockpit-Titel */
body.dark .floating-bar #lochUeberschrift,
body.dark .floating-bar #floatingLochUeberschrift {
  color: #f0f0f0;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
}

/* Schläge-Liste */
body.dark #schlagListe li {
  background-color: #2b2b2b !important;
  color: #f1f1f1;
  border-color: #555;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.6);
}
body.dark .schlag-text {
  color: #eee;
}

/* Inputs & Selects */
body.dark input,
body.dark select,
body.dark textarea {
  background-color: #2a2a2a;
  color: #f1f1f1;
  border: 1px solid #555;
}
body.dark input::placeholder,
body.dark select::placeholder {
  color: #aaa;
}
body.dark select {
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.41.59L6 5.17l4.59-4.58L12 2l-6 6-6-6z' fill='%23ccc'/%3E%3C/svg%3E");
}

/* Allgemeine Buttons */
body.dark button {
  background-color: #333;
  color: #f1f1f1;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.4);
}

body.dark .tracking-button {
  background-color: #3b5a49;

}

body.dark button:hover,
body.dark .tracking-button:hover {
  background-color: #444;
}
body.dark .tracking-button.tracking-aktiv {
  background-color: #c0392b;
}
body.dark .tracking-button.tracking-aktiv:hover {
  background-color: #a93226;
}

body.dark .tracking-button.tracking-wiederstart {
  background-color: #5d721f; /* kräftiges Orange */
}

/* Navigation-Buttons (inkl. Vorher / Nächstes Loch) */
body.dark .nav-btn {
  background-color: #343841;
  color: white;
  border: 3px solid #555 !important;
}
body.dark .nav-btn:hover {
  background-color: #294366;
}

body.dark .cockpit-nav .nav-btn,
body.dark .cockpit-nav .nav-btn-add {
  border: 3px solid #d6c4af !important;
  background: rgba(29, 16, 8, 0.733); /* bleibt milchig/beige */
  color: white;
}



/* PDF & Scorecard Buttons (Front9, Back9, Alle18) */
body.dark .scorecard-btn,
body.dark #exportPdfBtn {
  background-color: #343841 ;
  color: white;
  border: 3px solid #555;
}
body.dark .scorecard-btn:hover,
body.dark #exportPdfBtn:hover {
  background-color: #292e3a;
}


body.dark #addBtn {
  color: white;
  border: 2px solid #555;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
}
body.dark #addBtn:hover {
  background-color: #294366;
}

body.dark .schnelltrenner {
  color: #ccc;
}
body.dark .schnelltrenner hr {
  border-top: 2px solid #666;
}

/* Multi-Add Button */
body.dark #multiAddBtn {
  background-color: #343841;
  color: white;
  border: 2px solid #555;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
}
body.dark #multiAddBtn:hover {
  background-color: #294366;
  
}

/* Schnellauswahl "+" Buttons (quick-multi) */
body.dark .quick-multi {
  background-color: #343841 !important;
  color: white !important;

  border: 2px solid #a7a7a7 !important;
  box-shadow: none !important;
}
body.dark .quick-multi.active {
  background-color: #294366 !important;
}

/* "Alle Schläge löschen" Button */
body.dark #resetBtn {
  background-color: #882525;
  color: white;
  border: 3px solid #555;
}
body.dark #resetBtn:hover {
  background-color: #701919;
}

/* Schlag löschen (einzelner Listeneintrag) */
body.dark ul#schlagListe li button {
  background: none !important;
  color: #ff6b6b !important;
  font-weight: bold;
  font-size: 1.2rem;
  border: none;
  box-shadow: none;
}
body.dark ul#schlagListe li button:hover {
  color: #ff4c4c !important;
  text-shadow: 0 0 6px rgba(255, 0, 0, 0.3);
}

/* Testdaten-Button */
body.dark .floating-testdata-btn {
  background: linear-gradient(135deg, #3a4b57 0%, #4e8370 100%);
  box-shadow: 0 0 24px 6px #6b947e88,
              0 2px 24px 0 #000c,
              0 0 0 8px #ffffff10 inset;
}
body.dark .floating-testdata-btn:hover {
  background: linear-gradient(135deg, #4e8370 0%, #3a4b57 100%);
}

/* Modal */
body.dark .modal {
  background: rgba(0, 0, 0, 0.6);
}
body.dark .modal-content {
  background: rgba(30, 30, 30, 0.85);
  color: #f0f0f0;
  backdrop-filter: blur(12px);
  box-shadow: 0 0 18px rgba(0, 0, 0, 0.6);
}

body.dark .modal-buttons button {
  background-color: transparent;
  color: white;
  border: 2px solid #ffffff;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}

/* Bestätigen (Ja) */
body.dark #confirmYes {
  background-color: #691f18;
  color: white;
}
body.dark #confirmYes:hover {
  background-color: #42110c;
}

/* Abbrechen (Nein) */
body.dark #confirmNo {
  background-color: #667985;
  color: white;
}
body.dark #confirmNo:hover {
  background-color: #4d5b5c;
}



/* Basiszustand: Glow-Overlay */
/* ✅ Border Glow Effekt */
/* ===============================
   🔮 BUNTE GLOW-BORDER
   =============================== */
body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 9999;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
  border-radius: 0 0 40px 40px;
  box-sizing: border-box;

  background:
    /* Links innen */
    linear-gradient(to right, rgba(255, 0, 200, 0.95), transparent 90%) left center / 3vw 100% no-repeat,
    /* Rechts innen */
    linear-gradient(to left, rgba(0, 200, 255, 0.95), transparent 90%) right center / 3vw 100% no-repeat,
    /* Oben innen */
    linear-gradient(to bottom, rgba(255, 255, 0, 0.92), transparent 90%) top center / 100% 3vh no-repeat,
    /* Unten innen */
    linear-gradient(to top, rgba(0, 255, 150, 0.92), transparent 90%) bottom center / 100% 3vh no-repeat;

  background-repeat: no-repeat;
  background-blend-mode: screen;

  filter: blur(22px); /* stärkerer Glow */
}


#micButton {
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}


/* ✅ Neue Wellen-Ebene */


/* ✅ Aktiv bei Glow */
body.glow-active::before {
  opacity: 1;
}

/* ✅ Animation: Welle von rechts nach links */


/* 🌈 WAVE OVERLAY (nur bei mic gedrückt) */
#waveOverlay {
  position: fixed;
  top: 0;
  left: 100%;
  width: 200%;
  height: 100%;
  pointer-events: none;
  z-index: 9999;
  opacity: 0;
  background: linear-gradient(
    120deg,
    rgba(255, 0, 200, 0.25),
    rgba(0, 200, 255, 0.25),
    rgba(255, 255, 0, 0.25),
    rgba(255, 0, 200, 0.25)
  );
  filter: blur(40px);
  transition: none;
  border-radius: 20px;
}

/* ✨ Beim Aktivieren: von rechts nach links animieren */
body.glow-active #waveOverlay {
  animation: waveSlide 0.7s ease-out forwards;
  opacity: 1;
}

/* 🌀 Keyframes – schnelle „Wisch“-Bewegung */
@keyframes waveSlide {
  0% {
    transform: translateX(0%);
    opacity: 1;
  }
  70% {
    transform: translateX(-50%);
    opacity: 1;
  }
  100% {
    transform: translateX(-100%);
    opacity: 0;
  }
}
#micButton {
  display: none;
}
#micButton {
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
/* Sprachfeedback-Popup – modern, sichtbar */
.voice-popup {
  position: fixed;
  bottom: 10%;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(20, 20, 20, 0.9);
  color: #ffffff;
  padding: 14px 24px;
  border-radius: 12px;
  font-size: 1.1rem;
  box-shadow: 0 8px 16px rgba(0,0,0,0.5);
  z-index: 9999;
  opacity: 0;
  transition: opacity 0.4s ease-in-out;
  pointer-events: none;
}

.voice-popup.show {
  opacity: 1;
}




/* ✅ Globale Einblende für normale Inhalte */
/* 🧠 Hauptregel – aber ohne #lochButtons */
main > *:not(#lochButtons),
section,
nav:not(#lochButtons)  {
  opacity: 0;
  transform: translateY(40px);
  animation: fadeSlideUp 0.8s ease-out forwards;
}

header  {
  opacity: 0;
  transform: translateY(40px);
  animation: pop-instay 0.7s ease-out forwards; /* ← wichtig! */
}

@keyframes pop-instay {
  from {
    transform: scale(0.9) translateY(40px);
    opacity: 0;
  }
  to {
    transform: scale(1) translateY(0);
    opacity: 1;
  }
}




/* ✅ Gestaffelte Animation für Reihenfolge */
main > *:nth-child(1)  { animation-delay: 0.2s; }
main > *:nth-child(2)  { animation-delay: 0.3s; }
main > *:nth-child(3)  { animation-delay: 0.4s; }
main > *:nth-child(4)  { animation-delay: 0.5s; }
main > *:nth-child(5)  { animation-delay: 0.6s; }
main > *:nth-child(6)  { animation-delay: 0.7s; }
main > *:nth-child(7)  { animation-delay: 0.8s; }
main > *:nth-child(8)  { animation-delay: 0.9s; }
main > *:nth-child(9)  { animation-delay: 1.0s; }
main > *:nth-child(10) { animation-delay: 1.1s; }

header         { animation-delay: 0.1s; }
nav            { animation-delay: 0.15s; }


/* ✨ Keyframes für Einblendeffekt */
@keyframes fadeSlideUp {
  from {
    opacity: 0;
    transform: translateY(40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}



#lochButtons > * {
  opacity: 0;
  transform: translateY(20px);
  animation: fadeSlideUp 0.3s ease-out forwards;
}

@keyframes fadeSlideUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Staffeln für 18 Buttons in 1,5s gesamt */
#lochButtons > *:nth-child(1)  { animation-delay: 0s; }
#lochButtons > *:nth-child(2)  { animation-delay: 0.083s; }
#lochButtons > *:nth-child(3)  { animation-delay: 0.166s; }
#lochButtons > *:nth-child(4)  { animation-delay: 0.249s; }
#lochButtons > *:nth-child(5)  { animation-delay: 0.332s; }
#lochButtons > *:nth-child(6)  { animation-delay: 0.415s; }
#lochButtons > *:nth-child(7)  { animation-delay: 0.498s; }
#lochButtons > *:nth-child(8)  { animation-delay: 0.581s; }
#lochButtons > *:nth-child(9)  { animation-delay: 0.664s; }
#lochButtons > *:nth-child(10) { animation-delay: 0.747s; }
#lochButtons > *:nth-child(11) { animation-delay: 0.830s; }
#lochButtons > *:nth-child(12) { animation-delay: 0.913s; }
#lochButtons > *:nth-child(13) { animation-delay: 0.996s; }
#lochButtons > *:nth-child(14) { animation-delay: 1.079s; }
#lochButtons > *:nth-child(15) { animation-delay: 1.162s; }
#lochButtons > *:nth-child(16) { animation-delay: 1.245s; }
#lochButtons > *:nth-child(17) { animation-delay: 1.328s; }
#lochButtons > *:nth-child(18) { animation-delay: 1.411s; }

@keyframes fadeSlideUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}