/* HFW Mobile-Design (Joomla 4) - wird NACH custom.css geladen.
   Nur Regeln fuer Handy/Tablet (max-width-Media-Queries), Desktop bleibt unveraendert. */

/* =========================================================
   TABLET QUER + KLEINE LAPTOPS (bis 1199px)
   ========================================================= */
@media (max-width: 1199px) {
  /* Hauptmenue passt nicht in eine Zeile und legt sich ueber den Slider -> Burger-Menue (ist hier schon sichtbar) */
  #sp-header .sp-megamenu-parent { display: none !important; }

  /* Startseite: Kachel-Titel nicht mitten im Wort umbrechen */
  #sp-page-builder .mednet-features-list .sppb-addon-feature .sppb-feature-box-title { font-size: 19px; line-height: 1.15; }
  .mednet-features-list .mednet-features-two, .mednet-features-list .mednet-features-three { padding-left: 15px; }
  #sp-page-builder .mednet-features-list .sppb-addon-feature { padding-right: 15px; }

  /* Footer: Facebook-Box nicht breiter als die Spalte */
  #sp-bottom4 { overflow: hidden; }
  #sp-bottom4 .fb-page, #sp-bottom4 .fb-page span, #sp-bottom4 iframe { max-width: 100% !important; }

  /* Artikel: Layout-Tabellen mit fester Breite (z. B. Impressum, 1068px) nicht ueberlaufen lassen */
  .item-page table[style*="width"] { width: 100% !important; height: auto !important; }
  .item-page table { max-width: 100%; }
}

/* =========================================================
   TABLET + HANDY (bis 991px)
   ========================================================= */
@media (max-width: 991px) {
  /* Allgemein: Bilder/Videos nie breiter als der Inhalt */
  #sp-main-body img { max-width: 100%; height: auto; }
  #sp-main-body iframe, #sp-main-body video { max-width: 100%; }

  /* Seitennummerierung: umbrechen statt rechts ueberlaufen (Einsatzliste, Berichte) */
  .pagination { flex-wrap: wrap; row-gap: 6px; justify-content: center; }
  /* "Seite x von y" ueber die Seitennummern statt daneben (Bootstrap float-end ist !important) */
  p.counter.float-end { float: none !important; text-align: center; padding-top: 10px !important; margin-bottom: 6px; }
  .pagination .page-link { min-width: 44px; min-height: 44px; display: flex; align-items: center; justify-content: center; }

  /* Einsatzliste (Tablet): Organisationen umbrechen, Vorschaubild kleiner, Spalte "Zugriffe" ausblenden */
  #einsatzberichtList .eiko_td_organisationen_main_1 { white-space: normal; }
  #einsatzberichtList img.eiko_img_einsatzbild_main_1 { width: 80px !important; max-width: none; }
  #einsatzberichtList tbody tr[class^="row"] > td:nth-child(7),
  #einsatzberichtList thead th:nth-child(7) { display: none; }

  /* Einsatz-Detail: Navigation Uebersicht/Zurueck/Vor volle Breite, lesbar */
  .eiko_navbar_2 { float: none !important; width: 100%; margin-bottom: 15px; }
  .btn-group-justified > .btn { padding: 0 8px; min-width: 0; min-height: 48px; line-height: 1.2; display: flex; align-items: center; justify-content: center; white-space: normal; }
  .btn-group-justified > .btn, .btn-group-justified > .btn strong { color: #333; }

  /* Filterleiste (Einsaetze, Mitglieder): kompakte, gleich hohe Felder */
  .js-stools-container-bar { gap: 8px; }
  .js-stools-container-bar .btn-wrapper.input-append { flex: 1 1 100%; display: flex; }
  /* Template setzt Eingabefelder auf 53px !important -> hier kompakter */
  body.site .js-stools-container-bar .input-append .js-stools-search-string { flex: 1 1 auto; width: auto; height: 44px !important; font-size: 16px; }
  .js-stools-container-bar .input-append .btn { width: 48px; height: 44px; padding: 0; flex: 0 0 48px; }
  .js-stools-container-bar .btn-wrapper:not(.input-append) { flex: 1 1 0; }
  .js-stools-container-bar .btn-wrapper:not(.input-append) .btn { width: 100%; min-height: 44px; height: auto; line-height: 1.2; padding: 8px 10px; font-size: 15px; white-space: normal; }
  /* Lupe war unsichtbar (hp-icon-Schrift hat kein Such-Symbol) */
  .js-stools .icon-search::before { font-family: FontAwesome !important; content: "\f002"; }
  .js-stools-container-filters { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 10px; }
  .js-stools-container-filters .js-stools-field-filter { display: contents; margin: 0; }
  body.site .js-stools-container-filters select.form-select { width: 100%; height: 44px !important; min-height: 44px; padding: 6px 30px 6px 10px; font-size: 15px; margin: 0; background-position: right 8px center; }

  /* Filter-Auswahl auf Tablets (Chosen-Dropdowns statt nativer Selects): 44px hoch, volle Spaltenbreite */
  .js-stools-container-filters .chosen-container { width: 100% !important; min-width: 0; font-size: 15px; }
  .js-stools-container-filters .chosen-container-single .chosen-single { height: 44px; line-height: 42px; padding-left: 10px; font-size: 15px; }
  .js-stools-container-filters .chosen-container-single .chosen-single div { top: 10px; }

  /* Offcanvas-Menue: groessere Schrift und Tap-Ziele */
  .offcanvas-menu .offcanvas-inner ul.menu > li > a,
  .offcanvas-menu .offcanvas-inner ul.menu > li > span { font-size: 16px; }
  .offcanvas-menu .offcanvas-inner ul.menu ul li a { font-size: 15px; min-height: 44px; display: flex; align-items: center; }
  .offcanvas-menu .close-offcanvas { width: 44px; height: 44px; line-height: 44px; text-align: center; top: 8px; right: 8px; }
  body.site .offcanvas-menu input.form-control { height: 44px !important; font-size: 16px; }

  /* Burger-Symbol: breiteres Tap-Ziel */
  #offcanvas-toggler { display: inline-block; padding: 0 12px; margin-right: -12px; font-size: 24px; }

  /* Footer: Telefon/Mail und Footer-Menue gut antippbar */
  #sp-bottom p a { display: inline-block; padding: 8px 0; }
  #sp-bottom1 a { display: inline-block; }
  #sp-footer ul.menu li { margin: 0 6px; }
  #sp-footer ul.menu li a, #sp-footer a { display: inline-block; padding: 8px 6px; line-height: 1.4; }

  /* Kopf: Notruf-Leiste lesbar */
  #mod-custom139 { font-size: 14px; }
  #sp-top-bar .mod-custom a { display: inline-block; padding: 8px 6px; }

  /* Fahrzeuge/Berichte: Hochformat-Bilder in Galerien nicht hoeher als der Bildschirm */
  .entry-gallery .carousel-item img { max-height: 70vh; width: 100%; object-fit: cover; }

  /* Artikel-Uebersichten (Berichte, Fahrzeuge): Vorschaubild ueber dem Text statt daneben -
     sonst wird der Titel neben dem vollbreiten Bild auf 0px gequetscht und ist unsichtbar */
  /* (inline-CSS setzt "#sp-main-body .pull-left { float:left !important }") */
  body.layout-blog #sp-main-body .entry-image.intro-image.pull-left { float: none !important; margin: 0 0 15px; }

  /* Kommando/Ausschuss: Funktionsbezeichnungen (12px) lesbar */
  #sp-component p.small { font-size: 14px; }

  /* Jahresberichte: Download-Buttons nicht mehrzeilig aufgeblaeht */
  .hfw-sc-btn { line-height: 1.3; padding: 10px 12px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; white-space: normal; }

  /* Social-Media-Wall: Texte lesbar */
  /* (Plugin setzt 11px per ID-Selektor inline, daher #sp-component) */
  body #sp-component .sboard .sb-item .sb-inner { font-size: 14px; }
  body #sp-component .sboard .sb-item .sb-inner .sb-text { font-size: 14px; line-height: 1.5; }
  body #sp-component .sboard .sb-item .sb-inner a { font-size: inherit; }
  body #sp-component .sboard .sb-item .sb-metadata,
  body #sp-component .sboard .sb-item .sb-metadata .sb-meta,
  body #sp-component .sboard .sb-item .sb-metadata .sb-meta span { font-size: 13px; }
}

/* =========================================================
   HANDY (bis 767px)
   ========================================================= */
@media (max-width: 767px) {
  /* Seitentitel-Balken: weniger Hoehe, Brotkrumen umbrechen */
  #sp-page-title .sp-page-title { padding: 36px 0; }
  #sp-page-title .sp-page-title .breadcrumb { flex-wrap: wrap; margin-top: 10px; }

  /* Startseite: Slider-Texte mit Rand und passender Groesse */
  .sppb-slider-wrapper .sppb-slide-item-bg { height: 320px; padding: 30px 0 50px; }
  .sppb-slider-wrapper .sppb-slide-item-bg .sppb-slideshow-fullwidth-item-text { width: 100%; padding: 0 20px; }
  .sppb-slider-wrapper .sppb-slide-item-bg .sppb-slideshow-fullwidth-item-text .sppb-fullwidth-title { font-size: 20px; }
  .sppb-slider-wrapper .sppb-slide-item-bg .sppb-slideshow-fullwidth-item-text .sppb-fullwidth-title .sppb-slidehsow-sub-title { font-size: 28px; }

  /* Kontaktformular Jugend: Senden-Button volle Breite */
  .sppb-ajaxt-contact-form .sppb-btn { width: 100%; min-height: 48px; }
}

/* =========================================================
   TABLET + HANDY (bis 991px): Startseite + Formulare
   ========================================================= */
@media (max-width: 991px) {
  /* Kontaktformular Jugend: 16px verhindert automatisches Zoomen auf iPhones */
  body.site .sppb-ajaxt-contact-form .sppb-form-control { font-size: 16px; }

  /* Startseite: rote Kacheln (untereinander) volle Breite, gleiche Innenabstaende, weisse Schrift */
  .mednet-features-list .sppb-row-container { padding: 0; max-width: none; }
  .mednet-features-list .sppb-row > div { margin: 0; padding: 0; }
  .mednet-features-list .mednet-features-one,
  .mednet-features-list .mednet-features-two,
  .mednet-features-list .mednet-features-three { margin: 0; padding: 0 max(20px, calc((100% - 720px) / 2)); }
  .mednet-features-list .mednet-features-one::before, .mednet-features-list .mednet-features-one::after,
  .mednet-features-list .mednet-features-two::before, .mednet-features-list .mednet-features-two::after,
  .mednet-features-list .mednet-features-three::before, .mednet-features-list .mednet-features-three::after { left: 0; right: 0; width: 100%; }
  .mednet-features-list .sppb-row > div .sppb-addon-container { height: auto; }
  #sp-page-builder .mednet-features-list .sppb-addon-feature { padding: 32px 0; margin-bottom: 0; }
  .mednet-features-list .sppb-addon-feature .sppb-feature-box-title { overflow-wrap: anywhere; }
  .mednet-features-list .sppb-addon-feature .sppb-addon-text,
  .mednet-features-list .sppb-addon-feature .sppb-addon-text p,
  body .mednet-features-list .sppb-addon-feature .sppb-media-content .sppb-addon-text p { color: #fff; font-size: 16px; line-height: 1.5; margin-top: 12px; }
  .mednet-features-list .sppb-addon-feature .sppb-addon-text a { display: inline-block; font-size: 16px; padding: 10px 0; }
  .mednet-features-list .sppb-addon-feature .sppb-addon-text p a { padding: 0; }
  .mednet-features-list .sppb-addon-feature .sppb-addon-text a.btn-click,
  .mednet-features-list .sppb-addon-feature .sppb-addon-text p:last-child a { padding: 10px 0; }

  /* Startseite: leere Page-Builder-Abschnitte erzeugen keine Leerflaechen */
  #sp-page-builder .sppb-section:not(:has(.sppb-column-addons > *)) { display: none; }
}

/* =========================================================
   HANDY (bis 767px), Fortsetzung
   ========================================================= */
@media (max-width: 767px) {

  /* Einsatzliste: leere Randspalten schmal, Tabelle ohne Ueberlauf */
  #einsatzberichtList { width: 100%; }
  #einsatzberichtList td:first-child:empty, #einsatzberichtList td.center { width: 4px; padding-left: 0; padding-right: 0; }
  #einsatzberichtList .eiko_einsatzarchiv_jahr_div { font-size: 24px; }
  #einsatzberichtList td a { display: inline-block; padding: 4px 0; }

  /* Einsatz-Detail: Bild nicht neben schmalem Text, Karte, Kennzahlen */
  .eiko_detailbox_2 > a.highslide:has(.eiko_detail_image_2) { display: block; text-align: center; }
  .eiko_detail_image_2 { float: none !important; display: block; margin: 0 auto 15px; width: auto; max-width: 100%; }
  .eiko_einsatzkarte_2 { height: 260px; }
  .leaflet-popup-content h2.eiko_h2_osm { font-size: 16px; line-height: 1.3; margin: 0; }
  .leaflet-bar a, .leaflet-touch .leaflet-bar a { width: 40px; height: 40px; line-height: 40px; }
  .eiko_thumbnails_2 { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; }
  .eiko_thumbnails_2 > li { list-style: none; margin: 0; }
  .eiko_counter_detail { font-size: 12px; }

  .carousel-control-prev, .carousel-control-next { width: 44px; }

  /* Artikel-Uebersichten: Titel-Links antippbar */
  body.layout-blog .entry-header h2 a { display: inline-block; padding: 6px 0; }

  /* Artikel: Titel der Einzelansicht (Template setzt 46px) */
  body.view-article #sp-component article .entry-header h2 { font-size: 28px; line-height: 1.15; }


  /* Artikel: Layout-Tabellen untereinander statt nebeneinander (z. B. Impressum) */
  .item-page table[style*="width"] td { display: block; width: auto !important; text-align: left !important; }


  /* Sitemap: Links antippbar, lange Eintraege umbrechen */
  a.osmap-link { display: inline-block; padding: 5px 0; overflow-wrap: anywhere; }

  /* Footer: Abstaende zwischen den Bloecken */
  #sp-bottom .sp-column { margin-bottom: 24px; }
}