/* =====================================
   SOZB 2025 – HEADER & NAVIGATION (Base)
   ===================================== */
body.sozb2025{
  --brand:#9D1423;          /* Rot aus PDF */
  --brand-hover:#b81b2d;
  --text:#1e1e1e;
  --header-min:150px;       /* Header-Mindesthöhe */
  --icons-offset:38px;      /* vertikaler Abstand der Social-Icons über der Nav-Baseline */
  background:#fff;
}
  body.sozb2025 #nav-sub .social-icons {
	display: none;	
	}


/* Ab 1200px anderes Logo */
@media (min-width: 1200px) {
  #logo img {
    content: url("/files/theme-sozb2025_compatible/assets/img/Logo_SOZB_4f.png");
	height: 70px !important;
  }
}
@media screen and (max-width: 900px) {
	#logo {
		left: 0.0%;
	}
}
/* =====================================
   Footer Anpassungen
   ===================================== */
body.sozb2025 footer .social-icons {
	display: none;	
}

/* =========================================================
   GLOBAL RULES ab 600px (Tablet und größer)  -> "Basis"
   ========================================================= */
@media (min-width:600px){

  /* Header */
  body.sozb2025 header{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    min-height:var(--header-min);
    height:auto;
    border-bottom:4px solid var(--brand);
    padding:0 20px 0 0;
    box-sizing:border-box;
    position:relative;
    z-index:2000;
    background:#fff;
    margin:0 !important;
    overflow:visible;
    width:100%;
  }

  /* Logo (Basis = 80px hoch) */
  body.sozb2025 #logo{
    margin:0 !important;
    line-height:0;
    display:flex;
    align-items:flex-end;
    height:100%;
    padding-bottom:15px;
    overflow:visible;
  }
  body.sozb2025 #logo img{
    height:80px;            /* Basis */
    width:auto;
    display:block;
    padding-left:8%;        /* Content-Start 4% */
  }

  /* Navigation */
  body.sozb2025 #nav-main{
    margin-left:auto;
    position:relative;      /* Referenz für Social Icons */
    z-index:2100;
    overflow:visible;
    padding:0 2% 0 24%;     /* deine aktuelle Einrückung */
  }
  body.sozb2025 #nav-main > ul{
    display:flex !important;
    align-items:flex-end;
    gap:clamp(8px, 1.5vw, 20px);
    list-style:none;
    margin:0;
    padding:0;
    white-space:nowrap;
    flex-wrap:nowrap;
    max-width:100%;
  }

  /* „Organisation“ ganz rechts/bündig */
  body.sozb2025 #nav-main > ul > li:last-child{ margin-left:auto; }
  body.sozb2025 #nav-main > ul > li:last-child > a{ padding-right:0 !important; }

  /* Reset Alt-Theme */
  body.sozb2025 #nav-main > ul > li,
  body.sozb2025 #nav-main > ul > li > a{
    border:0 !important; background:transparent !important; box-shadow:none !important;
  }
  body.sozb2025 #nav-main > ul > li::before,
  body.sozb2025 #nav-main > ul > li::after,
  body.sozb2025 #nav-main > ul > li > a::before{
    content:none !important; border:0 !important; background:transparent !important; box-shadow:none !important;
  }
  body.sozb2025 #nav-main .background-variation-1,
  body.sozb2025 #nav-main .low-home{ background:transparent !important; border:0 !important; box-shadow:none !important; }

  /* Top-Level Links (Basis: 11px) */
  body.sozb2025 #nav-main > ul > li > a{
    display:inline-block;
    font-size:11px;         /* Basis */
    font-weight:500;
    letter-spacing:.01em;
    padding:0 clamp(2px, .6vw, 8px) 12px clamp(2px, .6vw, 8px);
    color:var(--text);
    text-decoration:none;
    position:relative;
    line-height:1;
    transition:color .18s ease, background-color .18s ease;
  }
  body.sozb2025 #nav-main > ul > li > a::after{ display:none !important; }
  body.sozb2025 #nav-main > ul > li > a:hover{
    color:var(--brand);
    background:rgba(157,20,35,.06);
    border-radius:6px 6px 0 0;
  }

  /* Dropdowns (Basis) */
  body.sozb2025 #nav-main > ul > li{ position:relative; z-index:1; }

  /* HOVER-GAP FIX ab 600px:
     - kein margin-top mehr, stattdessen padding-top im Panel
     - Bridge deaktiviert (height:0) */
  body.sozb2025 #nav-main > ul > li.submenu::after{
    content:""; position:absolute; left:0; right:0; top:100%; height:0; pointer-events:auto; background:transparent; z-index:1;
  }
  body.sozb2025 #nav-main > ul > li.submenu > ul{
    position:absolute; top:100%; left:0;
    margin-top:0;               /* FIX: entfernt die Lücke */
    padding-top:12px;           /* optischer Abstand innerhalb des LI */
    min-width:220px;            /* Basis schmaler */
    background:#fff; border:1px solid #e9e9e9; border-radius:12px; padding-bottom:10px; list-style:none;
    box-shadow:0 14px 36px rgba(0,0,0,.10); z-index:2200;
    opacity:0; visibility:hidden; transform:translateY(0); pointer-events:none;
    transition:opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
    max-width:min(92vw, 420px); white-space:normal; overflow-wrap:anywhere;
  }
  body.sozb2025 #nav-main > ul > li.submenu:hover > a,
  body.sozb2025 #nav-main > ul > li.submenu:focus-within > a{
    color:var(--brand); background:rgba(157,20,35,.08); border-radius:6px 6px 0 0;
  }
  body.sozb2025 #nav-main > ul > li.submenu:hover > ul,
  body.sozb2025 #nav-main > ul > li.submenu:focus-within > ul{
    opacity:1; visibility:visible; transform:translateY(0); pointer-events:auto; transition-delay:0s;
  }
  body.sozb2025 #nav-main > ul > li.submenu:last-child > ul,
  body.sozb2025 #nav-main > ul > li.submenu:nth-last-child(2) > ul{ left:auto; right:0; }

  /* Dropdown-Links */
  body.sozb2025 #nav-main > ul > li.submenu > ul > li > a{
    display:block; padding:12px 18px; color:#222; font-weight:500; text-decoration:none; white-space:nowrap;
    transition:background .15s ease, color .15s ease;
  }
  body.sozb2025 #nav-main > ul > li.submenu > ul > li > a:hover{ background:#f6f6f6; color:var(--brand); }

  /* Social Icons (weiß, über rechter Kante) */
  body.sozb2025 #nav-main .social-icons{
    position:absolute;
    right:0;
    bottom:calc(12px + var(--icons-offset));
    display:flex; align-items:center; gap:12px; pointer-events:auto;
  }
  body.sozb2025 #nav-main .social-icons a{
    display:inline-flex; align-items:center; justify-content:center;
    width:28px; height:28px; border-radius:50%;
    background:var(--brand); color:#fff;
    transition:background .2s ease, transform .2s ease;
  }
  body.sozb2025 #nav-main .social-icons a:hover{ background:var(--brand-hover); transform:translateY(-2px); }
  body.sozb2025 #nav-main .social-icons svg,
  body.sozb2025 #nav-main .social-icons svg path{ fill:#fff !important; }
  body.sozb2025 #nav-main .social-icons .icon-facebook svg{ width:18px; height:18px; } /* größer */
  body.sozb2025 #nav-main .social-icons .icon-linkedin  svg{ width:14px; height:14px; }
}

/* ===== DESKTOP/TABLET ===== */
@media (min-width:900px){

  /* Logo größer */
  body.sozb2025 #logo img{
    height:100px;          /* Override von 80px -> 100px */
  }

  /* Navigation: größere Gaps */
  body.sozb2025 #nav-main > ul{
    gap:clamp(12px, 2vw, 28px);
  }

  /* Top-Level Links: größere Schrift */
  body.sozb2025 #nav-main > ul > li > a{
    font-size:clamp(14px, 1.0vw, 16px);
  }

  /* Dropdown: etwas breiter auf Desktop + GAP FIX auch hier */
  body.sozb2025 #nav-main > ul > li.submenu > ul{
    min-width:260px;
    margin-top:0;            /* FIX */
    padding-top:10px;        /* optischer Abstand */
    transform:translateY(0); /* kein Versatz */
  }

  /* Bridge endgültig deaktiviert */
  body.sozb2025 #nav-main > ul > li.submenu::after{ height:0; }

  /* Sichtbar bei Hover/Focus */
  body.sozb2025 #nav-main > ul > li.submenu:hover > ul,
  body.sozb2025 #nav-main > ul > li.submenu:focus-within > ul{
    opacity:1; visibility:visible; pointer-events:auto; transition-delay:0s;
  }

  /* WICHTIG: Container darf Dropdowns nicht abschneiden */
  body.sozb2025 header{ overflow:visible; z-index:2000; }
  body.sozb2025 #nav-main{ overflow:visible; z-index:2100; }
}

/* =====================================
   (Optional) Desktop Feintuning-Stufen
   ===================================== */
@media (min-width:900px) and (max-width:1200px){
  body.sozb2025 #nav-main > ul{ gap:clamp(10px, 1.5vw, 20px); }
  body.sozb2025 #nav-main > ul > li > a{
    font-size:clamp(14px, .95vw, 15px);
    padding-left:clamp(2px, .5vw, 6px);
    padding-right:clamp(2px, .5vw, 6px);
    letter-spacing:.005em;
  }
}
@media (min-width:900px) and (max-width:1040px){
  body.sozb2025 #nav-main > ul{ gap:clamp(10px, 1.1vw, 14px); }
  body.sozb2025 #nav-main > ul > li > a{
    font-size:clamp(12px, .9vw, 14px);
    padding-left:clamp(1px, .35vw, 5px);
    padding-right:clamp(1px, .35vw, 5px);
    letter-spacing:0;
  }
}

/* =========================================
   SOZB 2025 – MOBILE NAVIGATION (<= 599px)
   Styling für dein konkretes HTML (#mobile-menu-17)
   ========================================= */
@media (max-width: 599px){

 /* Header */
  body.sozb2025 header{
	margin-left: 0%;
	border-bottom:4px solid var(--brand);
	padding:0 20px 0 0;
  }
  #logo{
	margin: 2% auto 0;
  }
  body.sozb2025 .mod_mobile_menu.block {
	margin: 15px 0px 15px 20px;
  }
 
  /* Drawer-Content flüssig wirken lassen */
  #mobile-menu-17{
    background:#fff !important;
    box-shadow:0 18px 40px rgba(0,0,0,.14);
  }
  #mobile-menu-17 .inner{
    height:100%;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
  }
.mobile_menu .inner{
	background:#fff !important;
}

  /* ---------- Reset gegen Theme-Einflüsse ---------- */
  #mobile-menu-17 nav.mod_navigation *{
    border:0;
    background:transparent;
    box-shadow:none;
  }

  /* ---------- UL Grundlayout ---------- */
  #mobile-menu-17 .cd-accordion-menu{
    list-style:none;
    margin:0;
    padding:10px 12px 88px; /* unten Platz für Social-Icons */
    background:#fff;
  }

  /* ---------- Level 1: Kachel ---------- */
  #mobile-menu-17 .cd-accordion-menu > li{
    background:#f3f3f6;
    border:1px solid #e6e6e6;
    border-radius:14px;
    margin:10px 0;
    overflow:hidden;
  }

  /* Checkbox unsichtbar (Accordion-Trigger per Label) */
  #mobile-menu-17 .cd-accordion-menu input[type="checkbox"]{
    position:absolute;
    opacity:0;
    pointer-events:none;
  }

  /* Label (nur bei has-children) */
  #mobile-menu-17 .cd-accordion-menu > li.has-children > label{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:16px 14px 16px 16px; /* wie im Mock-up */
    font-size:15px;
    font-weight:700;
    color:#1e1e1e;
    cursor:pointer;
    user-select:none;
    background:linear-gradient(#fafafa,#f6f6f9);
    transition:color .18s ease, background-color .18s ease;
  }
  /* Chevron rechts */
  #mobile-menu-17 .cd-accordion-menu > li.has-children > label::after{
    content:"";
    width:11px; height:11px;
    border-right:2px solid #1e1e1e;
    border-bottom:2px solid #1e1e1e;
    transform:rotate(-45deg);
    transition:transform .22s ease, border-color .2s ease;
  }
  /* Hover */
  #mobile-menu-17 .cd-accordion-menu > li.has-children > label:hover{
    color:#9D1423;
    background:linear-gradient(#f9f9fb,#f0f0f5);
  }
  #mobile-menu-17 .cd-accordion-menu > li.has-children > label:hover::after{
    border-color:#9D1423;
  }

  /* Offen per Checkbox (Fallback) */
  #mobile-menu-17 .cd-accordion-menu > li.has-children > input[type="checkbox"]:checked + label{
    color:#9D1423;
    background:#fff;
    border-bottom:1px solid #e6e6e6;
  }
  #mobile-menu-17 .cd-accordion-menu > li.has-children > input[type="checkbox"]:checked + label::after{
    transform:rotate(45deg);
    border-color:#9D1423;
  }

  /* Offen per JS (is-open) */
  #mobile-menu-17 .cd-accordion-menu > li.has-children.is-open > label{
    color:#9D1423;
    background:#fff;
    border-bottom:1px solid #e6e6e6;
  }
  #mobile-menu-17 .cd-accordion-menu > li.has-children.is-open > label::after{
    transform:rotate(45deg);
    border-color:#9D1423;
  }

  /* Level 1 ohne Kinder */
  #mobile-menu-17 .cd-accordion-menu > li:not(.has-children) > a{
    display:block;
    padding:16px;
    font-size:15px;
    font-weight:700;
    color:#1e1e1e;
    text-decoration:none;
    background:linear-gradient(#fafafa,#f6f6f9);
    transition:color .18s ease, background-color .18s ease;
  }
  #mobile-menu-17 .cd-accordion-menu > li:not(.has-children) > a:hover{
    color:#9D1423;
    background:#fff;
  }

  /* Aktive Links */
  #mobile-menu-17 .cd-accordion-menu li > a.active,
  #mobile-menu-17 .cd-accordion-menu li.active > a{
    color:#9D1423;
    position:relative;
  }
  #mobile-menu-17 .cd-accordion-menu li > a.active::before,
  #mobile-menu-17 .cd-accordion-menu li.active > a::before{
    content:"";
    position:absolute;
    left:0; top:0; bottom:0;
    width:3px;
    background:#9D1423;
    border-radius:2px;
  }

  /* ---------- Level 2: Panel ---------- */
  #mobile-menu-17 .cd-accordion-menu > li > ul{
    list-style:none;
    margin:0;
    padding:8px 10px 12px;
    background:#fff;
    border-bottom-left-radius:12px;
    border-bottom-right-radius:12px;
  }
  #mobile-menu-17 .cd-accordion-menu > li > ul > li{
    border-top:1px solid #f0f0f3;
  }
  #mobile-menu-17 .cd-accordion-menu > li > ul > li:first-child{
    border-top:0;
  }
  #mobile-menu-17 .cd-accordion-menu > li > ul > li > a{
    display:block;
    padding:8px 12px;
    font-size:14px;
    line-height:1.35;
    color:#333;
    text-decoration:none;
    border-radius:10px;
    transition:background .15s ease, color .15s ease, transform .15s ease;
    overflow-wrap:anywhere;
  }
  #mobile-menu-17 .cd-accordion-menu > li > ul > li > a:hover{
    background:#f7f7fb;
    color:#9D1423;
    transform:translateX(2px);
  }
  #mobile-menu-17 .cd-accordion-menu > li > ul > li:first-child > a{
    font-weight:700;
    color:#1e1e1e;
  }

  /* ---------- Level 3 ---------- */
  #mobile-menu-17 .cd-accordion-menu > li > ul ul{
    list-style:none;
    margin:8px 0 4px 12px;
    padding:0;
    border-left:2px solid #f0f0f3;
  }
  #mobile-menu-17 .cd-accordion-menu > li > ul > li.has-children > label{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    margin:6px 0 2px;
    padding:10px 8px 10px 10px;
    font-size:14px;
    font-weight:600;
    color:#333;
    background:#fff;
    border-radius:8px;
    cursor:pointer;
  }
  #mobile-menu-17 .cd-accordion-menu > li > ul > li.has-children > label::after{
    content:"";
    width:9px; height:9px;
    border-right:2px solid #333; border-bottom:2px solid #333;
    transform:rotate(-45deg);
    transition:transform .2s ease, border-color .2s ease;
  }
  #mobile-menu-17 .cd-accordion-menu > li > ul > li.has-children.is-open > label{
    color:#9D1423;
  }
  #mobile-menu-17 .cd-accordion-menu > li > ul > li.has-children.is-open > label::after{
    transform:rotate(45deg); border-color:#9D1423;
  }

  #mobile-menu-17 .cd-accordion-menu > li > ul ul li{
    border:0;
  }
  #mobile-menu-17 .cd-accordion-menu > li > ul ul li a{
    display:block;
    padding:8px 12px;
    font-size:13.5px;
    color:#444;
    text-decoration:none;
    border-radius:8px;
    transition:background .15s ease, color .15s ease;
  }
  #mobile-menu-17 .cd-accordion-menu > li > ul ul li a:hover{
    background:#fafafe;
    color:#9D1423;
  }

  /* ---------- Fokus (A11y) ---------- */
  #mobile-menu-17 .cd-accordion-menu label:focus,
  #mobile-menu-17 .cd-accordion-menu a:focus{
    outline:2px solid rgba(157,20,35,.35);
    outline-offset:2px;
    border-radius:8px;
  }

  /* ---------- Social Icons ---------- */
  #mobile-menu-17 .social-icons{
    position:sticky;
    bottom:12px;
    display:flex;
    gap:12px;
    margin:16px 12px 0;
    padding-top:12px;
    border-top:1px solid #e6e6e6;
    background:#fff;
  }
  #mobile-menu-17 .social-icons a{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:28px; height:28px;
    border-radius:50%;
    background:#9D1423;
    color:#fff;
    transition:background .2s ease, transform .2s ease;
    box-shadow:0 8px 18px rgba(0,0,0,.08);
  }
  #mobile-menu-17 .social-icons a:hover{
    background:#b81b2d;
    transform:translateY(-2px);
  }
  #mobile-menu-17 .social-icons svg,
  #mobile-menu-17 .social-icons svg path{
    fill:#fff !important;
  }
  #mobile-menu-17 .social-icons .icon-facebook svg{ width:18px; height:18px; }
  #mobile-menu-17 .social-icons .icon-linkedin  svg{ width:14px; height:14px; }
  
  /* Panels standardmäßig zu */
  /* Alles zu */
  #mobile-menu-17 .cd-accordion-menu li > ul,
  #mobile-menu-17 .cd-accordion-menu li > .submenu,
  #mobile-menu-17 .cd-accordion-menu li > .submenu > ul{
    display:none;
  }

  /* Auf, wenn .is-open am LI hängt (direktes UL oder UL in .submenu) */
  #mobile-menu-17 .cd-accordion-menu li.is-open > ul,
  #mobile-menu-17 .cd-accordion-menu li.is-open > .submenu,
  #mobile-menu-17 .cd-accordion-menu li.is-open > .submenu > ul{
    display:block;
  }
}

/* Footer */
/* --- Footer: 4-Spalten-Grid fix --- */
#footer-content{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 30px;
  margin-right: 4%;
  margin-left: 4%;
}
#footer-content .footer-column{
	width: 96%;
}

/* Clearfix-Pseudo-Elemente AUS, sonst belegen sie Grid-Plätze */
#footer-content::before,
#footer-content::after,
#footer-content > .footer-column::before,
#footer-content > .footer-column::after{
  content: none !important;
  display: none !important;
}

/* Robustheit: keine unerwarteten Außenabstände der Spalten */
#footer-content > .footer-column{
  margin: 0 !important;
  min-width: 0;                 /* verhindert Überlauf bei langen Inhalten */
}

/* Medien braven – verhindert, dass Bilder Spalten sprengen */
#footer-content img{
  max-width: 100%;
  height: auto;
}

/* Responsive Breakpoints (optional) */
@media (max-width: 1024px){
  #footer-content{
    grid-template-columns: repeat(2, minmax(0, 1fr)); /* 2 Spalten */
  }
}
@media (max-width: 600px){
  #footer-content{
    grid-template-columns: 1fr; /* 1 Spalte */
  }
}