@charset "UTF-8";#hero .uk-first-column h1,
h1,
h2,
h3,
h4,
h5,
.uk-h1,
.uk-h2,
.uk-h3,
.uk-h4,
.uk-button,
.uk-panel,
.el-content {
  -moz-hyphens: auto;
  -o-hyphens: auto;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
}
.bg-remove-top {
  padding-top: 0px !important;
}
.bg-sticky-top {
  margin-top: 50px;
}


.bg-copyright {
    opacity: 50%;
    font-size: 0.6em;
    padding-right: 5px;
    margin-top: -65px;
}
@media (max-width: 1200px) {
  .bg-copyright {
    margin-top: -50px;
  }
}
/* *************************************************************************** */
/* * Header */
/* *************************************************************************** */

/* Logo im Desktop-Header immer mittig, unabhängig davon, ob das jeweilige
   Header-Modul einer Seite einen eigenen zentrierenden Flex-Wrapper um
   den Logo-Link mitbringt oder nicht (Wunsch 2026.08.20). */
.tm-headerbar-top .uk-container {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Mobile-Menü-Toggle (Hamburger-Icon): größere Tippfläche (min. 48x48px,
   gängige Touch-Target-Empfehlung) und größeres Icon statt des knappen
   UIkit-Standards (Wunsch 2026.08.20). */
.tm-header-mobile .uk-navbar-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 68px;
  min-height: 68px;
  padding: 8px;
}
.tm-header-mobile .uk-navbar-toggle svg {
  width: 32px;
  height: 32px;
}

/* "Kurse & Termine"-Menüpunkt in der Hauptnavigation (item-210): der
   Menüpunkt-Link ist laut Theme-CSS (.uk-navbar-nav>li>a) eine 80px hohe
   Flexbox mit align-items:center - Icon und der (bei schmaler Spalte
   zweizeilig umbrechende) Linktext werden dadurch mittig in dieser 80px-Box
   zentriert, wodurch das Icon auf der Grenze zwischen beiden Textzeilen
   sitzt statt an der ersten. align-self:flex-start bzw. baseline zogen das
   Icon stattdessen ganz an den oberen Rand der 80px-Box (auf Höhe der
   Active-Unterstreichung ::before, top:-1px) - zu weit. Deshalb hier ein
   fester Versatz nach oben statt eines Alignment-Keywords, kalibriert auf
   ca. eine halbe Zeilenhöhe der Linktexts. Nur unterhalb 1135px nötig, da
   der Linktext erst dort auf zwei Zeilen umbricht - bei breiteren Screens
   (einzeilig) blieb das Icon bewusst unverändert zentriert
   (Wunsch 2026.08.22). */
@media (max-width: 1150px) {
  .tm-header .uk-navbar-nav .item-210 > a > .uk-icon {
    transform: translateY(-15px);
  }
}

/* Vor dem ersten Menüpunkt ("Über uns") und nach dem letzten ("Kontakt")
   entsteht im Desktop-Navbar ein ca. 10px breiter Leerraum am Rand.
   Wird am jeweils äußeren Menüpunkt kompensiert, ohne den Abstand
   zwischen den übrigen Menüpunkten zu verändern (Wunsch 2026.08.20). */
.tm-header .uk-navbar-nav > li:first-child {
  margin-left: -10px;
}
.tm-header .uk-navbar-nav > li:last-child {
  margin-right: -10px;
}

/* Header-Module wie "Header Kurse & Termine" (bg-header) verschachteln im
   Yootheme Builder zwei uk-container ineinander (Builder-Seiteninhalt, kein
   Repo-File - daher hier statt im Markup korrigiert). UIkit addiert das
   horizontale Padding beider Container, wodurch Überschrift/Untertitel
   gegenüber der Hauptnavigation nach rechts verschoben wirken (Meldung
   2026.08.20, Seite /kurse-termine). Der innere Container bekommt deshalb
   kein eigenes Padding mehr. */
@media (min-width: 1265px) {
  .bg-header .uk-container, 
  .bg-header .uk-container .uk-container {
    padding-left: 0;
    padding-right: 0;
  }
}


.bg-header .uk-container {
    padding-right: 0px!important;
}

.bg-megamenu {
  padding-left: 0;
  padding-right: 0;
    padding-bottom: 30px;
}


/* *************************************************************************** */
/* Dialog / Dialog Mobile */
/* *************************************************************************** */

.bg-dialog-mobil {
    padding: 10px;
    padding-top: 30px;
    padding-bottom: 50px;
}
.bg-dialog-mobil .uk-nav {
  font-size: 1.6em;
    line-height: 1.3em;
    }
.bg-dialog-mobil .uk-nav .uk-nav-sub {
  font-size: 0.7em;
padding-top: 10px;
    padding-bottom: 10px;
        line-height: 1.4em;
font-family: "Source Sans 3"
    }
.bg-dialog-mobil .uk-nav .uk-nav-sub li {
    padding-bottom: 15px;
}
.uk-navbar-toggle:hover{
    color: #B0506A;
}
.uk-navbar-toggle {
    color: #2B2426;
}
#tm-dialog-mobile {
    background-color: #FFFFFFCC;
    
}

/* *************************************************************************** */
/* Main */
/* *************************************************************************** */

/* *************************************************************************** */
/* Termine Grid */
/* *************************************************************************** */

/* Kurse/FAQ */
.uk-accordion-default .uk-accordion-title {
  letter-spacing: 0.05em;
  font-size: 24px;
  /* font-weight: 400 !important; */
}
.uk-accordion-default .uk-accordion-title .uk-accordion-icon svg {
  color: #000000;
  width: 20px !important;
  height: 20px !important;
}

.uk-accordion-default.bg-main.uk-accordion > .el-item {
  margin-top: 20px;
  background-color: #F2E8E0;  
  padding: 20px 30px;
  border-radius: 10px !important;
}
.uk-accordion-default.bg-main.uk-accordion .uk-accordion-title {
    letter-spacing: 0.025em;
  font-size: 24px;
  font-weight: 400 !important;
}
.uk-accordion-default.bg-main.uk-accordion
  .uk-accordion-title
  .uk-accordion-icon
  svg {
  color: #000000;
  width: 20px !important;
  height: 20px !important;
}
.uk-accordion-default.bg-main.uk-accordion .el-content {
  color: #000000!important;
}
.uk-accordion-default.bg-main.uk-accordion .el-content {
  padding-left: 40px; 
  border-left: 2px solid #9B4F6A; 
}
.uk-accordion-default.bg-main.uk-accordion
  .uk-accordion-content
  > .uk-margin-top {
  width: 100%;
  text-align: right !important;
}
@media (max-width: 840px) {
  .uk-accordion-default .uk-accordion-title {
    font-size: 22px !important;
    font-weight: 500 !important;
  }
  .uk-accordion-default.bg-main.uk-accordion .el-content {
    padding-left: 20px;
  }
}

/* Kachelfarbe der Kurskarten (Wunsch 2026.09.18: heller Mauve-Ton statt
   Bordeaux, dunkle statt weißer Schrift; zwei Nachbesserungen noch am
   selben Tag: 1. "Panel sollen wie [Referenzbild 'Wir sind für dich da']
   aussehen" - helles Rosa statt des zuvor gewählten #B08D9C; 2. "Das Rosa
   ist zu dunkel - bitte das Rosa von 'Alle' verwenden" - #E18D9FA6 ist der
   vom Nutzer per DevTools ermittelte Farbwert der aktiven "Alle"-Pill der
   Kategorie-Filterleiste, inkl. deren Transparenz (Alphakanal A6 ≈ 65%);
   bewusst als 8-stelliger Hex-Wert mit Alpha übernommen statt in einen
   deckenden Ton umgerechnet, damit die Kachelfarbe exakt der "Alle"-Pille
   entspricht, unabhängig vom jeweiligen Seitenhintergrund dahinter).
   --bg-kurse-akzent greift den dunklen Mauve-Ton des Buttons "Kontakt &
   Anfahrt" im Referenzbild auf (bereits an mehreren Stellen im Theme als
   #9B4F6A verwendet) für den primären Termin-Button. Zentral als Custom
   Properties definiert statt an --uk-primary (YOOtheme-Customizer) zu
   hängen, damit die Kurskacheln unabhängig von anderen Primary-Elementen
   der Seite bleiben und sich an einer Stelle ändern lassen. */
.bg_kurse-element {
  --bg-kurse-bg: #E18D9FA6;
  --bg-kurse-color: #2B2426;
  --bg-kurse-akzent: #9B4F6A;
}

/* Kurskategorie über dem Kurstitel, wie auf der alten Seite (Wunsch
   2026.08.21) - nur Text ohne Pill-Hintergrund (Korrektur 2026.08.21).
   Farbe seit 2026.09.18 die Kachel-Textfarbe statt fest Weiß. */
.bg_kurse-element .el-kategorie {
  display: inline-block;
  width: auto;
  height: auto;
  line-height: 1.5;
  font-size: 0.65em;
  font-weight: bold;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 0;
  margin-bottom: 0;
  background-color: transparent;
  color: var(--bg-kurse-color);
}
.bg_kurse-element .el-kategorie + .el-title {
  margin-top: 5px;
}

/* Optionale Überschrift oberhalb der Kurse (Wunsch 2026.08.25): 30px
   Abstand zum Grid darunter */
.bg_kurse-element .el-ueberschrift {
  padding-bottom: 20px;
}

/* Verlinkter Kurstitel (Wunsch 2026.08.25): uk-link-reset hält die Farbe der
   Karte, der Unterstrich signalisiert die Klickbarkeit beim Hover */
.bg_kurse-element .el-title-link:hover {
  text-decoration: underline;
}

/* Panels gleich hoch (Wunsch 2026.08.22) und Termine-Akkordion bzw.
   "Aktuell keine Termine" unten ausgerichtet: Karte als Flex-Spalte über
   die volle (von uk-grid-match vorgegebene) Höhe, der jeweils letzte
   Block wird per margin-top: auto nach unten geschoben. Dadurch wächst
   auch automatisch der Abstand zur Beschreibung, wenn diese eingeblendet
   ist, statt eine feste Höhe für die Lücke zu erzwingen. */
.bg_kurse-element .el-kurs {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.bg_kurse-element .el-kurs > .el-termine-akkordion,
.bg_kurse-element .el-kurs > .el-keine-termine {
  margin-top: auto;
}

/* Trennlinie zwischen Kurstitel und Kursbeschreibung (Wunsch
   2026.08.21) */
.bg_kurse-element .el-titel-trenner {
  border: 0;
  border-top: 1px solid #c5cbc9;
}
.bg_kurse-element .el-kurs.uk-card-primary .el-titel-trenner {
  border-top-color: rgba(43, 36, 38, 0.35);
}

/* Filter "Beschreibung anzeigen/ausblenden" als Pill neben "Nur mit
   Terminen" (Wunsch 2026.08.21) - uk-toggle schaltet UIkits echte
   "uk-active"-Klasse auf Pill UND .bg_kurse-element synchron um, dadurch
   übernimmt UIkits eigenes Pill-Styling automatisch den Farbwechsel
   (primary = eingeblendet, hell = ausgeblendet) ohne eigenes CSS für die
   Pill selbst - seit 2026.09.18 durch den Outline-Stil der Ansicht-Leiste
   (.bg_kurse-ansicht) leicht überschrieben, das Umschaltverhalten bleibt
   aber dasselbe. .el-titel-trenner blendet sich mit aus (Wunsch
   2026.09.18: "sollte die Linie ausgeblendet werden - nicht nur die
   Beschreibung"), sonst bliebe bei ausgeblendeter Beschreibung eine
   Trennlinie ohne erkennbaren Zweck zwischen Titel und Termine-Akkordion
   stehen. */
.bg_kurse-element:not(.uk-active) .el-beschreibung,
.bg_kurse-element:not(.uk-active) .el-titel-trenner {
  display: none;
}

/* Beide Pill-Schalter zeigen als Text die Aktion an, die ein Klick
   auslösen würde (Wunsch 2026.08.21: "je nach Zustand ... den Text
   ändern") - daher zwei Textvarianten je Pill, per CSS anhand von
   uk-active umgeschaltet, statt den Text per JS umzuschreiben. */
.el-beschreibung-filter .el-text-aus,
.el-termine-toggle .el-text-aus {
  display: none;
}
.el-beschreibung-filter.uk-active .el-text-an,
.el-termine-toggle.uk-active .el-text-an {
  display: none;
}
.el-beschreibung-filter.uk-active .el-text-aus,
.el-termine-toggle.uk-active .el-text-aus {
  display: inline;
}

/* Zweite Filterleiste ("Ansicht": Nur mit Terminen / Auch ohne Termine /
   Beschreibung / Termine) optisch von der Kategorie-Filterleiste darüber
   abgesetzt (Wunsch 2026.09.18: "sieht genauso aus ... irreführend") -
   Outline-Pills statt gefüllter Pills, aktiver Zustand in der
   Kurs-Kachelfarbe statt UIkits Standard-Primary. */
.bg_kurse-ansicht-label {
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 4px;
}
.bg_kurse-ansicht > * > :first-child {
  background-color: transparent;
  border: 1px solid #2B2426;
  color: #2B2426;
}
.bg_kurse-ansicht > .uk-active > :first-child {
  background-color: var(--bg-kurse-bg, #E18D9FA6);
  border-color: var(--bg-kurse-bg, #E18D9FA6);
  color: var(--bg-kurse-color, #2B2426);
}
/* Hover-Zustand (Wunsch 2026.09.18: "Die hover Farbe sollte der Rosaton
   sein #E18D9FA6") in derselben Kachelfarbe wie der aktive Zustand, damit
   sich beim Hovern bereits die Zielfarbe andeutet - Rand ebenfalls auf
   diesen Ton statt auf #2B2426, damit Rand und Füllung bei jedem Pill mit
   diesem Rosaton übereinstimmen ("den Rand ebenfalls auf #E18D9FA6
   setzen"). */
.bg_kurse-ansicht > * > :first-child:hover {
  background-color: var(--bg-kurse-bg, #E18D9FA6);
  border-color: var(--bg-kurse-bg, #E18D9FA6);
  color: var(--bg-kurse-color, #2B2426);
}

/* Kurse: Termine-Akkordion (bg_kurse), Rahmenfarbe wie im alten
   Seblod-Template (tpl_seb_list/bauchgefuehl.kurse.inc.php) */
.bg_kurse-element .el-termine-titel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid var(--bg-kurse-color, #2B2426)!important;
  padding: 2px 15px;
  font-size: 1.2em;
  text-decoration: none;
}
.bg_kurse-element .el-termine-titel .uk-accordion-icon svg {
  width: 20px !important;
  height: 20px !important;
}

/* Abstand zwischen Termine-Akkordion-Box und dem ersten Ampel-Pill
   (Wunsch 2026.08.21) - UIkits Standardabstand des Accordion-Contents
   reichte hier nicht */
.bg_kurse-element .el-termine-akkordion .uk-accordion-content {
  margin-top: 15px;
}

/* Wochentag/Uhrzeit, Kursleiterin, Kosten wirkten zu klein (Wunsch
   2026.08.21); line-height etwas enger, da die Zeilen sonst zu weit
   auseinanderstehen (Wunsch 2026.08.21) */
.bg_kurse-element .el-termin .uk-text-meta {
  font-size: 0.9rem;
  line-height: 1.1;
}

/* Kurse: einzelner Termin innerhalb des Akkordions - Zeilenumbruch je
   Feld (Wunsch 2026.08.19: Reihenfolge wie im alten Seblod-Layout) und
   Schriftgröße werden seit 2026.08.19 direkt im Template über echte
   UIkit-Klassen (uk-display-block, uk-margin-small-bottom, die
   Text-Stil-Auswahl aus den Element-Einstellungen) gesetzt, nicht mehr
   über eigene CSS-Regeln (Wunsch: "wo immer möglich die Klassen
   verwenden - keine eigenen Style-Definitionen") */
.bg_kurse-element .el-termin-button {
  background-color: #9B4F6A;
  border-color: #9B4F6A;
  border-radius: 50px;
  color: #ffffff;
  border: 1px solid #ffffff;
  font-weight: 700;
}
.bg_kurse-element .el-termin-button:hover {
  background-color: transparent;
  border-color: #9B4F6A;
  color: #9B4F6A;
}

/* *************************************************************************** */
/* Kurstermine (bg_kurse) - Teilnehmerzahl (kt-teilnehmerzahl) */
/* *************************************************************************** */
/* Icon + "X Teilnehmer" in einer Zeile, direkt unterhalb der Ampel
   (Wunsch 2026.08.22: "Teilnehmerzahl unterhalb der Ampel platzieren").
   uk-display-block/uk-margin-small-bottom kommen bereits über
   $metaKlasse aus dem Template, hier nur das Flex-Layout für Icon +
   Text sowie der Abstand zur darüberliegenden Ampel. */
.el-termin-teilnehmer {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
}
.el-termin-teilnehmer [uk-icon] {
  flex-shrink: 0;
}

/* *************************************************************************** */
/* Kurstermine (bg_kurse) - Termindetails (kt-termindetails-sonstiges) */
/* *************************************************************************** */
/* Sekundärer Button oberhalb des Buchungs-Buttons (Wunsch 2026.08.22).
   UIkit färbt uk-button-default auf der Primary-Karte bereits selbst um
   (halbtransparentes Weiß, weiße Schrift) - hier nur die Pillenform und
   der weiße Rahmen, damit der Button optisch zum bestehenden
   .el-termin-button passt, aber klar sekundär bleibt. */
.bg_kurse-element .el-termin-details-button {
  border-radius: 50px;
  font-weight: 700;
}
.bg_kurse-element .el-kurs.uk-card-primary .el-termin-details-button {
  background-color: transparent;
  border: 1px solid var(--bg-kurse-color, #2B2426);
  color: var(--bg-kurse-color, #2B2426);
}
.bg_kurse-element .el-kurs.uk-card-primary .el-termin-details-button:hover {
  background-color: var(--bg-kurse-color, #2B2426);
  border-color: var(--bg-kurse-color, #2B2426);
  color: #ffffff;
}

/* Das Modal selbst wird von UIkit beim Öffnen an <body> verschoben
   (Modal-Mixin, container: true). Regeln dafür deshalb bewusst NICHT
   unter .bg_kurse-element schachteln - sie würden dann nicht mehr
   greifen. Aktuell ist kein eigenes Modal-CSS nötig: außerhalb der Karte
   gilt das helle Standard-Theme. Die Klasse .el-termin-modal steht im
   Markup als dokumentierter Hook für spätere Anpassungen bereit. */

/* *************************************************************************** */
/* Kurstermine (bg_kurse) - Hinweisfeld (kt-hinweis) */
/* *************************************************************************** */
/* Hinweistext als normaler Fließtext (wie Kosten), aber optisch
   hervorgehoben durch Info-Icon + Titel "Hinweis" und einen linken
   Balken, statt der vorherigen reinen Rottext-Darstellung (Wunsch
   2026.08.22: "hervorgehoben, weil es ein Hinweisfeld ist ... Info Icon
   und 'Hinweis' als Title ... links ... ein Balken"). Balkenfarbe
   Textfarbe #2B2426 - seit 2026.09.18 auf der Kurskarte identisch zur
   Kachel-Textfarbe (--bg-kurse-color), die eigene Regel dafür bleibt als
   Hook bestehen, falls sich beide Farben mal wieder unterscheiden. */
.el-termin-hinweis {
  border-left: 3px solid #2B2426;
  padding-left: 12px;
}
.el-termin-hinweis-titel {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.8em;
  margin-bottom: 2px;
}
.bg_kurse-element .el-kurs.uk-card-primary .el-termin-hinweis {
  border-left-color: var(--bg-kurse-color, #2B2426);
}

/* *************************************************************************** */
/* Kurstermine (bg_kurse) - Ampel-Badges für kt-status */
/* *************************************************************************** */
/* Ampel-Badge deutlicher hervorheben (Wunsch 2026.08.19: "frei oder
   belegt bitte klarer"), eigene Zeile über dem Termin-Datum. Bewusst
   nicht raumfüllend (Wunsch 2026.08.19: "nicht über die gesamte
   Breite", an der alten Seblod-Vorlage orientiert) und mit expliziter
   Höhe/Zeilenhöhe statt UIkits festem 22px-Badge, da der Text bei der
   größeren Schrift sonst oben/unten abgeschnitten wurde */
.el-termin-status {
  display: inline-block;
  width: auto;
  height: auto;
  line-height: 1.5;
  font-size: 0.8em;
  font-weight: bold;
  padding: 4px 14px;
  text-transform: uppercase;
}
/* Volltonfarben statt rgba (Wunsch 2026.08.21: "zu düster" - mit
   Transparenz auf der dunklen Primary-Kartenfarbe wirkten alle Ampel-
   farben schmutzig-gemischt, v.a. das Grün). Dunkle Schrift statt weiß,
   da helle Ampelfarben mit weißer Schrift den WCAG-Kontrast (mind.
   4,5:1) nicht zuverlässig einhalten würden - #2B2426 erreicht auf allen
   vier Farben > 7:1 */
.uk-badge.frei {
  background-color: #81C784;
  color: #2B2426;
}
.uk-badge.wenigefrei {
  background-color: #FFB74D;
  color: #2B2426;
}
.uk-badge.ausgebucht {
  background-color: #E57373;
  color: #2B2426;
}
.uk-badge.anfrage {
  background-color: #BDBDBD;
  color: #2B2426;
}

/* *****************************************************************************
* Kurse (bg_kurse): Karten in eigener Kachelfarbe (Wunsch 2026.09.18: heller
* Mauve-Ton --bg-kurse-bg mit dunkler Schrift --bg-kurse-color statt Bordeaux
* mit weißer Schrift, siehe Variablen-Definition oben bei .bg_kurse-element).
* Vorherige Fassung (Wunsch 2026.08.21) nutzte --uk-primary aus dem
* YOOtheme-Customizer mit weißer Schrift; rückgängig zu machen, indem in
* builder/bg_kurse/templates/template.php einfach "uk-card-primary" wieder
* durch "uk-card-default" ersetzt wird - dieser Block greift nur, solange
* die Klasse gesetzt ist, und muss dafür nicht entfernt werden.
* **************************************************************************** */
.bg_kurse-element .el-kurs.uk-card-primary {
  background-color: var(--bg-kurse-bg, #E18D9FA6);
  color: var(--bg-kurse-color, #2B2426);
}
.bg_kurse-element .el-kurs.uk-card-primary .el-title,
.bg_kurse-element .el-kurs.uk-card-primary .uk-text-meta,
.bg_kurse-element .el-kurs.uk-card-primary .el-termine-titel,
.bg_kurse-element .el-kurs.uk-card-primary .el-beschreibung,
.bg_kurse-element .el-kurs.uk-card-primary .el-termin-datum,
.bg_kurse-element .el-kurs.uk-card-primary .el-keine-termine,
.bg_kurse-element .el-kurs.uk-card-primary a:not([class]) {
  color: var(--bg-kurse-color, #2B2426);
}
.bg_kurse-element .el-kurs.uk-card-primary .el-termine-titel {
  border-color: rgba(43, 36, 38, 0.35);
}
.bg_kurse-element .el-kurs.uk-card-primary .el-termine-titel .uk-accordion-icon svg {
  color: var(--bg-kurse-color, #2B2426);
}
.bg_kurse-element .el-kurs.uk-card-primary .el-termin-button {
  background-color: var(--bg-kurse-akzent, #9B4F6A);
  border-color: var(--bg-kurse-akzent, #9B4F6A);
  color: #ffffff;
}
.bg_kurse-element .el-kurs.uk-card-primary .el-termin-button:hover {
  background-color: transparent;
  border-color: var(--bg-kurse-akzent, #9B4F6A);
  color: var(--bg-kurse-akzent, #9B4F6A);
}

/* UIkits eigenes uk-card-primary setzt Badges standardmäßig auf
   weiß/primary zurück (Kontrast-Reset des Card-Components) und
   überschreibt damit die Ampelfarben - hier bewusst mit höherer
   Spezifität erneut gesetzt, da die Ampelfarben (frei/wenige frei/
   ausgebucht/anfrage) erhalten bleiben müssen (Wunsch 2026.08.21) */
.bg_kurse-element .el-kurs.uk-card-primary .uk-badge.frei {
  background-color: #81C784;
  color: #2B2426;
}
.bg_kurse-element .el-kurs.uk-card-primary .uk-badge.wenigefrei {
  background-color: #FFB74D;
  color: #2B2426;
}
.bg_kurse-element .el-kurs.uk-card-primary .uk-badge.ausgebucht {
  background-color: #E57373;
  color: #2B2426;
}
.bg_kurse-element .el-kurs.uk-card-primary .uk-badge.anfrage {
  background-color: #BDBDBD;
  color: #2B2426;
}

/* Trennlinie zwischen den einzelnen Terminen war auf dem ursprünglich
   dunklen Kartenhintergrund kaum sichtbar (Wunsch 2026.08.21: "deutlich
   weiß"); seit 2026.09.18 dunkel auf dem jetzt helleren Kartenhintergrund */
.bg_kurse-element .el-kurs.uk-card-primary .el-termine.uk-list-divider > li:nth-child(n+2) {
  border-top-color: rgba(43, 36, 38, 0.35);
}

/* Abstand zur Trennlinie zwischen den Terminen war zu eng (Wunsch
   2026.08.21: "ca. 10px mehr nach oben und nach unten") - erhöht
   UIkits Standardabstand (20px) auf 30px ober- und unterhalb */
.bg_kurse-element .el-termine.uk-list-divider > .el-termin:not(:first-child) {
  margin-top: 30px;
  padding-top: 30px;
}

/* "Aktuell keine Termine" als Ghost-Button (Wunsch 2026.08.21) - echte
   UIkit-Button-Varianten kennen keinen transparenten "Ghost"-Stil,
   daher hier mit eigener CSS-Regel umgesetzt */
.bg_kurse-element .el-keine-termine {
  display: inline-block;
  padding: 8px 24px;
  border: 1px solid var(--uk-primary, #B0516A);
  border-radius: 500px;
  font-size: 0.9rem;
  color: var(--uk-primary, #B0516A);
  background: transparent;
}
.bg_kurse-element .el-kurs.uk-card-primary .el-keine-termine {
  border-color: var(--bg-kurse-color, #2B2426);
  color: var(--bg-kurse-color, #2B2426);
}

/* *****************************************************************************
* Listen ohne Klasse
* **************************************************************************** */

.bg-main ul {
  margin-left: 10px;
  padding-left: 0;
}
.bg-main ul li:not([class]) {
  list-style: none;
  position: relative;
  padding-left: 50px;
  margin-bottom: 15px;
}

.bg-main ul:not(.uk-pagination) li:not([class])::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  margin-top: 3px;
  width: 30px;
  height: 30px; 
  background-color: #7E5570;
  border-radius: 50%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpolyline points='9 4 15 10 9 16' fill='none' stroke='%23ffffff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cline x1='15' y1='10' x2='2' y2='10' fill='none' stroke='%23ffffff' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 65%;
}
/* Pagination */
.bg-main ul.uk-pagination {
  margin-left: 0;
  padding-left: 0;
}
.bg-main ul.uk-pagination li {
  display: inline-block;
  padding-left: 5px;
  margin-bottom: 0px;
}
.bg-main ul.uk-pagination li::before {
  background-color: #9B4F6A;
  border-radius: 50%;
  background-image: none;
}

/* *****************************************************************************
* uk-list-circle: identisch zum Standard-Bullet der klassenlosen Listen
* (.bg-main ul li:not([class])::before) - Wunsch 2026.08.22: "die Listen
* 'Kreise' bei den Hebammen/Team ... identisch mit den Standard-Listen".
* Eigener Marker statt nativem ::marker, da dieser bislang über den
* linken Rand der Trennlinien (uk-list-divider) hinausragte.
*
* Bewusst per Flexbox (Marker + Text nebeneinander) statt wie beim
* klassenlosen Standard-Bullet per position:absolute: uk-list-circle wird
* mit uk-list-divider kombiniert, dessen padding-top ab dem 2. Eintrag
* die Textzeile nach unten schiebt - ein absolut positionierter Marker
* (top:0) bliebe dabei über dem eigenen padding-top hängen und säße zu
* hoch (Wunsch 2026.08.22: "Position korrigieren"). Mit Flexbox rutschen
* Marker und Text als gemeinsame Zeile mit, bleiben bei mehrzeiligem Text
* oben ausgerichtet und die Trennlinie bleibt dabei unangetastet. */
.uk-list-circle > li {
  display: flex;
  align-items: flex-start;
  list-style: none;
}
.uk-list-circle > li::before {
  content: "";
  flex: none;
  width: 30px;
  height: 30px;
  margin-top: 4px;
  margin-right: 20px;
  background-color: #7E5570;
  border-radius: 50%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpolyline points='9 4 15 10 9 16' fill='none' stroke='%23ffffff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cline x1='15' y1='10' x2='2' y2='10' fill='none' stroke='%23ffffff' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 65%;
}

/* *************************************************************************** */
/* Footer  */
/* *************************************************************************** */

/* *************************************************************************** */
/* BA Forms  */
/* *************************************************************************** */


/* Balbooa-Kontaktformular: Radio- und Checkbox-Felder sollen im
   unausgewählten Zustand weiß erscheinen statt dem Plugin-Standard
   (halbtransparentes Grau, rgba(214,214,214,.4)). Überschrieben wird
   bewusst nur der :not(:checked)-Zustand per Geschwister-Selektor, damit
   der markierte/ausgewählte Zustand (Theme-Farbe, Ring-Effekt) unberührt
   bleibt - die :checked-Regeln des Plugins haben ohnehin höhere
   Spezifität (Wunsch 2026.08.20). */
.ba-form-acceptance-field label.ba-form-checkbox input:not(:checked) + span,
.ba-form-field-item .ba-form-checkbox-wrapper label.ba-form-checkbox input:not(:checked) + span {
  background: var(--field-background-color, #ffffff);
}

.ba-form-poll-field .ba-form-checkbox-wrapper .ba-form-radio input[type="radio"]:not(:checked) + span:before,
.ba-cart-row-content .ba-form-radio input[type="radio"]:not(:checked) + span:before,
.ba-form-radio-field .ba-form-checkbox-wrapper .ba-form-radio input[type="radio"]:not(:checked) + span:before {
  background: var(--field-background-color, #ffffff);
}

/* Eingabefelder (Text, E-Mail, Zahl, Passwort, Textarea, Select) bekommen
   bei Fokus einen Mauve-Rahmen (Kontrast auf dem weißen Feld) und einen
   weißen Ring (Kontrast auf dem altrosa Formular-Hintergrund). Ein
   zunächst getesteter halbtransparenter Mauve-Schatten war auf dem
   ähnlich dunklen altrosa Kartenhintergrund praktisch unsichtbar
   (Rückmeldung 2026.08.22: "aktiven Zustände aller Input fields sind
   nicht sichtbar") - Weiß ist hier der einzige Ton der Palette, der auf
   dem Altrosa zuverlässig Kontrast bietet, und passt außerdem zum
   ebenfalls weißen Aktiv-Rahmen der Radios/Checkboxen dieses Formulars. */
.ba-field-container select:focus,
.ba-field-container textarea:focus,
.ba-field-container input[type="text"]:focus,
.ba-field-container input[type="number"]:focus,
.ba-field-container input[type="password"]:focus,
.ba-field-container input[type="email"]:focus {
  border-color: #7E5570 !important;
  box-shadow: 0 0 0 5px #E18D9F;
  outline: none;
}

/* Beschriftung der Radio-Optionen (z. B. "gesetzlich" / "privat" bei
   Krankenkasse) soll wie die übrigen Formular-Labels weiß sein, nicht die
   Plugin-Standardfarbe var(--field-typography-color) (schwarz), die auf
   dem altrosa Kartenhintergrund kaum lesbar ist (Wunsch 2026.08.22). */
.ba-form-radio-field .ba-form-checkbox-wrapper .ba-checkbox-title {
  color: #ffffff !important;
}

/* Ausgewählter Radio-Button: weißer statt (auf dem altrosa Hintergrund
   kaum sichtbarer) altrosafarbener Rahmen im aktiven Zustand (Wunsch
   2026.08.22: "Radios sollten in Aktive Zustand einen weißen Rahmen
   erhalten"). */
.ba-form-radio-field .ba-form-checkbox-wrapper .ba-form-radio input[type="radio"]:checked + span:before {
  border-color: #ffffff !important;
}

/* Angehakte Datenschutz-Checkbox: ebenfalls weißer statt (auf dem
   altrosa Hintergrund kaum sichtbarer) altrosafarbener Rahmen im aktiven
   Zustand, analog zum Radio-Fix oben (Wunsch 2026.08.22: "Datenschutz
   ... soll auch einen Rahmen haben im aktiven Zustand"). */
.ba-form-acceptance-field label.ba-form-checkbox input[type="checkbox"]:checked + span {
  border-color: #ffffff !important;
}

/* Der Absenden-Button liegt innerhalb der uk-card-primary-Karte. Deren
   generische Theme-Regel ".uk-card-primary a { color:#fff }" hat höhere
   Spezifität als das Plugin-eigene ".ba-form-submit-btn { color:
   var(--submit-typography-color) }" und überschreibt es deshalb mit
   Weiß - auf dem weißen Button-Hintergrund unsichtbar (Rückmeldung
   2026.08.22: "Absenden Button hat weiße Schrift ... primary Schrift
   verwenden"). Hier gezielt auf die eigentlich vorgesehene Textfarbe des
   Buttons zurückgesetzt. */
.uk-card-primary .ba-form-submit-btn,
.uk-card-secondary .ba-form-submit-btn {
  color: var(--submit-typography-color, #B0506A) !important;
}
.uk-card-primary .ba-form-submit-btn:hover,
.uk-card-secondary .ba-form-submit-btn:hover {
  color: var(--submit-typography-hover, #B0506A) !important;
}


/* *************************************************************************** */
/* Yootheme Pro Optimization  */
/* *************************************************************************** */

/* Hide return URL textfield */
#uri_base64encoded {
  display: none;
}
/* Editor View: Hide Yootheme Pro Builder button */
.redaktion .btn-primary[href*="p=customizer"] {
  display: none;
}

/* Hide TinyMCE Editor */
.redaktion.hideeditor #editor {
  display: none;
}

/* Editor View: Hide introtext on JCE, TinyMCE or Code Mirror*/
.redaktion.hideintro
  #com-content-form
  #editor
  joomla-editor-codemirror:first-child,
.redaktion.hideintro #com-content-form #editor .wf-editor-container:first-child,
.redaktion.hideintro #com-content-form #editor .js-editor-tinymce:first-child {
  display: none !important;
}

/* Editor View: Hide image panel on TinyMCE or Code Mirror*/
.redaktion.hideimagepanel #com-content-form button[aria-controls="images"] {
  display: none !important;
}

/* Hide Aimy Canonical Tab*/
.redaktion.hideaimy #com-content-form button[aria-controls="attrib-aimy_cncl"] {
  display: none !important;
}

/* Hide Options Tab*/
.redaktion.hideoptions #com-content-form button[aria-controls="options"] {
  display: none !important;
} 

/* Hide Publishing Tab*/
.redaktion.hidepublishing #com-content-form button[aria-controls="publishing"] {
  display: none !important;
}

/* Hide Metadata Tab*/
.redaktion.hidemetadata #com-content-form button[aria-controls="metadata"] {
  display: none !important;
}

/* Hide Language Tab*/
.redaktion.hidelanguage #com-content-form button[aria-controls="language"] {
  display: none !important;
}

/* Hide Inhalt Tab (wenn Titel/Alias per movetitle-Klasse und dem
   zugehörigen JS in js/custom.js in den nächsten Tab verschoben wurden,
   ist der erste Tab "Inhalt" leer und kann komplett ausgeblendet werden;
   Reiter + Inhalt, Wunsch 2026.08.19) */
.redaktion.movetitle #com-content-form button[aria-controls="editor"] {
  display: none !important;
}
.redaktion.movetitle #editor {
  display: none !important;
}

/* Hide Button Kopieren und Speichern */
.redaktion #adminForm button[data-submit-task="article.save2copy"] {
  display: none !important;
}

.redaktion input,
.redaktion select,
.redaktion textarea {
  padding-left: 10px;
  padding-right: 10px;
  border-bottom: none !important;
}
.redaktion .tm-main {
  font-family:
    "Lucida Sans", "Lucida Sans Regular", "Lucida Grande",
    "Lucida Sans Unicode", Geneva, Verdana, sans-serif;
  font-family:
    "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande", "Lucida Sans",
    Arial, sans-serif;
  font-family: "Nunito Sans";
  font-size: 0.8em;
}
.redaktion .tm-main label {
  font-weight: bold;
}

/* Alle Buttons (Speichern, Weiterlesen, Abbrechen, Versionen, etc.) auf
   dieselbe Höhe wie die Eingabefelder/Datum-Picker-Button begrenzen, statt
   der bisherigen, sehr hohen Innenabstände (Wunsch 2026.08.19). */
.redaktion .btn {
  box-sizing: border-box;
  height: 44px;
  padding: 0 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.redaktion .tm-main fieldset {
  background-color: #f1f1f1;
  padding: 10px;
  margin-bottom: 10px;
}

/* Editor View: Hide introtext on TinyMCE or Code Mirror*/
.redaktion #com-content-form > #editor > .control-group:nth-child(2),
.redaktion .js-editor-tinymce:first-child {
  display: none !important;
}

.redaktion .tm-main label {
  font-weight: bold;
}

.redaktion button[aria-controls="publishing"],
.redaktion button[aria-controls="metadata"] {
  display: none !important;
}

.redaktion .tm-main fieldset {
  background-color: #f1f1f1;
  padding: 10px;
  margin-bottom: 10px;
}

/* Input-Felder im shadcn-artigen Stil: dezenter Rahmen statt hartem
   Schwarz, abgerundete Ecken, leichte Tiefe, klarer Fokus-Ring in der
   Markenfarbe (Wunsch 2026.08.19). */
.redaktion .tm-main textarea,
.redaktion .tm-main input,
.redaktion .tm-main select {
  box-sizing: border-box;
  background-color: #ffffff !important;
  border: 1px solid #d4d4d8 !important;
  border-radius: 6px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  padding: 10px 14px;
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}

.redaktion .tm-main input:not([type="checkbox"]):not([type="radio"]),
.redaktion .tm-main select {
  height: 44px !important;
  min-height: 44px !important;
}

/* Native Select-Darstellung (z.B. Safari) schneidet den Text ab, sobald
   Padding + min-height mit dem eingebauten Pfeil-Icon kollidieren.
   Deshalb eigenes, per CSS gezeichnetes Pfeil-Icon statt der nativen
   Optik (Wunsch 2026.08.19). !important + zusätzliche Klasse
   "select.form-select" in der Selektorkette, da die native Darstellung
   trotz vorherigem Fix bestehen blieb - vermutlich weil eine andere Regel
   (z.B. Bootstrap/Yootheme) ohne !important, aber mit gleicher oder
   höherer Spezifität, unsere appearance:none wieder verdrängt hat. */
.redaktion .tm-main select,
.redaktion .tm-main select.form-select {
  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='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2371717a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 14px center !important;
  background-size: 14px !important;
  padding-top: 4px !important;
  padding-bottom: 4px !important;
  padding-right: 38px !important;
  line-height: normal !important;
}

.redaktion .tm-main textarea:focus,
.redaktion .tm-main input:focus,
.redaktion .tm-main select:focus {
  border-color: #9b4f6a !important;
  box-shadow: 0 0 0 3px rgba(155, 79, 106, 0.15);
  outline: none;
}

/* Datepicker-Button (Kalender-Icon) auf dieselbe Höhe wie das
   zugehörige Eingabefeld bringen; der Button hatte von Haus aus mehr
   Innenabstand oben/unten als das Textfeld (Wunsch 2026.08.19). Feste
   Höhe statt min-height und !important, damit die generische
   .redaktion .btn-Regel (padding: 10px 30px) nicht dazwischenfunkt. */
.redaktion .field-calendar .btn {
  box-sizing: border-box !important;
  height: 44px !important;
  min-height: 44px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Subform-Werkzeugleiste (Hinzufügen / Entfernen / Verschieben, Auf-/Ab-
   Sortieren) auf dieselbe Höhe wie Eingabefelder und Datum-Picker-Button
   bringen, statt der überdimensionierten Standard-Button-Innenabstände.
   Dieselben Klassen (.group-add/.group-remove/.group-move/...) werden von
   Joomla sowohl für den "Neuer Eintrag"-Button, die Termine-Werkzeugleiste
   als auch die Werdegang-Tabelle verwendet, ein Selektor reicht daher für
   alle Vorkommen (Wunsch 2026.08.19). */
.redaktion .group-add,
.redaktion .group-remove,
.redaktion .group-move,
.redaktion .group-move-up,
.redaktion .group-move-down {
  box-sizing: border-box !important;
  height: 44px !important;
  min-height: 44px !important;
  padding: 0 16px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Auf-/Ab-Sortieren-Buttons waren bisher farblos (Standard-Grau); jetzt in
   derselben Markenfarbe wie Hinzufügen/Entfernen/Verschieben (Wunsch
   2026.08.19). */
.redaktion .group-move-up,
.redaktion .group-move-down {
  background-color: #e18d9f !important;
  border-color: #e18d9f !important;
  color: #ffffff !important;
}

/* Alias-Feld abdimmen: Redakteure sollen es normalerweise nicht anfassen,
   da es automatisch aus dem Titel erzeugt wird (Wunsch 2026.08.19). Der
   Hinweistext im Label wird per js/custom.js gesetzt. */
.redaktion #jform_alias-lbl,
.redaktion #jform_alias {
  opacity: 0.5;
}

/* Reiter oben als Pills statt schmaler Unterstreichung (Wunsch
   2026.08.19). Selektor nutzt die ARIA-Rollen des joomla-tab Custom
   Elements, da diese unabhängig von internen Klassennamen stabil sind.
   Eventuelle Pseudo-Elemente (z.B. Unterstrich-/Dreieck-Indikator des
   ursprünglichen Tab-Stils) werden entfernt, damit die Pill sauber
   aussieht. */
.redaktion joomla-tab [role="tab"] {
  border: none !important;
  background: transparent !important;
  border-radius: 999px !important;
  padding: 8px 18px !important;
  font-weight: 600;
  color: #3a2e28;
  box-shadow: none !important;
}
.redaktion joomla-tab [role="tab"]::before,
.redaktion joomla-tab [role="tab"]::after {
  display: none !important;
  content: none !important;
}
.redaktion joomla-tab [role="tab"][aria-selected="true"] {
  background-color: #9b4f6a !important;
  color: #ffffff !important;
}
.redaktion joomla-tab [role="tab"]:hover:not([aria-selected="true"]) {
  background-color: #f2e8e0 !important;
}

.redaktion joomla-field-subform {
  display: block;
  padding: 10px;
}

/* Umrandung je einzelnem Subform-Eintrag (z.B. jeder Kurstermin), statt einer
   gemeinsamen Umrandung um alle Einträge. Beschränkt auf die Nicht-Tabellen-
   Subforms (subform-layout), damit die Tabellen-Subforms (z.B. Werdegang)
   unberührt bleiben. */
.redaktion
  .subform-repeatable-wrapper.subform-layout
  .subform-repeatable-group {
  display: block;
  border: 1px solid #000;
  border-radius: 4px;
  padding: 15px;
  margin-bottom: 15px;
}

.redaktion joomla-field-subform input,
.redaktion joomla-field-subform select,
.redaktion joomla-field-subform textarea {
  border: 1px solid #ccc !important;
}

.cf-fileupload,
.cf-fileupload * {
  cursor: auto !important;
}
.cf-fileupload.dz-max-files-reached {
  pointer-events: auto !important;
}

/* Table 9 */
.el-text-5 .filter-content {
  word-wrap: break-word !important;
  line-height: 1.5em;
  text-rendering: optimizeLegibility;
}

.fs-datatable-block.fs-datatable-footer,
.fs-datatable-block.fs-datatable-header {
  border: none;
  padding: 0;
}

/* Hide edit buttons in edit mode */
[id^="module-"] a[href*="task=module.edit"],
[id^="article-"] a[href*="task=article.edit"],
body > div.tm-page > header.tm-header.uk-visible\@l.tm-header-overlay > div.uk-sticky > div > div > nav > div.uk-navbar-right > a,
body a.uk-position-bottom-right.uk-button.uk-button-primary {
    display: none;
}

/* UIkit setzt beim Anzeigen des Tooltips ("Modul bearbeiten") per JS ein
   Inline-style="display: block" - das übersticht eine externe Regel ohne
   !important, weshalb der Tooltip bei jedem Hover wieder auftauchte
   (Meldung 2026.08.20). */
[id^="tip-"] {
    display: none !important;
}


/* *************************************************************************** */
/* Accessibility */
/* SVG individual uploaded via Yootheme !!*/
/* *************************************************************************** */

.djacc-popup .djacc__openbtn--default {
  border: 1px solid #fff !important;
}

.djacc-popup .djacc__openbtn--default,
.djacc-popup .djacc__close,
.djacc-popup .djacc__bar:before {
  background: #9B4F6A !important;
}