/* ============================================================
   EVAG Deutschland – customize.css
   Barrierefreiheits-Ergänzungen, die der CTO Theme-Designer
   nicht abdeckt. Farben, Schriftgrößen, Zeilenhöhen und der
   aktive Menü-Indikator (Menus > Active Style 5) werden im
   Theme-Designer gepflegt.
   Bearbeitung: Backend > Dateien > cto_layout/css > customize.css (Quelltext)
   Stand: 2026-09-14 (Brandl IT)
   ============================================================ */

/* ---------- Hauptmenü ---------- */
/* Etwas kräftigere Schrift für bessere Lesbarkeit */
.header .mainmenu ul.level_1 > li > a {
  font-weight: 500;
}
/* Hover und Tastaturfokus bekommen dieselbe Unterstreichung wie der aktive Punkt (Active Style 5) */
.header .mainmenu ul.level_1 > li > a > span {
  padding-bottom: 8px;
  border-bottom: 1px solid transparent;
}
.header .mainmenu ul.level_1 > li > a:hover > span,
.header .mainmenu ul.level_1 > li > a:focus-visible > span {
  border-bottom-color: currentColor;
}
/* Sichtbarer Fokusrahmen für Tastaturnutzer (WCAG 2.4.7) */
.mainmenu a:focus-visible {
  outline: 2px solid #3E4247;
  outline-offset: 2px;
}


/* ---------- Hauptmenü: immer einzeilig ---------- */
/* Menüpunkte nie intern umbrechen („Produkte Shop“), und zwischen 1025 und 1199 px
   (Desktop-Menü aktiv, wenig Platz neben dem Logo) Schrift und Abstände leicht reduzieren */
.header .mainmenu ul.level_1 > li > a {
  white-space: nowrap;
}
@media only screen and (min-width: 1025px) and (max-width: 1199px) {
  .header .mainmenu ul.level_1 > li > a {
    font-size: 16px;
  }
  .header .mainmenu ul.level_1 > li {
    margin: 0 9px;
  }
}

/* Sticky-Header (beim Scrollen eingeblendete Kopie des Headers): deckend weiß statt transparent, damit der Text über Inhalten lesbar bleibt */
.header.cloned .inside,
#stickyheader .header .inside {
  background: #FFFFFF;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .12);
}
/* Logo im Sticky-Header: Theme skaliert es auf 170 px Breite und schneidet es bei 70 px Höhe ab → an der Höhe ausrichten */
.header.cloned .logo a {
  background-size: auto 100% !important;
  background-position: left center !important;
}
/* Menüfarben im Sticky-Header wie im normalen Header */
.header.cloned .mainmenu ul.level_1 > li > a {
  color: #3E4247;
}
.header.cloned .mainmenu ul.level_1 > li > a.active,
.header.cloned .mainmenu ul.level_1 > li > a.trail,
.header.cloned .mainmenu ul.level_1 > li > a:hover {
  color: #000000;
}

/* ---------- Dropdown ---------- */
/* Lange Einträge umbrechen statt abschneiden, Breite an Inhalt anpassen */
.header .mainmenu ul.level_1 ul.level_2 {
  width: max-content;
  max-width: min(720px, calc(100vw - 40px)); /* längster Seminar-Eintrag ~580 px + Innenabstand */
}
/* Touch-Ziel mindestens 44px, Hover-/Fokusfläche hell hinterlegt */
.header .mainmenu ul.level_1 ul.level_2 li a {
  padding: 10px 24px;
  min-height: 44px;
  white-space: normal;
}
.header .mainmenu ul.level_1 ul.level_2 li a:hover,
.header .mainmenu ul.level_1 ul.level_2 li a:focus-visible {
  background: #F6E7A6; /* gleicher Ton wie der Seitenhintergrund (Boxed) */
  color: #000;
}
/* Die letzten Menüpunkte öffnen ihr Dropdown nach links, damit nichts aus dem Viewport läuft */
.header .mainmenu ul.level_1 > li:nth-last-child(-n+4) ul.level_2 {
  left: auto;
  right: 0;
}

/* ---------- Startseiten-Slider (Artikel 7: Swiper + Headerbild-Elemente) ---------- */
/* Der Header liegt absolut über dem Slider-Bereich (172 px) – Höhe und Innenabstand so wählen,
   dass der Text im sichtbaren Bereich zentriert ist. Der weiße Inhaltsbereich überlappt unten um 50 px. */
#slider .ce_headerimage {
  height: 560px !important;
  box-sizing: border-box;
  padding-top: 0; /* Header Classic v1 steht im Fluss – keine Überlappung mehr */
}
#slider .ce_headerimage .ce_headline {
  font-size: 54px;
  line-height: 1.15;
  hyphens: manual;
  text-shadow: 0 2px 12px rgba(0,0,0,.5);
}
#slider .ce_headerimage .subline {
  font-size: 22px;
  text-shadow: 0 1px 8px rgba(0,0,0,.5);
}
/* Punkte-Navigation über die Überlappung des Inhaltsbereichs heben */
#slider .swiper-pagination {
  bottom: 64px;
}
@media only screen and (max-width: 1024px) {
  #slider .ce_headerimage {
    height: 460px !important;
    padding-top: 0;
  }
  #slider .ce_headerimage .ce_headline {
    font-size: 40px;
  }
}
@media only screen and (max-width: 767px) {
  #slider .ce_headerimage {
    height: 400px !important;
    padding-top: 0;
  }
  #slider .ce_headerimage .ce_headline {
    font-size: 28px;
  }
  #slider .ce_headerimage .subline {
    font-size: 16px;
  }
}

/* ---------- Kopfbilder der Unterseiten (wie Startseite unter dem Header) ---------- */
/* Der Header liegt absolut über dem Seitenanfang. Auf der Startseite füllt der Slider diesen Bereich;
   auf den Unterseiten wird der leere Slider-Platzhalter ausgeblendet und das Kopfbild (erstes Element im
   Hauptartikel) beginnt am Seitenanfang. Der Header (Topbar 70 px + Menü 102 px) wird als Innenabstand
   reserviert, damit Titel und Unterzeile im sichtbaren Bildteil zentriert bleiben. */
body:not(.home) #slider.empty {
  display: none;
}
body:not(.home) #wrapper {
  margin-top: 0; /* Theme: -50px Überlappung mit dem Slider – hier nicht nötig */
}
body:not(.home) #main .mod_article:first-child > .container {
  padding-top: 0;
}
body:not(.home) #main .mod_article:first-child > .container > .ce_headerimage:first-child {
  padding-top: 0; /* Header Classic v1 steht im Fluss */
  height: 450px;
  box-sizing: border-box;
}
/* Kopfbild über die volle Breite der Seitenbox (Boxed Style 1, 1280 px) – wie der Slider der Startseite */
body:not(.home) #main .mod_article:first-child > .container > .ce_headerimage:first-child {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  width: min(100vw, 1280px);
  max-width: none;
}
@media only screen and (max-width: 1024px) {
  body:not(.home) #main .mod_article:first-child > .container > .ce_headerimage:first-child {
    padding-top: 0;
    height: 420px;
  }
}
@media only screen and (max-width: 767px) {
  body:not(.home) #main .mod_article:first-child > .container > .ce_headerimage:first-child {
    padding-top: 0; /* mobil steht der Header im Fluss über dem Inhalt */
    height: 320px;
    left: auto;
    transform: none;
    width: calc(100% + 40px); /* Container-Innenabstand 2 × 20 px überbrücken (ohne 100vw, da Scrollbar) */
    margin-left: -20px; /* etwas höher als Theme-Standard (250), damit Titel + Unterzeile Platz haben */
  }
}

/* ---------- Mobil / Tablet ---------- */
/* ---------- Seminartermine auf der Startseite (Modul 687 Eventliste, Kalender 1) ---------- */
#main .mod_eventlist_v2 .event .title a {
  color: #2B2E33;
  font-weight: 600;
}
#main .mod_eventlist_v2 .event .title a:hover,
#main .mod_eventlist_v2 .event .title a:focus-visible {
  text-decoration: underline;
}
/* Eventlisten (Startseite Modul 695, Seminarseiten 696–698; Template event_list_v4): helle Karten mit gelbem Kalender-Icon, ohne Ortsspalte */
.mod_eventlist_v4 .event {
  position: relative;
  background: #F6F8FA !important;
  border: 1px solid #E4E4E4;
  border-radius: 6px;
  margin-bottom: 12px;
  padding: 0 0 0 56px !important;
  color: #2B2E33 !important;
  align-items: center;
  flex-wrap: nowrap;
  overflow: hidden;
}
.mod_eventlist_v4 .event > i.fa {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 56px !important;
  height: auto !important;
  display: flex; align-items: center; justify-content: center;
  background: #E8C547 !important;
  color: #2B2E33 !important;
  font-size: 22px; line-height: 1;
}
.mod_eventlist_v4 .event > i.fa-location-arrow::before {
  content: "\f073"; /* Kalender-Symbol statt Ortspfeil */
}
.mod_eventlist_v4 .event .date {
  flex: 0 0 180px; width: 180px;
  padding: 18px 20px !important;
  font-size: 17px; font-weight: 700; color: #3E4247 !important;
  white-space: nowrap;
}
.mod_eventlist_v4 .event .title {
  flex: 1 1 auto; width: auto;
  padding: 18px 20px !important;
}
.mod_eventlist_v4 .event .title a {
  color: #2B2E33 !important;
  font-weight: 600;
}
.mod_eventlist_v4 .event .title a:hover,
.mod_eventlist_v4 .event .title a:focus-visible {
  text-decoration: underline;
}
.mod_eventlist_v4 .event .location {
  display: none;
}
.mod_eventlist_v4 .event .time {
  flex: 0 0 170px; width: 170px;
  padding: 18px 20px !important;
  text-align: right; color: #5A5E63 !important;
  white-space: nowrap;
}
@media only screen and (max-width: 767px) {
  .mod_eventlist_v4 .event { flex-wrap: wrap; }
  .mod_eventlist_v4 .event .date,
  .mod_eventlist_v4 .event .time { width: auto; flex: 1 1 50%; padding: 12px 16px 0 !important; text-align: left; }
  .mod_eventlist_v4 .event .title { flex: 1 1 100%; padding: 6px 16px 14px !important; }
}
#main .mod_eventlist_v2 .event .date {
  font-weight: 600;
  color: #3E4247;
}

/* Footer (Artikel 21): Adresse | Kontaktformular (Formular 2) | EVAG-Logo (Bild-Element 268) – Logo begrenzen */
#footer .ce_image img {
  max-width: min(240px, 100%); height: auto;
  height: auto;
}
@media only screen and (max-width: 767px) {
  #footer .ce_image img {
    max-width: 180px;
  }
}
/* Impressum/Datenschutz (eRecht24-Elemente): die im Rechtstext enthaltene H1 ausblenden – die Seitenüberschrift steht im Kopfbild */
#main .ce_er24_legal_text > h1:first-child {
  display: none;
}
/* Buttons in Akzentfarbe: dunkle Schrift statt Weiß (Kontrast auf Gold) */
.submit, button.submit, input.submit, .ce_hyperlink a.link-default, a.link-default, a.link-small, a.link-medium, a.link-large, .swiper-pagination-bullet-active {
  color: #2B2E33 !important;
}

/* ---------- Seminarseiten: Fakten-Kacheln, Termine, Aufklapp-Details, Anmelde-Box (Textelemente 215/216/217) ---------- */
.sem-intro figure { float: right; margin: 0 0 16px 24px; max-width: 335px; }
.sem-intro::after { content: ""; display: block; clear: both; }
.sem-lead { font-size: 19px; line-height: 1.55; font-weight: 500; color: #2B2E33; margin: 0 0 18px; padding: 4px 0 4px 18px; border-left: 4px solid #E8C547; }
.sem-hint { font-size: 14px; color: #5A5E63; }
.sem-list { margin: 6px 0 0 22px; padding: 0; }
.sem-list li { margin: 4px 0; }
.sem-legal { margin: 8px 0 0 22px; padding: 0; }
.sem-legal li { margin: 0 0 10px; }
.sem-notice { background: #F6F8FA; border: 1px solid #E4E4E4; border-top: 4px solid #E8C547; border-radius: 6px; padding: 24px 28px 8px; }
.sem-notice .sem-lead { margin-top: 14px; }
.sem-badge { display: inline-block; background: #3E4247; color: #fff; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 5px 12px; border-radius: 4px; }
.sem-alt { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 8px; }
.sem-alt-card { display: flex; flex-direction: column; gap: 8px; background: #fff; border: 1px solid #E4E4E4; border-radius: 6px; padding: 20px 22px; color: #2B2E33 !important; text-decoration: none !important; transition: box-shadow .2s, border-color .2s; }
.sem-alt-card:hover { border-color: #E8C547; box-shadow: 0 4px 16px rgba(0,0,0,.08); }
.sem-alt-label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: #5A5E63; }
.sem-alt-card strong { font-size: 16px; line-height: 1.4; }
.sem-alt-card p { margin: 0; font-size: 14px; line-height: 1.55; color: #5A5E63; }
.sem-alt-meta { font-size: 13px; font-weight: 600; color: #2B2E33; padding-top: 8px; border-top: 1px solid #E4E4E4; margin-top: auto; }
.sem-alt-card .sem-alt-meta + .sem-alt-more { margin-top: 0; }
.sem-alt-3 { margin-bottom: 8px; }
.sem-alt-3 .sem-alt-card { padding: 22px 24px; }
.sem-alt-more { margin-top: auto; font-weight: 600; color: #3E4247; }
.sem-alt-more::after { content: " \2192"; }
@media (max-width: 900px) { .sem-alt { grid-template-columns: 1fr; } }
#main ul.sem-check { list-style: none; margin: 0 0 8px; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px 28px; }
#main ul.sem-check li { list-style: none; margin: 0; position: relative; padding-left: 32px; font-weight: 500; line-height: 1.5; }
.sem-check li::before { content: ""; position: absolute; left: 0; top: 3px; width: 20px; height: 20px; border-radius: 50%; background: #E8C547; }
.sem-check li::after { content: "\2713"; position: absolute; left: 5px; top: 2px; font-size: 13px; font-weight: 700; color: #2B2E33; }
.sem-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 0 0 8px; }
.sem-cards .sem-fact-body p { font-size: 14px; }
.sem-cards > .sem-fact:last-child:nth-child(3n+1) { grid-column: 1 / -1; }
@media (max-width: 1024px) { .sem-cards > .sem-fact:last-child:nth-child(3n+1) { grid-column: auto; } .sem-cards > .sem-fact:last-child:nth-child(2n+1) { grid-column: 1 / -1; } }
.sem-alt-4 { grid-template-columns: repeat(4, 1fr); }
.sem-badge-gold { background: #E8C547; color: #2B2E33; margin-left: 8px; padding: 2px 8px; font-size: 11px; vertical-align: middle; }
.sem-profile { display: flex; align-items: center; gap: 28px; background: #F6F8FA; border: 1px solid #E4E4E4; border-top: 4px solid #E8C547; border-radius: 6px; padding: 24px 28px; }
.sem-profile-photo { width: 140px; height: 140px; border-radius: 50%; object-fit: cover; flex: 0 0 140px; }
.sem-profile-text { flex: 1; }
.sem-profile-text strong { display: block; font-size: 22px; margin: 4px 0 8px; color: #2B2E33; }
.sem-profile-text p { margin: 0; }
.sem-profile-logo { width: 110px; height: auto; flex: 0 0 110px; }
@media (max-width: 1024px) { .sem-cards, .sem-alt-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px) { #main ul.sem-check, .sem-cards, .sem-alt-4 { grid-template-columns: 1fr; } #main ul.sem-check li { min-width: 0; overflow-wrap: anywhere; } .sem-profile { flex-direction: column; text-align: center; } }
/* Produkte Shop – Produktkarten */
.shop-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; margin: 0 0 28px; }
.shop-card { display: flex; flex-direction: column; background: #fff; border: 1px solid #E4E4E4; border-radius: 6px; overflow: hidden; }
.shop-media { display: flex; align-items: center; justify-content: center; min-height: 190px; padding: 20px; background: #F6F8FA; border-bottom: 1px solid #E4E4E4; }
.shop-media img { max-height: 160px; width: auto; max-width: 100%; object-fit: contain; margin: 0; }
.shop-body { flex: 1; padding: 18px 20px 4px; font-size: 15px; }
.shop-body > p:first-child > strong:first-child, .shop-body > strong:first-child { font-size: 17px; line-height: 1.35; color: #2B2E33; }
.shop-body > p:first-child { margin-bottom: 10px; }
.shop-body .sem-badge { margin-bottom: 10px; }
.shop-foot { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; flex-wrap: wrap; padding: 12px 20px 18px; border-top: 1px dashed #E4E4E4; }
.shop-price { font-size: 14px; color: #5A5E63; }
.shop-price p { margin: 0 0 4px; }
.shop-price strong { color: #2B2E33; }
.shop-btn, #main a.shop-btn { display: inline-block; background: #3E4247; color: #fff !important; padding: 9px 16px; border-radius: 4px; font-weight: 600; font-size: 14px; text-decoration: none !important; white-space: nowrap; }
#main a.shop-btn:hover { background: #E8C547; color: #2B2E33 !important; }
.shop-card-na .shop-media { opacity: .45; }
.shop-card-wide { grid-column: 1 / -1; }
.shop-card-wide .shop-body { padding-top: 22px; }
@media (max-width: 767px) { .shop-grid { grid-template-columns: 1fr; } .shop-media { min-height: 150px; } .shop-media img { max-height: 130px; } }
.sem-facts + .sem-notice, .sem-facts + .sem-cta { margin-top: 28px; }
#footer .ce_icon_text a:empty, #footer .ce_icon_text .text > a { display: none; }
/* Accessibility-Widget: Sprachumschalter (href="#") ausblenden, Doppel-Zoom (html+body) korrigieren */
#accessibility_widget .item:has(> .label > a[href="#"]) { display: none; }
body.acc_fontsize_1, body.acc_fontsize_2, body.acc_fontsize_3, body.acc_fontsize_4, body.acc_fontsize_5 { zoom: 1; }
/* Privacy Opt-In: Theme-Platzhaltertext in der Detailansicht ausblenden (Template mod_privacy_default nicht editierbar) */
.mod_privacy_optin .privacy_help > div:first-child, .mod_privacy_optin a.privacy_help_link { display: none; }
h1.err-h1 { font-size: 34px; margin: 48px 0 20px; }
@media (max-width: 767px) { h1.err-h1 { font-size: 27px; margin-top: 28px; } }
/* Bottom-Leiste: Links umbrechen lassen (Links stehen ohne Leerzeichen hintereinander) */
#bottom .inside .right { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px 18px; }
#bottom .inside .right a { margin-left: 0; }
@media (max-width: 767px) { #bottom .inside .left, #bottom .inside .right { float: none; width: 100%; text-align: center; } #bottom .inside .right { justify-content: center; gap: 6px 16px; margin-top: 8px; } #bottom .inside .left { line-height: 1.6; } #bottom .inside { padding-bottom: 70px; } }
/* Mobilmenü-Beschriftung „Menu“ → „Menü“ (Text kommt aus dem Theme-Template) */
.mmenu_trigger .label { font-size: 0; }
.mmenu_trigger .label::after { content: "Menü"; font-size: 16px; }
/* Footer: EVAG-Logo in der 3. Spalte vertikal und horizontal zentrieren (Desktop) */
@media (min-width: 768px) { #footer .column:has(.ce_image) { display: flex; align-items: center; justify-content: center; } #footer .column:has(.ce_image) > .attributes, #footer .column:has(.ce_image) .ce_image { width: 100%; } }
/* Kontaktformular: Datenschutz-Häkchen schlicht statt Theme-Button-Legende */
form fieldset.checkbox_container.datenschutz { border: 0; padding: 0; margin: 0 0 22px; }
form fieldset.checkbox_container.datenschutz legend { background: none; color: inherit; padding: 0; border-radius: 0; font-weight: 600; float: none; margin: 0 0 6px; width: auto; white-space: nowrap; }
form fieldset.checkbox_container.datenschutz legend .invisible { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
form fieldset.checkbox_container.datenschutz legend .mandatory { color: #C00; display: inline; margin: 0 0 0 2px; }
form fieldset.checkbox_container.datenschutz legend br { display: none; }
form fieldset.checkbox_container.datenschutz > span { display: flex; align-items: flex-start; gap: 10px; }
form fieldset.checkbox_container.datenschutz input.checkbox { margin-top: 5px; flex: 0 0 auto; }
form fieldset.checkbox_container.datenschutz label { font-size: 15px; line-height: 1.5; }
#footer form fieldset.checkbox_container.datenschutz label a { color: #fff; text-decoration: underline; }
/* Topbar auch mobil anzeigen (E-Mail + Telefon zentriert in einer Zeile) */
@media (max-width: 767px) {
  #top { display: block !important; padding: 0; height: auto !important; }
  #top .inside, #top .column { height: auto !important; }
  #top .inside { padding-left: 8px; padding-right: 8px; }
  body.viewport_mobile #top .topbar_teaser, body.viewport_mobile #top .topbar_mail { display: flex !important; }
  #top .inside.topbar .autogrid_row { display: flex !important; align-items: stretch; margin: 0; }
  #top .inside.topbar .column { width: 100% !important; max-width: none !important; flex: 1 1 auto; float: none; padding: 0; }
  #top .inside.topbar .column.col_7_m { display: none; }
  #top .inside.topbar .attributes { display: flex !important; justify-content: space-around; align-items: flex-start; height: auto !important; }
  /* Kacheln: Icon oben, darunter E-Mail-Adresse bzw. Telefonnummer, ganze Kachel antippbar */
  #top .topbar_mail, #top .topbar_teaser { display: flex !important; flex-direction: column; align-items: center; justify-content: flex-start; position: relative; margin: 0; padding: 7px 6px 6px; min-width: 64px; max-width: 50%; line-height: 1.25; font-size: 13px; white-space: normal; text-align: center; height: auto !important; }
  #top .topbar_mail .icon, #top .topbar_teaser .icon { display: block; margin: 0 0 4px; padding: 0; width: auto; }
  #top .topbar_mail .icon i, #top .topbar_teaser .icon i { font-size: 18px; line-height: 1; }
  #top .topbar_mail .text, #top .topbar_teaser .text { margin: 0; padding: 0; }
  #top .topbar_mail .text p, #top .topbar_teaser .text p { font-size: 13px; line-height: 1.25; margin: 0; padding: 0; overflow-wrap: anywhere; }
  #top .topbar_mail a, #top .topbar_teaser a { font-size: 13px; line-height: 1.25; text-decoration: none; }
  #top .topbar_mail a::after, #top .topbar_teaser a::after { content: ""; position: absolute; inset: 0; }
}
@media (max-width: 399px) { #top .topbar_mail .text p, #top .topbar_teaser .text p, #top .topbar_mail a, #top .topbar_teaser a { font-size: 12px; } }

/* Kopfbild-Überschriften: lange Wörter (z. B. Sachverständigendienstleistungen) auf Tablet/Mobil umbrechen */
@media (max-width: 1024px) { .ce_headerimage .ce_headline, .ce_headerimage .content { max-width: 100%; overflow-wrap: anywhere; hyphens: auto; -webkit-hyphens: auto; } }

/* Startseiten-Karten: Überschriften sind h2 (SEO-Gliederung), Optik wie zuvor h3 */
#main h2.home-card-h { font-size: 1.87rem; line-height: 1.3; font-weight: 700; margin: 0 0 25px; }

/* Footer-Überschriften sind h2 (Gliederung ohne Sprung), Optik wie zuvor h4 */
#footer .ce_headline, #footer h2.ce_headline { font-size: 24px; font-weight: 700; line-height: 1.3; margin: 0 0 20px; }

/* Unterabschnitts-Überschriften (Kontaktseite): h2 für die Gliederung, Optik wie zuvor h4 */
#main .autogrid_row .ce_form > h2, #main .autogrid_row .ce_text > h2 { font-size: 24px; line-height: 1.3; font-weight: 700; margin: 0 0 25px; }
.sem-h { font-size: 24px; margin: 36px 0 14px; }
.sem-facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin: 28px 0 8px; }
.sem-fact { background: #F6F8FA; border: 1px solid #E4E4E4; border-top: 4px solid #E8C547; border-radius: 6px; padding: 14px 16px; }
.sem-fact-label { display: block; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #5A5E63; margin-bottom: 6px; }
.sem-fact-body p { margin: 0; font-size: 15px; line-height: 1.5; color: #2B2E33; }
.mod_eventlist_v4 .empty { background: #F6F8FA; border: 1px dashed #DEDEDE; border-radius: 6px; padding: 16px 18px; color: #5A5E63; font-size: 15px; }
.sem-note { font-size: 14px; color: #5A5E63; margin-top: 4px; }
.sem-accordion { margin: 0 0 8px; }
.sem-acc { border: 1px solid #E4E4E4; border-radius: 6px; background: #fff; margin-bottom: 10px; overflow: hidden; }
.sem-acc summary { list-style: none; cursor: pointer; padding: 14px 52px 14px 18px; font-weight: 600; font-size: 17px; color: #2B2E33; position: relative; background: #F6F8FA; }
.sem-acc summary::-webkit-details-marker { display: none; }
.sem-acc summary::after { content: ""; position: absolute; right: 20px; top: 50%; width: 10px; height: 10px; border-right: 2px solid #3E4247; border-bottom: 2px solid #3E4247; transform: translateY(-70%) rotate(45deg); transition: transform .2s; }
.sem-acc[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.sem-acc[open] summary { border-bottom: 1px solid #E4E4E4; }
.sem-acc summary:hover { background: #F6E7A6; }
.sem-acc summary:focus-visible { outline: 2px solid #E8C547; outline-offset: -2px; }
.sem-acc-body { padding: 16px 18px 6px; }
.sem-acc-body ul { margin: 0 0 10px; }
.sem-cta { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin: 28px 0 8px; padding: 20px 22px; background: #F6E7A6; border-radius: 6px; }
.sem-cta-text { color: #2B2E33; line-height: 1.5; }
.sem-cta-link a { display: inline-block; background: #3E4247; color: #fff !important; font-weight: 600; padding: 12px 22px; border-radius: 4px; text-decoration: none; white-space: nowrap; }
.sem-cta-link a:hover, .sem-cta-link a:focus-visible { background: #2B2E33; }
@media only screen and (max-width: 1024px) { .sem-facts { grid-template-columns: repeat(2, 1fr); } }
@media only screen and (max-width: 600px) { .sem-facts { grid-template-columns: 1fr; } .sem-intro figure { float: none; margin: 0 0 16px; } }

/* Footer-Überschriften nicht silbentrennen („Nehmen Sie Kon-takt auf“) */
#footer h1, #footer h2, #footer h3 {
  hyphens: manual;
}

/* Shop-Tabellen (3 Spalten, 11,7 px Schrift) auf Smartphones untereinander stapeln; Bilder nie breiter als der Viewport */
#main img {
  max-width: 100%;
  height: auto;
}
@media only screen and (max-width: 767px) {
  #main table, #main tbody, #main tr, #main th, #main td {
    display: block;
    width: 100% !important;
    box-sizing: border-box;
  }
  #main td, #main th {
    font-size: 15px;
    line-height: 1.5;
    padding: 4px 0;
  }
  #main tr {
    padding: 12px 0;
    border-bottom: 1px solid #E4E4E4;
  }
  #main td img {
    max-width: 180px;
  }
}

/* ---------- Barrierefreiheits-Widget (Trigger-Button) ---------- */
/* Desktop: Theme-Standard (80 px, mit Tastenkürzel) */
/* Tablet/Smartphone: nur Icon, 48 px, unten rechts oberhalb des „Nach oben“-Buttons */
@media only screen and (max-width: 1024px) {
  .accessibility_widget_trigger {
    top: auto;
    bottom: 110px;
    right: 0;
    width: 48px;
    min-width: 48px;
    height: 48px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(0,0,0,.25);
  }
  .accessibility_widget_trigger i {
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    background-size: 32px auto;
    background-position: center;
  }
  .accessibility_widget_trigger .shortcut {
    display: none;
  }
}

/* ---------- Mobilmenü ---------- */
#mmenu .mod_navigation a {
  min-height: 48px;
  line-height: 1.4;
}
#mmenu .mod_navigation a.active,
#mmenu .mod_navigation a.trail {
  box-shadow: inset 4px 0 0 #E8C547;
}

/* ---------- Cookie-Banner ---------- */
/* Dunkler Text auf den gelben Buttons (Kontrast) */
.mod_privacy_optin .privacy_buttons .submit.all,
.mod_privacy_optin .privacy_buttons .submit.tech {
  color: #2B2E33;
}

/* ---------- Bottom-Leiste (Copyright / Rechtslinks) ---------- */
/* Theme-CSS setzt #bottom .inside auf 40 % Weiß (3,8:1) und überschreibt den Designer-Wert */
#bottom .inside,
#bottom .inside a {
  color: #DEDEDE;
}
#bottom .inside a:hover,
#bottom .inside a:focus-visible {
  color: #FFFFFF;
  text-decoration: underline;
}
#bottom .inside a:focus-visible {
  outline: 2px solid #E8C547;
  outline-offset: 2px;
}

/* ---------- Bildnachweise (Seite 39, Artikel 71, Element 241) – aufklappbare Kacheln wie auf brandl-it.gmbh ---------- */
.bildnachweise { text-align: left; hyphens: auto; }
.bildnachweise h3 { margin: 28px 0 12px; }
.bildnachweise .bn-item { border: 1px solid #E4E4E4; border-radius: 6px; margin: 0 0 8px; padding: 0 18px; background: #FAFAFA; transition: border-color .15s, background-color .15s; }
.bildnachweise .bn-item:hover { border-color: #DEDEDE; background: #F3F5F7; }
.bildnachweise .bn-item[open] { background: #fff; border-color: #DEDEDE; }
.bildnachweise .bn-head { cursor: pointer; padding: 10px 28px 10px 0; font-weight: 700; list-style: none; position: relative; text-align: left; word-break: break-word; color: #3E4247; }
.bildnachweise .bn-head::-webkit-details-marker { display: none; }
.bildnachweise .bn-head::marker { content: ""; }
.bildnachweise .bn-head::after { content: "+"; position: absolute; right: 4px; top: 50%; transform: translateY(-50%); font-weight: 400; font-size: 1.15em; line-height: 1; color: #777; }
.bildnachweise .bn-item[open] > .bn-head::after { content: "–"; }
.bildnachweise .bn-head:focus-visible { outline: 2px solid #3E4247; outline-offset: 2px; border-radius: 3px; }
.bildnachweise .bn-ctx { font-weight: 400; color: #777; }
.bildnachweise .bn-body { padding: 2px 0 12px; text-align: left; }
.bildnachweise .bn-body p { margin: 6px 0; }
.bildnachweise mark { background: #F6E7A6; padding: 0 4px; }
.bildnachweise .bn-quellen { margin-top: 24px; padding-top: 14px; border-top: 1px solid #E4E4E4; color: #555; }

/* ===== Kopfzeile gespiegelt: Menue links, Logo rechts (ab 1025 px) =====
   Unterhalb 1025 px greift das Burgermenue des Themes - dort bleibt alles wie bisher. */
@media (min-width: 1025px) {
  #header .inside > .logo,
  #stickyheader .inside > .logo { float: right !important; }
  #header .inside > nav.mainmenu,
  #stickyheader .inside > nav.mainmenu { float: left !important; }
  /* Das Theme schiebt breite Untermenues nach links, damit sie rechts nicht herausragen.
     Mit dem Menue am linken Rand liefen sie dadurch links aus dem Bild - deshalb linksbuendig. */
  #header nav.mainmenu ul.level_2,
  #stickyheader nav.mainmenu ul.level_2 { left: 0 !important; right: auto !important; }
}