body {
    margin: 0;
    padding: 0;
    background: #FFFFFF;
}

/* Perfekt fixes Hintergrundbild für Desktop & Mobile */
.bg-fixed {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: url('17.png') center center / cover no-repeat;
    z-index: -1;
}
.header-box {
  background-color:#87cedc;
  border-radius: 25px;
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
}
.custom-box {
  background-color:#3C3C3C;
  border-radius: 25px;
  border: 1px solid #F28C28;
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
}
.footer-box {
  background-color:#87cedc;
  border-radius: 25px;
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
}
.custom-field {
  background-color:#282828;
  border-radius: 25px;
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
}
a[href^="tel"] {
  text-decoration: none;
  color: inherit;
  font: inherit;
}
h2 {
    color: #87cedc;
}
h3 {
    color: #FFFFFF;
    font-size: 1,125rem;
}
h4 {
    color: #fff;
    font-size: 1,25rem;
  font-weight: bold;
}
h5 {
    color: #E0E0E0;
    font-size: 1rem;
}
p{
  color: #fff;
}
.text-blue{
  color: #87cedc;
}
.stichpunkte {
    color: #ffffff;
    list-style-position: inside;
    margin: 0;
    padding: 0;
}

.blockquote {
  padding: 0 0 0 25px;
  
}
.blockquote-footer {
  color: #FFFFFF;
}

.accordion {
    --bs-accordion-bg: transparent !important;
}
.accordion-item {
  /*background-color: #3f3f3f;*/
  border: 1px solid #5f5f5f;
  color: #E0E0E0;
}
.bg-secondary {
    /*background-color: #3f3f3f;*/
}

.accordion-button {
  /*background-color: #3f3f3f;*/
  color: #E0E0E0;
}

.accordion-button:not(.collapsed) {
  background-color: rgb(84, 178, 200, 0.50); /* Kontrastfarbe */
  color: #fff;
}

.accordion-button:focus {
  box-shadow: none;
  border-color: #54b2c8;
}

.accordion-body {
  background-color: rgba(255, 255, 255, 0.15);
  color: #FFFFFF;
}
.thumbnail {
            width: 230px;
            height: 230px;
            object-fit: cover;
            margin: 5px;
            border: 1px solid #ccc;
        }
label {
  display: block;
  margin-bottom: 1em;
}

table {
width: 100%;
border-collapse: collapse;
text-align: center;
}
th, td {
border: 0px;
}
th {
}
.redcell {background-color:#54b2c8;}

a {
  color: #2E97A8;                /* Standard-Linkfarbe (Bootstrap-Blau) */
  text-decoration: none;        /* Kein Unterstrich */
  font-weight: 500;             /* Leicht hervorgehoben */
  transition: color 0.3s ease, text-decoration 0.3s ease;
  cursor: pointer;              /* Zeigt klickbaren Link an */
}
a:visited {
  color: #2E97A8;               /* Lila für besuchte Links */
}
a:hover,
a:focus {
  color: #000;               /* Dunkleres Blau beim Hover/Focus */
  text-decoration: underline;   /* Unterstrich beim Hover/Focus */
  outline: none;                /* Entfernt Standard-Focus-Outline */
}
a:active {
  color: #2E97A8;               /* Noch dunkler bei Klick */
}

a[disabled],
a.disabled {
  pointer-events: none;         /* Deaktiviert Klicks */
  color: #e5e5e5;               /* Grauer Ton für disabled */
  text-decoration: none;
  opacity: 0.65;
  cursor: not-allowed;
}
a.footerlink {
  color: #87cedc;
  text-decoration: none;
}

a.footerlink:hover {
  text-decoration: underline;
}
.btn-blue {
    background-color: #2E97A8;
    border-color: #87CEDC;
    color: #FFFFFF;
}
.btn-blue:visited,
.btn-blue:active {
    background-color: #2E97A8; 
    border-color: #87CEDC;
    color: #FFFFFF;
    text-decoration: none;
}
.btn-blue:hover,
.btn-blue:focus {
    background-color: #87CEDC;
    border-color: #2E97A8;
    color: #FFFFFF;
    text-decoration: none;
}
.btn-blue:active {
    background-color: #2E97A8;
    border-color: #87CEDC;
    color: #FFFFFF;
    text-decoration: none;
}
.btn-admin {
    background-color: #3C3C3C;
    border-color: #F28C28;
    color: #F28C28;
}
.btn-admin:visited,
.btn-admin:active {
    background-color: #3C3C3C;
    border-color: #F28C28;
    color: #F28C28;
    text-decoration: none;
}
.btn-admin:hover,
.btn-admin:focus {
    background-color: #F28C28;
    border-color: #3C3C3C;
    color: #FFFFFF;
    text-decoration: none;
}
.btn-admin:active {
    background-color: #3C3C3C;
    border-color: #F28C28;
    color: #F28C28;
    text-decoration: none;
}
.btn-white {
    background-color: #FFFFFF;
    border-color: #87CEDC;
    color: #2E97A8;
    font-size:1,25rem;
}
.btn-white:visited,
.btn-white:active {
    background-color: #FFFFFF;
    border-color: #87CEDC;
    color: #2E97A8;
}
.btn-white:hover,
.btn-white:focus {
    background-color: #2E97A8; 
    border-color: #2E97A8;
    color: #FFFFFF;
    text-decoration: none;
}
.btn-white:active {
     background-color: #FFFFFF;
    border-color: #87CEDC;
    color: #2E97A8;
}

.glasslight {
      background: rgba(255, 255, 255, 0.05);
      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px);
      border: 1px solid rgba(255, 255, 255, 0.3);
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
      overflow: hidden;
      color: black;
    }

.glasslight::before {
      content: '';
      position: absolute;
      top: -6px;
      left: -6px;
      right: -6px;
      bottom: -6px;
      border-radius: inherit;
      background: rgba(255, 255, 255, 0.1);
      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px);
      box-shadow: inset 0 0 10px rgba(255, 255, 255, 0.05);
      pointer-events: none;
      z-index: -1;
      mask: radial-gradient(ellipse at center, transparent 60%, black 100%);
    }

.glassdeep {
      background: rgba(255, 255, 255, 0.05);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      border: 1px solid rgba(255, 255, 255, 0.3);
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
      overflow: hidden;
      color: white;
    }

.glassdeep::before {
      content: '';
      position: absolute;
      top: -6px;
      left: -6px;
      right: -6px;
      bottom: -6px;
      border-radius: inherit;
      background: rgba(255, 255, 255, 0.1);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      box-shadow: inset 0 0 10px rgba(255, 255, 255, 0.05);
      pointer-events: none;
      z-index: -1;
      mask: radial-gradient(ellipse at center, transparent 20%, black 100%);
    }

.tableimpressum, .tableimpressum td {
  border: 0px solid white;
  background-color: transparent;
  color: white;
  padding: 8px;
  text-align:left;
  height: auto;
  vertical-align: top;
}
.tablestats, .tablestats td {
  background-color: #FFFFFF80;
  border: 1px solid #3C3C3C;
  color: #000000;
  padding: 8px;
  height: auto;
  vertical-align: top;
}
.carousel-wrapper {
  perspective: 2000px;
  width: 100%;
  max-width: 600px;
  margin: 40px auto;
  position: relative;
  height: 300px;
}

.carousel {
  width: 100%;
  height: 75%;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 1s;
}

.creator {
  position: absolute;
  top: 30%;
  left: 50%;
  width: 180px;
  height: 180px;
  margin-left: -90px;
  margin-top: -90px;
  transform: rotateY(calc(var(--i) * 360deg / var(--total))) translateZ(500px);
  transform-origin: center center;
}

.carousel-item {
  width: 250px;
  height: 250px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -125px; /* horizontale Mitte */
  margin-top: -125px;  /* vertikale Mitte */
  transform: rotateY(calc(var(--i) * 360deg / var(--total))) translateZ(500px);
  transform-origin: center center;
  text-align: center;
  color: white;
  text-decoration: none;
}

.carousel-item img {
  width: 100%;
  height: auto;
  border-radius: 12px;
}

.carousel-item span {
  display: block;
  margin-top: 10px;
  font-weight: bold;
}

.controls {
  text-align: center;
  margin-top: 120px;
}

.controls button {
  background: #333;
  color: white;
  border: none;
  padding: 10px 15px;
  font-size: 18px;
  margin: 0 10px;
  cursor: pointer;
  border-radius: 6px;
}

.controls button:hover {
  background: #555;
}

#raceChartWrapper { margin:0 auto; }
.race-error { color:#87cedc; background:#fff5f5; padding:12px; border-radius:6px; border:1px solid #ffcccc; text-align:center; margin-bottom:10px; }
.race-bar { height:18px; background:#fff; border-radius:9px; margin:4px 0; position:relative; overflow:visible; }
.race-marker { position:absolute; right:0; top:50%; transform:translate(50%,-50%); font-size:18px; display:inline-block; }
.race-marker i {
    display: inline-block;
    width: 24px;
    height: 24px;
    line-height: 24px;
    text-align: center;
    border-radius: 50%;
    background-color: transparent;
    border: 2px solid #fff;
    color: #fff;
    font-size: 14px;
}
.alert-success {
  color: #000;
  background-color: #ffffff80;
  border: 5px solid #2e97a8;
}
.alert-danger {
  color: #BE1716;
  background-color: #ffffff80;
  border: 5px solid #BE1716;
}
.bi-blue{
  font-size:1.5em;
  color: #87CEDC;
}
.blink-slow {
    animation: blink 1.0s ease-in-out infinite;
    color: #87cedc;
}
@keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.2; }
}
.glowing-box {
    animation: glow 2.5s ease-in-out infinite;
    color: #87cedc;
}

@keyframes glow {
    0%   { opacity: 1; }
    50%  { opacity: 0.85; }
    100% { opacity: 1; }
}
.ctatext{
  font-size: 2em;
}
.news-item{background:rgba(255,255,255,0.2);}
.news-date-box {
    background: #2E97A8;         /* dein Blauton */
    color: #FFFFFF;              /* dunkler Kontrast */
    padding: 6px 12px;
    border-radius: 8px;
    min-width: 70px;
    line-height: 1.1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.news-date-day {
    font-size: 1.2rem;
    font-weight: 700;
}
.news-date-year {
    font-size: 0.75rem;
    font-weight: 500;
    opacity: 0.9;
}
.form-label{color:#FFFFFF;}

/* Gesamtes Modal-Fenster (Hintergrund & Position) */
.modal {
  backdrop-filter: blur(10px);    /* Weicher, verschwommener Hintergrund */
  background-color: rgba(0,0,0,0.7) !important; /* leicht dunklerer Hintergrund */
}

/* Dialogbox (Größe & Position) */
.modal-dialog {
  max-width: 700px;             /* Breite anpassen */
  margin: 1.75rem auto;         /* vertikale Abstände */
  border-radius: 12px;          /* runde Ecken */
  overflow: hidden;             /* keine Überstände */
  box-shadow: 0 0 0px rgba(0,0,0,0.25);
}

/* Content (Hintergrund & Schatten) */
.modal-content {
  background-color: #3C3C3C;    /* Dunkler Hintergrund (z.B. Navy oder Anthrazit) */
  color: #FFF;               /* Hellere Schrift */
  border: none;                 /* Rand entfernen */
  border-radius: 12px;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* Header */
.modal-header {
  background-color: #87cedc;    /* Blaues Header-Hintergrund */
  color: #fff;
  border-bottom: none;          /* Entfernt Linie unten */
  padding: 1rem 1.5rem;
  font-weight: 600;
}

/* Titel */
.modal-title {
  font-size: 1.5rem;
}

/* Schließen Button */
.btn-close {
  filter: invert(1);            /* Weißer X-Button */
  opacity: 0.8;
  transition: opacity 0.3s ease;
}
.btn-close:hover {
  opacity: 1;
}

/* Body */
.modal-body {
  padding: 1.5rem;
  font-size: 1rem;
  line-height: 1.5;
  color: #cbd5e1;
}


input[type="checkbox"] {
  accent-color: #2E97A8; /* Indigo, geht auch mit Hex oder RGB */
  transform: scale(1.5); /* Größe 50% größer */
  cursor: pointer;
}
.form-check-input:checked {background-color:#2E97A8; border-color:#87CEDC;}