html {
  font-size: 18px;
}

@media (min-width: 768px) {
  html {
    font-size: 25px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
  text-align: start;
}

[data-bs-theme="light"] {
    --bs-body-bg: #000; /*  Hintergrund  */
    --bs-body-color: #16c4f5; /* Standard-Textfarbe */
    --bs-emphasis-color: #16c4f5; /* u.a. Nav-Textfarbe */
    --bs-emphasis-color-rgb: #16c4f5; /* u.a. Nav-Textfarbe */
    --bs-link-color: #16c4f5; /* Link */
    --bs-link-color-rgb: 22, 196, 245; /* Link */
    --bs-primary: #16c4f5;
}

header {
    position: relative;
    z-index: 1050; /* Höher als das Bootstrap-Karussell */
    background-color: #000;
}



.navbar {
    --bs-navbar-padding-x: 0;
    --bs-navbar-padding-y: 0.5rem;
    --bs-navbar-color: #16c4f5;
    --bs-navbar-hover-color: #e913bf;
    --bs-navbar-disabled-color: #16c4f5;
    --bs-navbar-active-color: #e913bf;
    --bs-navbar-brand-padding-y: 0.3125rem;
    --bs-navbar-brand-margin-end: 1rem;
    --bs-navbar-brand-font-size: 1.25rem;
    --bs-navbar-brand-color: #e9132c;
    --bs-navbar-brand-hover-color: #e9132c;
    --bs-navbar-nav-link-padding-x: 0.5rem;
    --bs-navbar-toggler-padding-y: 0.25rem;
    --bs-navbar-toggler-padding-x: 0.75rem;
    --bs-navbar-toggler-font-size: 1.25rem;
    --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2822, 196, 245, 0.75%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
    --bs-navbar-toggler-border-color: rgba(var(--bs-emphasis-color-rgb), 0.15);
    --bs-navbar-toggler-border-radius: var(--bs-border-radius);
    --bs-navbar-toggler-focus-width: 0.25rem;
    --bs-navbar-toggler-transition: box-shadow 0.15s ease-in-out;
    position: relative;
    display: flex;
    font-weight: bold;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    padding: var(--bs-navbar-padding-y) var(--bs-navbar-padding-x);
}

.navbar-light .navbar-nav .nav-link {
    color: #16c4f5; 
}

    
    .navbar-light .navbar-nav .nav-link:hover,
    .navbar-light .navbar-nav .nav-link:focus {
        color: #e913bf; 
    }

.navbar-light .nav-link {
    color: #16c4f5;
}


    .navbar-light .nav-link:hover,
    .navbar-light .nav-link:focus {
        color: #e913bf;
    }



.footer-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
    position: relative;
    z-index: 1050; /* Höher als das Bootstrap-Karussell */
    background-color: #000;
}


.footer-content-right {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}


.footer-content-left {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

    
    .footer-content-left .nav-link {
        display: inline-flex;
        justify-content: center;
        align-items: center;
        padding: 0; 
    }

.footer-content .nav-link {
    color: #16c4f5 !important; /* !important erzwingt deine Wunschfarbe gegen Bootstrap */
}

.footer-content .pleinText {
    color: #16c4f5 !important; /* !important erzwingt deine Wunschfarbe gegen Bootstrap */
    text-decoration: none;
}

    /* Optional: Farbe beim Drüberfahren (Hover) mit der Maus */
    .footer-content .nav-link:hover {
        color: #e913bf !important;
    }

.zoom-image-container {
    position: relative;
    overflow: hidden;
    border-radius: 8px; /* Optionale abgerundete Ecken für das Bild */
    margin: 0 auto; /* Zentriert das Element horizontal */
    width: 100vw; /* Nutzt 100% der sichtbaren Bildschirmbreite */
    left: 50%; /* Zentrierungs-Trick, falls es doch in einem Container steckt */
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
}


.zoom-image-container-small {
    position: relative;
    overflow: hidden;
    width: 30vw; /* Nimmt 30% der Bildschirmbreite ein */
    margin: 0 auto;
}

/* 2. Der Link-Rahmen und dessen Hover-Effekt */
.zoom-image-link {
    display: block;
    position: relative;
    text-decoration: none;
    outline: none;
    /* Basis-Rahmen (z. B. dezent grau) */
    border: 4px solid #000000;
    transition: border-color 0.4s ease-in-out;
}

    /* Hover-Effekt: Rahmenfarbe wechselt (z. B. zu Steam-Blau oder Gold) */
    .zoom-image-link:hover {
        border-color: #16c4f5;
    }

/* 3. Das Bild und die Zoom-Animation beim Laden */
.zoom-img {
    display: block;
    width: 100%;
    height: auto;
    /* Verknüpfung mit der Keyframe-Animation unten */
    animation: zoomInOnLoad 2s ease-out forwards;
}

/* 4. Das Text-Overlay (immer sichtbar, lesbar durch Abdunklung) */
.image-text-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    color: #e913bf !important; /* Erzwingt weissen Text */
    pointer-events: none; /* Verhindert, dass der Text Klicks blockiert */
}

/* 5. Keyframes für den Zoom-Effekt beim Laden der Seite */
@keyframes zoomInOnLoad {
    0% {
        transform: scale(1.3); /* Startet vergrössert */
    }

    100% {
        transform: scale(1.0); /* Zoomt heraus auf Originalgrösse */
    }
}

#bgCarousel {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: -2; 
    overflow: hidden;
}

/* Container für die einzelnen Hintergrundbilder */
.zoom-bg {
    width: 100%;
    height: 100vh;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    /* Startet die Zoom-Animation sobald das Bild aktiv wird */
    animation: slowZoom 6.5s infinite linear;
}



/* Die Zoom-Animation (Skalierung von 100% auf 108%) */
@keyframes slowZoom {
    0% {
        transform: scale(1);
    }

    100% {
        transform: scale(1.08);
    }
}

/* Overlay-Schicht für den Inhalt */
.content-overlay {
    position: relative;
    z-index: 1;
    pointer-events: none; /* Verhindert Klick-Konflikte */
}

/* Erlaubt Klicks auf die eigentliche Inhaltsbox wieder */
.content-box {
    pointer-events: auto;
    padding: 3rem;
    border-radius: 15px;

}

.content-boxli {
    background: rgba(0, 0, 0, 0.3); 
    backdrop-filter: blur(5px); 
}

.table_custom {
    --bs-table-bg: transparent !important;
    table-layout: fixed;

}

    /* Entfernt den linken Rahmen der ersten Spalte und den rechten Rahmen der letzten Spalte */
    .table_custom tr td:first-child {
        border-left: 0 !important;
    }

    .table_custom tr td:last-child {
        border-right: 0 !important;
    }

.custom-text-schatten {
    text-shadow: 3px 3px 5px #000;
}

.image-card-link {
    display: block;
    width: 100%;
    max-width: 400px; /* Begrenzt die maximale Breite */
}

/* Container für das Bild und das Overlay (schneidet vergrössertes Bild ab) */
.image-card-wrapper {
    position: relative;
    overflow: hidden;
    border-radius: 8px; /* Optionale abgerundete Ecken */
    box-shadow: 0 4px 15px rgba(0,0,0,0.15); /* Weicher Box-Schatten */
}

/* Das eigentliche Bild mit flüssiger Animation */
.image-card-img {
    display: block;
    width: 100%;
    height: auto;
    transition: transform 0.4s ease;
}

/* Das Text-Overlay (permanent sichtbar, dunkelt das Bild leicht ab) */
.image-card-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center; /* Zentriert Inhalt vertikal */
    align-items: center; /* Zentriert Inhalt horizontal */
    text-align: center;
    padding: 20px;
}

/* Hover-Effekt: Bild vergrössern, wenn der Link berührt wird */
.image-card-link:hover  {
    transform: scale(1.1);
}

/* 2. Der Link-Rahmen und dessen Hover-Effekt */
.border-hover-change {
    border: 4px solid #16c4f5;
    transition: border-color 0.4s ease-in-out;
}

    /* Hover-Effekt: Rahmenfarbe wechselt (z. B. zu Steam-Blau oder Gold) */
    .border-hover-change:hover {
        border-color: #e913bf;
    }

.dashedborder {
    background: linear-gradient( to right, black, rgba(22,196,245,0.4) 20%, rgba(22,196,245,0.4) 80%, black );
    pointer-events: auto;
    padding: 10px;
}