/* Custom responsive tweaks for small screens */

/* General image scaling */
img, .img-fluid { max-width:100%; height:auto; }

/* Ensure logo and header elements scale */
.logo img, .logo, .navbar .logo { max-width:100%; height:auto; }

/* Hero adjustments */
@media (max-width:768px) {
  .hero-text .container { padding-left:15px; padding-right:15px; }
  .hero-text h1 { font-size:28px !important; line-height:1.1 !important; }
  .hero-text h2 { font-size:18px !important; }
  .all-padding-50 { padding:18px !important; display:flex; flex-direction:row; align-items:center; }
  .all-padding-50 img { width:90px; margin-right:12px; }
  .text-container { padding-top:10px; padding-bottom:10px; }
  .parallax-bg { background-position:center center !important; }
  #mobile-grosse-ueberschrift { font-size:18px !important; }
  /* Increase container padding for more breathing room on all pages except those opted out */
  body:not(.no-mobile-padding) .container { padding-left:24px; padding-right:24px; }
  body.no-mobile-padding .container { padding-left:12px; padding-right:12px; }
}

@media (max-width:480px) {
  .hero-text h1 { font-size:22px !important; }
  .hero-text h2 { font-size:16px !important; }
  .all-padding-50 { padding:14px !important; flex-direction:column; text-align:center; }
  .all-padding-50 img { width:80px; margin:0 0 8px 0; }
  body:not(.no-mobile-padding) .container { padding-left:18px; padding-right:18px; }
  body.no-mobile-padding .container { padding-left:12px; padding-right:12px; }
  .nav.navbar-nav.flex-column { padding-left:10px; padding-right:10px; }
  /* Navbar toggle visibility and spacing */
  .navbar-toggle { display:block; margin-top:8px; }
  .navbar { padding:8px 0; }
  /* Make sidebar nav full width on small screens */
  .navbar .collapse#navbar-menu { position:static; width:100%; }
  nav.bootsnav .nav > li > a { padding:10px 8px; display:block; }
  .nav.flex-column.sub-menu { padding-left:12px; }
  /* Footer and map */
  #map-style-3 { height:300px !important; }
  .img-smaller { max-width:220px; margin: 0 auto; display:block; }
}

/* Small touch ups for forms and tables */
@media (max-width:600px) {
  table { width:100%; display:block; }
  table td { display:block; width:100%; padding:2px 0; white-space:nowrap; }
}

/* Make contact section columns stack fully */
@media (max-width:768px) {
  #contact .col-md-6 { width:100% !important; float:none !important; }
  /* ensure maps and content stretch */
  #contact .container, #contact .container-fluid { padding-left:15px; padding-right:15px; }
  /* Add spacing between stacked images */
  .img-fixed { margin-bottom: 20px; }
}

/* Improve clickable area on small screens */
@media (max-width:768px) {
  .nav.navbar-nav.flex-column li > a { padding:12px 10px; }
}

/* Ensure map and hero don't overflow */
#map-style-3 { width:100%; height:420px; }

/* Minor: make qr image a bit smaller for narrow screens */
@media (max-width:768px) {
  .responsive-screen img.img-smaller { max-width:180px; }
}
/* floating corner branding */
.floating-brand {
  position:fixed;
  bottom:12px;
  right:80px;  /* shift left from bottom-right to avoid covering return-to-top */
  display:flex;
  align-items:center;
  background:rgba(255,255,255,0.85);
  padding:4px 8px;
  border-radius:4px;
  z-index:999;
  font-size:14px;
  color:#333;
}
.floating-brand .fb-logo {
  max-height:24px;
  width:auto;
  margin-right:6px;
}
.floating-brand .fb-text {
  font-weight:600;
}
@media (max-width:768px) {
  .floating-brand {
    bottom:70px;
    right:16px;
    font-size:12px;
    padding:4px 6px;
    max-width:80px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .floating-brand .fb-logo {
    max-height:18px;
    margin-right:0;
  }
  .floating-brand .fb-text {
    display:none;
  }
  .navbar-toggle {
    z-index:10001 !important;
  }
  .navbar-toggle, .navbar-header {
    position:relative; /* make sure z-index applies */
  }
}


/* Make navbar transparent on mobile to avoid white box */
@media (max-width:768px) {
  .navbar.navbar-default,
  .navbar.navbar-sidebar,
  .bootsnav {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
  }
  .navbar.navbar-default .navbar-header,
  .navbar.navbar-sidebar .navbar-header,
  .bootsnav .navbar-header {
    background: transparent !important;
    background-color: transparent !important;
  }
}

/* Navbar collapse behavior */
@media (max-width:768px) {
  .navbar-toggle { display:block; background:transparent; border:none; font-size:26px; color:#fff; }
  .navbar { position:relative; }
  nav.bootsnav.navbar-sidebar {
    position: static !important;
    width: 100% !important;
    left: auto !important;
  }
  .collapse#navbar-menu { display:none; position:relative; width:100%; background:#fff !important; z-index:9999; padding:10px 0; box-shadow:0 4px 12px rgba(0,0,0,0.05); transition:none !important; }
  .collapse#navbar-menu.show, .collapse#navbar-menu.in { display:block; }
  .collapse#navbar-menu .nav > li { border-bottom:1px solid #ccc; }
  .collapse#navbar-menu .nav > li > a { color:#333; padding:12px 16px; display:block; }
  .collapse#navbar-menu .sub-menu a { padding-left:28px; }
}

/* Disable transitions for navbar on mobile to prevent popping out */
@media (max-width:768px) {
  .navbar,
  .navbar * {
    transition: none !important;
    animation: none !important;
  }
}

/* Hide the navbar header on larger screens, show on tablet/mobile */
.navbar-header {
  display: none !important;
}

@media (max-width: 991px) {
  .navbar-header {
    display: block !important;
  }
  .navbar-toggle {
    display: block !important;
  }
  nav.navbar.bootsnav {
    position: static !important;
    width: 100% !important;
    min-height: auto !important;
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
  }
  nav.bootsnav.navbar-sidebar {
    position: static !important;
    width: 100% !important;
    border-right: none !important;
  }
}

@media (max-width: 767px) {
  .navbar-header {
    display: block !important;
  }
}

/* Move image down by 30px */

.img-down {
  margin-top: 30px;
  margin-left: 100px;
}

@media (max-width 767px) {
  .img-down {
    margin-top: 0px;
    margin-left: 0px;
  }
}

/* Silbentrennung deaktivieren */

.col-md-6 p {
    text-align: justify;
    hyphens: auto !important;
    -webkit-hyphens: auto !important;
    -ms-hyphens: auto !important;
}

.col-md-12 p {
    text-align: justify;
    hyphens: auto !important;
    -webkit-hyphens: auto !important;
    -ms-hyphens: auto !important;
}

@media (min-width: 768px) {
  .custom-desktop-margin {
      margin-top: 150px; /* Hier kannst du den Wert beliebig anpassen! */
  }
}

/* Spezifische Regeln für Bildschirme kleiner als 768px (Smartphones) */
@media screen and (max-width: 768px) {
    #return-to-top {
        display: flex !important; /* Das !important überschreibt versteckende Regeln deines Themes */
        bottom: 15px; /* Etwas weniger Abstand zum Rand auf kleinen Displays */
        right: 15px;
    }
}