/* Dauer zentral steuerbar */
:root{
  --jt-in-duration: 2.4s;   /* Einblenden: 2–3 s (Passe hier an: z.B. 3s) */
  --jt-out-duration: .45s;  /* Ausblenden vor Navigation */
  --jt-timing-in: ease-out;
  --jt-timing-out: ease;
}

/* Cross-Document View Transitions (Chromium) */
:root { view-transition-name: root; }
::view-transition-old(root){ animation: vt-fade-out var(--jt-out-duration) var(--jt-timing-out); }
::view-transition-new(root){ animation: vt-fade-in  var(--jt-in-duration)  var(--jt-timing-in); }

@keyframes vt-fade-in  { from { opacity: 0 } to { opacity: 1 } }
@keyframes vt-fade-out { from { opacity: 1 } to { opacity: 0 } }

/* Fallback: sanftes Ausblenden vor Navigation */
.jt-fade-out { opacity: 0; transition: opacity var(--jt-out-duration) var(--jt-timing-out); }

/* Sanftes Einblenden nach Laden (immer) */
.jt-onload { opacity: 0; animation: jt-in var(--jt-in-duration) var(--jt-timing-in) forwards; }
@keyframes jt-in { to { opacity: 1 } }

/* Barrierefreiheit */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root) { animation: none !important; }
  .jt-fade-out { transition: none; opacity: 1; }
  .jt-onload  { animation: none;  opacity: 1; }
}


/* =============================
   Fonts
============================= */
@font-face {
  font-family: 'Dakota';
  src: url('/templates/biotonus_verein_startseite/fonts/Dakota.eot');
  src: url('/templates/biotonus_verein_startseite/fonts/Dakota.woff2') format('woff2'),
       url('/templates/biotonus_verein_startseite/fonts/Dakota.woff') format('woff'),
       url('/templates/biotonus_verein_startseite/fonts/Dakota.ttf')  format('truetype'),
       url('/templates/biotonus_verein_startseite/fonts/Dakota.svg#Dakota') format('svg');
}

@font-face {
  font-family: 'Valerian Handwriting';
  src: url('/templates/biotonus_verein_startseite/fonts/Valerian-Handwriting.eot');
  src: url('/templates/biotonus_verein_startseite/fonts/Valerian-Handwriting.woff2') format('woff2'),
       url('/templates/biotonus_verein_startseite/fonts/Valerian-Handwriting.woff') format('woff'),
       url('/templates/biotonus_verein_startseite/fonts/Valerian-Handwriting.ttf')  format('truetype'),
       url('/templates/biotonus_verein_startseite/fonts/Valerian-Handwriting.svg#Valerian Handwriting') format('svg');
}

/* ********************************** */
/* ---  TopMenü auf Unterseiten   --- */
/* ********************************** */
.container-header {
    display: grid;
    /*justify-content: center;*/
    background: #F9F9F9;
}
.container-header-inner {
  width: 960px;
  margin: 0 auto;
    border: red;
}
.grid-child {
    justify-content: flex-end;
    text-align: right;
}

body.login .logout-btn {
  color: #04B2E8 !important;
}

.container-header .mod-menu > li a:hover {
  color: #F0A400;
}
.container-header .mod-menu > .current > a {
  color: #04B2E8;
}
.container-header .mod-menu > li.active::after,
.container-header .mod-menu > li:hover::after {
    background: none !important;
}
.container-header .mod-menu > li > a, .container-header .mod-menu > li > span {
  color: #000000;
  text-decoration: none;
  position: relative;
  Font-size: 24px;
}

.grid-child.logo {
    display: flex;
    flex-direction: column; /* Stapelt Logo und Slogan vertikal */
    align-items: center; /* Falls zentriert gewünscht */
    text-align: center;
}

.site-slogan {
    font-size: 14px;
    font-weight: 400;
    color: #333333; /* Falls Header dunkel ist */
    margin-top: 5px;
}

/* ***************************************************** */
/* Untermenüs beim Hauptmenü aufblenden                  */
/* ***************************************************** */
/* 1) Verberge alle Unter-ULs standardmäßig */
#site-menu ul li > ul {
  display: none !important;
  position: absolute !important;
  top: 100% !important;
  left: 0 !important;
  background: #fff !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15) !important;
  padding: 0.5rem 0 !important;
  white-space: nowrap !important;
  z-index: 1100 !important;
}

/* 2) Zeige das Unter-UL beim Hover über das Eltern-LI */
#site-menu ul li:hover > ul {
  display: block !important;
}

/* 3) Styling der Links im Dropdown (CI-Farben) */
#site-menu ul li > ul li a {
  display: block;
  padding: 0.5rem 1rem;
  color: #333;              /* Standard-Textfarbe */
  text-decoration: none;
}
#site-menu ul li > ul li a:hover {
  background: #F0A400;      /* euer CI-Orange */
  color: #fff !important;
}

/* ************************************* */
/* Sub-Menu auf Unterseiten              */
/* ************************************* */
#menu-unterseiten li.metismenu-item a {
  color: #333333;
  text-decoration: none !important;
}
#menu-unterseiten li.metismenu-item a:hover {
  color: #F0A400;
  text-decoration: none !important;
}
#menu-unterseiten .current a {
  color: #04B2E8 !important;
}
#menu-unterseiten .active {
  text-decoration: none !important;
}

.mod-menu__sub .nav-item a {
    font-weight: bold;
    font-size: 16px;
    line-height: 16px;
}
.mod-menu__sub .nav-item {
    background-color: #F9F9F9;
    padding: .25em .25em .25em 0px;
    text-align: left;
    align-content: flex-start;
    justify-content: flex-start;
}
.mod-menu__sub {
    border-radius: 10px;
    border: solid 1px #cccccc;
    box-shadow: 4px 4px 2px rgba(0,0,0,0.5)!important;
}

/* =============================
   Allgemeine Einstellungen
  Orange     = #F0A400
  Blau.      = #04B2E8
  Green      = #689D3A
  Rot        = #770000
  Hellgrau   = #f4f4f4
============================= */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  padding-top:25px;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  font-family: Arial, sans-serif;
  background-color: #f4f4f4;
  color: #333;
}

.body-inner {
    margin-top: -30px;
}

/* Header & Footer wieder full-width */
header#startseite,
footer {
  align-self: stretch;
  width: 100%;
  height: 60px;
}

/* Main-Wrapper zentrieren und Max-Width geben */
#main-wrapper {
  width: 100%;
  max-width: 1024px;   /* oder deine Wunsch-Breite */
  margin: 0 auto;      /* zentriert innerhalb des Body */
}

/* =============================
   Header (Topbar + Menü)
============================= */
.login {
  color: #333333;
}
.homepage .login-btn {
  color: #04B2E8 !important;
}
.login-btn:hover {
  color: #F0A400;
}
body.login .login-btn {
  display: none !important;
}
body.login .logout-btn {
  color: #04B2E8 !important;
}

/* =============================
   Suchbereich
============================= */
#suchen #meineSuche button {
  display: none;
}
#suchen #meineSuche input {
  height: 60px;
  /*width: 100%;*/
  border-radius: 20px;
}
#mod-finder-searchword128 {
  width: 100%;
}
label.finder {
  display: flex;
  justify-content: flex-start;
  margin-left: 5px;
  font-family: 'Dakota';
  font-size: 25px;
  font-weight: bold;
}

#suchen {
    display: flex;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
    width: 100%;
    /*max-width: 1024px;*/
    padding: 20px;
}

#suchen form input {
  width: 100%;   /* Begrenzung auf 1200px */
  padding: 10px;       /* Optional: etwas Innenabstand */
  box-sizing: border-box; /* Verhindert, dass Padding die Breite beeinflusst */
  font-family: 'Dakota';
  font-size: 25px;
  font-weight: bold;
  color: #000000;
}

#suchen form input.form-control::-webkit-input-placeholder { color: #999; }
#suchen form input.form-control::-moz-placeholder { color: #999; }
#suchen form input.form-control:-ms-input-placeholder { color: #999; }
#suchen form input.form-control::placeholder {
  text-align: right;
  marging-right: 20px;
  font-weight: bold;
  color: #999999;
}
#suchen #meineSuche button {
  height: 45px;
  width: 100px;
  border:solid 2px #000000;
  font-family: 'Dakota';
  font-weight: bold;
  color: #000000;
  background-color: lightgray;
  transition: background 0.5s ease, color 0.5s ease; /* Weiche Farbänderung */  
}
#suchen #meineSuche button:hover {
  background-color: #B81C17;
  color: #ffffff;
}

/* =============================
   Logo-Bereich
============================= */
#logo {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: 20px;
    margin-left: -20px;
  text-align: center;  
}
.logo-inner {
  width: 100%;
}
.grid-child {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;  
  text-align: center;
}

.site-description {
  display: flex;
  justify-content: center;
  padding-left: 260px;
}
.site-desc1 {
  font-family: 'Dakota';
  font-size: 35px;
  color: #04B1E8;
}
.site-desc2 {
  font-family: 'Dakota';
  font-size: 35px;
  color: #cccccc;
}

/* =============================
   Button-Bereich
============================= */
#buttons {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  text-align: center; 
  margin-top:30px;
}

#buttons button {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 250px;
  height: 70px;
  margin: 0px 20px;
  text-align: center;
  transition: background 0.5s ease, color 0.5s ease; /* Weiche Farbänderung */
}

#buttons button:hover,
#round-buttons .round-button:hover {
  background: #aaa; /* Grau-Ton bei Hover */
  /*color: #FF0000;  Optional: Schriftfarbe anpassen */
  border: solid 2px #888888;
}

#buttons .style-eins {
  background: linear-gradient(to bottom, #BAFF49, #689D3A); /* 3D-Farbverlauf */
  border: 2px solid #45B600; /* Leichter Rahmen */
  border-radius: 8px; /* Abgerundete Ecken */
  box-shadow: inset 0 3px 5px rgba(255, 255, 255, 0.6), /* Lichtreflex oben */
              0 8px 6px rgba(0, 0, 0, 0.5); /* Schatten nach unten */
  padding: 10px 20px; /* Größe */
  font-size: 30px;
  font-weight: normal;
  cursor: pointer;
  /*transition: all 0.2s ease-in-out; */
  transition: background 0.5s ease, color 0.5s ease; /* Weiche Farbänderung */
  border-radius: 20px;
}
#buttons .style-eins .blog-style {
  /*Link Unterstrich ausschalten  */
  text-decoration: none; 
  color: #333 ;
}
#buttons .style-zwei {
  background: linear-gradient(to bottom, #a0d8ff, #04B2E8); /* 3D-Farbverlauf */
  border: 2px solid #004080; /* Leichter Rahmen */
  border-radius: 8px; /* Abgerundete Ecken */
  box-shadow: inset 0 3px 5px rgba(255, 255, 255, 0.6), /* Lichtreflex oben */
              0 8px 6px rgba(0, 0, 0, 0.5); /* Schatten nach unten */
  padding: 10px 20px; /* Größe */
  font-size: 30px;
  font-weight: normal;
  cursor: pointer;
  /*transition: all 0.2s ease-in-out;*/
  transition: background 0.5s ease, color 0.5s ease; /* Weiche Farbänderung */
  border-radius: 20px;
}
#buttons .style-zwei .blog-style {
  /*Link Unterstrich ausschalten*/
  text-decoration-line: none;
  color: #333 ;
}
#buttons .style-drei {
  display: flex;
  justify-content: center;
  align-items: center;  
  background: linear-gradient(to bottom, #fcf999, #F0A400); /* 3D-Farbverlauf */
  border: 2px solid #FFD20F; /* Leichter Rahmen */
  border-radius: 8px; /* Abgerundete Ecken */
  box-shadow: inset 0 3px 5px rgba(255, 255, 255, 0.6), /* Lichtreflex oben */
              0 8px 6px rgba(0, 0, 0, 0.5); /* Schatten nach unten */
  padding: 10px 20px; /* Größe */
  font-size: 30px;
  font-weight: normal;
  cursor: pointer;
  /*transition: all 0.2s ease-in-out;*/
  transition: background 0.5s ease, color 0.5s ease; /* Weiche Farbänderung */
  border-radius: 20px;
}
#buttons .style-drei .blog-style {
  /*Link Unterstrich ausschalten*/
  text-decoration-line: none; 
  color: #333 ;
}

#round-buttons {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  text-align: center; 
  margin-top:50px;
}
#round-buttons .round-button {
    width: 250px;
    height: 250px;
    background: linear-gradient(to bottom, #00AABA, #0087E1); /* Hellblau oben, dunkler unten */
    border: 2px solid #004080; /* Dunkler Rahmen */
    border-radius: 50%; /* Macht den Button rund */
    box-shadow: inset 0 3px 5px rgba(255, 255, 255, 0.6), /* Lichtreflex oben */
                0 6px 8px rgba(0, 0, 0, 0.8); /* Schatten nach unten */
    padding: 0; /* Kein extra Innenabstand */
    font-size: 35px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    transition: background 0.5s ease, color 0.5s ease; /* Weiche Farbänderung */
}
#round-buttons .round-button .blog-style {
  text-decoration-line: none; 
  color: #333 ;
}
.pfeil-links {
  margin-right: 30px;
}
.pfeil-rechts {
  margin-left: 30px;
}
/* =============================
   Footer
============================= */
/*footer {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #F4F4F4;
  color: #3C3C3C;
  padding: 20px;
  margin-top: 80px;
  margin-bottom: 30px;
}

footer div p a {
  text-decoration: none !important;
  color: #01BDF9;
}

footer div p a:hover {
  text-decoration: none;
  color: #B81C17;
}*/

/* =============================
   Footer Leiste
============================= */
/*footer.container-footer {
  background: #f9f9f9;
  color: #333333;
  padding: 1.5rem 1rem;
}

.footer-inner {
  max-width: 1140px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
}*/

/* Footer Styles */
footer .container-lg {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.footer-left {
    flex: 0 0 60%;
    max-width: 60%;
}

.footer-right {
    flex: 0 0 40%;
    max-width: 40%;
    text-align: right; /* optional: Menü nach rechts schieben */
}

/* *********************** */
/* ***** Footer Menü ***** */
/* *********************** */
footer .mod-menu {
  display: block;
  justify-content: flex-end; /* oder center, je nach Wunsch */
  flex-wrap: wrap;
  gap: 1rem; /* Abstand zwischen den Menüpunkten */
  list-style: none;
  padding: 0;
  margin: 0;
}

footer .mod-menu .nav-item {
  display: inline-block;
}

footer .mod-menu .nav-item a {
  color: #333333;
  text-decoration: none !important;
  padding-left: 20px;
  padding-right: 20px;
}

footer .mod-menu .active a,
footer .mod-menu li.current a {
  color: #04B2E8 !important;
}

footer .mod-menu .nav-item a:hover {
  color: #F0A400;
}

footer {
  font-size: 16px;
  line-height: 18px;
}
/* =============================
   Chut Bubble
============================= */
.chat-bubble {
    position: fixed;
    bottom: 25px;
    right: 25px;
    max-width: clamp(100px, 15vw, 200px); /* Passt sich dynamisch an */
    transition: all 0.3s ease-in-out;
}

/* Bildgröße steuern */
.chat-bubble img {
    width: 100%;
    height: auto;
    display: block;
}

/* Hover-Effekt */
.chat-bubble:hover {
    transform: scale(1.1); /* Leicht vergrößern beim Hover */
}

/* =============================
   Responsive Anpassungen
============================= */
/* Responsives Verhalten des Chut-Button */
/*@media (min-width: 375px) and (max-width: 667px) {
        .chat-bubble {
        right: 5px;
        left: 5px;
        max-width: 20vw;
    }
}
*/

/* =================================
   GALAXY-20 – Hochformat (Portrait)
   ================================= */
@media (orientation: portrait) {
  body.galaxy-20 {
    /*background: yellow;*/
    font-size: 16px;
    margin-top: -30px;
  }
  /* Containerbreite */
  body.galaxy-20 #startseite,
  body.galaxy-20 #main-wrapper, 
  body.galaxy-20 #buttons,
  body.galaxy-20 #buttons button,
  body.galaxy-20 #logo,
  body.galaxy-20 #slogan,
  body.galaxy-20 #round-buttons
  {
    width: 380px;
    margin-top: 10px;
  }

  body.galaxy-20 .site-description {
    padding-left: 100px;
    padding-bottom: 10px;
    margin-top: -20px;
  }
  body.galaxy-20 #meineSuche label,
  body.galaxy-20 #meineSuche input::placeholder {
      font-size: 18px;      
    }

  body.galaxy-20 #suchen #meineSuche input {
    /*Suchbalken anpassen*/
    width: 100%;
    max-width: 350px;
  }
  body.galaxy-20 .pfeil-links, .pfeil-links, .pfeil-rechts {
    display: none;
  }
  body.galaxy-20 #buttons button.eins,
  body.galaxy-20 #buttons button.zwei,
  body.galaxy-20 #buttons button.drei {
    width: 350px ;
    margin: 10px 0;
  }
  body.galaxy-20 #round-buttons button {
    color: #333333;
  }

  body.galaxy-20 #logo .brand-logo img {
    width: 150px;
    height: auto;
  }
  body.galaxy-20 #slogan .site-desc1,
  body.galaxy-20 #slogan .site-desc2 {
    font-size: 16px ;
  }
  body.galaxy-20 #slogan .site-desc1 {
    margin-left: 0px;
  }
  body.galaxy-20 #slogan .site-desc2 {
    margin-left: 0px;
  }

  /* Menüsteuerung Topmenu */
  body.galaxy-20 #startseite .navbar-toggler {
        border: solid 4px #aaaaaa;
        box-shadow: 4px 4px 5px rgba(0,0,0,.5);
        z-index: 999;
    }
     
  body.galaxy-20 #bigmacMenu .mod-menu {
    display: block;
    width: 300px;
    background-color: #f4f4f4;
    padding: 10px 40px 20px 40px;
    margin-top: 10px;
    margin-left: 0px;
    border: solid 1px #333333;
    border-radius: 10px;
    box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5)
  }
  body.galaxy-20 #bigmacMenu .mod-menu li {
    border-bottom: solid 1px #333333;
    justify-content: flex-start;
    padding: 0;
    margin: 0;
    list-style: none;
  }  
  body.galaxy-20 #bigmacMenu .mod-menu li a {
    font-size: 25px;
    line-height: 80px;
    text-decoration: none;
    font-family: "Dakota";
    color: #333333;
    font-weight: bold;
  }
  body.galaxy-20 #bigmacMenu .mod-menu li a:hover {
    color: #F0A400;
  }
  body.galaxy-20 #bigmacMenu .mod-menu li a:active {
    color: #04B2E8;
  }
    #buttons .eins,
    #buttons .zwei,
    #buttons .drei,
    #round-buttons button{
        color: #333333;
    }    
}

/* ==============================
   HANDY – Hochformat (Portrait)
   ============================== */
@media (min-width: 393px) and (max-width: 599px) and (orientation: portrait) {
  body {
    font-size: 16px;
    margin-top: -30px;
    /*background-color: #ff0000;*/
  }
  
  /* Containerbreite */
  #startseite,
  #main-wrapper, 
  #buttons,
  #buttons button,
  #logo,
  #slogan,
  #round-buttons
  {
    width: 380px;
    margin-top: 10px;
  }

  .site-description {
    padding-left: 100px;
    padding-bottom: 10px;
    margin-top: -20px;
  }
  #meineSuche label,
  #meineSuche input::placeholder {
      font-size: 18px;      
    }

  #suchen #meineSuche input {
    /*Suchbalken anpassen*/
    width: 100%;
    max-width: 350px;
  }
  .pfeil-links, .pfeil-rechts {
    display: none;
  }
  #buttons button.eins,
  #buttons button.zwei,
  #buttons button.drei {
    width: 350px ;
    margin: 10px 0;
  }
  #round-buttons button {
    color: #333333;
  }

  #logo .brand-logo img {
    width: 150px;
    height: auto;
  }
  #slogan .site-desc1,
  #slogan .site-desc2 {
    font-size: 16px ;
  }
  #slogan .site-desc1 {
    margin-left: 0px;
  }
  #slogan .site-desc2 {
    margin-left: 0px;
  }

  /* Menüsteuerung Topmenu */
    #startseite .navbar-toggler {
        border: solid 4px #aaaaaa;
        box-shadow: 4px 4px 5px rgba(0,0,0,.5);
        z-index: 999;
    }
     
  #bigmacMenu .mod-menu {
    display: block;
    width: 300px;
    background-color: #f4f4f4;
    padding: 10px 40px 20px 40px;
    margin-top: 10px;
    margin-left: 0px;
    border: solid 1px #333333;
    border-radius: 10px;
    box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5)
  }
  #bigmacMenu .mod-menu li {
    border-bottom: solid 1px #333333;
    justify-content: flex-start;
    padding: 0;
    margin: 0;
    list-style: none;
  }  
  #bigmacMenu .mod-menu li a {
    font-size: 25px;
    line-height: 80px;
    text-decoration: none;
    font-family: "Dakota";
    color: #333333;
    font-weight: bold;
  }
  #bigmacMenu .mod-menu li a:hover {
    color: #F0A400;
  }
  #bigmacMenu .mod-menu li a:active {
    color: #04B2E8;
  }
    #buttons .eins,
    #buttons .zwei,
    #buttons .drei,
    #round-buttons button{
        color: #333333;
    }
}

/* ==============================
   HANDY – Querformat (Landscape)
   ============================== */
@media (max-width: 767px) and (orientation: landscape) {
    body {
        /*background-color: yellow;*/
  }
    .bg-light {
        background-color: #f4f4f4 !important;
    }
    
    #suchen #meineSuche input {
        /*Suchbalken anpassen*/
        width: 100%;
        max-width: 700px;
    }
  .pfeil-links, .pfeil-rechts {
    display: none;
  }
    #buttons button {
        width: 520px;
        margin-top: 10px;
        margin-bottom: 10px;
        color: #333333;
    }
    #round-buttons button {
        color: #333333;
    }

      /* Menüsteuerung Topmenu */
    #startseite .navbar-toggler {
        border: solid 4px #aaaaaa;
        box-shadow: 4px 4px 5px rgba(0,0,0,.5);
        z-index: 999;
    }
     
  #bigmacMenu .mod-menu {
    display: block;
    width: 300px;
    background-color: #f4f4f4;
    padding: 10px 40px 20px 40px;
    margin-top: 10px;
    margin-left: 0px;
    border: solid 1px #333333;
    border-radius: 10px;
    box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5)
  }
  #bigmacMenu .mod-menu li {
    border-bottom: solid 1px #333333;
    justify-content: flex-start;
    padding: 0;
    margin: 0;
    list-style: none;
  }  
  #bigmacMenu .mod-menu li a {
    font-size: 25px;
    line-height: 60px;
    text-decoration: none;
    font-family: "Dakota";
    color: #333333;
    font-weight: bold;
  }
  #bigmacMenu .mod-menu li a:hover {
    color: #F0A400;
  }
  #bigmacMenu .mod-menu li a:active {
    color: #04B2E8;
  }

}

/* ==============================
   TABLET – Hochformat
   ============================== */
@media (min-width: 600px) and (max-width:886px) and (orientation: portrait) {
  body {
    font-size: 17px;
    /*background-color: #0000ff;*/
  }
    #main-wrapper {
      width: 800px;
      max-width: 800px;   /* oder deine Wunsch-Breite */
      margin: 0 auto;  
    }
    #suchen .container-search {
        width: 100% ;
        max-width: 700px;
    }
    #suchen .container-search input {
        width: 700px;
        max-width: 700px !important;
    }
             
    #buttons button {
        width: 700px;
        margin-top: 10px;
        margin-bottom: 10px;
        color: #333333;
    }
    #round-buttons button {
        color: #333333;
    }

    header#startseite li.current a  {
        color: #04B2E8; 
        transition: background 0.3s ease, color 0.3s ease;
    }

    header#startseite li.nav-item a:hover {
        color: #F0A400; 
    }
    header#startseite li.nav-item a {
        color: #333333;
    }

    /* Hamburger-Icon verbergen */
        header#startseite .navbar-toggler {
        display: none;
    }

    /* Nav-Liste horizontal und rechtsbündig */
    header#startseite .navbar-nav,
    header#startseite .navbar-nav ul {
        align-content: flex-end !important;
        justify-content: flex-end !important;
    }
    header#startseite .navbar-nav ul li {
        flex-direction:row;
        justify-content: flex-end !important;
        align-content: flex-end !important;
        margin-left: auto;
    }

    /* Optional: Abstand zwischen den Links */
        header#startseite .navbar-nav ul li { 
        padding-left: 1rem;
        padding-right: 1rem;
    }
    header#startseite .navbar-nav ul li a {
        text-decoration: none;
        font-weight: bold;
        font-size: 16px;
        font-family: "Dakota";
        color: #333333;
    }
    /* NAVIGATION nach rechts schieben */
    /* Menu dauerhaft ausklappen       */
    header#startseite .navbar-collapse {
        display: flex !important;
        justify-content: flex-end !important;
    }
    /* Falls Bootstrap die .navbar-nav mittig macht, pushe sie mit margin-auto */
    header#startseite .navbar-nav {
        margin-inline-start: auto !important;
        /*flex-basis: auto;*/
    }
    /* Falls .navbar-collapse oder .navbar-nav die .flex-column-Klasse hat: */
    header#startseite .navbar-collapse.flex-column,
    header#startseite .navbar-nav.flex-column {
        display: flex !important;
        flex-direction: row !important;       /* override flex-column */
        justify-content: flex-end !important; /* rechtsbündig */
    }
  /* Zur Sicherheit auch für reine .navbar-nav, falls collapse anders benannt */
    header#startseite .navbar-nav {
        flex-direction: row !important;
        margin-inline-start: auto !important; /* drückt ins rechte Eck */
    }
}

/* ==============================
   TABLET – Querformat
   ============================== */
@media (min-width: 768px) and (max-width: 1023px) and (orientation: landscape) {
    body {
        font-size: 18px;
       /* background-color: #00ff00;*/
    }
    
    #suchen .container-search {
        width: 100%;
        max-width: 820px;
    }
    #suchen .container-search input {
        width: 820px;
        max-width: 820px;
    }
        
    #buttons button {
        width: 260px !important;
        margin-left: 10px;
        margin-right: 10px;
        color: #333333;
    }
    #round-buttons button {
        color: #333333;
    }

    header#startseite li.current a  {
        color: #04B2E8; 
        transition: background 0.3s ease, color 0.3s ease;
    }

    header#startseite li.nav-item a:hover {
    color: #F0A400; 
    }

    /* Hamburger-Icon verbergen */
        header#startseite .navbar-toggler {
        display: none;
    }

    /* Menu dauerhaft ausklappen als Flex-Container */
        header#startseite .navbar-collapse {
        display: flex;
        /*flex-basis: auto;*/
    }

    /* Nav-Liste horizontal und rechtsbündig */
        header#startseite .navbar-nav ul li {
        flex-direction: row;
        margin-left: auto;
    }

    /* Optional: Abstand zwischen den Links */
        header#startseite .navbar-nav ul li { 
        padding-left: 1rem;
        padding-right: 1rem;
    }

        header#startseite .navbar-nav ul li a {
        text-decoration: none;
        font-weight: bold;
        font-size: 16px;
        font-family: "Dakota";
        color: #333333;
    }
    /* NAVIGATION nach rechts schieben */
    /* Menu dauerhaft ausklappen       */
    header#startseite .navbar-collapse {
        display: flex !important;
        justify-content: flex-end !important;
    }
    /* Falls Bootstrap die .navbar-nav mittig macht, pushe sie mit margin-auto */
    header#startseite .navbar-nav {
        margin-inline-start: auto !important;
        /*flex-basis: auto;*/
    }
    /* Falls .navbar-collapse oder .navbar-nav die .flex-column-Klasse hat: */
    header#startseite .navbar-collapse.flex-column,
    header#startseite .navbar-nav.flex-column {
        display: flex !important;
        flex-direction: row !important;       /* override flex-column */
        justify-content: flex-end !important; /* rechtsbündig */
    }
  /* Zur Sicherheit auch für reine .navbar-nav, falls collapse anders benannt */
    header#startseite .navbar-nav {
        flex-direction: row !important;
        margin-inline-start: auto !important; /* drückt ins rechte Eck */
    }

}

/* ==============================
   DESKTOP & GRÖSSER – Nur Querformat
   ============================== */
@media (min-width: 1024px) and (orientation: landscape) {
    body {
        font-size: 19px;
        /*background-color: #dddd00;*/
    }
    button{ 
        color: #333333;
    }
    
    #suchen .container-search {
        width: 100% ;
        max-width: 820px;    
    }
    #suchen .container-search input {
        width: 820px ;
        max-width: 820px;
    }
        
    #buttons button {
        width: 260px !important;
        margin-left: 10px;
        margin-right: 10px;
        color: #333333;
    }
    #round-buttons button {
        color: #333333;
    }

    header#startseite li.current a  {
        color: #04B2E8; 
        transition: background 0.3s ease, color 0.3s ease;
    }

    header#startseite li.nav-item a:hover {
    color: #F0A400; 
    }

    /* Hamburger-Icon verbergen */
        header#startseite .navbar-toggler {
        display: none;
    }

    /* Menu dauerhaft ausklappen als Flex-Container */
        header#startseite .navbar-collapse {
        display: flex;
        /*flex-basis: auto;*/
    }

    /* Nav-Liste horizontal und rechtsbündig */
        header#startseite .navbar-nav ul li {
        flex-direction: row;
        margin-left: auto;
    }

    /* Optional: Abstand zwischen den Links */
        header#startseite .navbar-nav ul li { 
        padding-left: 1rem;
        padding-right: 1rem;
    }

        header#startseite .navbar-nav ul li a {
        text-decoration: none;
        font-weight: bold;
        font-size: 16px;
        font-family: "Dakota";
        color: #333333;
    }
    /* NAVIGATION nach rechts schieben */
    /* Menu dauerhaft ausklappen       */
    header#startseite .navbar-collapse {
        display: flex !important;
        justify-content: flex-end !important;
    }
    /* Falls Bootstrap die .navbar-nav mittig macht, pushe sie mit margin-auto */
    header#startseite .navbar-nav {
        margin-inline-start: auto !important;
        /*flex-basis: auto;*/
    }
    /* Falls .navbar-collapse oder .navbar-nav die .flex-column-Klasse hat: */
    header#startseite .navbar-collapse.flex-column,
    header#startseite .navbar-nav.flex-column {
        display: flex !important;
        flex-direction: row !important;       /* override flex-column */
        justify-content: flex-end !important; /* rechtsbündig */
    }
  /* Zur Sicherheit auch für reine .navbar-nav, falls collapse anders benannt */
    header#startseite .navbar-nav {
        flex-direction: row !important;
        margin-inline-start: auto !important; /* drückt ins rechte Eck */
    }

}

/* ==============================
   GROSSE MONITORE
   ============================== */
@media (min-width: 1200px) and (orientation: landscape) {
      body {
        font-size: 20px;
        /*background-color: #007700;*/
      }

    #suchen .container-search {
        width: 100% ;
        max-width: 820px;
    }
    #suchen .container-search input {
        width: 820px ;
        max-width: 820px;
    }
    

    #buttons button {
        width: 260px !important;
        margin-left: 10px;
        margin-right: 10px;
        color: #333333;
    }
    #round-buttons button {
        color: #333333;
    }

    .menu-modul li.current a  {
        color: #04B2E8; 
        transition: background 0.3s ease, color 0.3s ease;
    }

    .menu-modul li.nav-item a:hover {
        color: #F0A400; 
    }

    /* Hamburger-Icon verbergen */
        header#startseite .navbar-toggler {
        display: none;
    }

    /* Menu dauerhaft ausklappen als Flex-Container */
        header#startseite .navbar-collapse {
        display: flex;
        /*flex-basis: auto;*/
    }

    /* Nav-Liste horizontal und rechtsbündig */
        header#startseite .navbar-nav ul li {
        flex-direction: row;
        margin-left: auto;
    }

    /* Optional: Abstand zwischen den Links */
        header#startseite .navbar-nav ul li { 
        padding-left: 1rem;
        padding-right: 1rem;
    }

        header#startseite .navbar-nav ul li a {
        text-decoration: none;
        font-weight: bold;
        font-size: 16px;
        font-family: "Dakota";
        color: #333333;
    }
    /* NAVIGATION nach rechts schieben */
    /* Menu dauerhaft ausklappen       */
    header#startseite .navbar-collapse {
        display: flex !important;
        justify-content: flex-end !important;
    }
    /* Falls Bootstrap die .navbar-nav mittig macht, pushe sie mit margin-auto */
    header#startseite .navbar-nav {
        margin-inline-start: auto !important;
        /*flex-basis: auto;*/
    }
    /* Falls .navbar-collapse oder .navbar-nav die .flex-column-Klasse hat: */
    header#startseite .navbar-collapse.flex-column,
    header#startseite .navbar-nav.flex-column {
        display: flex !important;
        flex-direction: row !important;       /* override flex-column */
        justify-content: flex-end !important; /* rechtsbündig */
    }
  /* Zur Sicherheit auch für reine .navbar-nav, falls collapse anders benannt */
    header#startseite .navbar-nav {
        flex-direction: row !important;
        margin-inline-start: auto !important; /* drückt ins rechte Eck */
    }
    
}

/* ==============================
   ULTRA-BREITE DISPLAYS / TV
   ============================== */
@media (min-width: 1600px) and (orientation: landscape) {
    body {
        font-size: 22px;
        /*background-color: #fff0cc;*/
    }

    /* Hamburger-Icon verbergen */
        header#startseite .navbar-toggler {
        display: none;
    }

    /* Menu dauerhaft ausklappen als Flex-Container */
        header#startseite .navbar-collapse {
        display: flex;
        /*flex-basis: auto;*/
    }

    /* Nav-Liste horizontal und rechtsbündig */
        header#startseite .navbar-nav ul li {
        flex-direction: row;
        margin-left: auto;
    }

    /* Optional: Abstand zwischen den Links */
        header#startseite .navbar-nav ul li { 
        padding-left: 1rem;
        padding-right: 1rem;
    }

    #startseite .navbar-nav ul  {
        justify-content: flex-end !important;

    } 
    
    #suchen .container-search {
        width: 820px;
        max-width: 820px;
    }
    #suchen .container-search input {
        width: 820px;
        max-width: 820px;
    }
    
    #buttons button {
        width: 260px !important;
        margin-left: 10px;
        margin-right: 10px;
        color: #333333;
    }
    #round-buttons button {
        color: #333333;
    }

    header#startseite li.current a  {
        color: #04B2E8; 
        transition: background 0.3s ease, color 0.3s ease;
    }

    header#startseite li.nav-item a:hover {
        color: #F0A400; 
    }

    header#startseite .navbar-nav ul li a {
        text-decoration: none;
        font-weight: bold;
        font-size: 16px;
        font-family: "Dakota";
        color: #333333;
    }

    /* Hamburger-Icon verbergen */
        header#startseite .navbar-toggler {
        display: none;
    }

    /* Menu dauerhaft ausklappen als Flex-Container */
        header#startseite .navbar-collapse {
        display: flex;
        /*flex-basis: auto;*/
    }

    /* Nav-Liste horizontal und rechtsbündig */
        header#startseite .navbar-nav ul li {
        flex-direction: row;
        margin-left: auto;
    }

    /* Optional: Abstand zwischen den Links */
        header#startseite .navbar-nav ul li { 
        padding-left: 1rem;
        padding-right: 1rem;
    }

        header#startseite .navbar-nav ul li a {
        text-decoration: none;
        font-weight: bold;
        font-size: 16px;
        font-family: "Dakota";
        color: #333333;
    }
    /* NAVIGATION nach rechts schieben */
    /* Menu dauerhaft ausklappen       */
    header#startseite .navbar-collapse {
        display: flex !important;
        justify-content: flex-end !important;
    }
    /* Falls Bootstrap die .navbar-nav mittig macht, pushe sie mit margin-auto */
    header#startseite .navbar-nav {
        margin-inline-start: auto !important;
        /*flex-basis: auto;*/
    }
    /* Falls .navbar-collapse oder .navbar-nav die .flex-column-Klasse hat: */
    header#startseite .navbar-collapse.flex-column,
    header#startseite .navbar-nav.flex-column {
        display: flex !important;
        flex-direction: row !important;       /* override flex-column */
        justify-content: flex-end !important; /* rechtsbündig */
    }
  /* Zur Sicherheit auch für reine .navbar-nav, falls collapse anders benannt */
    header#startseite .navbar-nav {
        flex-direction: row !important;
        margin-inline-start: auto !important; /* drückt ins rechte Eck */
    }

}