.navbar {
    z-index: 1040; /* Navbar sollte hinter dem Modal sein */
}
/*
.modal-backdrop {
    z-index: 1050; /* Backdrop über der Navbar, aber unter dem Modal */
}
*/
.modal {
    z-index: 1060; /* Modal über dem Backdrop und Menü */
}


.newsupdate-item {
    z-index: 10; /* Sicherstellen, dass News-Elemente unter anderen Inhalten liegen */
}


/* --- Fixed Navbar Offset & Modal-Z-Index (Admin) --- */
:root { --navbar-height: 100px; }


/* Sicherstellen, dass der Container über anderen Elementen (z.B. Navbar) liegt */
body {
  position: relative;
  z-index: 0;
}



/* Platz nach oben, damit die erste Zeile nicht unter der Navbar steckt */
body { 
  padding-top: calc(var(--navbar-height) + 12px);
}

.admin-bereich {
    margin-top: 70px; /* Passe die Zahl je nach Bedarf an */
}

/* Falls die Navbar in kleineren Viewports höher wird (Zeilenumbruch) */
@media (max-width: 991.98px) {
  :root { --navbar-height: 120px; }
  body { padding-top: calc(var(--navbar-height) + 12px); }
}

:root {
  --menu-underline-speed: 120ms; /* vorher evtl. 300–400ms */
}




/* Gegen Margin-Collapse bei der ersten Überschrift */
.row:first-child > [class^="col"] h1,
.row:first-child > [class^="col"] h2,
.row:first-child > [class^="col"] .h1,
.row:first-child > [class^="col"] .h2,
.row:first-child > [class^="col"] .h3,
.row:first-child > [class^="col"] .h4 {
  margin-top: 0;
  padding-top: .25rem;
}

/* Mehr Abstand oben im Admin-Bereich */
.row {
    padding-top: 20px; /* Passe die Zahl je nach Bedarf an */
}


/* Admin: kleine Thumbnails für Galerie */
.admin-gallery-thumb {
  width: 250px;          /* gewünschte Breite */
  height: auto;          /* Proportionen erhalten */
  object-fit: cover;     /* falls du feste Höhe willst, später height:100px setzen */
  border-radius: .5rem;  /* weiche Ecken */
}

/* Admin: kleine Thumbnails für Slider */
.admin-slider-thumb {
  width: 250px;          /* gewünschte Breite */
  height: auto;          /* Proportionen erhalten */
  object-fit: cover;     /* falls du feste Höhe willst, später height:100px setzen */
  border-radius: .5rem;  /* weiche Ecken */
}


/* --- Allgemeine Stile (style.css) --- */

/* Grundlayout in Grau/Weiß, responsive, ohne linke Sidebar */
body, html {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  color: #222;
}

/* Neu: Kein globales Padding auf .card-body! */
.card { 
  margin-bottom: 20px;
  border-radius: 1rem;
}

.swiper-slide { margin-bottom: 20px; }

/* Modal positionieren und sicherstellen, dass es nicht zu weit oben erscheint */
.modal {
  position: fixed;  /* Fixiert das Modal an der Position */
  top: 50%;          /* Zentriert es vertikal */
  left: 50%;         /* Zentriert es horizontal */
  transform: translate(-50%, -50%);  /* Verschiebt es genau zur Mitte */
  max-height: 90vh;  /* Begrenze die Höhe des Modals */
  overflow-y: auto;  /* Wenn das Modal zu groß ist, wird gescrollt */
}

/* Standardmäßig keine Verdunkelung des Hintergrunds beim Öffnen des Modals */
.modal-backdrop {
 /*  background-color: transparent !important; Kein dunkler Hintergrund */
  background-color: rgba(0, 0, 0, 0.6) !important; /* Verdunkelt den Hintergrund */
}



/* Verhindern der Helligkeitsänderung des Body beim Öffnen des Modals */
body.modal-open {
  filter: none; /* Entfernt jede Helligkeitsdämpfung des Hintergrunds */
  filter: brightness(80%) !important; /* Dimmt den Hintergrund */
}

.modal-open .modal-content {
  filter: brightness(100%) !important; /* Setzt die Helligkeit des Modals auf 100% */
  background-color: #fff; /* Weißer Hintergrund für das Modal-Innenfenster */
}

/* Helligkeit des Modals beibehalten */
.modal-content {
 /* background-color: rgba(255, 255, 255, 0.9) !important;  Leicht durchsichtiger Hintergrund für das Modal */
/*  background-color: rgba(255, 255, 255, 0.9) !important;  Weißer Hintergrund für das Modal */
  /* filter: brightness(100%) !important; Setzt die Helligkeit des Modals auf 100% */
  filter: brightness(100%) !important; /* Setzt die Helligkeit des Modals auf 100% */
}


/*******  Anfang Swiper-Slider als Bezugspunkt für das Logo ************/



/* Swiper-Slider als Bezugspunkt für das Logo */
.swiper.mySwiper {
    position: relative;
    overflow: hidden;
}

/* Container mit 3D-Perspektive */
.slider-logo-rotating-wrapper {
    position: absolute;
    top: 20px;   /* nach Wunsch anpassen */
    left: 20px;
    z-index: 30;
    pointer-events: none;
    perspective: 800px;   /* 3D-Tiefe */
}

/* 3D-Logo selbst */
.slider-logo-rotating {
    max-width: 180px;     /* Größe nach Wunsch */
    height: auto;
    display: block;
    transform-style: preserve-3d;
    animation: slider-logo-3d-spin 8s linear infinite;
    /* optional:
    backface-visibility: hidden;
    */
}

/* 3D-Rotation um die Y-Achse */
@keyframes slider-logo-3d-spin {
    0%   { transform: rotateY(0deg)   rotateZ(0deg); }
    50%  { transform: rotateY(180deg) rotateZ(180deg); }
    100% { transform: rotateY(360deg) rotateZ(360deg); }
}


/* Optional: auf sehr kleinen Bildschirmen Logo kleiner machen */
@media (max-width: 576px) {
    .slider-logo-rotating {
        max-width: 120px;
    }
}






/*******  Ende Swiper-Slider als Bezugspunkt für das Logo ************/




/************************** newsupdate ***********************************/

/* Container für News-Updates */
.newsupdate-item {
  padding: 10px;
  margin-top: 30px;
  margin-bottom: 30px !important;
  visibility: hidden; /* Container unsichtbar machen */
  position: relative; /* Ermöglicht es, den Inhalt sichtbar zu machen */

  max-width: 1800px;  /* Maximale Breite des Containers */
  margin-left: auto; /* Zentriert den Container horizontal */
  margin-right: auto; /* Zentriert den Container horizontal */
}

/* Optional: Wenn du auch den Abstand zwischen den einzelnen News-Updates (innerhalb von .newsupdate-list) verkleinern möchtest */
.newsupdate-list-container {
  padding-bottom: 10px;  /* Reduziert den Abstand unten */
}

/* Flexbox für das Layout von Bild und Text nebeneinander */
.newsupdate-content {
  display: flex;
  justify-content: flex-start; /* Standardmäßig nach links ausrichten */
  gap: 20px;  /* Standard-Abstand zwischen Bild und Text */
  align-items: flex-start; /* Vertikale Ausrichtung: oben anordnen */
  width: 100%;  /* Container füllt die gesamte Breite aus */
  flex-wrap: wrap; /* Flexbox bei Bedarf umbrechen */
}

/* Textbereich */
.newsupdate-text {
  flex-grow: 1;  /* Text nimmt den verbleibenden Platz ein */
  flex-shrink: 1; /* Text kann schrumpfen, wenn nötig */
  display: flex;
  flex-direction: column;
  justify-content: center; /* Text wird vertikal zentriert */
  word-wrap: break-word; /* Textumbruch für längeren Text */
  padding-left: 10px;  /* Abstand zum Bild */
  margin-left: 30px;  /* Abstand erhöhen, um mehr Platz zwischen Text und Bild zu haben */

  /* Hier verringern wir die Breite des Textbereichs */
  max-width: 60%; /* Setze die maximale Breite auf 60% der Containerbreite */
  width: 100%;  /* Standard: Der Textbereich füllt den verfügbaren Platz aus */
  visibility: visible; /* Textinhalt sichtbar */
}

/* Bildcontainer */
.newsupdate-image-container {
  width: 100%; /* Der Container nimmt die gesamte Breite ein */
  max-width: 550px; /* Maximalbreite des Containers */
  height: auto;  /* Höhe des Containers passt sich der Bildhöhe an */
  text-align: center;
  display: inline-block;
  overflow: hidden;  /* Verhindert, dass das Bild aus dem Container herausragt */
  position: relative;
  visibility: visible; /* Sicherstellen, dass der Bildcontainer sichtbar ist */
}

/* Bild innerhalb des Containers */
.newsupdate-image {
  width: 100%;     /* Das Bild füllt die gesamte Breite des Containers */
  height: auto;    /* Das Bild behält das Seitenverhältnis bei */
  object-fit: cover; /* Bild wird zugeschnitten, um den gesamten Container zu füllen */
  border-radius: 8px;
}

/* Optional: Abstand zwischen Text und Bild anpassen, wenn das Bild links ist */
.newsupdate-item .newsupdate-content img.newsupdate-image + .newsupdate-text {
  margin-left: 50px;  /* Abstand von 50px zwischen Bild und Text */
}

/* Alternativ kannst du den Abstand auf der rechten Seite des Bildes anpassen, wenn das Bild rechts steht */
.newsupdate-item .newsupdate-content .newsupdate-text + img.newsupdate-image {
  margin-right: 20px;  /* Abstand von 50px zwischen Text und Bild, wenn Bild rechts */
}

/* Optional: Maximalbreite für das Bild festlegen */
.newsupdate-item img.newsupdate-image {
  max-width: 550px; /* Maximalbreite für das Bild, um zu verhindern, dass es zu groß wird */
}

/* Optional: Bildanpassung für Admin-Bereich */
.newsupdate-admin-image {
  width: 350px;
  height: 350px;
  object-fit: cover;
  border-radius: 8px;
}

/* Bild für Index-Seite */
.newsupdate-index-image {
  width: 550px;
  height: 500px;
  object-fit: cover;
  border-radius: 8px;
}

/* Optional: Weitere allgemeine Stile */
.newsupdate-item form {
  display: inline-block;
  margin-left: 20px;  /* Abstand vom Text */
}

/* Container, der .newsupdate-item umgibt */
.newsupdate-list-container {
  display: block; /* Sicherstellen, dass der Container nicht flexiblen Einschränkungen unterliegt */
  padding-bottom: 10px;  /* Reduziert den Abstand unten */
}

/* Abstand nach oben und unten erhöhen */
.newsupdate-item {
  margin-top: 30px;   /* Abstand nach oben zum News-Bereich verringert */
  margin-bottom: 10px; /* Abstand zum nächsten Element (Galerie) verringert */
}

/* Anpassungen für mobile und kleinere Ansichten */
@media (max-width: 768px) {
  .newsupdate-item {
    margin-top: 20px;
    margin-bottom: 20px;
  }

  .newsupdate-content {
    flex-direction: column; /* Wenn der Bildschirm kleiner wird, wird das Layout in eine Spalte geändert */
    align-items: center;
    gap: 15px;  /* Kleineren Abstand zwischen Bild und Text */
  }

  .newsupdate-item .newsupdate-text {
    margin-left: 0; /* Kein Abstand auf mobilen Geräten */
  }

  .newsupdate-item .newsupdate-image-container {
    width: 100%;   /* Bildcontainer soll die volle Breite ausfüllen */
    max-width: 300px; /* Begrenze die maximale Breite des Bildes */
  }

  .newsupdate-item img.newsupdate-image {
    width: 100%;  /* Das Bild füllt den Container aus */
    height: auto; /* Das Bild bleibt im Seitenverhältnis */
  }
}

/************************** Navbar ***********************************/


/* Navbar Styling */
.navbar {
    /*  background-color: black !important;*/
    background-color: #333333 !important;  /* Dunkelgrau anstelle von Schwarz */
    height: 100px !important;
    margin-bottom: 0 !important;
    padding-left: 0 !important;  /* Entfernt Padding von der gesamten Navbar */
    padding-right: 0 !important; /* Entfernt Padding von der gesamten Navbar */
}

/* Menütext im Header */
nav.navbar.bg-dark .navbar-nav .nav-link {
    color: white !important;         /* Textfarbe weiß */
    font-weight: bold !important;    /* Schrift fett machen */
    font-size: 1.2rem !important;    /* Schriftgröße erhöhen */
    position: relative;              /* Positionierung für das ::after-Pseudo-Element */
    padding-bottom: 5px;             /* Abstand zwischen Text und Linie */
    transition: color 0.3s ease;     /* Übergangsanimation für die Textfarbe */
}


/* Dropdown-Menü für 'Kurs' in Dunkelgrau */
nav.navbar.bg-dark .navbar-nav .nav-item.dropdown .dropdown-menu {
    background-color: #333333 !important; /* Dunkelgrau für das Dropdown-Menü */
    border: none !important;  /* Optional: entfernt den Rand des Dropdowns */
}


/* Schriftfarbe der Links im Dropdown auf Weiß setzen */
nav.navbar.bg-dark .navbar-nav .nav-item.dropdown .dropdown-menu .dropdown-item {
    color: white !important; /* Setzt die Schriftfarbe der Dropdown-Items auf Weiß */
    padding: 10px 15px !important; /* Vergrößert den Abstand zwischen den Dropdown-Items */
    transition: background-color 0.3s ease, color 0.3s ease; /* Übergangsanimation für Hintergrund und Textfarbe */
}

/* Hover-Effekt für die Links im Dropdown */
nav.navbar.bg-dark .navbar-nav .nav-item.dropdown .dropdown-menu .dropdown-item:hover {
    background-color: #444444 !important; /* Etwas helleres Grau beim Hover */
    color: #ffc107 !important; /* Goldgelbe Farbe beim Hover */
}

/* Linie unter dem Text, die sich beim Hover von der Mitte ausbreitet */
nav.navbar.bg-dark .navbar-nav .nav-link::after {
    content: '';                      /* Inhalt leer */
    position: absolute;
    left: 50%;                         /* Linie startet in der Mitte des Textes */
    bottom: 0;                         /* Positionierung direkt unter dem Text */
    width: 0%;                         /* Anfangsbreite ist 0 */
    height: 4px;                       /* Dicke der Linie */
    background-color: #ffc107;        /* Farbe der Linie */
    transition: width 0.3s ease;      /* Übergangsanimation für die Breite */
    transform: translateX(-50%);      /* Zentriert die Linie horizontal */
}


/* Linie unter dem Text beim Hover vergrößern */
nav.navbar.bg-dark .navbar-nav .nav-link:hover::after {
    width: 100%;                       /* Linie dehnt sich über die gesamte Breite des Textes */
}


/* Menütext fett und unterstrichen beim Hover */
nav.navbar.bg-dark .navbar-nav .nav-link:hover {
    color: #ffc107 !important;  /* Goldgelb beim Hover */
}

/* Container für die Navbar, sorgt für das Einrücken vom rechten Rand */
.navbar .container-fluid {
    padding-right: 150px !important;  /* Hier den Abstand vom rechten Rand (10 cm) einstellen */
}

/* Menütext beim Hover */
nav.navbar.bg-dark .navbar-nav .nav-link:hover {
    color: #ffc107 !important;  /* Goldgelb beim Hover */
}

/* Verhindere, dass unter der News-Linie beim ersten Laden sichtbar ist */
nav.navbar.bg-dark .navbar-nav .nav-link::after {
    visibility: hidden;  /* Macht das ::after-Element beim Laden unsichtbar */
}

/* Nur sichtbar, wenn der Hover-Effekt aktiv ist */
nav.navbar.bg-dark .navbar-nav .nav-link:hover::after {
    visibility: visible;  /* Sichtbar beim Hover */
}

/* Navbar Menü mit Flexbox */
.navbar-nav {
    display: flex;
    justify-content: flex-end; /* Menü immer rechts ausrichten */
    width: 100%;                /* Verhindert, dass das Menü zu schmal wird */
    flex-wrap: nowrap; /* Verhindert das Umbrechen der Menü-Elemente */
  /*  justify-content: flex-start;  Macht sicher, dass die Items links ausgerichtet sind */
  /*  margin-left: auto;             Schiebt die Navbar nach rechts */
  /*  margin-left: 0px !important;    Menüttexte leicht nach links */
  /*   margin-right: 100px !important;  Abstand vom rechten Rand (ca. 10 cm) */
}



/* Menü im Header: Standard-Link-Stile */
.navbar-nav .nav-link {
    margin-right: 90px !important;   /* Erhöht den Abstand zwischen den Links */
    font-size: 1.2rem !important;    /* Schriftgröße erhöhen */
    font-weight: bold !important;    /* Schrift fett machen */
    color: white !important;      /*   Textfarbe weiß für den Header */
    transition: color 0.3s ease, text-decoration 0.3s ease;  /* Übergangsanimation für Hover */
}


/*  **************************************************** */




/* 1) Verhindere, dass versteckte Modals/Backdrops Klicks abfangen */
.modal:not(.show),
.modal-backdrop:not(.show) {
  display: none !important;
  pointer-events: none !important;
}

/* 2) Nur wenn sichtbar, sollen sie Klicks bekommen */
.modal.show,
.modal-backdrop.show {
  pointer-events: auto !important;
}

/* 3) Falls irgendwo noch ein „hängender“ Backdrop steht */
body:not(.modal-open) .modal-backdrop {
  display: none !important;
  pointer-events: none !important;
}




/* ===== Datenschutz-Banner oberhalb des Footers ===== */

/* Breiter Datenschutz-Banner */
.datenschutz-banner {
  background: #f8f9fa;
  border-top: 1px solid #e5e7eb;
  border-bottom: 1px solid #e5e7eb;
  padding: 24px 0;
}

/* rand-zu-rand Box, mit innen etwas Luft */
.datenschutz-box {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: .75rem;
  padding: 24px;
  box-shadow: 0 6px 18px rgba(0,0,0,.06);
  background-color: #f5f5f5 !important; /* Helles Grau erzwingen */  
}

/* Variante "Wide": keine max-width, kleine Seitenabstände für große Screens */
.datenschutz-box-wide {
  margin-left: 16px;
  margin-right: 16px;
}

@media (min-width: 992px) {
  .datenschutz-box-wide {
    margin-left: 24px;
    margin-right: 24px;
  }
}

/* Sicherstellen, dass Footer nicht überlagert wird */
footer, #footer {
  position: relative;
  z-index: 1;
}



/* ================================= Laufschrift / Ticker ===================================== */
.ticker {
  position: relative;
  overflow: hidden;
  white-space: nowrap;
  line-height: 1;
}

.ticker-inner {
  display: inline-block;
  /* Start rechts außerhalb, damit es „reinscrollt“ */
  padding-left: 100%;
  will-change: transform;
  animation: ticker-move 20s linear infinite; /* Dauer anpassen: kleiner = schneller */
}

.ticker-text {
  display: inline-block;
  padding: 0 2rem;         /* Abstand zwischen Wiederholungen */
  font-weight: 700;        /* gut lesbar */
  letter-spacing: .3px;
}

/* Hover pausiert die Animation (optional) */
.ticker:hover .ticker-inner {
  animation-play-state: paused;
}

/* Keyframes: verschiebe den Track einmal über die volle Breite */
@keyframes ticker-move {
  0%   { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(-100%, 0, 0); }
}

/* Systemweite Bewegung reduzieren respektieren */
@media (prefers-reduced-motion: reduce) {
  .ticker-inner { animation: none; transform: translate3d(0,0,0); }
}

/* Erzwinge die Animation, falls vorher etwas sie überschreibt */
.ticker-inner {
  animation: ticker-move 20s linear infinite !important;
  will-change: transform;
}


#slider-container {
    margin-bottom: 40px; /* Wert je nach Bedarf anpassen */
}

/* Gleiche Höhe und Padding für beide Buttons */
.button-container button {
    height: 38px;  /* Feste Höhe, falls gewünscht */
    padding: 0.375rem 0.75rem; /* Standard-Padding, falls erforderlich */
    font-size: 0.875rem; /* Gleiche Schriftgröße */
}



/* Abstand nach unten für den Content-Bereich */
.card-text {
    margin-bottom: 30px !important;  /* Stelle sicher, dass der Abstand hier angewendet wird */
}



/* Abstand nach oben für den Button-Container */
.button-container {
    margin-top: 20px !important;  /* Stelle sicher, dass der Abstand hier angewendet wird */
}


/* Optional: flexbox-basierte Gestaltung der Buttons */
.button-container {
    display: flex;
    gap: 15px;  /* Abstand zwischen den Buttons */
}


/* Entferne Fokus-Stile, wenn der Fokus nicht sichtbar sein soll */
nav.navbar.bg-dark .navbar-nav .nav-link:focus:not(:focus-visible),
nav.navbar.bg-dark .navbar-nav .dropdown-item:focus:not(:focus-visible),
nav.navbar.bg-dark .navbar-nav .nav-link:active,
nav.navbar.bg-dark .navbar-nav .dropdown-item:active {
  background-color: transparent !important;
  box-shadow: none !important;
  outline: none !important;
}

/* Zeige den Fokus nur an, wenn er durch Tastaturinteraktionen gesetzt wurde */
nav.navbar.bg-dark .navbar-nav .nav-link:focus-visible,
nav.navbar.bg-dark .navbar-nav .dropdown-item:focus-visible {
  outline: 2px solid #ffc107;
  outline-offset: 2px;
}

/* Verhindere Tipp-Hervorhebung auf mobilen Geräten */
nav.navbar.bg-dark * {
  -webkit-tap-highlight-color: transparent;
}










/* ================= Hover-Dropdowns ab Desktop (>= lg) ================= */

/* Hover-Dropdown absichern */
@media (min-width: 992px) {
  .navbar .dropdown-menu {
    display: none;
  }
  .navbar .dropdown-menu.show {
    display: block !important; /* erzwingt Anzeige, falls etwas überstimmt */
  }
}

/* z-index über Navbar (1040 bei dir) */
.navbar .dropdown-menu {
  z-index: 1055;
  margin-top: 0;
  pointer-events: auto;
}


/* Dropdown-Menü bei Hover öffnen */
.nav-item.dropdown:hover .dropdown-menu {
    display: block; /* Dropdown sichtbar machen */
    visibility: visible;
    opacity: 1;
}




/* Standardmäßig alle Kurs-Submenüs verstecken */
.course-section {
    display: none;
    padding-top: 20px;
    margin-top: 20px;  /* Abstand zum Slider */
}

/* Wenn das Submenü das Ziel ist (über :target), wird es sichtbar */
.course-section:target {
    display: block;
}

/* Sicherstellen, dass das Submenü unterhalb des Sliders bleibt */
#slider {
    margin-bottom: 30px; /* Abstand zwischen Slider und Kurs-Submenü */
}

/* Optional: Animation bei Anzeige */
.course-section {
    transition: opacity 0.3s ease;
}

.course-section:target {
    opacity: 1;
}


/* ************************   Impressum Bereich   ************************************** */

/* ========================================= */
/* IMPRESSUM – INHALT & TYPOGRAFIE          */
/* ========================================= */

.impressum-body {
    font-size: 0.95rem;
    line-height: 1.6;
}

.impressum-subtitle {
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.85rem;
    margin-bottom: 0.75rem;
    opacity: 0.85;
}

/* Definition-Listen als saubere 2-Spalten-Zeilen */
.impressum-dl {
    margin: 0;
}

.impressum-dl-row {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.25rem;
}

.impressum-dl-row dt {
    min-width: 110px;
    font-weight: 600;
    margin: 0;
}

.impressum-dl-row dd {
    margin: 0;
    flex: 1;
}

/* Dezenter Hinweistext */
.impressum-hinweis {
    font-size: 0.85rem;
    opacity: 0.8;
}

/* Block für Rechtstexte optisch absetzen */
.impressum-legal {
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    padding-top: 1.25rem;
}

.impressum-legal p {
    margin-bottom: 0.75rem;
}

/* Links im Impressum dezent */
.impressum-body a {
    text-decoration: none;
    border-bottom: 1px dotted rgba(0, 0, 0, 0.3);
}

.impressum-body a:hover,
.impressum-body a:focus {
    text-decoration: none;
    border-bottom-style: solid;
}


.impressum-banner {
    padding: 2rem 0;
}

/* Die eigentliche Impressum-Box */
.impressum-box-wide {
    margin: 0 auto;

    /* 5 cm kleiner als der Bildschirm in beide Richtungen */
    max-width: calc(100vw - 5cm);
    max-height: calc(100vh - 2cm);

    padding: 2rem;
    overflow-y: auto;

    /* Abgerundete Ecken + leichte Karte-Optik */
    border-radius: 20px;
   /*  background-color: #ffffff;  WEISS */
    background-color: #f5f5f5 !important; /* Helles Grau erzwingen */  
    box-shadow: 0 0.75rem 2rem rgba(0, 0, 0, 0.25);
}

/* Auf sehr kleinen Bildschirmen nicht zu klein werden */
@media (max-width: 576px) {
    .impressum-box-wide {
        max-width: calc(100vw - 2rem);
        max-height: calc(100vh - 2rem);
        padding: 1.5rem;
        border-radius: 12px;
    }
}




/* ************************ ENDE Impressum Bereich   ************************************** */

/*  ******************************* Anfang Logo   ***************************************** */

/* Rotierendes Logo oben links vor dem Slider (nur Startseite) */
.home-logo-rotating-wrapper {
    position: fixed;
    /* oberhalb des Sliders, aber unter der Navbar */
    top: calc(var(--navbar-height, 100px) + 10px);
    left: 20px;

    z-index: 1030; /* Navbar hat bei dir 1040, Slider < 1030 */
    pointer-events: none; /* blockiert keine Klicks auf Slider/Menu */
}

.home-logo-rotating-wrapper img.home-logo-rotating {
    max-width: 180px;   /* Größe anpassen nach Geschmack */
    height: auto;
    display: block;

    animation: home-logo-spin 20s linear infinite;
    transform-origin: center center;
}

/* Dreh-Animation */
@keyframes home-logo-spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* Optional: auf sehr kleinen Bildschirmen Logo kleiner oder ausblenden */
@media (max-width: 576px) {
    .home-logo-rotating-wrapper img.home-logo-rotating {
        max-width: 120px;
    }
}




/* ******************************* ENDE Logo    ****************************************** */



/* ================= Footer wie Header ================= */

/* Hintergrund & Höhe für den Footer */
.footer-dark {
  background-color: #333333 !important; /* wie Navbar */
  padding-top: 4rem;   /* mehr Höhe oben */
  padding-bottom: 4rem;/* mehr Höhe unten */
  /* Optional: falls du willst, dass der Footer immer mindestens eine gewisse Höhe hat */
  /* min-height: 180px; */
}



/* Row im Footer: kein zusätzliches Padding von der globalen .row-Regel */
footer .footer-row {
  padding-top: 0;
  margin-top: 1.5rem;  /* Spalten ein Stück nach unten schieben */
}


/* Überschriften im Footer (Spaltentitel) */
footer .footer-row h5 {
  color: #ffffff;
  font-weight: bold;
  font-size: 1.2rem;
  margin-bottom: 1rem;
}

/* Footer-Menülinks optisch wie Navbar-Links */
footer .footer-row .footer-nav-link {
  color: #ffffff !important;          /* weiß wie im Header */
  font-weight: bold;
  font-size: 1.1rem;
  text-decoration: none;
  position: relative;
  padding-bottom: 5px;
  transition: color 0.3s ease;
}

/* Unterstreichungs-Effekt wie im Header: von der Mitte nach außen */
footer .footer-row .footer-nav-link::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 0%;
  height: 3px;
  background-color: #ffc107;           /* goldgelb wie im Header */
  transform: translateX(-50%);
  transition: width 0.3s ease;
}

/* Hover-Farbe + Linie */
footer .footer-row .footer-nav-link:hover {
  color: #ffc107 !important;
}

footer .footer-row .footer-nav-link:hover::after {
  width: 100%;
}

/* Copyright-Zeile unten im Footer */
footer .text-light {
  color: #f8f9fa !important;
}


/* ================= Drittes Footer-Menü ================= */

/* Footer-Spalten ausrichten: links – Mitte – rechts */
footer .footer-row > .col-12.col-lg-4:first-child {
  text-align: left;
}

footer .footer-row > .col-12.col-lg-4:nth-child(2) {
  text-align: center;   /* mittlere Spalte zentrieren */
}

footer .footer-row > .col-12.col-lg-4:last-child {
  text-align: right;    /* rechte Spalte nach rechts */
  padding-right: 1.5rem;/* optional: noch etwas weiter nach rechts schieben */
}


/* Listenpunkte im dritten Menü ebenfalls rechts ausrichten */
footer .footer-row > .col-12.col-lg-4:last-child .list-unstyled li {
  justify-content: flex-end;
}

/* Falls Bootstrap irgendwo display: flex setzt, hier absichern */
footer .footer-row > .col-12.col-lg-4:last-child .list-unstyled {
  padding-right: 0;
}

@media (max-width: 991.98px) {
  footer .footer-row > .col-12.col-lg-4 {
    text-align: left;
    padding-right: 0;
  }
}



/* ===== News-Bereich: Abstand zwischen den News-Containern verkleinern ===== */

/* Weniger Abstand zwischen den einzelnen News-Cards */
#news .card {
  margin-bottom: 10px !important; /* vorher global 20px */
}

/* News-Text im Card etwas „kompakter“ machen */
#news .card-text {
  margin-bottom: 15px !important; /* vorher 30px !important */
}

/* Button-Bereich dichter an den Text rücken */
#news .button-container {
  margin-top: 10px !important; /* vorher 20px !important */
}



.echo-container-test {
    position: relative;  /* Stelle sicher, dass es relativ positioniert ist */
    z-index: 1100;  /* Setze den z-index so, dass es unter dem Menü liegt */
}