/* ========================================
   TABLE OF CONTENTS
   ======================================== */
/*
   1. CSS VARIABLES
   2. MOBILE (max-width: 767px)
      2.1 Header & Navigation
      2.2 Typography
      2.3 Tables (Info Tables)
      2.4 Forms (Exposed Filters)
      2.5 Webforms
      2.6 Frontpage Blocks (Cards & Images)
      2.7 View Blocks
          - Taxonomy Term Block
          - System Main Block / Alle Angebote
          - Basisinfo Blocks
          - Hauptkategorien Mobile
          - VBO End Datum Check
      2.8 Content Type Specific
          - Node 4515 (Column Ordering)
          - Stellenangebot & Angebot Stelle (Full Node)
          - Basisinfo Full Node
   3. MOBILE EXTRA SMALL (max-width: 412px)
   4. TABLET (768px+)
   5. DESKTOP (992px+)
   6. EXTRA LARGE (1200px+)
*/

/* ========================================
   1. CSS VARIABLES
   ======================================== */
:root {
  --highlight-border-color: #8dc157;
  --site-name-slogan-color: #ccc;
}

/* ========================================
   2. MOBILE: Up to 767px (Phones)
   ======================================== */
@media (max-width: 767px) {
  /* ========================================
     2.1 HEADER & NAVIGATION
     ======================================== */
  #navbar-main {
    padding: 10px !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: space-between !important;
  }

  .navbar-brand {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    margin: 0 !important;
    width: auto !important;
    flex: 1 !important;
    order: 1 !important;
    min-width: 50px !important;
  }

  /* Logo Image - make sure it's visible */
  .navbar-brand img,
  .navbar-brand .img-fluid,
  .navbar-brand a img,
  #navbar-main img,
  nav img {
    display: block !important;
    max-height: 50px !important;
    max-width: 100% !important;
    width: auto !important;
    height: auto !important;
    margin: 0 20px !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  /* Make sure the link containing the logo is visible */
  .navbar-brand > a {
    display: block !important;
  }

  .navbar .site-name-slogan {
    display: block !important;
    float: none !important;
    text-align: center !important;
    margin: 10px 0 0 0 !important;
    width: 100% !important;
    flex-basis: 100% !important;
    font-size: 0.9em !important;
    padding: 0 !important;
    order: 3 !important;
  }

  /* Hamburger-Button ausblenden — kein Toggle auf Mobile */
  .navbar-toggler {
    display: none !important;
  }

  /* Navbar-collapse auf Mobile verstecken — mobile-nav-below-search übernimmt */
  .navbar-collapse {
    display: none !important;
  }

  /* Mobile Navigation Tabs — unter dem Suchkasten */
  .mobile-nav-below-search {
    display: block !important;
    background: #ffffff;
    padding: 0 0px;
  }

  .mobile-nav-below-search .navbar-nav {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: center !important;
    align-items: flex-start !important;
    gap: 3px !important;
    padding: 0 !important;
    width: 100% !important;
    overflow-x: auto !important;
    list-style: none !important;
    margin: 0 !important;
  }

  .mobile-nav-below-search .nav-item {
    width: auto !important;
    margin: 0 !important;
  }

  /* Invertierte Tabs: flache Oberseite, abgerundete Unterseite */
  .mobile-nav-below-search .nav-link {
    display: inline-block !important;
    padding: 6px 12px !important;
    font-size: 0.75em !important;
    background: #8dc157 !important;
    border: none !important;
    border-radius: 0 0 6px 6px !important;
    color: white !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
    text-decoration: none !important;
    text-transform: uppercase !important;
    box-shadow: 0 2px 4px rgba(0,0,0,.4) !important;
    transition: color .4s, background-color .4s, box-shadow .4s !important;
    opacity: 0.85 !important;
  }

  .mobile-nav-below-search .nav-link:hover,
  .mobile-nav-below-search .nav-link.active,
  .mobile-nav-below-search .nav-link.is-active {
    background: #7ab046 !important;
    opacity: 1 !important;
    box-shadow: 0 3px 8px rgba(0,0,0,.4) !important;
  }

  /* Secondary Menu: Prominent button style */
  .region-secondary-menu {
    text-align: center;
    width: 100%;
    margin: 10px 0;
    padding: 0 10px;
  }

  .region-secondary-menu .menu {
    list-style: none;
    padding: 0;
    margin: 0;
  }

  .region-secondary-menu .menu-item {
    width: 100%;
    text-align: center;
    margin: 10px 0;
  }

  .region-secondary-menu .menu-item a {
    display: block;
    padding: 15px;
    font-size: 1.1em;
    background: var(--highlight-border-color, #8dc157);
    color: white !important;
    border: none;
    border-radius: 8px;
    text-decoration: none;
    font-weight: bold;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  }

  .region-secondary-menu .menu-item a:hover,
  .region-secondary-menu .menu-item a.is-active {
    background: #7ab046;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
  }

  /* ========================================
     2.2 TYPOGRAPHY
     ======================================== */
  h2 {
    font-size: 1.4em !important;
  }

  /* Remove large h2 margins on mobile */
  .block-views-blockfront-block-3 h2,
  .block-views-blockfront-block-5 h2,
  .block-views-blockfront-block-6 h2 {
    margin: 0  0 20px!important;
  }

  /* ========================================
     2.3 TABLES (Info Tables)
     ======================================== */
  /* Info Table: Mobile Card Layout */
  .fullnode-tabelle-info table {
    display: block !important;
    width: 100% !important;
    border: none !important;
  }

  .fullnode-tabelle-info caption {
    display: block !important;
    text-align: center !important;
    padding: 10px !important;
    background: #f8f9fa !important;
    border-radius: 8px 8px 0 0 !important;
    font-size: 0.9em !important;
    border: 1px solid #e0e0e0 !important;
    border-bottom: none !important;
  }

  .fullnode-tabelle-info tbody {
    display: block !important;
  }

  .fullnode-tabelle-info tr {
    display: flex !important;
    flex-direction: row !important;
    margin-bottom: 8px !important;
    background: white !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 6px !important;
    overflow: hidden !important;
  }

  /* Empty rows (like first row with field-agentur-referenz) - hide completely */
  .fullnode-tabelle-info tr:has(th:empty) {
    display: none !important;
  }

  .fullnode-tabelle-info th {
    display: block !important;
    flex: 0 0 40% !important;
    padding: 8px 10px !important;
    background: #f0f7e8 !important;
    font-weight: 600 !important;
    font-size: 0.85em !important;
    color: #032373 !important;
    text-align: left !important;
    border: none !important;
    border-right: 1px solid #d4e8c9 !important;
  }

  .fullnode-tabelle-info td {
    display: block !important;
    flex: 1 !important;
    padding: 10px !important;
    font-size: 0.95em !important;
    color: #333 !important;
    line-height: 1.4 !important;
    border: none !important;
    background: white !important;
  }

  /* Links in table */
  .fullnode-tabelle-info td a {
    color: #032373 !important;
    text-decoration: underline !important;
  }

  /* Tabelle Adresse */
  .col-sm-6 .fullnode-tabelle-adresse .views-field-nothing-1 {
    border-top: 2px solid #8dc155;
    margin-top: 15px;
  }

  /* ========================================
     2.4 FORMS (Exposed Filters)
     ======================================== */
  /* Basisinfo Exposed Form: Mobile Styling */
  .views-exposed-form.views-exposed-form-basisinfo-block-8,
  .block-views-blockbasisinfo-block-8 .views-exposed-form,
  form#views-exposed-form-basisinfo-block-8 {
    background: #f0f7e8 !important;
    padding: 15px !important;
    margin: 15px 0 20px 0 !important;
    border-radius: 8px !important;
    border: 1px solid #d4e8c9 !important;
  }

  .views-exposed-form.views-exposed-form-basisinfo-block-8 .form-item,
  .block-views-blockbasisinfo-block-8 .views-exposed-form .form-item,
  form#views-exposed-form-basisinfo-block-8 .form-item {
    margin-bottom: 15px !important;
  }

  .views-exposed-form.views-exposed-form-basisinfo-block-8 label,
  .block-views-blockbasisinfo-block-8 .views-exposed-form label,
  form#views-exposed-form-basisinfo-block-8 label {
    display: block !important;
    font-weight: 600 !important;
    font-size: 0.85em !important;
    color: #333 !important;
    margin-bottom: 5px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
  }

  .views-exposed-form.views-exposed-form-basisinfo-block-8 select,
  .block-views-blockbasisinfo-block-8 .views-exposed-form select,
  form#views-exposed-form-basisinfo-block-8 select {
    width: 100% !important;
    padding: 10px 12px !important;
    font-size: 1em !important;
    background: white !important;
    border: 1px solid #8dc157 !important;
    border-radius: 6px !important;
    color: #333 !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%238dc157' d='M6 8L0 0h12z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    background-size: 12px !important;
    padding-right: 35px !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
  }

  .views-exposed-form.views-exposed-form-basisinfo-block-8 select:hover,
  .views-exposed-form.views-exposed-form-basisinfo-block-8 select:focus,
  .block-views-blockbasisinfo-block-8 .views-exposed-form select:hover,
  .block-views-blockbasisinfo-block-8 .views-exposed-form select:focus,
  form#views-exposed-form-basisinfo-block-8 select:hover,
  form#views-exposed-form-basisinfo-block-8 select:focus {
    border-color: #7ab046 !important;
    box-shadow: 0 0 0 3px rgba(141, 193, 87, 0.1) !important;
    outline: none !important;
  }

  .views-exposed-form.views-exposed-form-basisinfo-block-8 .form-actions,
  .block-views-blockbasisinfo-block-8 .views-exposed-form .form-actions,
  form#views-exposed-form-basisinfo-block-8 .form-actions {
    margin-top: 10px !important;
  }

  /* ========================================
     2.5 WEBFORMS
     ======================================== */
  .block-inline-blockwebform {
    border-top: 10px solid #8dc155;
    border-radius: 10px;
    box-shadow: 1px 1px 8px #ddd;
    margin-top: 30px;
    padding: 8px;
  }

  /* ========================================
     2.6 FRONTPAGE BLOCKS (Cards & Images)
     ======================================== */
  /* Cards: Force single column layout on mobile */
  .block-views-blockfront-block-3 .views-view-responsive-grid,
  .block-views-blockfront-block-5 .views-view-responsive-grid,
  .block-views-blockfront-block-6 .views-view-responsive-grid {
    grid-template-columns: 1fr !important;
  }

  .block-views-blockfront-block-3 .views-view-responsive-grid__item,
  .block-views-blockfront-block-5 .views-view-responsive-grid__item,
  .block-views-blockfront-block-6 .views-view-responsive-grid__item {
    width: 100% !important;
    max-width: 100% !important;
    margin-bottom: 20px !important;
  }

  /* Images: Responsive on mobile (except flags) */
  .block-views-blockfront-block-3 img,
  .block-views-blockfront-block-5 img,
  .block-views-blockfront-block-6 img {
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    object-fit: cover !important;
  }

  /* Flags: Keep original size */
  .block-views-blockfront-block-3 .views-field-nothing img,
  .block-views-blockfront-block-5 .views-field-nothing img,
  .block-views-blockfront-block-6 .views-field-nothing img {
    width: auto !important;
    height: auto !important;
    max-width: 48px !important;
    max-height: 48px !important;
  }

  /* ========================================
     2.7 VIEW BLOCKS
     ======================================== */

  /* --- Taxonomy Term Block --- */
  .block-views-blocktaxonomy-term-block-1 .views-view-responsive-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px;
  }

  .block-views-blocktaxonomy-term-block-1 .views-view-responsive-grid__item {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .block-views-blocktaxonomy-term-block-1 .views-view-responsive-grid__item-inner {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    padding: 10px !important;
    background: white !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 8px !important;
    gap: 8px;
    position: relative !important;
  }

  .block-views-blocktaxonomy-term-block-1 .views-view-responsive-grid__item-inner:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
  }

  /* Header row (country, location, date) - stays on top, flush with edges */
  .block-views-blocktaxonomy-term-block-1 .views-field-nothing {
    width: calc(100% + 20px) !important;
    margin: -10px -10px 0 -10px !important;
    padding: 8px 10px !important;
    font-size: 0.85em !important;
    color: #666 !important;
    order: -1 !important;
    background: #f8f9fa !important;
    border-bottom: 1px solid #e0e0e0 !important;
    border-radius: 8px 8px 0 0 !important;
  }

  /* Country flags in header */
  .block-views-blocktaxonomy-term-block-1 .views-field-nothing img {
    width: auto !important;
    height: auto !important;
    max-width: 24px !important;
    max-height: 24px !important;
    margin-right: 5px !important;
    vertical-align: middle !important;
  }

  /* Logo/Image - centered, compact, positioned after header */
  .block-views-blocktaxonomy-term-block-1 .views-field-field-logo {
    width: 100% !important;
    text-align: center !important;
    margin: 5px 0 !important;
    order: -0.5 !important;
    float: none !important;
    position: static !important;
    display: block !important;
  }

  .block-views-blocktaxonomy-term-block-1 .views-field-field-logo img {
    max-width: 120px !important;
    max-height: 60px !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    float: none !important;
    display: block !important;
    margin: 0 auto !important;
  }

  /* Title - full width (override style.css paddings) */
  .block-views-blocktaxonomy-term-block-1 .views-field-title {
    width: 100% !important;
    padding-right: 0 !important;
    padding-left: 0 !important;
  }

  .block-views-blocktaxonomy-term-block-1 .views-field-title a {
    font-size: 1.1em !important;
    font-weight: bold !important;
    line-height: 1.3;
    color: #032373 !important;
    text-decoration: none !important;
  }

  /* Subtitle/Description - full width (override style.css paddings) */
  .block-views-blocktaxonomy-term-block-1 .views-field-body,
  .block-views-blocktaxonomy-term-block-1 .views-field-field-untertitel {
    width: 100% !important;
    font-size: 0.9em !important;
    color: #333 !important;
    line-height: 1.4;
    padding-right: 0 !important;
    padding-left: 0 !important;
  }

  /* Additional meta info */
  .block-views-blocktaxonomy-term-block-1 .views-field-created {
    font-size: 0.85em !important;
    color: #666 !important;
    width: 100% !important;
  }

  /* --- System Main Block / Alle Angebote --- */
  .block-system.block-system-main-block .views-view-responsive-grid,
  .alle-angebote-grid .views-view-responsive-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px;
  }

  .block-system.block-system-main-block .views-view-responsive-grid__item,
  .alle-angebote-grid .views-view-responsive-grid__item {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .block-system.block-system-main-block .views-view-responsive-grid__item-inner,
  .alle-angebote-grid .views-view-responsive-grid__item-inner {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    padding: 10px !important;
    background: white !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 8px !important;
    gap: 8px;
    position: relative !important;
  }

  .block-system.block-system-main-block .views-view-responsive-grid__item-inner:hover,
  .alle-angebote-grid .views-view-responsive-grid__item-inner:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
  }

  /* Header row - flush with edges (Default: Blau für Stellenangebote) */
  .block-system.block-system-main-block .views-field-nothing,
  .alle-angebote-grid .views-field-nothing,
  .block-views-blocktaxonomy-term-block-1 .views-field-nothing {
    width: calc(100% + 20px) !important;
    margin: -10px -10px 0 -10px !important;
    padding: 8px 10px !important;
    font-size: 0.85em !important;
    color: #666 !important;
    order: -1 !important;
    background: var(--bg-blau-hell) !important;  /* Default: Blau (Stellenangebote) */
    border-bottom: 1px solid var(--bg-blau-hell-alt2) !important;
    border-radius: 8px 8px 0 0 !important;
  }

  /* Basisinfo: Grüner Hintergrund (überschreibt Blau) */
  .vocabulary-basisinfo .block-system.block-system-main-block .views-field-nothing,
  .vocabulary-basisinfo .alle-angebote-grid .views-field-nothing,
  .vocabulary-basisinfo .block-views-blocktaxonomy-term-block-1 .views-field-nothing,
  .page-node-type-basisinfo .views-field-nothing,
  body:has(.node--type-basisinfo) .views-field-nothing {
    background: var(--bg-gruen-hell) !important;  /* #f0f7e8 */
    border-bottom: 1px solid var(--bg-gruen-mittel) !important;
  }

  /* Country flags in header */
  .block-system.block-system-main-block .views-field-nothing img,
  .alle-angebote-grid .views-field-nothing img {
    width: auto !important;
    height: auto !important;
    max-width: 24px !important;
    max-height: 24px !important;
    margin-right: 5px !important;
    vertical-align: middle !important;
  }

  /* Logo - centered, compact, positioned after header */
  .block-system.block-system-main-block .views-field-field-logo,
  .alle-angebote-grid .views-field-field-logo {
    position: static !important;
    transform: none !important;
    width: 100% !important;
    text-align: center !important;
    margin: 5px 0 !important;
    order: -0.5 !important;
    max-width: 100% !important;
  }

  .block-system.block-system-main-block .views-field-field-logo .field-content,
  .alle-angebote-grid .views-field-field-logo .field-content {
    display: block !important;
    text-align: center !important;
    justify-content: center !important;
  }

  /* Title - full width */
  .block-system.block-system-main-block .views-field-title,
  .alle-angebote-grid .views-field-title {
    width: 100% !important;
    padding-right: 0 !important;
    padding-left: 0 !important;
  }

  .block-system.block-system-main-block .views-field-title a,
  .alle-angebote-grid .views-field-title a {
    font-size: 1.25em !important;
    font-weight: bold !important;
    line-height: 1.3;
    color: #032373 !important;
    text-decoration: none !important;
    margin-bottom: 10px !important;
    display: block !important;
  }

  /* Subtitle/Description - full width */
  .block-system.block-system-main-block .views-field-body,
  .block-system.block-system-main-block .views-field-field-untertitel,
  .alle-angebote-grid .views-field-body,
  .alle-angebote-grid .views-field-field-untertitel {
    width: 100% !important;
    font-size: 0.85em !important;
    color: #666 !important;
    line-height: 1.4;
    padding-right: 0 !important;
    padding-left: 0 !important;
  }

  /* Additional meta info */
  .block-system.block-system-main-block .views-field-created,
  .alle-angebote-grid .views-field-created {
    font-size: 0.85em !important;
    color: #666 !important;
    width: 100% !important;
  }

  /* --- Basisinfo Blocks --- */
  /* Basisinfo Block 8: Header in light green (using color variable) */
  .block-views-blockbasisinfo-block-8 .views-field-nothing,
  .basisinfo-main .views-field-nothing {
    background: var(--bg-gruen-hell) !important;  /* #f0f7e8 */
  }

  /* Basisinfo Block 4: Full-width images */
  .block-views-blockbasisinfo-block-4 img,
  .block-views-blockbasisinfo-block-4 .views-field img,
  .block-views-blockbasisinfo-block-4 .card-img,
  .block-views-blockbasisinfo-block-4 .card-img-top {
    width: 100% !important;
    height: auto !important;
    display: block !important;
    object-fit: cover !important;
  }
.node--type-basisinfo .views-field-field-image {float:left; padding:0 10px 10px 0}
.node--type-basisinfo .views-field-nothing-2 {font-size: .8em; color: #999; line-height: 1.1em}
  .block-views-blockbasisinfo-block-4 .card {
    overflow: hidden !important;
    margin-bottom: 15px !important;
  }

  .block-views-blockbasisinfo-block-4 .card-body {
    padding: 15px !important;
  }

  /* --- Hauptkategorien Mobile --- */
  /* Hide Bootstrap Cards block on ALL mobile pages */
  #block-boot-sub-views-block-hauptkategorien-cards-block-1 {
    display: none !important;
  }

  /* Show Mobile block ONLY on frontpage */
  .front #block-boot-sub-views-block-hauptkategorien-cards-block-mobile,
  .path-frontpage #block-boot-sub-views-block-hauptkategorien-cards-block-mobile {
    display: block !important;
    padding: 0 10px;
  }

  /* Hide mobile block on non-frontpage */
  body:not(.front):not(.path-frontpage) #block-boot-sub-views-block-hauptkategorien-cards-block-mobile {
    display: none !important;
  }

  /* Hauptkategorien Mobile: Horizontal List Layout */
  #block-boot-sub-views-block-hauptkategorien-cards-block-mobile .views-view-responsive-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px;
  }

  #block-boot-sub-views-block-hauptkategorien-cards-block-mobile .views-view-responsive-grid__item {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  #block-boot-sub-views-block-hauptkategorien-cards-block-mobile .views-view-responsive-grid__item-inner {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    padding: 6px 10px !important;
    background: #f0f7e8 !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 8px !important;
    gap: 10px;
    position: relative !important;
  }

  #block-boot-sub-views-block-hauptkategorien-cards-block-mobile .views-view-responsive-grid__item-inner:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
  }

  /* Make entire card clickable */
  #block-boot-sub-views-block-hauptkategorien-cards-block-mobile .views-field-name a::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
  }

  #block-boot-sub-views-block-hauptkategorien-cards-block-mobile .views-field-field-tax-image {
    flex-shrink: 0 !important;
    width: 60px !important;
    height: 60px !important;
  }

  #block-boot-sub-views-block-hauptkategorien-cards-block-mobile .views-field-field-tax-image img {
    width: 60px !important;
    height: 60px !important;
    object-fit: cover !important;
    border-radius: 6px !important;
  }

  #block-boot-sub-views-block-hauptkategorien-cards-block-mobile .views-field-name {
    flex: 1 !important;
  }

  #block-boot-sub-views-block-hauptkategorien-cards-block-mobile .views-field-name a {
    font-size: 1em !important;
    line-height: 1.4;
    color: #032373 !important;
    text-decoration: none !important;
  }

  /* --- VBO End Datum Check --- */
  /* Hide map and other blocks on mobile FRONTPAGE only */
  .front .block-views-blockvbo-end-datum-check-block-2,
  .path-frontpage .block-views-blockvbo-end-datum-check-block-2,
  .front .view-karte,
  .path-frontpage .view-karte,
  .front .leaflet-container,
  .path-frontpage .leaflet-container,
  .front #map-container,
  .path-frontpage #map-container {
    display: none !important;
  }
  /* Geolocation Map Wrapper – explizite Höhe nötig damit Leaflet initialisiert */
.geolocation-map-wrapper {
  height: 450px;
display:none
}
  /* Detailseiten (Fullnode-Views, view-id-fullnode_*): Adresskarte auf Mobil sichtbar (2026-10-12).
     Uebersichtskarten (Start, Liste, Laender/Kategorien) bleiben ausgeblendet. */
  .view[class*="view-id-fullnode"] .geolocation-map-wrapper {
    display: block;
    height: auto;
  }
  /* ---FB-Iframe -- */
  #fb-iframe .fb-banner {
    display: block;  /* ← Aktiviert */
  }
/* --- BASISIINFO CARDS --- */
/*hide*/
#basisinfo-cards {display:none}

  /* ========================================
     2.8 CONTENT TYPE SPECIFIC
     ======================================== */

  /* --- Node 4515: Column Ordering --- */
  body:has(.node-4515) .col-sm-3 {
    order: 1 !important;  /* Sidebar first */
  }

  body:has(.node-4515) .col-sm-9 {
    order: 2 !important;  /* Main content second */
  }

  /* --- Basisinfo Full Node --- */
  /* Hide basisinfo-block-5 only on basisinfo fullnode pages */
  .node--type-basisinfo ~ .block-views-blockbasisinfo-block-5,
  body:has(.node--type-basisinfo) .block-views-blockbasisinfo-block-5 {
    display: none !important;
  }

  /* --- Stellenangebot & Angebot Stelle (Full Node) --- */
  /* Mobile styling for detail pages only

     Content Type Targeting (funktioniert OHNE Cache-Clear):
     - .node--type-stellenangebot (node wrapper class)
     - .node--type-angebot-stelle (node wrapper class)
     - body:has(.node--type-stellenangebot) (modern approach)
     - body:has(.node--type-angebot-stelle) (modern approach)

     Alternative (braucht Cache-Clear):
     - .page-node-type-stellenangebot (body class, nur nach drush cr)
     - .page-node-type-angebot-stelle (body class, nur nach drush cr)

     Verfügbare Blöcke zum Stylen:
     - .view-fullnode-stellenangebot (all views on the page)
     - .view-display-id-block_1 (body/content block)
     - .view-display-id-block_3 (address/contact table)
     - .view-display-id-block_4 (info table)
     - .view-display-id-block_5 (map)
     - .col-sm-6 (the two column divs)
     - .block-field-blocknodestellenangebottitle (title field block)
     - .block-field-blocknodeangebot-stelletitle (title field block)
  */

  /* Title (H1) and Subtitle (H3) styling for better visual hierarchy */
  .block-field-blocknodestellenangebottitle h1,
  .block-field-blocknodeangebot-stelletitle h1 {
    font-size: 1.5em !important;
    line-height: 1.3 !important;
    margin-bottom: 15px !important;
    color: #032373 !important;
  }

  .block-field-blocknodestellenangebotfield-untertitel h3,
  .block-field-blocknodeangebot-stellefield-untertitel h3 {
    font-size: 1em !important;
    font-weight: normal !important;
    line-height: 1.4 !important;
    color: #666 !important;
    margin-top: 0 !important;
  }

  /* TODO: Add alternative mobile menu here */
}

/* ========================================
   3. MOBILE EXTRA SMALL: Up to 412px
   ======================================== */
@media (max-width: 412px) {
  /* Sidebar */
  .col-sm-3 {
    flex: 0 0 auto;
    width: 100%;
    order: 2;
  }
}

/* Mobile nav tabs — nur auf Mobile sichtbar */
.mobile-nav-below-search {
  display: none;
}

/* ========================================
   4. TABLET: 768px and up
   ======================================== */
@media (min-width: 768px) {
  /* Header / Navbar - tablets and desktops only */
  .navbar-brand {
    padding-top: var(--bs-navbar-brand-padding-y);
    padding-bottom: var(--bs-navbar-brand-padding-y);
    margin: auto;
    font-size: var(--bs-navbar-brand-font-size);
    color: var(--bs-navbar-brand-color);
    white-space: nowrap;
  }

  

  /* Highlighted Region (Search Block) */
  .region-highlighted {
    flex-direction: row;
    padding: 24px 30px;
  }

  /* Hauptkategorien Dropdown */
  .hk-dropdown {
    display: block;
    margin: 0 auto;
    width: 100%;
    text-align: center;
  }

  /* Hauptkategorien: Show Bootstrap Cards, hide Mobile block on Desktop */
  #block-boot-sub-views-block-hauptkategorien-cards-block-1 {
    display: block !important;
  }

  #block-boot-sub-views-block-hauptkategorien-cards-block-mobile {
    display: none !important;
  }

  /* General */
  .custom-class {
    padding: 20px;
    background-color: #f0f0f0;
  }
}

/* ========================================
   5. DESKTOP: 992px and up
   ======================================== */
@media (min-width: 992px) {
  /* Highlighted Region */
  .region-highlighted {
    padding: 40px;
  }
}

/* ========================================
   6. EXTRA LARGE: 1200px and up
   ======================================== */
@media (min-width: 1200px) {
  /* General */
  .custom-class {
    padding: 30px;
    background-color: #e0e0e0;
  }
}