#sp-menu, #sp-menu-right {
  border-width:15px 0 0 0;
  border-style:solid;
  border-color:#ffe110;
}

.sp-dropdown {
  width:360px !important;
  border:1px solid #999;
}

/* Style the form - display items horizontally */
.form-container {
  width:100%;
  padding:10px;
  background-color:#f7f7f7;
  border:1px solid rgb(255,225,16);
  margin-bottom:10px;
}

/* 2. Eingabefeld verschönern */
.mod-finder input[type="text"] {
  border-radius: 20px;
  padding: 5px 14px;
  border: 1px solid #ccc;
  font-style: italic;
  max-width: 200px;
  margin-right:10px;
}

#sp-menu, #sp-menu-right {
  border-width:15px 0 0 0;
  border-style:solid;
  border-color:#ffe110;
}

.sp-megamenu-parent { margin:-10px 15px 0 -20px !important; }

td.icon { min-width:150px !important; }

._access-icon { left:auto !important; right:10px !important; }
._access-menu.left { left:auto !important; right:0 !important; }

#sp-header {
  border-bottom: 2px solid #011659 !important;
  padding:0 !important;
}

.sp-megamenu-parent > li > a { color: rgb(0, 0, 0) !important; }
.sp-megamenu-parent { text-transform: none !important; }

tr.stuttgart { background-color:#FED604 !important; }
tr.dresden  { background-color:#F9EEB3 !important; }

.form-inline { display:flex; flex-flow:row wrap; align-items:center; }

.sp-megamenu-parent > li > a,
.sp-megamenu-parent > li > span,
.sp-megamenu-parent .sp-dropdown li.sp-menu-item > a { font-size:15px !important; }

/* Add some margins for each label */
.form-inline label { margin: 5px 10px 5px 0; }

/* Style the input fields */
.form-inline input, .form-inline select {
  vertical-align: middle;
  margin: 5px 15px 5px 0;
  padding: 10px;
  background-color: #fff;
  border: 1px solid #ddd;
  width:200px !important;
}

/* Style the submit button */
.form-inline button {
  padding: 5px 5px;
  background-color: rgb(255,225,16);
  border: 1px solid #ddd;
  color: black;
}
.form-inline button:hover { background-color:#102EFF; color:white }

/* Add responsiveness - display the form controls vertically instead of horizontally on screens that are less than 800px wide */
@media (max-width: 800px) {
  .form-inline input { margin:10px 0; }
  .form-inline { flex-direction:column; align-items:stretch; }
}

.fettkursiv { font-weight:bold; font-style:italic; }
.flex-container { flex:25%; }
.flex-container2 { display:flex; flex-direction:row; flex:25%; }

.lassons-home-slider.sp-slider .sp-slider-content-align-left::after { display:none !important; }

.sppb-sp-slider-title {
  text-shadow:-1px 0 black, 0 1px black, 1px 0 black, 0 -1px black !important;
}

#sp-header .mod-splms-course-categoies>ul>li img { margin-right:10px !important; }
.sp-dropdown-inner { margin-left:-20px; }

#sp-header .mod-splms-course-categoies>ul>li {
  border-width:0 1px 0 0;
  border-style:dotted;
  border-color:#c7c7c7;
}
h2.sp-page-title-heading { -webkit-text-stroke:2px white; color:black !important; }
#chronoform-infos-anfordern { max-width:900px; margin:0 auto; }
#btn_senden { background-color:rgb(255,225,16); color:#3e3e3e; }
#btn_senden::hover { background-color:rgb(16,46,255); color:white; }

#tbl-resp table a { color:black !important; }
#tbl-resp table a.red { color:#B70000 !important; }

h1[itemprop="headline"]::after, h1.sppb-addon-title::after {
  background-color:#ffe110;
  bottom:0; content:""; height:3px; left:0; position:absolute; width:50px;
}
h1[itemprop="headline"], h1.sppb-addon-title {
  border-bottom:1px solid rgba(0,0,0,0.1);
  margin-bottom:20px; margin-top:20px; padding-bottom:10px; position:relative;
}
.article-details .article-header { padding-left:0px !important; max-width:100% !important; }

@media (min-width: 991px) {
  h1[itemprop="headline"] { font-weight:350 !important; font-size:32px !important; }
}

@media (max-width: 990px) {
  .hidden-mobile { /* display:none !important; */ }
  #sp-menu, #sp-menu-right { border-width:0; border-style:none; }
}

/* Responsive Table */
@media only screen and (max-width: 760px),
       (min-device-width:768px) and (max-device-width:1023px) {
  div#tbl-resp table, div#tbl-resp thead, div#tbl-resp tbody, div#tbl-resp th, div#tbl-resp td, div#tbl-resp tr { display:block; }
  div#tbl-resp thead tr { position:absolute; top:-9999px; left:-9999px; }
  div#tbl-resp tr { border:1px solid #ccc; }
  div#tbl-resp td { border:none; border-bottom:1px solid #eee; position:relative; padding-left:5%; }
  div#tbl-resp td:before { position:absolute; top:6px; left:6px; width:45%; padding-right:10px; white-space:nowrap; }
}
@media only screen and (max-width: 768px) {
  ._headerlogos table td { width:100% !important; text-align:center !important; border-top:none !important; }
  .uk-sticky-placeholder nav.uk-active { background:rgba(18,18,18,0.5) !important; }
}
@media only screen and (min-width: 769px) {
  .startseite { height:380px; }
}
@media print {
  .icon-print,._access-icon,#sp-footer,#offcanvas-toggler { display:none !important; }
}

/* ===================================================== */
/* ============== NEUE FIXES: NAVI & LOGO ============== */
/* ===================================================== */

/* Burger-Icon nur mobil */
@media (min-width: 992px) {
  header#sp-header #offcanvas-toggler,
  header#sp-header .offcanvas-toggler { display:none !important; }
}
@media (max-width: 991.98px) {
  header#sp-header #offcanvas-toggler,
  header#sp-header .offcanvas-toggler { display:inline-flex !important; align-items:center; z-index:100 !important; }
}

/* Logo leicht nach links (Desktop) */
@media (min-width: 992px) {
  #sp-menu .sppb-addon-single-image-container,
  #sp-menu .sppb-addon-single-image-container img { margin-left:-20px !important; }
}

/* Navigation-Umbruch später verhindern (Desktop) */
@media (min-width: 992px) {
  .sp-megamenu-parent { white-space:nowrap; }
  .sp-megamenu-parent > li { flex-shrink:0; }
}

/* =======================
   MOBILE HEADER <992px
   Ziel: [Logo] .... [Suche] .... [Burger rechts]
   ======================= */
@media (max-width: 991.98px) {
  /* Inline-Navigation aus, Offcanvas übernimmt */
  #sp-header .sp-megamenu-wrapper { display:none !important; }

  /* Header-Zeile als Flex */
  #sp-header .row { display:flex !important; align-items:center !important; }

  /* Spalten-Inhalt in #sp-menu: Logo + Suche nebeneinander */
  #sp-menu .sp-column {
    display:flex !important;
    align-items:center !important;
    gap:10px;
    width:100%;
    justify-content:flex-start !important;
    padding-right:48px;                 /* Platz für den absolut positionierten Burger */
  }

  /* Logo-Modul links */
  #sp-menu .mod-sppagebuilder { 
    order: 1 !important; 
    display:block !important;
  }

  /* Suchmodul rechts davon, skaliert */
  #sp-menu .mod-finder { 
    order: 2 !important;
    margin-left:auto !important;
    flex:0 1 auto !important;
    width:clamp(180px, 60vw, 320px) !important;
  }
  #sp-menu .mod-finder input[type="text"] { width:100% !important; max-width:none !important; }

  /* Logo-Bild sicher sichtbar rendern */
  #sp-menu .mod-sppagebuilder .sppb-addon-single-image-container { display:block !important; }
  #sp-menu .mod-sppagebuilder .sppb-addon-single-image-container img {
    display:block !important;
    height:auto; max-height:55px;
    opacity:1 !important;
  }
}

/* ===================================================== */
/* ======= FIX: Helix nav-placeholder (Abstand oben) === */
/* ===================================================== */
@media (min-width: 992px) {
  .nav-placeholder { height:0 !important; display:none !important; }
}

/* ===================================================== */
/* === BURGER ICON FEST RECHTS (per absolute pos.) ===== */
/* ===================================================== */
@media (max-width: 991.98px) {
  /* Referenz-Koordinate schaffen */
  header#sp-header { position: relative; }

  /* Burger an rechten Rand pinnen – unabhängig von DOM-Reihenfolge */
  #offcanvas-toggler, .offcanvas-toggler {
    position: absolute !important;
    right: 10px !important;
    top: 50% !important;
    transform: translateY(-50%);
    margin: 0 !important;
    order: 0 !important; /* Order egal, da absolute Position */
    z-index: 101 !important;
  }
}

/* ===================================================== */
/* === LOGO MOBIL LEICHT ÜBER DEN LINKEN RAND RAGEN ==== */
/* ===================================================== */
@media (max-width: 991.98px) {
  #sp-menu .mod-sppagebuilder .sppb-addon-single-image-container,
  #sp-menu .mod-sppagebuilder .sppb-addon-single-image-container img {
    margin-left: -20px !important; /* Logo ca. 20px über den linken Rand hinausragen lassen */
  }
}


@media (min-width: 992px) and (max-width: 1199.98px) {
.sp-megamenu-parent {
    margin: -10px 15px 0 -150px !important;
}
  #sp-menu .sppb-addon-single-image-container,
  #sp-menu .sppb-addon-single-image-container img { margin-top:-10px !important; }
}

/* ===================================================== */
/* === BURGER ICON: etwas Abstand vom rechten Rand ==== */
/* ===================================================== */
@media (max-width: 991.98px) {
  #offcanvas-toggler,
  .offcanvas-toggler {
    right: 20px !important; /* vorher 10px → jetzt 20px Abstand zum rechten Rand */
  }
}

/* ============================================
   🖨️  PRINT STYLES – Fachakademie / Edulif
   ============================================ */
@media print {

  /* ------------------------------
     Grundlayout
     ------------------------------ */
  body {
    background: #fff !important;
    color: #000 !important;
    font-size: 11pt !important;
    line-height: 1.2 !important;
    margin: 0 !important;
  }

  @page {
    margin: 10mm;
  }

  /* ------------------------------
     Unerwünschte Bereiche ausblenden
     ------------------------------ */
  header,
  footer,
  nav,
  #sp-header,
  #sp-menu,
  #sp-footer,
  #offcanvas-toggler,
  .sp-megamenu-wrapper,
  .sp-scroll-top,
  .pagination,
  .offcanvas-menu,
  .sp-contact-info,
  .sp-social,
  .btn,
  .button,
  button,
  input[type="button"],
  input[type="submit"],
  input[type="reset"],
  [role="button"],
  .no-print {
    display: none !important;
    visibility: hidden !important;
  }

  /* ------------------------------
     Kompaktere Abstände
     ------------------------------ */
  .sppb-section,
  .sppb-row,
  .sppb-column,
  .row,
  .col,
  .container,
  .container-fluid,
  .sp-column,
  main,
  article {
    margin: 0 !important;
    padding: 2mm 0 !important;
  }

  .sppb-addon {
    margin-bottom: 3mm !important;
  }

  /* ------------------------------
     Typografie
     ------------------------------ */
  h1, h2, h3, h4, h5, h6 {
    color: #000 !important;
    font-weight: 700 !important;
    margin-top: 0.4em !important;
    margin-bottom: 0.3em !important;
    line-height: 1.1 !important;
    page-break-after: avoid;
    font-size: 22px !important;
  }

  p {
    margin-top: 0.3em !important;
    margin-bottom: 0.5em !important;
  }

  ul, ol {
    margin: 0.3em 0 0.3em 1.2em !important;
    padding: 0 !important;
  }

  li {
    margin-bottom: 0.2em !important;
  }

  /* ------------------------------
     Tabellen
     ------------------------------ */
  table {
    border-collapse: collapse !important;
    width: 100% !important;
    margin: 0.5em 0 !important;
  }

  th, td {
    border: 1px solid #333 !important;
    padding: 3px 5px !important;
    line-height: 1.1 !important;
  }

  /* ------------------------------
     Bilder
     ------------------------------ */
  img {
    max-width: 200px !important;
    height: auto !important;
    display: inline-block !important;
  }

  img.no-print {
    display: none !important;
  }

  /* ------------------------------
     Links (optional: URL anzeigen)
     ------------------------------ */
  a[href]:after {
    content: " (" attr(href) ")";
    font-size: 9pt;
  }

  a[href^="#"]:after,
  a[href^="javascript:"]:after {
    content: "";
  }

  /* ------------------------------
     Seitenumbrüche
     ------------------------------ */
  .page-break {
    page-break-before: always;
  }

  .no-break {
    page-break-inside: avoid;
  }

  /* ------------------------------
     Pfeile „→“ entfernen
     ------------------------------ */
  /* Entfernung erfolgt per JS unten */

  /* ------------------------------
     URL-Kopfzeile (nur auf Seite 1)
     ------------------------------ */
  body::before {
    content: attr(data-print-url);
    display: block;
    text-align: center;
    font-size: 14pt;
    font-weight: bold;
    margin-bottom: 10mm;
  }

  /* Nur auf der ersten Seite */
  @page:first {
    margin-top: 25mm;
  }
}

/* Screen: Header ausblenden */
.print-firstpage-header { display: none; }

/* Print: Header oben auf Seite 1, in Inhaltsfluss */
@media print {

  @page {
    size: A4;           /* optional, hilft beim Layout */
    margin: 10mm;       /* links/rechts je 10 mm = 190 mm Inhaltbreite */
  }

  .print-firstpage-header {
    display: block !important;
    margin: -10mm 0 8mm 0;               /* Abstand zum Folgeinhalt */
    page-break-after: avoid;         /* nicht vom Folgetext trennen */
  }

  .print-firstpage-header img {
    display: block;
    width: 190mm;                    /* exakt Inhaltsbreite = 210mm − 2×10mm */
    max-width: 100%;
    height: auto;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  /* Falls du weiter unten global Abstände/Bilder limitierst, lass das bestehen: */
  img { max-width: 200px !important; height: auto !important; }
  /* …und erlaube dem speziellen Header-Bild, größer zu sein: */
  .print-firstpage-header img { max-width: none !important; }
}

@media print {
  /* Kein Seitenumbruch direkt NACH Überschriften */
  h1, h2, h3, h4, h5, h6,
  .sppb-title-heading,
  .sppb-addon-title,
  .sppb-section-title {
    page-break-after: avoid;          /* älter */
    break-after: avoid-page;          /* moderner */
  }

  /* Und kein Umbruch direkt VOR dem ersten Folge-Block */
  h1 + p, h1 + ul, h1 + ol, h1 + table,
  h2 + p, h2 + ul, h2 + ol, h2 + table,
  h3 + p, h3 + ul, h3 + ol, h3 + table,
  h4 + p, h4 + ul, h4 + ol, h4 + table,
  h5 + p, h5 + ul, h5 + ol, h5 + table,
  h6 + p, h6 + ul, h6 + ol, h6 + table {
    page-break-before: avoid;         /* älter */
    break-before: avoid-page;         /* moderner */
  }

  /* Vermeide unschöne „Ein-Zeilen-Waisen“ im Absatz */
  p { orphans: 3; widows: 3; }
}

@media (max-width: 481px) {
  h1 {
    font-size:25px !important;
    }
   h2 {
    font-size:22px !important;
    }
  i.fa-print {
    display:none;
  }
  #column-wrap-id-1746646860052 {
    display:none;
  }
  #mod-custom162 {
    margin-bottom: 30px;
    margin-top: -30px;
  }
}

/* ============================================
   Dropdown-Hinterlegung bei Hover (zartgelb)
   ============================================ */
#sp-menu .sp-dropdown li > a,
#sp-menu .sp-dropdown li > span {
  display: block;                /* ganze Zeile klick-/hoverbar */
  padding: 8px 14px;             /* gleichmäßiger Innenabstand */
  background: transparent;       /* Standard: transparent */
  transition: background-color 0.15s ease;
}

#sp-menu .sp-dropdown li:hover > a,
#sp-menu .sp-dropdown li:hover > span {
  background-color: rgba(255, 225, 16, 0.2); /* dein Gelb (#ffe110) mit 20 % Deckkraft */
  color: #000 !important;                    /* Text klar lesbar */
}