@media screen and (max-width:900px){

/* ===============================
GLOBAL
================================ */

*, *::before, *::after{
  box-sizing:border-box;
}

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

#whole_side{
  position:relative;
  display:block;
  width:100%;
  font-size:115%;
}

/* ===============================
DESKTOP ELEMENTE AUSBLENDEN
================================ */

#ask_us{
  display:none !important;
}

#language_toggle,
#language_selection_ul{
  display:none !important;
  visibility:hidden !important;
  pointer-events:none !important;
  opacity:0 !important;
}

#header_section{
  padding-top:0 !important;
}

/* ===============================
LAYOUT SECTIONS
================================ */

#left_section,
#center_section,
#right_section{
  float:none !important;
  display:block !important;
  width:100% !important;
  min-width:0 !important;
  max-width:100% !important;
}

/* kill desktop min-width */

#center_section{
  min-width:0 !important;
}

/* inner container */

.center_division{
  max-width:100% !important;
  padding-left:10px;
  padding-right:10px;
}

/* ===============================
STARTSEITE BILD ÜBER TEXT
================================ */

.home_picture_right{
  float:none !important;
  width:100% !important;
  max-width:100% !important;
  margin:0 0 1rem 0 !important;
  display:block !important;
}

.home_center{
  padding-top:1rem !important;
  text-align:left;
}

/* andere floats neutralisieren */

.picture_right,
.right{
  float:none !important;
}

/* ===============================
MEDIA SAFETY
================================ */

img, video, iframe{
  max-width:100%;
  height:auto;
}

/* ===============================
TOP NAVIGATION
================================ */

#myTopnav{
  overflow:visible !important;
}

.topnav{
  float:none !important;
  position:relative;
  width:100%;
  min-height:44px;
  overflow:visible !important;
}

/* FLAGGEN MITTIG */

#myTopnav .topnav-center{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  display:flex !important;
  gap:10px;
  z-index:9999;
  white-space:nowrap;
}

#myTopnav .lang-flag{
  display:inline-block !important;
  font-size:20px;
  line-height:1;
  text-decoration:none;
  padding:6px 7px;
  border-radius:8px;
}

/* Menü einklappen */

.topnav > a:not(:first-child):not(.icon):not(.lang-flag),
.dropdown .dropbtn{
  display:none;
}

/* Burger */

.topnav a.icon{
  float:right;
  display:block;
}

/* Menü geöffnet */

.topnav.responsive{
  position:relative;
}

.topnav.responsive a:not(.icon):not(.lang-flag){
  float:none;
  display:block;
  text-align:left;
}

.topnav.responsive .icon{
  position:absolute;
  right:0;
  top:0;
}

.topnav.responsive .dropdown{
  float:none;
}

.topnav.responsive .dropdown-content{
  position:relative;
}

.topnav.responsive .dropdown .dropbtn{
  display:block;
  width:100%;
  text-align:left;
}

/* Desktop Logo ausblenden */

.topnavlogo{
  display:none;
}

/* ===============================
LOGBOOK TEXT
================================ */

#content .entry-text{
  margin-bottom:18px;
}

/* ===============================
SLIDESHOW / MODAL FIX
================================ */

/* verhindert Text über Bild */

.modal-title,
.modal-date,
.modal-controls{
  position:relative !important;
  z-index:2 !important;
}

.modal-image{
  display:block !important;
  position:relative !important;
  z-index:1 !important;
  margin-top:8px;
  max-width:100%;
  height:auto;
}

/* Modal Controls */

.modal-controls{
  display:flex;
  justify-content:center;
  gap:10px;
  margin-top:10px;
}

/* kleinere Pfeile */

.modal-controls a,
.modal-controls button{
  font-size:18px !important;
  padding:6px 10px !important;
  line-height:1 !important;
}

/* ===============================
COOKIE BANNER
================================ */

#cookie_disclaimer{
  min-height:15vh;
  width:100%;
  padding:1%;
  font-size:11px;
}

#cookie_detail_text{
  padding:2%;
  font-size:11px;
}

#cookie_button{
  width:30%;
  float:right;
}

/* ===============================
FORMS
================================ */

.customer_fieldset1,
.customer_fieldset2{
  width:100%;
  float:none;
}

.customer_fieldset1 label{
  width:100%;
  text-align:left;
}

.customer_fieldset1 input{
  width:100%;
}

.customer_fieldset1 span{
  width:100%;
}

}

/* =================================
   MOBILE DIASHOW FIX
================================= */

/* Nur langen Text im Modal ausblenden */
.modal-entry-text{
  display:none !important;
}

/* Titel + Datum normal anzeigen */
.modal-title{
  font-size:1.2rem;
  margin-bottom:4px;
}

.modal-date{
  font-size:0.9rem;
  margin-bottom:8px;
}

/* Bild korrekt unter Titel/Datum */
.modal-image{
  max-width:100%;
  height:auto;
  display:block;
  margin-top:8px;
}

/* Controls wieder korrekt positionieren */

.modal-controls{
  position:absolute;
  bottom:10px;
  left:50%;
  transform:translateX(-50%);
  display:flex;
  gap:12px;
  z-index:5;
}

/* Prev / Next Pfeile sichtbar lassen */

.modal-controls a{
  font-size:22px;
  padding:6px 10px;
}

/* Pause Button wieder rechts unten */

.pause-play{
  position:absolute !important;
  bottom:10px;
  right:10px;
  z-index:6;
}

/* Close Button oben rechts */

.close-modal{
  position:absolute !important;
  top:10px;
  right:10px;
  z-index:7;
}


/* =================================
   SORT PFEILE KLEINER
================================= */

.sortpics a{
  font-size:16px !important;
  padding:4px 6px !important;
}

.sortpics img{
  width:18px !important;
  height:18px !important;
}
@media screen and (max-width:900px){

   /* ... dein bisheriges Mobile CSS ... */


   /* ===============================
      Logbook Sort Buttons kleiner
   ================================ */

   .logbook-sort{
     gap:4px !important;
   }

   .lbSortBtn{
     padding:2px !important;
     background:none;
     border:none;
   }

   .lbSortBtn img{
     width:16px !important;
     height:16px !important;
     max-width:16px !important;
   }
/* ===== Footer layout fix (mobile-friendly) ===== */

#footer_section .flex-container{
  display: flex;
  flex-wrap: wrap;           /* wichtig: erlaubt Umbruch */
  justify-content: center;   /* zentriert Spalten */
  gap: 16px;                 /* Abstand zwischen Spalten */
  padding: 16px 12px;
}

/* Jede Footer-Spalte */
#footer_section .flex-container > div{
  min-width: 140px;          /* verhindert “zerquetschte” Spalten */
  text-align: center;
}

/* Links im Footer */
#footer_section a.footerlink{
  display: inline-block;     /* sauber klickbar, kein wildes Umfließen */
  padding: 6px 8px;
  white-space: nowrap;       /* verhindert unschöne Zeilenumbrüche */
  text-decoration: none;
}

/* Optional: Zeilenumbrüche sauber machen (du nutzt </br> statt <br>) */
#footer_section br{
  display: block;
  content: "";
  margin-top: 8px;
}

/* ===== Mobile: untereinander stapeln ===== */
@media (max-width: 600px){
  #footer_section .flex-container{
    flex-direction: column;  /* Spalten untereinander */
    align-items: center;
  }

  #footer_section .flex-container > div{
    width: 100%;
    max-width: 360px;        /* wirkt optisch schöner */
    text-align: center;
  }

  #footer_section a.footerlink{
    display: block;          /* jeder Link eigene Zeile */
    width: 100%;
    white-space: normal;     /* darf umbrechen, falls sehr lang */
  }
}
}

/* ===============================
   Logbook Portraitbilder größer
================================ */

/* Hochkantbilder dürfen volle Breite nutzen */

#content .bildergalerie .slideshow img{
  width:100% !important;
  height:auto !important;
  max-height:none !important;
  object-fit:contain !important;
}

/* verhindert Mini-Bilder bei Hochformat */

#content .bildergalerie .slideshow{
  height:auto !important;
}

/* ===== Footer layout fix (mobile-friendly) ===== */

#footer_section .flex-container{
  display: flex;
  flex-wrap: wrap;           /* wichtig: erlaubt Umbruch */
  justify-content: center;   /* zentriert Spalten */
  gap: 16px;                 /* Abstand zwischen Spalten */
  padding: 16px 12px;
}

/* Jede Footer-Spalte */
#footer_section .flex-container > div{
  min-width: 140px;          /* verhindert “zerquetschte” Spalten */
  text-align: center;
}

/* Links im Footer */
#footer_section a.footerlink{
  display: inline-block;     /* sauber klickbar, kein wildes Umfließen */
  padding: 6px 8px;
  white-space: nowrap;       /* verhindert unschöne Zeilenumbrüche */
  text-decoration: none;
}

/* Optional: Zeilenumbrüche sauber machen (du nutzt </br> statt <br>) */
#footer_section br{
  display: block;
  content: "";
  margin-top: 8px;
}

/* ===== Mobile: untereinander stapeln ===== */
@media (max-width: 600px){
  #footer_section .flex-container{
    flex-direction: column;  /* Spalten untereinander */
    align-items: center;
  }

  #footer_section .flex-container > div{
    width: 100%;
    max-width: 360px;        /* wirkt optisch schöner */
    text-align: center;
  }

  #footer_section a.footerlink{
    display: block;          /* jeder Link eigene Zeile */
    width: 100%;
    white-space: normal;     /* darf umbrechen, falls sehr lang */
  }
}