/* ==========================================================================
   responsive.css – Optimierungen für Tablet- und Mobilansichten
   Wird in client/main.html als LETZTES Stylesheet eingebunden, damit es
   styles.css / text-styles.css / Inline-Styles gezielt überschreiben kann.
   Breakpoints = Bootstrap 5: sm 576, md 768, lg 992
   ========================================================================== */

/* ---------- Allgemein (alle Größen) ---------- */
img {
  max-width: 100%;
}

/* verhindert seitliches Scrollen durch einzelne zu breite Elemente
   (clip statt hidden, damit die sticky Navbar funktioniert) */
body {
  overflow-x: clip;
}

h1, h2, h3 {
  overflow-wrap: break-word;
}

/* ==========================================================================
   < 992px  (Tablet & Smartphone, Navbar ist eingeklappt)
   ========================================================================== */
@media (max-width: 991.98px) {

  /* --- Navigation --- */
  .navbar > .container-fluid > a > img,
  .navbar > .container-fluid > a > svg.nav-logo {
    padding-left: 0 !important;
    margin-left: 12px !important;
    max-height: 48px;
    width: auto;
  }

  .navbar > .container-fluid > a > svg.nav-logo {
    height: 48px;
  }

  .navbar .navbar-collapse {
    margin-top: .5rem;
  }

  .navbar .navbar-nav .nav-link {
    padding: .4rem .5rem;
    border-top: 1px solid rgba(255, 255, 255, .12);
    line-height: 1.2;
  }

  .navbar .navbar-nav .dropdown-menu {
    border: 0;
  }

  /* --- Drei Produktkacheln (Startseite) --- */
  .container-fluid > .row > .col-md-4 {
    padding: 1.5rem 1.5rem 1rem !important;
  }

  /* feste Zeilenumbrüche im Kacheltext passen nicht zu schmalen Spalten */
  .container-fluid > .row > .col-md-4 p br {
    display: none;
  }

  .container-fluid > .row > .col-md-4 h1 {
    margin-top: 0 !important;
  }

  .container-fluid > .row > .col-md-4 p {
    margin-top: 1rem !important;
    margin-bottom: 1rem !important;
  }

  img[src*="pfeil_"] {
    width: 70px;
    height: auto;
  }

  /* --- Carousel / Slider --- */
  .carousel .offset-sm-5 {
    margin-left: 0 !important;
  }
}

/* ==========================================================================
   < 768px  (Smartphone quer / kleine Tablets)
   ========================================================================== */
@media (max-width: 767.98px) {

  /* styles.css setzt 50px Seitenabstand für jede Spalte – auf Mobil zu viel */
  .container .row > div {
    padding-left: 15px;
    padding-right: 15px;
  }

  /* große Inline-Abstände zwischen den Sektionen reduzieren */
  .container[style*="margin-top: 60px"] {
    margin-top: 2rem !important;
    margin-bottom: 2rem !important;
  }

  .row[style*="margin-bottom: 50px"] {
    margin-bottom: 1.5rem !important;
  }

  /* --- Typografie --- */
  h1 {
    font-size: 23px;
  }

  h2 {
    font-size: 20px;
  }

  h3 {
    font-size: 20px;
  }

  p {
    font-size: 17px;
    margin-top: 1rem;
  }

  /* --- Carousel / Slider --- */
  .carousel[style*="height"] {
    height: 440px !important;
  }

  .carousel .text-bg-light {
    padding: 1rem 1.25rem;
    margin: 0 12px;
    width: calc(100% - 24px);
  }

  .carousel-control-prev,
  .carousel-control-next {
    width: 10%;
  }

  .slider-column h2 {
    font-size: 14px;
    padding-left: 15px;
  }

  .slider-logo {
    width: 96px;
    height: 96px;
    flex-shrink: 0;
  }

  .slider-logo img {
    max-width: 80px;
  }

  .slider-description {
    padding: 12px 16px;
    flex-grow: 1;
  }

  .slider-description h1 {
    font-size: 20px;
  }

  .slider-description p {
    font-size: 15px;
  }

  /* --- Feature-Icons --- */
  img.feature-icon {
    max-width: 75px;
    margin-bottom: 1rem !important;
  }

  /* Blocksatz erzeugt auf schmalen Spalten große Lücken */
  .text-justify {
    text-align: inherit !important;
  }

  /* --- Partner-Logos --- */
  .partner-logo img {
    max-width: 150px;
    margin-bottom: 1.5rem;
  }

  /* --- Footer --- */
  footer .item {
    margin-bottom: 1rem;
  }

  footer .item > .d-flex {
    justify-content: center !important;
  }

  footer p,
  footer li {
    font-size: 15px;
  }

  /* --- Cookie-Banner (als "Bottom Sheet") --- */
  .cookie-banner {
    padding: 18px 0 calc(16px + env(safe-area-inset-bottom));
    border-radius: 14px 14px 0 0;
    box-shadow: 0 -4px 24px rgba(0, 0, 0, .35);
    max-height: 85vh;
    max-height: 85dvh;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .cookie-content {
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
    padding: 0 16px;
  }

  .cookie-banner p {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
    color: #e6e6e6;
  }

  .cookie-content a {
    color: #85be2f;
    font-weight: 600;
  }

  /* Zustimmen / Ablehnen gleichwertig nebeneinander, Einstellungen darunter */
  .cookie-content .cookie-buttons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  .cookie-buttons button {
    min-height: 46px;
    padding: 10px 12px;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 600;
    font-family: var(--bs-body-font-family);
  }

  .cookie-content .btn-decline { order: 1; background-color: #5d5656; }
  .cookie-content .btn-accept  { order: 2; background-color: #85be2f; }

  .cookie-content .btn-settings {
    order: 3;
    grid-column: 1 / -1;
    min-height: 40px;
    border: 0;
    font-weight: 400;
    text-decoration: underline;
    color: #cfcfcf;
  }

  .cookie-settings-panel {
    margin-top: 12px;
    padding: 0 16px;
  }

  .cookie-settings-content {
    padding: 14px 16px;
    border-radius: 10px;
  }

  .cookie-option {
    display: flex;
    align-items: center;
    min-height: 44px;
    margin: 0;
    font-size: 14px;
    border-bottom: 1px solid rgba(255, 255, 255, .12);
  }

  .cookie-option input {
    width: 20px;
    height: 20px;
    margin-right: 12px;
    flex-shrink: 0;
    accent-color: #85be2f;
  }

  .cookie-settings-content .cookie-buttons {
    display: block;
    margin-top: 14px;
  }

  .cookie-settings-content .cookie-buttons button {
    width: 100%;
    background-color: #85be2f;
  }

  /* --- Projekt-Wizard (Modal) --- */
  .pagedefs-form .form-group {
    flex-direction: column;
    align-items: stretch !important;
  }

  .pagedefs-form .form-group label {
    width: auto !important;
    margin-bottom: .25rem !important;
  }

  .feedback-toast {
    left: 16px;
    right: 16px !important;
    min-width: 0 !important;
  }
}

/* ==========================================================================
   < 576px  (Smartphone hochkant)
   ========================================================================== */
@media (max-width: 575.98px) {

  .carousel[style*="height"] {
    height: 380px !important;
  }

  /* Partner-Logos zweispaltig statt je eine Zeile */
  .photos > .col {
    flex: 0 0 50%;
    max-width: 50%;
  }

  .partner-logo img {
    max-width: 85%;
  }

  .modal-dialog {
    margin: .5rem;
  }
}