:root {
    --dorange: #FFB424;
    --hellblau: #EDF5FF;
    --dunkelblau: #2C5669;
    --mblau: #1A6D93;
    --morange: #FFC85E;
    --horange: #FFEEC4;
    --cgreen: #7DE85E;
    --cred: #FF6E6E;
    --wblack:  #1c1b1b;
}

.headerbox .teasermid h2{
color: var(--mblau);
font-size: 1.2rem; 
}

.headerbox .teasermid a {
    text-decoration:none; 
}

.headerbox .teasermid img {
    width: 40px; 
}
.flexinfostop{
    margin-bottom:1rem; 
    margin-top:0.4rem; 
}

.flexinfosfilter, .flexinfostop {
    display: flex; 
    flex-wrap: wrap;
    font-weight: bold;
}

.flexinfosfilter_item {
margin-right: 10px; 
align-items: center;
display:flex; 
font-size: 0.8rem;
}
/*Margin between anbietern and Categore*/
.anbmargin{
    margin-right:6rem
}

button#meinButton,
#meinButton,
.btn.btn-primary {
    color: #ffffff;
}

button#meinButton a,
#meinButton a,
.btn.btn-primary a {
    color: #ffffff !important;
    text-decoration: none; 
}

button#meinButton a:hover,
button#meinButton a:focus,
#meinButton a:hover,
#meinButton a:focus,
.btn.btn-primary a:hover,
.btn.btn-primary a:focus {
    color: #ffffff !important;
    text-decoration: none;
}

/*verlinkung*/ 

.headerbox {
    position: relative;
}

.headerbox .full-link {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    text-decoration: none;
}

.headerbox a {
    position: relative;
    z-index: 2;
    pointer-events: auto; /* Aktiviert Links innerhalb des Containers */
}

.catterm {
    pointer-events: auto; /* Macht den Kategorie-Link klickbar */
}

.facetwp-template .headerbox{

    border-radius: 10px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
    padding: 1rem;
    margin:0rem;
    margin-bottom: 2rem;
    border: 2px;
    border-style: solid;
    border-color: var(--hellblau);
} 
.tax-weiterbildung .h4 {
    font-size:1.1rem; 
}

.headerboxspec .imgfilter {
    max-width: 132px;
}
.headerbox .imgfilter{
    width: 100px;
}
/* Filterspalte als Sticky-Karte: bleibt beim Scrollen durch die Kursliste in
   Reichweite und löst sich am Listenende wieder (vorher stand sie absolut bei
   40rem und scrollte komplett weg). Sie dockt knapp unter der Filterleiste an,
   die oben am Fensterrand klebt.
   Innenscroll ist hier Pflicht, nicht Kosmetik: Preis, Kategorie und Anbieter
   stehen offen, damit man sofort filtern kann — aufgeklappt wird die Karte
   höher als das Fenster, und ohne eigenen Scrollbereich käme man an ihr unteres
   Ende nicht heran, solange sie klebt. */
.aside-container #category-filter-form.filter-sort-form {
    position: sticky;
    top: 84px;
    max-height: calc(100vh - 104px);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    padding: 1.25rem;
    min-width: 340px;
    background: #ffffff;
    border: 1px solid #E2E8F0 !important;
    border-radius: 16px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
}

/* Im Rasterlayout (Filter als zweite Spalte neben dem gesamten Inhalt) schiebt
   der Außenabstand die Karte unter den Kopfbereich — dieselbe Startposition wie
   die frühere Absolutposition, nur eben mit Sticky-Verhalten danach. */
.allcontent > .aside-container #category-filter-form.filter-sort-form {
    margin-top: 40rem;
}


/* Background Image
   top in Pixeln statt in Prozent: die Prozentangabe bezog sich auf das
   Ausgangsviewport, das Bild rutschte dadurch auf flachen Fenstern nach oben
   und der untere Teil des Kopfbereichs stand auf Weiß statt auf dem Bild.
   Bezugsrahmen bleibt bewusst das Ausgangsviewport (kein Vorfahr ist
   positioniert) — daher deckt width:100% die volle Fensterbreite ab, ohne dass
   100vw die Scrollleiste mitzählen würde. */
.category-header-image {
    width: 100%;
    height: 500px;
    background-size: cover;
    background-position: center;
    z-index: -3;
    position: absolute;
    transform: translateX(-50%);
    left: 50%;
    top: 64px;
}

.headerfilter {
    min-height: 296px;
}   
.headerwback {
    --titel-shift: clamp(1.5rem, 6vw, 4rem);
    color: white;
    margin-top: 3rem;
    padding-left: var(--titel-shift);
    display: flex;
    flex-direction: column;
    gap: 1vw;
}

.headerwback .titelheader {
    /* Der breitere Titelblock vermeidet unnötige Umbrüche bei langen
       Kategoriebezeichnungen; der Einzug bleibt dabei berücksichtigt. */
    max-width: min(760px, calc(68% + var(--titel-shift)));
}
.headerwback .titelheader h1,
.titelheader h1 {
    color: white;
    line-height: 1.25;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
}

.headerwback .category-description {
    max-width: min(560px, calc(52% + var(--titel-shift)));
    font-size: 1.05rem;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.98);
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.55);
    margin-top: 0.25rem;
    margin-bottom: 0;
    /* Die Suche soll im sichtbaren Kopfbereich bleiben, auch wenn ein
       Kategorietext aus der Migration sehr lang ist. */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    overflow: hidden;
}
.headerwback .category-description p {
    margin: 0;
}
.headerwback .category-description p + p {
    margin-top: 0.5rem;
}

/* Kopfbereich ohne Kopfbild
   .headerwback und die H1 schreiben weiß, weil der Text sonst auf dem Kopfbild
   stünde. Hat eine Kategorie kein Bild (die Lernapp-Übersicht etwa), stünde
   weiße Schrift auf weißem Grund, und .headerfilter hielte 296px für ein Bild
   frei, das nie kommt. Dieselbe Umkehr wie in der Smartphone-Ansicht weiter
   unten, hier aber an das fehlende Bild gebunden statt an die Fensterbreite. */
.allcontent.no-header-image .headerwback,
.allcontent.no-header-image .titelheader h1,
.allcontent.no-header-image .category-description,
.allcontent.no-header-image #breadcrumbs,
.allcontent.no-header-image #breadcrumbs a {
    color: var(--wblack);
    text-shadow: none;
}
.allcontent.no-header-image .headerwback {
    margin-top: 0.5rem;
}
.allcontent.no-header-image .headerfilter {
    min-height: 0;
}
.allcontent.no-header-image .imgbox {
    display: none;
}
/* Die 7rem unter der Suchzeile schieben den Inhalt sonst unter das 500px hohe
   Kopfbild. Ohne Bild ist das nur eine leere Fläche. */
.allcontent.no-header-image .filter-sectiontop {
    margin-bottom: 1.5rem;
}

.filter-sectiontop {
    margin-top: 2rem;
    margin-bottom: 7rem;
}
.filter-sectiontop.is-solo {
    margin-top: 1.5rem;
    margin-bottom: 2.5rem;
}

/* Themenzugang auf der Präsenz-Übersicht: Die kleine Linkmatrix zeigt sofort,
   in welchen Kategorien tatsächlich Präsenzangebote vorhanden sind. */
.presence-category-nav {
    margin: 2rem 0 2.5rem;
    padding: 1.25rem 1.4rem;
    border: 1px solid #d9e7ef;
    border-radius: 8px;
    background: #fff;
}
.presence-category-heading {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
    color: var(--dunkelblau);
}
.presence-category-heading span {
    font-size: 1.2rem;
    font-weight: 750;
}
.presence-category-heading small {
    color: #64748b;
    font-size: 0.85rem;
    font-weight: 600;
}
.presence-category-links {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.65rem;
}
.presence-category-links a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    min-height: 44px;
    padding: 0.65rem 0.8rem;
    border: 1px solid #e2ebf1;
    border-radius: 6px;
    color: var(--dunkelblau);
    font-size: 0.9rem;
    font-weight: 650;
    text-decoration: none;
}
.presence-category-links a:hover,
.presence-category-links a:focus-visible {
    border-color: var(--mblau);
    background: #f3f9fc;
}
.presence-category-links strong {
    display: grid;
    place-items: center;
    min-width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--hellblau);
    color: var(--dunkelblau);
    font-size: 0.78rem;
}
@media only screen and (max-width: 900px) {
    .presence-category-links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media only screen and (max-width: 560px) {
    .presence-category-nav { margin: 1.25rem 0 1.75rem; padding: 1rem; }
    .presence-category-links { grid-template-columns: 1fr; }
    .titelheader h1 {
        overflow-wrap: anywhere;
    }
}

.facetwp-facet input.facetwp-search{
    width: clamp(100px, 40vw, 400px) !important;
    height:50px; 
    border-radius: 12px; 
  }
  #breadcrumbs > span:nth-child(1) > span:nth-child(1) > a:nth-child(1) {
    color:white; 
  }
.image-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        to right,
        rgba(17, 35, 45, 0.94) 0%,
        rgba(17, 35, 45, 0.84) 42%,
        rgba(17, 35, 45, 0.48) 75%,
        rgba(17, 35, 45, 0.22) 100%
    );
}

/* Off-Canvas-Grundzustand: Flyout ist zu, nur .active schiebt es rein
   (Regel stammt im WP-Original aus dem FacetWP-Flyout-Addon und fehlte hier) */
.facetwp-flyout {
    position: fixed;
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    height: 100dvh;
    overflow: hidden;
    background: #fff;
    z-index: 10000;
    transition: width 0.3s ease;
}
.facetwp-flyout.active {
    width:100%;
}

/* Innenaufbau des Flyouts: fester Kopf, scrollende Facetten, feste Fußzeile
   mit Trefferzahl — so bleibt „Ergebnisse anzeigen" immer erreichbar, egal wie
   lang die Filterliste ist. */
.facetwp-flyout-content {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-width: 280px;
    overflow: hidden;
}
.flyout-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-shrink: 0;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid #E2E8F0;
}
.flyout-head h3 {
    margin: 0 !important;
    font-size: 1.2rem;
    color: var(--dunkelblau);
}
/* padding:0 ist Pflicht — das Theme gibt jedem Button 7.2px/18px Innenabstand,
   damit blieben im 40px-Knopf nur 4px Inhaltsbreite und das Kreuz wurde auf
   2px zusammengedrückt. */
.facetwp-flyout-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    flex-shrink: 0;
    border: 1px solid #E2E8F0;
    border-radius: 50%;
    background: #ffffff;
    color: #475569;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}
.facetwp-flyout-close:hover {
    background: var(--hellblau);
    color: var(--dunkelblau);
}
.facetwp-flyout-close svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}
.flyout-scroll {
    flex: 1;
    overflow-y: auto;
    padding: 1rem 1.25rem;
    -webkit-overflow-scrolling: touch;
}
.flyout-footer {
    display: flex;
    gap: 0.75rem;
    flex-shrink: 0;
    padding: 0.9rem 1.25rem;
    padding-bottom: calc(0.9rem + env(safe-area-inset-bottom));
    border-top: 1px solid #E2E8F0;
    background: #ffffff;
}
.flyout-reset {
    flex: 0 0 auto;
    padding: 0.7rem 1rem;
    border: 1px solid #C7DDEC;
    border-radius: 12px;
    background: #ffffff;
    color: var(--dunkelblau);
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease;
}
.flyout-reset:hover {
    background: var(--hellblau);
}
button.facetwp-flyout-apply {
    flex: 1;
    padding: 0.7rem 1rem;
    border: none;
    border-radius: 12px;
    background: var(--mblau);
    color: #ffffff;
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s ease;
}
button.facetwp-flyout-apply:hover {
    background: var(--dunkelblau);
}
/* Auf schmalen Telefonen passen „Zurücksetzen" und die Handlungsschaltfläche
   sonst nicht nebeneinander, und der Haupttext bricht in zwei Zeilen. */
@media only screen and (max-width: 430px) {
    .flyout-footer {
        gap: 0.5rem;
        padding-left: 0.9rem;
        padding-right: 0.9rem;
    }
    .flyout-reset {
        padding: 0.7rem 0.8rem;
        font-size: 0.85rem;
    }
    button.facetwp-flyout-apply {
        padding: 0.7rem 0.6rem;
        font-size: 0.88rem;
    }
}
/* „Alle Filter"-Button neben der Suche (nur unterhalb von 1280px sichtbar):
   trägt ein Filter-Icon und die Zahl der aktiven Filter im Text. */
button.facetwp-flyout-open {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 8px;
    align-self: stretch;
    padding: 0 1.2rem;
    border: 1px solid #D1E5F0;
    border-radius: 12px;
    background: #ffffff;
    color: var(--dunkelblau);
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s ease;
}
button.facetwp-flyout-open:hover {
    background: var(--hellblau);
}
button.facetwp-flyout-open svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}
.flyout-row {
margin-bottom: 1rem!important;
}
/*Content Bottom*/
section.bottom-content {
  margin-top:2rem; 
  display: flex;
      flex-direction: column;
      align-items: center;
      background-color: var(--hellblau);
      padding: 30px 0px 30px 0px; 
}
.content {
    max-width: 1200px;
}
/* Verlinkungen Kategorie */
.latest-categories-container {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 22px;
    justify-content: center;
    width: min(1820px, 100%);
}

.category-box {
    text-decoration: none;
    display: block; /* Macht das gesamte Element klickbar */
    border-radius: 8px;
    padding: 0;
    min-width: 0;
}

.category-contentlink {
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #dbe5e9;
    background: #fff;
    transition: transform 0.3s, box-shadow 0.3s;
}

.category-image {
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
}

.category-image img {
    object-fit: cover;
    transition: transform 0.3s ease;
}

.category-box:hover .category-contentlink,
.category-box:focus-visible .category-contentlink {
    transform: translateY(-3px);
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
}

.category-box:hover .category-image img,
.category-box:focus-visible .category-image img {
    transform: scale(1.05);
}

.category-contentlink span {
    font-weight: bold;
    color: var(--dunkelblau);
    min-height: 68px;
    padding: 14px 16px;
    width: 100%;
    text-align: center;
    line-height: 1.25;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Bei zehn sichtbaren Kategorien steht die letzte Zweierreihe mittig. */
.category-box:nth-last-child(2):nth-child(4n + 1) {
    grid-column: 2;
}

@media only screen and (max-width: 1280px) {
    .latest-categories-container {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .category-box:nth-last-child(2):nth-child(4n + 1) {
        grid-column: auto;
    }
}

@media only screen and (max-width: 800px) {
    .latest-categories-container {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
    }
}

@media only screen and (max-width: 520px) {
    .latest-categories-container {
        grid-template-columns: 1fr;
    }
}
.bottom-content .category-content h2,.bottom-content .category-content h3,.bottom-content .category-content h4 {
    margin-top: 1.3rem!important;
    margin-bottom: 0.5rem!important;
}
.bottom-content .category-content img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 1.5rem 0;
    border-radius: 8px;
}
section.bottom-verlinkungen {
display: flex;
flex-direction: column;
align-items: center;
padding: 30px;
}

.site-middle-footer-wrap.site-footer-row-container.site-footer-focus-item.site-footer-row-layout-fullwidth.site-footer-row-tablet-layout-default.site-footer-row-mobile-layout-default {
    margin-top: 0px;
}
.bottom-verlinkungen h2 {
    color:var(--dunkelblau); 
    padding: 30px;
}
.bottom-verl-inner {
    max-width: 1600px;
}
/*hover boxen*/ 
.headerbox:hover {
    border-color:var(--dunkelblau)
}
/*kostenlos*/ 
.imkost img {
  margin-top: 2rem;
  margin-left: 0;
  margin-bottom: 2rem;
}

    
/* ===== Filterspalte: Kopf, Akkordeon, Checkboxen, Chips ===== */

/* Kopf der Filterkarte: Titel + Zurücksetzen in einer Zeile, Trefferzahl als
   Live-Feedback darunter. */
.fhead {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding-bottom: 0.9rem;
    border-bottom: 2px solid var(--hellblau);
}
.fhead-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}
.fhead h3 {
    margin: 0;
    font-size: 1.15rem;
    color: var(--dunkelblau);
}
button.facetwp-reset {
    flex-shrink: 0;
    background: none;
    border: none;
    padding: 0.2rem 0;
    color: var(--mblau);
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: underline;
    text-decoration-color: transparent;
    text-underline-offset: 3px;
    transition: color 0.15s ease, text-decoration-color 0.15s ease;
}
button.facetwp-reset:hover {
    color: var(--dunkelblau);
    text-decoration-color: currentColor;
}
.facetwp-facet.facetwp-facet-result_count.facetwp-type-pager {
    margin-bottom: 0;
    font-size: 0.9rem;
    font-weight: 600;
    color: #64748B;
}

/* Akkordeon-Abschnitte (Disclosure-Muster): Kopfzeile als Button mit Chevron
   und Badge für die aktive Auswahl. So bleibt die Spalte kurz und scannbar,
   ohne die Mehrfachauswahl der Checkboxen aufzugeben — der Grund, warum es
   kein Dropdown geworden ist. */
.filter-section {
    border-bottom: 1px solid #EAF0F5;
}
.filter-section:last-child {
    border-bottom: none;
}
.filter-section-heading {
    margin: 0;
}
.filter-section-head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.85rem 0.15rem;
    background: none;
    border: none;
    border-radius: 8px;
    color: var(--dunkelblau);
    font-family: inherit;
    font-size: 0.98rem;
    font-weight: 700;
    text-align: left;
    cursor: pointer;
    transition: color 0.15s ease;
}
.filter-section-head:hover {
    color: var(--mblau);
}
.filter-section-head:focus-visible {
    outline: 2px solid var(--mblau);
    outline-offset: 2px;
}
.filter-section-title {
    flex: 1;
    min-width: 0;
}
.filter-section-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--mblau);
    color: #ffffff;
    font-size: 0.72rem;
    font-weight: 700;
}
.filter-section-chevron {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    color: #94A3B8;
    transition: transform 0.2s ease;
}
.filter-section.is-open .filter-section-chevron {
    transform: rotate(180deg);
}
/* Höhenanimation über grid-template-rows (0fr -> 1fr); visibility nimmt den
   zugeklappten Inhalt zusätzlich aus der Tab-Reihenfolge. Der Innenabstand
   sitzt auf dem Kind von .filter-section-inner, damit er im zugeklappten
   Zustand mit weggeclippt wird. */
.filter-section-body {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.25s ease;
}
.filter-section.is-open .filter-section-body {
    grid-template-rows: 1fr;
}
.filter-section-inner {
    overflow: hidden;
    min-height: 0;
    visibility: hidden;
    transition: visibility 0.25s;
}
.filter-section.is-open .filter-section-inner {
    visibility: visible;
}
.filter-section-inner > * {
    padding-bottom: 1rem;
}
@media (prefers-reduced-motion: reduce) {
    .filter-section-body,
    .filter-section-inner,
    .filter-section-chevron {
        transition: none;
    }
}
/* facetwp.css gibt jeder .facetwp-facet 40px margin-bottom — im Akkordeon
   kommt der Abstand allein aus .filter-section-inner. */
.filter-section .facetwp-facet {
    margin-bottom: 0;
}

/* Checkbox-Zeilen: echte native Inputs (Tastatur und Screenreader gratis) mit
   gezeichnetem Kästchen, Wert links, Trefferzahl als Pille rechts. */
.facet-options {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.facet-search {
    width: 100%;
    margin-bottom: 6px;
    padding: 0.45rem 0.7rem;
    border: 1px solid #D1E5F0 !important;
    border-radius: 8px;
    background: #F8FAFC;
    font-family: inherit;
    font-size: 0.88rem;
    color: var(--wblack);
    outline: none;
    transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.facet-search:focus {
    border-color: var(--mblau) !important;
    background: #ffffff;
    box-shadow: 0 0 0 3px rgba(26, 109, 147, 0.12);
}
.facet-option {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.42rem 0.5rem;
    border-radius: 8px;
    font-size: 0.92rem;
    cursor: pointer;
    user-select: none;
    transition: background-color 0.15s ease;
}
.facet-option:hover {
    background-color: var(--hellblau);
}
.facet-option input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    margin: 0;
}
.facet-option-box {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 19px;
    height: 19px;
    flex-shrink: 0;
    border: 2px solid #B9CFDE;
    border-radius: 6px;
    background: #ffffff;
    color: #ffffff;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.facet-option-box svg {
    width: 12px;
    height: 12px;
    opacity: 0;
    transform: scale(0.5);
    transition: opacity 0.15s ease, transform 0.15s ease;
}
.facet-option.is-checked .facet-option-box {
    background: var(--mblau);
    border-color: var(--mblau);
}
.facet-option.is-checked .facet-option-box svg {
    opacity: 1;
    transform: scale(1);
}
.facet-option input:focus-visible + .facet-option-box {
    outline: 2px solid var(--mblau);
    outline-offset: 2px;
}
.facet-option-label {
    flex: 1;
    min-width: 0;
    color: #334155;
    line-height: 1.35;
    overflow-wrap: anywhere;
}
.facet-option.is-checked .facet-option-label {
    color: var(--dunkelblau);
    font-weight: 600;
}
.facet-option-count {
    flex-shrink: 0;
    padding: 1px 8px;
    border-radius: 999px;
    background: #F1F5F9;
    color: #8CA3B3;
    font-size: 0.78rem;
    font-weight: 600;
}
.facet-option.is-checked .facet-option-count {
    background: var(--hellblau);
    color: var(--mblau);
}
.facet-empty {
    margin: 0.2rem 0 0;
    font-size: 0.85rem;
    color: #94A3B8;
}
.facet-more {
    align-self: flex-start;
    background: none;
    border: none;
    border-radius: 6px;
    padding: 0.35rem 0.5rem;
    color: var(--mblau);
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
}
.facet-more:hover {
    background: var(--hellblau);
}

/* Aktive Filter als Chips über der Kursliste: sichtbarer Systemzustand plus
   Entfernen einzelner Werte mit einem Klick — mobil der einzige Ort, an dem
   man gesetzte Filter ohne Flyout sieht. */
.filter-chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 1.4rem;
}
.filter-chips-label {
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: #94A3B8;
}
.filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border: 1px solid #C7DDEC;
    border-radius: 999px;
    background: var(--hellblau);
    color: var(--dunkelblau);
    font-family: inherit;
    font-size: 0.84rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.filter-chip svg {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
    color: #5B7C90;
    transition: color 0.15s ease;
}
.filter-chip:hover {
    background: #DCEBFA;
    border-color: #9CC5DE;
}
.filter-chip:hover svg {
    color: var(--dunkelblau);
}
.filter-chips-clear {
    background: none;
    border: none;
    padding: 5px 6px;
    color: var(--mblau);
    font-family: inherit;
    font-size: 0.84rem;
    font-weight: 700;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.filter-chips-clear:hover {
    color: var(--dunkelblau);
}

/* Leerer Zustand der Kursliste: benennt das Problem und bietet den Neustart
   direkt an, statt nur eine tote Meldung stehen zu lassen. */
.no-results-box {
    margin-bottom: 2rem;
    padding: 2.2rem 1.6rem;
    border: 1px dashed #C7DDEC;
    border-radius: 16px;
    background: #ffffff;
    text-align: center;
}
.no-results-title {
    margin: 0 0 0.4rem;
    color: var(--dunkelblau);
    font-size: 1.05rem;
    font-weight: 700;
}
.no-results-hint {
    margin: 0 0 1.1rem;
    color: #64748B;
    font-size: 0.92rem;
}
.no-results-reset {
    background: var(--mblau);
    color: #ffffff;
    border: none;
    border-radius: 999px;
    padding: 0.65rem 1.4rem;
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s ease;
}
.no-results-reset:hover {
    background: var(--dunkelblau);
}

/* Kategorie- und Dauer-Dropdown optisch an die Sortierauswahl angleichen
   (eigener Pfeil statt Browser-Standard, abgerundet, Fokus-Ring). */
.facetwp-facet.facetwp-type-dropdown .facetwp-dropdown {
    width: 100%;
    appearance: none;
    -webkit-appearance: none;
    padding: 0.6rem 2.2rem 0.6rem 0.8rem;
    border: 1px solid #D1E5F0 !important;
    border-radius: 10px;
    background-color: #ffffff;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%231A6D93' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.7rem center;
    background-size: 14px 14px;
    color: var(--dunkelblau);
    font-size: 0.92rem;
    cursor: pointer;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.facetwp-facet.facetwp-type-dropdown .facetwp-dropdown:hover {
    border-color: var(--mblau) !important;
}
.facetwp-facet.facetwp-type-dropdown .facetwp-dropdown:focus-visible {
    outline: none;
    border-color: var(--mblau) !important;
    box-shadow: 0 0 0 3px rgba(26, 109, 147, 0.15);
}

  select {
    border: 1px solid #1A6D93!important;
  }
/* Media Queries  */

    /*smartphone */ 
    @media only screen and (max-width: 768px) { 
        .category-header-image {
            background-image: none!important;
            background-color: var(--hellblau);
            height: clamp(300px, 100%, 800px);
        }
        .image-overlay {
            display: none;
        }

        #breadcrumbs > span:nth-child(1) > span:nth-child(1) > a:nth-child(1) {
            color:var(--wblack); 
          }
          .headerwback {
            color: var(--wblack);
          }
          .titelheader h1 {
            color:var(--wblack); 
        }
        
        .headerwback {
            margin-top:0.5rem;
            padding-left: 0;
            gap: 1rem;
        }
        .headerwback .titelheader,
        .headerwback .category-description {
            max-width: 100%;
            text-shadow: none;
        }
        .headerwback .category-description {
            color: var(--wblack);
            font-size: 0.95rem;
            line-height: 1.5;
        }
        .filter-sectiontop.is-solo {
            margin-top: 1.25rem;
            margin-bottom: 1.5rem;
        }
        .headerfilter {
            height: 100%; 
            min-height: 0;
        }

        .excerptcourse + p {
            display: none;
          }
          .facetwp-input-wrap {margin-right: 0.5rem;}
    /*button height fix*/ 
          .facetwp-facet {
            margin:0px!important; 
          }
          .flyout-row.name-sortieren {
            display: none;
          }
          .flyout-row.name-search {
            display: none;
          }

          .latest-categories-container {
            justify-content: center;
        }
        section.bottom-content{
            padding:30px; 
        }
        .facetwp-pager {
            padding: 0px 0px 0px 20px;
          }
        /*Kategorie fix*/ 
        .flexinfostop div:nth-child(2){
            display: flex;
        }

    
      
    }

    /*tablet */ 

    @media only screen and (max-width: 1280px) {
        .category-header-image {
            top:20%
        }

        button.facetwp-flyout-open {
            display: inline-flex;
        }
        .filter-sectiontop {
            margin-bottom:7rem; 
            display: flex;
            justify-content: space-around;
            margin-top: 2rem;
        }

        
.fixednavfilter {
    position: fixed;
    top: 48px;
    position: fixed;
    left: 0;
    right: 0;
    background: var(--hellblau);
    height: 70px;
    align-content: center;
    box-shadow: 0px 0px 3px 2px rgba(74, 74, 74, 0.1);
    background: #F8FBFF;
    z-index: 999;
    display:flex;
    justify-content: space-around;
    padding-top: 9px;
}

.facetwp-search {
    height: 4rem;
  }
div#category-filter-form {
    display:none; 
}

.facetwp-template{
    margin: 0 1.2rem 0 1.2rem;
}

button.facetwp-flyout-open {
    margin-bottom: 1rem;
  }

    .headerbox .teasermid h2{
        word-break: break-word; 
    }

    .facetwp-facet input.facetwp-search {
        min-width: 0px!important;
    }

    section.bottom-content{
        padding:40px; 
    }
}
/* //Desktop */
@media only screen and (min-width: 1400px) {
    .content-wrapper1 {
        min-height: 1450px;
    }
    .headerwback a {
        color:var(--hellblau)
    }
       }
/* ===== Listenseiten ohne Filter (kostenlose Kurse): einspaltiges Layout ===== */
.allcontent.nofilters {
    display: block;
}
.allcontent.nofilters .content-wrapper1 {
    min-height: 0;
}

/* Kursfilter der kostenlosen Kurse (Kategorie-Unterseiten im Raster-Layout
   und die filter-inline-Übersicht gleichermaßen): bleibt sticky neben der
   Liste stehen — die feste Absolutposition (40rem ab Seitenanfang) passt hier
   ohnehin nicht. Löst sich bewusst am Ende der Liste (Rückkehr in den
   normalen Fluss), statt darüber hinaus z. B. die Verlinkungen darunter zu
   überlappen. Höhe und Innenscroll kommen aus der gemeinsamen Kartenregel
   weiter oben — hier steht nur, was diese Seiten anders machen. */
.term-kostenlose-online-kurse .aside-container #category-filter-form.filter-sort-form {
    position: sticky;
    top: 84px;
    /* Diese Seiten hatten nie die 40rem-Startversetzung — Karte startet oben. */
    margin-top: 0;
}

/* Kategorietext oberhalb von Tabs, Filter und Kursliste (Übersicht der
   kostenlosen Kurse): ohne Kasten und ohne Breitenbegrenzung, damit er wie
   normaler Fließtext über die volle Spaltenbreite läuft. */
.top-content {
    margin: 0 0 2.5rem 0;
    padding: 0;
}
.top-content .content {
    max-width: none;
}
.top-content .category-content h2,
.top-content .category-content h3,
.top-content .category-content h4 {
    margin-top: 1.3rem !important;
    margin-bottom: 0.5rem !important;
}
.top-content .category-content img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0 0 1.5rem 0;
}

/* Anbieter-Bloecke der kostenlosen Kurse (migration/content/kostenlose-online-kurse.html
   im .top-content der Uebersicht, migration/content/kostenlose-ki-online-kurse.html im
   .bottom-content der Unterkategorie): Name, Screenshot und Stichpunkte je Anbieter
   sauber getrennt statt als durchlaufender Fließtext mit vereinzelten <hr>. */
.top-content .kl-free-providers,
.bottom-content .kl-free-providers {
    margin-top: 1.5rem;
}
.top-content .kl-free-provider,
.bottom-content .kl-free-provider {
    margin: 0 0 2.5rem 0;
    padding-bottom: 2rem;
    border-bottom: 1px solid #e3e6ea;
}
.top-content .kl-free-provider:last-child,
.bottom-content .kl-free-provider:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}
.top-content .kl-free-provider h3,
.top-content .kl-free-provider h4,
.bottom-content .kl-free-provider h3,
.bottom-content .kl-free-provider h4 {
    margin-top: 0 !important;
}
.top-content .kl-free-shot,
.bottom-content .kl-free-shot {
    display: block;
    margin: 0 0 1rem 0;
}
.top-content .kl-free-shot img,
.bottom-content .kl-free-shot img {
    margin: 0 !important;
    border-radius: 8px;
    box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.12);
    max-width: min(420px, 100%);
}
.top-content .kl-free-provider ul,
.bottom-content .kl-free-provider ul {
    margin: 0;
    padding-left: 1.3rem;
}
.top-content .kl-free-provider li,
.bottom-content .kl-free-provider li {
    margin-bottom: 0.6rem;
    line-height: 1.5;
}
.top-content .kl-free-provider li:last-child,
.bottom-content .kl-free-provider li:last-child {
    margin-bottom: 0;
}

/* Karten-Grid für spezialisierte Plattformen (Blinkist, JetBrains etc.) */
.kl-specialized-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
    margin: 1rem 0 2.2rem 0;
}
@media only screen and (max-width: 768px) {
    .kl-specialized-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
}

.top-content .kl-specialized-grid .kl-free-provider,
.bottom-content .kl-specialized-grid .kl-free-provider {
    margin: 0;
    padding: 1.25rem 1.4rem;
    background: #ffffff;
    border: 1px solid #dce4ec;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(44, 86, 105, 0.05);
    display: flex;
    flex-direction: column;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.top-content .kl-specialized-grid .kl-free-provider:hover,
.bottom-content .kl-specialized-grid .kl-free-provider:hover {
    border-color: #ffb424;
    transform: translateY(-2px);
    box-shadow: 0 4px 14px rgba(44, 86, 105, 0.10);
}

.top-content .kl-specialized-grid .kl-free-provider h4,
.bottom-content .kl-specialized-grid .kl-free-provider h4 {
    margin: 0 0 0.65rem 0 !important;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--dunkelblau, #2c5669);
}

.top-content .kl-specialized-grid .kl-free-provider ul,
.bottom-content .kl-specialized-grid .kl-free-provider ul {
    margin: 0;
    padding-left: 1.2rem;
    flex: 1 1 auto;
}

.top-content .kl-specialized-grid .kl-free-provider li,
.bottom-content .kl-specialized-grid .kl-free-provider li {
    margin-bottom: 0.45rem;
    line-height: 1.55;
    font-size: 0.95rem;
}

.top-content .kl-specialized-grid .kl-free-provider li:last-child,
.bottom-content .kl-specialized-grid .kl-free-provider li:last-child {
    margin-bottom: 0;
}

/* Schnellnavigation zu allen Anbietern am Textanfang (kostenlose-online-kurse.html) */
.kl-provider-jump-groups {
    margin: 1.25rem 0 2rem 0;
    padding-left: 1.4rem;
}
.kl-provider-jump-groups > li {
    margin-bottom: 1.35rem;
    line-height: 1.55;
}
.kl-provider-jump-groups > li:last-child {
    margin-bottom: 0;
}
.kl-provider-jump-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 8px;
    margin-top: 0.75rem;
    margin-bottom: 1.5rem;
}
.kl-provider-jump-link {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    background: #edf5ff;
    color: var(--dunkelblau, #2c5669);
    border: 1px solid #d2e4f7;
    border-radius: 6px;
    font-size: 0.88rem;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.15s ease;
}
.kl-provider-jump-link:hover {
    background: #ffb424;
    color: #19333f;
    border-color: #ffb424;
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(25, 51, 63, 0.15);
}

/* Sticky-Header-Offset (130px Desktop / 10px Mobile) fuer alle Sprungziele im Text */
.top-content .kl-free-provider[id],
.bottom-content .kl-free-provider[id],
.top-content li[id],
.category-content [id].kl-free-provider,
.category-content li[id],
.category-content h2[id],
.category-content h3[id],
.category-content h4[id] {
    scroll-margin-top: 130px;
}
@media only screen and (max-width: 768px) {
    .top-content .kl-free-provider[id],
    .bottom-content .kl-free-provider[id],
    .top-content li[id],
    .category-content [id].kl-free-provider,
    .category-content li[id],
    .category-content h2[id],
    .category-content h3[id],
    .category-content h4[id] {
        scroll-margin-top: 10px;
    }
}

@media only screen and (max-width: 768px) {
    .text-with-toc {
        margin-top: 1rem;
    }
    .top-content {
        margin: 0 0 2rem 0;
        padding: 0 1rem;
    }

    /* .bottom-content richtet mittig aus, der Textblock bekommt dadurch
       seine Inhaltsbreite. Auf schmalen Geräten war die größer als der
       Bildschirm und der Text lief links wie rechts aus dem Bild. */
    section.bottom-content > .content {
        width: 100%;
        min-width: 0;
    }
}

/* ===== Dual-Range-Preisslider (Preis von/bis auf einer Spur) =====
   --range-lo/--range-hi kommen als Inline-Style von CourseFilter.tsx (Position
   der beiden Griffe in Prozent) und färben den gewählten Ausschnitt der Spur
   ein — vorher war die Spur immer einfarbig grau und man sah nicht auf einen
   Blick, welcher Bereich gerade ausgewählt ist. */
.dual-slider {
    position: relative;
    height: 40px;
    margin: 4px 0 0;
}
.price-boundaries { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; margin-bottom: 12px; }
.price-boundaries label > span { display: block; color: #496373; font-size: 12px; font-weight: 500; margin-bottom: 6px; }
.price-boundaries label > div { display: flex; align-items: center; gap: 4px; border: 1px solid #d5e1e7; border-radius: 10px; padding-right: 12px; background: #f8fafb; }
.price-boundaries label > div > span { color: #617986; font-size: 14px; }
.price-boundaries input[type="number"] { width: 100%; min-width: 0; min-height: 44px; padding: 10px 12px; border: 0; border-radius: inherit; box-shadow: none; background: transparent; color: #19333f; font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; appearance: textfield; }
.price-boundaries input[type="number"]::-webkit-inner-spin-button,
.price-boundaries input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.price-boundaries input[type="number"]:focus { outline: none; box-shadow: none; }
.price-boundaries label > div:focus-within { outline: 2px solid #1a6d93; outline-offset: 2px; }
.price-scale { display: flex; justify-content: space-between; gap: 12px; font-size: 12px; color: #496373; }
.dual-slider input[type="range"]:focus-visible { z-index: 3; }
.dual-slider::before {
    content: "";
    position: absolute;
    left: 11px;
    right: 11px;
    top: 50%;
    height: 4px;
    transform: translateY(-50%);
    border-radius: 2px;
    background: linear-gradient(
        to right,
        #d8e6f2 0%,
        #d8e6f2 var(--range-lo, 0%),
        var(--mblau) var(--range-lo, 0%),
        var(--mblau) var(--range-hi, 100%),
        #d8e6f2 var(--range-hi, 100%),
        #d8e6f2 100%
    );
}
.dual-slider input[type="range"] {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 40px;
    min-height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    outline: none;
    background: none;
    -webkit-appearance: none;
    appearance: none;
    pointer-events: none;
}
.dual-slider input[type="range"]::-webkit-slider-runnable-track {
    height: 40px;
    background: transparent;
}
.dual-slider input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    pointer-events: auto;
    box-sizing: border-box;
    width: 22px;
    height: 22px;
    margin-top: 9px;
    border-radius: 50%;
    background: #fff;
    border: 3px solid var(--mblau);
    box-shadow: 0 2px 5px rgba(25, 51, 63, 0.16);
    cursor: grab;
}
.dual-slider input[type="range"]::-moz-range-track {
    height: 4px;
    background: transparent;
}
.dual-slider input[type="range"]::-moz-range-thumb {
    pointer-events: auto;
    box-sizing: border-box;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #fff;
    border: 3px solid var(--mblau);
    box-shadow: 0 2px 5px rgba(25, 51, 63, 0.16);
    cursor: grab;
}
/* Tastaturfokus auf den Slider-Griffen sichtbar machen */
.dual-slider input[type="range"]:focus-visible::-webkit-slider-thumb {
    box-shadow: 0 0 0 4px rgba(26, 109, 147, 0.3);
}
.dual-slider input[type="range"]:focus-visible::-moz-range-thumb {
    box-shadow: 0 0 0 4px rgba(26, 109, 147, 0.3);
}
.facetwp-slider-label {
    display: inline-block;
    margin-top: 0.4rem;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    background-color: var(--hellblau);
    color: var(--dunkelblau);
    font-weight: 600;
    font-size: 0.9rem;
}

/* Anbieter-Logos in den Kurskarten sauber skalieren (auch SVGs ohne Maße) */
.facetwp-template .headerbox .imgfilter img {
    display: block;
    width: 100%;
    max-width: 100px;
    height: auto;
    object-fit: contain;
}


/* Course Tabs (KI-Ratgeber vs. Alle Kurse) + Sortierung in derselben Zeile —
   die Sortierauswahl stand vorher mit eigenem Abstand darunter, obwohl sie
   inhaltlich neben den Switcher gehört (siehe CourseFilter.tsx). */
.course-tabs-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 1.5rem 0 1.8rem 0;
}

.course-tabs-container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    padding: 6px;
    background: #EDF5FF;
    border: 1px solid #D1E5F0;
    border-radius: 14px;
    width: fit-content;
}

.course-tab-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 22px;
    border-radius: 10px;
    font-weight: 700;
    font-size: 0.95rem;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    background: transparent;
    color: var(--dunkelblau);
}

.course-tab-btn:hover {
    background: rgba(255, 255, 255, 0.8);
    color: var(--mblau);
}

.course-tab-btn.active {
    background: var(--mblau);
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(26, 109, 147, 0.25);
}

.course-tab-btn .tab-badge {
    background: rgba(255, 255, 255, 0.25);
    color: #fff;
    padding: 2px 8px;
    border-radius: 20px;
    font-size: 0.75rem;
}

.course-tab-btn:not(.active) .tab-badge {
    background: #ffffff;
    color: var(--mblau);
    border: 1px solid #D1E5F0;
}

/* KI-Tab Box & Input */
.ki-tab-wrapper {
    display: flex;
    flex-direction: column;
    gap: 1.8rem;
    margin-bottom: 2rem;
}

.ki-search-form {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
}

.ki-search-input {
    width: 100%;
    padding: 1.1rem 4rem 1.1rem 1.6rem;
    border-radius: 40px;
    border: 2px solid #CBD5E1;
    font-size: 1.05rem;
    background: #ffffff;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    outline: none;
}

.ki-search-input:focus {
    border-color: var(--mblau);
    box-shadow: 0 4px 20px rgba(26, 109, 147, 0.15);
}

.ki-search-submit {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--mblau);
    color: #ffffff;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.ki-search-submit:hover {
    background: var(--dunkelblau);
    transform: translateY(-50%) scale(1.05);
}

/* Dieselbe Chatkarte über der Kursliste (Listen-Tab). Sie sitzt zwischen
   Kopfbereich und Tabs; den Abstand nach unten bringt die Tableiste mit. */
.ki-chat-lead {
    margin-top: 1.6rem;
}

/* Hero Chat Card before initial query */
.ki-chat-hero-card {
    background: #ffffff;
    border: 1px solid #E2E8F0;
    border-radius: 20px;
    padding: 1.8rem 2rem;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
}

.ki-chat-hero-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.ki-chat-hero-title {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--dunkelblau);
    margin: 0;
}

.ki-chat-hero-card .ki-advisor-name {
    font-size: 1.15rem;
}

.ki-chat-hero-desc {
    font-size: 0.95rem;
    color: #475569;
    margin: 0 0 0.5rem 0;
    line-height: 1.5;
}

/* Inline Course Image Thumbnail in Text & Table */
.inline-course-img {
    display: inline-block;
    vertical-align: middle;
    height: 26px;
    width: auto;
    max-width: 56px;
    object-fit: contain;
    border-radius: 4px;
    margin-right: 6px;
    background: #ffffff;
    padding: 1px 4px;
    border: 1px solid #E2E8F0;
}

/* Fragezähler: sitzt am linken Rand der Werkzeugzeile, „Senden" am rechten —
   space-between auf .ki-chat-toolbar zieht beide auseinander, keine leere
   Lücke mehr zwischen ihnen. */
.ki-counter-badge {
    flex-shrink: 0;
    font-size: 0.72rem;
    font-weight: 700;
    color: #94A3B8;
    white-space: nowrap;
}

/* Kopfzeile der KI-Karten: Logo-Icon + „Dein Weiterbildungs-KI-Ratgeber" */
.ki-advisor {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
}

.ki-advisor-avatar {
    width: 72px;
    height: 72px;
    flex-shrink: 0;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 0 0 2px #ffffff, 0 2px 8px rgba(44, 86, 105, 0.18);
}

/* Glitzer als KI-Hinweis: zwei kleine Sterne funkeln am Rand des Logos auf
   und ab. Das Logo selbst bleibt starr, nur der Funken-Effekt bewegt sich. */
.ki-advisor::before,
.ki-advisor::after {
    content: "";
    position: absolute;
    background: var(--dorange);
    clip-path: polygon(50% 0%, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0% 50%, 39% 39%);
    opacity: 0;
    pointer-events: none;
    animation: ki-sparkle 2.6s ease-in-out infinite;
}

.ki-advisor::before {
    top: -3px;
    left: 50px;
    width: 11px;
    height: 11px;
    animation-delay: 0s;
}

.ki-advisor::after {
    top: 46px;
    left: 2px;
    width: 8px;
    height: 8px;
    animation-delay: 1.3s;
}

.ki-thread-intro {
    position: relative;
}

.ki-thread-intro::before,
.ki-thread-intro::after {
    content: "";
    position: absolute;
    background: var(--dorange);
    clip-path: polygon(50% 0%, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0% 50%, 39% 39%);
    opacity: 0;
    pointer-events: none;
    animation: ki-sparkle 2.6s ease-in-out infinite;
}

.ki-thread-intro::before {
    top: -2px;
    left: 30px;
    width: 8px;
    height: 8px;
    animation-delay: 0s;
}

.ki-thread-intro::after {
    top: 28px;
    left: 1px;
    width: 6px;
    height: 6px;
    animation-delay: 1.3s;
}

@keyframes ki-sparkle {
    0%, 100% {
        opacity: 0;
        transform: scale(0.3) rotate(0deg);
    }
    50% {
        opacity: 1;
        transform: scale(1) rotate(25deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .ki-advisor::before,
    .ki-advisor::after,
    .ki-thread-intro::before,
    .ki-thread-intro::after {
        animation: none;
        opacity: 0;
    }
}

.ki-advisor-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
    min-width: 0;
}

.ki-advisor-name {
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--dunkelblau);
}

.ki-advisor-text .ki-chat-hero-title {
    font-size: 1.05rem;
    font-weight: 600;
    color: #475569;
}

/* Umschlag des Eingabefelds — ohne eigene Fläche, die Karte darunter trägt sie */
.ki-card-chat-footer {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}

/* Eingabebereich im Stil eines Chat-Composers: Textfeld oben, darunter eine
   Werkzeugzeile mit Themenvorschlägen links und dem Senden-Button rechts. */
.ki-chat-input-box {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    min-height: 132px;
    background: #ffffff;
    border: 1px solid #DCE7F1;
    border-radius: 24px;
    padding: 0.85rem 1rem 0.75rem 1.15rem;
    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.05);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.ki-chat-input-box:focus-within {
    border-color: #A9CBE0;
    box-shadow: 0 4px 18px rgba(26, 109, 147, 0.12);
}

.ki-chat-text-input {
    width: 100%;
    flex: 1 1 auto;
    min-height: 76px;
    max-height: 140px;
    resize: none;
    overflow-y: auto;
    background: transparent;
    border: none;
    outline: none;
    color: #1E293B;
    font-family: inherit;
    font-size: 0.95rem;
    line-height: 1.5;
    padding: 0;
}

.ki-chat-text-input::placeholder {
    color: #94A3B8;
}

.ki-chat-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.ki-chat-btn-send {
    flex-shrink: 0;
    background: var(--mblau);
    color: #ffffff;
    border: none;
    border-radius: 999px;
    padding: 8px 20px;
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.2px;
    cursor: pointer;
    transition: background 0.2s ease, opacity 0.2s ease;
}

.ki-chat-btn-send:hover:not(:disabled) {
    background: var(--dunkelblau);
}

.ki-chat-btn-send:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

/* Hinweis, wenn das Tageslimit erreicht ist */
.ki-limit-reached {
    font-size: 0.85rem;
    font-weight: 600;
    color: #92400E;
    background: #FEF3C7;
    border: 1px solid #FDE68A;
    border-radius: 14px;
    padding: 12px 16px;
}

.ki-fast-prompts {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    align-items: center;
    min-width: 0;
}

/* Beschriftung vor den themenbezogenen Anschlussfragen der KI */
.ki-fast-prompts-label {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: #94A3B8;
}

.ki-fast-prompts button {
    background: #F4F8FB;
    color: #42596B;
    border: 1px solid #E4EDF4;
    border-radius: 999px;
    padding: 5px 12px;
    font-size: 0.76rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.ki-fast-prompts button:hover {
    background: var(--hellblau);
    border-color: #B9D4E6;
    color: var(--dunkelblau);
}

/* Die von der KI vorgeschlagenen Themenfragen stehen vor den festen
   Vorschlägen und sind farblich hervorgehoben. */
.ki-fast-prompts button.is-followup {
    background: var(--hellblau);
    border-color: #C4DCEC;
    color: var(--dunkelblau);
}

.ki-fast-prompts button.is-followup:hover {
    background: #DCEBFA;
    border-color: #9CC5DE;
}

/* Cleaner Table Styling */
.ki-table-wrapper {
    margin: 1.2rem 0 0.8rem 0;
    overflow-x: auto;
    border-radius: 12px;
    border: 1px solid #E2E8F0;
    background: #ffffff;
}

.ki-comparison-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
    text-align: left;
}

.ki-comparison-table th {
    background: #F8FAFC;
    color: var(--dunkelblau);
    font-weight: 700;
    padding: 10px 14px;
    border-bottom: 2px solid #E2E8F0;
}

.ki-comparison-table td {
    padding: 10px 14px;
    border-bottom: 1px solid #F1F5F9;
    color: #334155;
    vertical-align: middle;
}

.ki-comparison-table tr:last-child td {
    border-bottom: none;
}

@media (max-width: 768px) {
    .ki-chat-hero-card {
        padding: 1.2rem 1.1rem;
    }
    .ki-advisor-avatar {
        width: 56px;
        height: 56px;
    }
    .course-tabs-container {
        width: 100%;
    }
    .course-tab-btn {
        flex: 1;
        justify-content: center;
        padding: 8px 12px;
        font-size: 0.85rem;
    }
}

/* Im KI-Tab bleibt die rechte Filterspalte leer — das Raster von .allcontent
   würde sie trotzdem reservieren. Einspaltig bekommt der Chat den Platz, der
   sonst ungenutzt neben der Filterkarte stünde.
   Die Containerbreite bleibt dabei bei den 1200px der Listenansicht. Vorher
   sprang sie auf 1560px: Der ganze Seiteninhalt rutschte beim Tabwechsel um bis
   zu 180px nach links, während das Kopfbild als absolut positionierter Kasten am
   Viewport hängen blieb. Bild und Text standen danach anders zueinander, und
   genau das sah auf /weiterbildung/online-weiterbildungen/ nach einem
   verschobenen Kopfbild aus. */
.allcontent.ki-active {
    display: block;
}

/* Der Kopfbereich steht in der Listenansicht in der 75%-Rasterspalte. Einspaltig
   liefe er über die volle Containerbreite, die Einleitung bräche anders um und
   schöbe sich über das Motiv im Kopfbild. Dieselbe Kappung wie die Rasterspalte
   hält Breadcrumb, H1 und Einleitung in beiden Tabs an derselben Stelle.
   Unter 1281px ist .allcontent ohnehin einspaltig (company.css), dort ist der
   Kopfbereich in beiden Tabs gleich breit und es gibt nichts zu kappen. */
@media only screen and (min-width: 1281px) {
    .allcontent.ki-active .headerwback {
        max-width: 75%;
    }
}

/* ===== Übersicht der kostenlosen Kurse: Text+TOC, dann Liste+Filter =====
   Der lange Kategorietext steht hier vor Tabs und Kursliste (filter-list.tsx:
   textFirst). .allcontent bleibt dafür einspaltig — die beiden Seitenspalten
   (Inhaltsverzeichnis neben dem Text, Kursfilter neben der Liste) sind eigene,
   kürzere Flex-Zeilen. So mit läuft neben dem Text das Inhaltsverzeichnis mit
   und legt erst neben der Kursliste den Kursfilter daneben, statt dass der
   Filter (wie zuvor über die ganze Raster-Zeile) schon neben der Einleitung
   erscheint. */
.allcontent.filter-inline {
    display: block;
    width: min(1200px, calc(100% - var(--seitenrand) * 2));
    padding-bottom: 3.5rem;
}

.text-with-toc {
    display: flex;
    /* stretch statt flex-start: erst dadurch ist .text-with-toc-aside so hoch
       wie der Fließtext daneben — .term-toc-box (sticky) bekommt so den Raum,
       um beim Scrollen tatsächlich stehen zu bleiben, statt sofort mit dem
       Rest der Seite wegzuscrollen. */
    align-items: stretch;
    gap: 2.5rem;
    /* Abstand zum Kopfbereich sitzt hier statt auf .top-content: sonst startet
       die TOC-Box in .text-with-toc-aside (die selbst keinen eigenen Abstand
       hat) höher als der Text daneben und wirkt an den Hero angeklebt. */
    margin-top: 2.5rem;
    margin-bottom: 4.5rem;
}
.text-with-toc-main {
    flex: 1;
    min-width: 0;
}
.text-with-toc-aside {
    width: 280px;
    flex-shrink: 0;
}
/* Kartenoptik (Akzentleiste, Icon, Nummerierung, Hover) kommt von
   #ez-toc-container in ez-toc/eztoc-custom.css — hier nur die Positionierung,
   die die Beitrags-Sidebar nicht braucht (dort übernimmt .sidebar-inner-wrap
   das Sticky). */
/* Selektor mit ID: div#ez-toc-container in eztoc-custom.css setzt position:
   relative und einen Außenabstand für die Inline-Platzierung im Fließtext —
   eine reine Klassenregel hätte gegen die ID-Spezifität keine Chance. */
#ez-toc-container.term-toc-box {
    position: sticky;
    top: 130px;
    margin: 0;
}
.term-toc-box nav {
    max-height: calc(100vh - 220px);
    overflow-y: auto;
}

.filter-inline .content-wrapper1 {
    display: flex;
    /* flex-direction explizit, weil company.css .content-wrapper1 bereits auf
       column setzt (dort für die einspaltige Listenansicht ohne Filter) — ohne
       die Wiederholung hier würde die Kursliste über der Filterspalte stehen
       statt daneben. align-items: stretch gibt #category-filter-form (sticky)
       dieselbe Höhe wie die Kursliste, sonst hätte es keinen Scroll-Spielraum
       und würde nie stehen bleiben. */
    flex-direction: row;
    align-items: stretch;
    gap: 2.5rem;
}
.filter-inline .content-wrapper1 .course-list-col {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}
.filter-inline .aside-container {
    flex-shrink: 0;
}

/* Sortierauswahl: sitzt neben dem Tab-Switcher (siehe CourseFilter.tsx
   sortSelect, .course-tabs-row) — im Kopfbereich stand sie weit von der Liste
   entfernt, die sie sortiert, und lief dort mit der Suchzeile ineinander. */
.course-tabs-row > .sortierung {
    display: flex;
}

.sortierung .facetwp-type-sort {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.sortierung-label {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--dunkelblau);
    white-space: nowrap;
}

/* appearance:none + eigenes Chevron, damit das Feld zu den uebrigen
   Bedienelementen passt; der Rahmen braucht !important, weil weiter oben in
   dieser Datei allen selects ein eigener Rahmen aufgezwungen wird. */
.sortierung .facetwp-sort-select {
    appearance: none;
    -webkit-appearance: none;
    padding: 0.6rem 2.4rem 0.6rem 0.9rem;
    border: 1px solid #D1E5F0 !important;
    border-radius: 10px;
    background-color: #ffffff;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%231A6D93' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.8rem center;
    background-size: 14px 14px;
    color: var(--dunkelblau);
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.sortierung .facetwp-sort-select:hover {
    border-color: var(--mblau) !important;
}

.sortierung .facetwp-sort-select:focus-visible {
    outline: none;
    border-color: var(--mblau) !important;
    box-shadow: 0 0 0 3px rgba(26, 109, 147, 0.15);
}

@media only screen and (max-width: 768px) {
    .course-tabs-row > .sortierung {
        width: 100%;
    }
    .sortierung .facetwp-sort-select {
        flex: 1;
        min-width: 0;
    }
}

@media only screen and (max-width: 1080px) {
    .text-with-toc-aside {
        display: none;
    }
}

@media only screen and (max-width: 768px) {
    .filter-inline .content-wrapper1 {
        display: block;
    }
}

/* Layout mit Hauptbereich und Rechter Sidebar */
.ki-layout-container {
    display: flex;
    gap: 1.8rem;
    align-items: flex-start;
    margin-bottom: 2.5rem;
}

.ki-main-content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.ki-sidebar-cards {
    width: 340px;
    flex-shrink: 0;
    background: #ffffff;
    border: 1px solid #E2E8F0;
    border-radius: 16px;
    padding: 1.2rem;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
}

.ki-sidebar-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--dunkelblau);
    margin: 0 0 1rem 0;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid #EDF5FF;
}

.ki-cards-vertical {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}

.ki-sidebar-card {
    border: 1px solid #E2E8F0;
    border-radius: 12px;
    padding: 0.8rem;
    transition: all 0.2s ease;
    background: #F8FAFC;
}

.ki-sidebar-card:hover {
    border-color: var(--mblau);
    background: #ffffff;
    box-shadow: 0 4px 12px rgba(26, 109, 147, 0.12);
    transform: translateY(-2px);
}

.ki-card-link {
    display: flex;
    gap: 0.8rem;
    text-decoration: none!important;
    color: inherit;
}

.ki-card-img {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    border-radius: 8px;
    overflow: hidden;
    background: #ffffff;
    border: 1px solid #E2E8F0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ki-card-img img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.ki-card-info {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
}

.ki-card-provider {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--mblau);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.ki-card-title {
    font-size: 0.88rem;
    font-weight: 700;
    color: #1E293B;
    margin: 0;
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.ki-card-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 0.2rem;
}

.badge-chip {
    font-size: 0.7rem;
    background: #EDF5FF;
    color: var(--dunkelblau);
    padding: 2px 7px;
    border-radius: 10px;
    font-weight: 600;
}

@media (max-width: 992px) {
    .ki-layout-container {
        flex-direction: column;
        /* Einspaltig muss stretch gelten: mit flex-start bemisst sich die Breite
           am Inhalt, und ein breites Kind (etwa die Vorschlagszeile im
           Eingabefeld) schöbe den ganzen Verlauf über den Bildschirmrand. */
        align-items: stretch;
    }
    .ki-sidebar-cards {
        width: 100%;
    }
    .ki-cards-vertical {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    }
}




/* ===== KI-Chat: ein durchgehender Verlauf ================================= */
/* Vorbild sind ChatGPT und Claude: Frage rechts, Antwort links darunter, alles
   in einem Strang. Jede Runde als eigene Karte zu rahmen ließ eine Nachfrage
   wie einen neuen Chat aussehen — deshalb tragen die Beiträge hier keine
   Kartenränder mehr, nur der Verlauf als Ganzes steht auf einer Fläche. */
.ki-thread {
    display: flex;
    flex-direction: column;
    gap: 1.6rem;
    background: #ffffff;
    border: 1px solid #E2E8F0;
    border-radius: 20px;
    padding: 1.4rem 1.6rem 1rem;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
}

/* Der Ratgeber stellt sich einmal am Kopf des Verlaufs vor — nicht mehr über
   jeder Antwort, das war bei mehreren Runden reine Wiederholung. */
.ki-thread-intro {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #EDF2F7;
}

.ki-thread-intro .ki-advisor-avatar {
    width: 44px;
    height: 44px;
}

.ki-msg-group {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    scroll-margin-top: 90px;
}

/* Die eigene Frage als Sprechblase rechts — dieselbe Leserichtung wie in den
   Chat-Oberflächen, an die Besucher gewöhnt sind. */
.ki-msg-user {
    align-self: flex-end;
    max-width: min(80%, 640px);
    background: var(--mblau);
    color: #ffffff;
    font-weight: 600;
    font-size: 0.95rem;
    line-height: 1.45;
    padding: 0.7rem 1.1rem;
    border-radius: 18px 18px 4px 18px;
    overflow-wrap: anywhere;
}

/* Die Antwort läuft ohne Rahmen über die volle Breite: sie enthält Tabellen und
   Kurskarten, die in einer Blase eingeschnürt wären. */
.ki-msg-ai {
    max-width: 100%;
    color: var(--wblack);
    font-size: 0.97rem;
    line-height: 1.6;
}

/* Das Theme klemmt den Seitenrahmen mit `#wrapper { overflow: clip }` gegen
   waagerechtes Überlaufen ab — das macht ihn zugleich zum Bezugsrahmen für
   position:sticky, weshalb das Eingabefeld darin nie kleben blieb. Nur die
   x-Achse zu klemmen behält den Schutz und gibt sticky die Seite als
   Bezugsrahmen zurück. */
#wrapper {
    overflow-x: clip;
    overflow-y: visible;
}

/* Eingabefeld bleibt am unteren Rand in Reichweite, während man die Antwort
   liest — ohne den Verlauf in einen eigenen Scrollkasten zu sperren. */
/* Negative Ränder ziehen das Feld bis an die Kartenkanten: sonst scrollte die
   Antwort links und rechts daran vorbei. Der weiche Verlauf oben lässt den Text
   darunter auslaufen, statt ihn an einer harten Kante abzuschneiden. */
.ki-composer {
    position: sticky;
    bottom: 0;
    z-index: 5;
    margin: 0.4rem -1.6rem -1rem;
    padding: 1.6rem 1.6rem 1rem;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0, #ffffff 1.4rem);
    border-radius: 0 0 20px 20px;
}

@media (max-width: 768px) {
    .ki-thread {
        padding: 1rem 0.9rem 0.8rem;
        gap: 1.2rem;
    }
    .ki-msg-user {
        max-width: 92%;
    }
    .ki-composer {
        margin: 0.4rem -0.9rem -0.8rem;
        padding: 1.4rem 0.9rem 0.8rem;
    }
    /* Umgebrochen belegten die Vorschlags-Chips am Telefon vier Zeilen und damit
       den halben Bildschirm — nebeneinander in einer wischbaren Zeile bleibt der
       Verlauf sichtbar. */
    .ki-fast-prompts {
        flex: 1 1 100%;
        min-width: 0;
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
    }
    .ki-fast-prompts::-webkit-scrollbar {
        display: none;
    }
    .ki-fast-prompts button {
        flex-shrink: 0;
    }
}

/* ===== Umschalter Online / Präsenz =====
   Zwei echte Links (keine JS-Umschaltung): Online- und Präsenzangebote sind
   eigene Seiten mit eigenem Titel und Text, damit beide Kursformen getrennt
   ranken können. Der Schalter sitzt im dunklen Kopfbereich über der
   Überschrift — deshalb helle Optik, unterhalb von 768px dann dunkle. */
.modality-switch {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.65rem;
    align-self: flex-start;
}
.modality-switch-label {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.02em;
    opacity: 0.85;
}
.modality-switch-track {
    display: inline-flex;
    padding: 4px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.16);
    border: 1px solid rgba(255, 255, 255, 0.4);
}
.headerwback .modality-option {
    display: inline-block;
    padding: 0.4rem 1.15rem;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
    color: #fff;
    text-decoration: none;
    transition: background 0.15s ease, color 0.15s ease;
}
.headerwback .modality-option:hover,
.headerwback .modality-option:focus-visible {
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
}
.headerwback .modality-option.is-active {
    background: #fff;
    color: var(--dunkelblau);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
}

@media only screen and (max-width: 768px) {
    .modality-switch-track {
        background: rgba(44, 86, 105, 0.07);
        border-color: rgba(44, 86, 105, 0.25);
    }
    .headerwback .modality-option {
        color: var(--dunkelblau);
    }
    .headerwback .modality-option:hover,
    .headerwback .modality-option:focus-visible {
        background: rgba(44, 86, 105, 0.12);
        color: var(--dunkelblau);
    }
    .headerwback .modality-option.is-active {
        background: var(--dunkelblau);
        color: #fff;
    }
}

/* ===== Sticky-Filterleiste über der Kursliste =====
   Vorbild ist die Leiste von kursfinder.de: die wichtigsten Facetten als
   Pillen, alles Weitere hinter „Alle Filter". Sie klebt beim Scrollen am
   oberen Fensterrand (top: 0 — der Seitenkopf ist nicht fixiert), damit man
   mitten in der Liste nachfiltern kann, statt erst zurückscrollen zu müssen.
   Bewusst eckig oben und ohne Seitenabstand: angedockt liegt so kein Streifen
   der durchlaufenden Liste neben oder über der Leiste. */
.filter-bar {
    position: sticky;
    top: 0;
    z-index: 6;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem 0.8rem;
    margin: 0 0 1.5rem 0;
    padding: 0.7rem 0.9rem;
    background: #F8FBFF;
    border: 1px solid #D1E5F0;
    border-top: none;
    border-radius: 0 0 14px 14px;
}
.filter-bar-pills {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}
.filter-bar-actions {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    margin-left: auto;
}
.filter-bar-count {
    font-size: 0.88rem;
    font-weight: 600;
    color: #64748B;
    white-space: nowrap;
}
/* Der Grundzustand des Knopfes ist display:none (er gehörte früher nur zur
   Mobilansicht) — in der Leiste steht er auf jeder Fensterbreite. */
.filter-bar .facetwp-flyout-open {
    display: inline-flex;
    align-self: center;
    min-height: 42px;
    margin-bottom: 0;
    border-radius: 999px;
}

/* Pille = Knopf mit Aufklappfeld. Die Facette darin ist dieselbe wie in der
   Filterspalte und im Flyout (FilterUi.tsx), nur eben sofort erreichbar. */
.filter-pill {
    position: relative;
}
.filter-pill-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-width: 260px;
    min-height: 42px;
    padding: 0 0.95rem;
    border: 1px solid #D1E5F0;
    border-radius: 999px;
    background: #ffffff;
    color: var(--dunkelblau);
    font-family: inherit;
    font-size: 0.92rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.filter-pill-btn:hover {
    border-color: var(--mblau);
    background: var(--hellblau);
}
.filter-pill-btn:focus-visible {
    outline: 2px solid var(--mblau);
    outline-offset: 2px;
}
.filter-pill-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.filter-pill.is-active .filter-pill-btn {
    background: var(--mblau);
    border-color: var(--mblau);
    color: #ffffff;
}
.filter-pill.is-active .filter-pill-btn:hover {
    background: var(--dunkelblau);
    border-color: var(--dunkelblau);
}
.filter-pill.is-open .filter-pill-btn {
    border-color: var(--mblau);
}
.filter-pill-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    background: #ffffff;
    color: var(--mblau);
    font-size: 0.72rem;
    font-weight: 700;
}
.filter-pill-chevron {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    transition: transform 0.2s ease;
}
.filter-pill.is-open .filter-pill-chevron {
    transform: rotate(180deg);
}
.filter-pill-panel {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    z-index: 30;
    width: max-content;
    min-width: 260px;
    max-width: min(340px, 80vw);
    max-height: min(60vh, 420px);
    overflow-y: auto;
    padding: 0.9rem 1rem;
    background: #ffffff;
    border: 1px solid #D1E5F0;
    border-radius: 14px;
    box-shadow: 0 14px 34px rgba(16, 42, 67, 0.16);
}
/* facetwp.css gibt jeder Facette 40px Außenabstand unten — im Aufklappfeld
   käme der als leerer Streifen unter der Auswahl heraus (gleiche Korrektur wie
   bei den Akkordeon-Abschnitten). */
.filter-pill-panel .facetwp-facet {
    margin-bottom: 0;
}
.filter-pill-panel .facetwp-dropdown {
    width: 100%;
}
@media (prefers-reduced-motion: reduce) {
    .filter-pill-btn,
    .filter-pill-chevron {
        transition: none;
    }
}

/* Auf dem Telefon wären vier Pillen samt Aufklappfeld eine gequetschte Zeile:
   dort bleibt die Leiste bei Trefferzahl und „Alle Filter", der Rest steckt im
   Flyout. */
@media only screen and (max-width: 768px) {
    .filter-bar-pills {
        display: none;
    }
    .filter-bar-actions {
        width: 100%;
        justify-content: space-between;
    }
}

/* ===== Flyout als Schublade auf breiten Fenstern =====
   Unter 769px bleibt es der Vollbild-Dialog. Darüber deckte er bisher die
   ganze Seite mit Weiß zu — als Schublade von rechts bleibt die Liste sichtbar
   und die Filterung bleibt im Zusammenhang. */
.facetwp-flyout-backdrop {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(16, 42, 67, 0.45);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
}
.facetwp-flyout-backdrop.active {
    opacity: 1;
    pointer-events: auto;
}
/* Doppelte Klasse mit Absicht: facetwp.css wird nach dieser Datei geladen und
   setzt dort left:0 und z-index:1100. Ohne die höhere Spezifität dockte die
   Schublade links an und läge unter dem Abdunkler. */
.facetwp-flyout.facetwp-flyout {
    z-index: 10000;
}
@media only screen and (min-width: 769px) {
    .facetwp-flyout.facetwp-flyout {
        left: auto;
        right: 0;
        box-shadow: -8px 0 40px rgba(16, 42, 67, 0.18);
    }
    .facetwp-flyout.facetwp-flyout.active {
        width: min(440px, 92vw);
    }
}

/* Einfachauswahl (RadioFacet): dasselbe Kästchen wie bei den Checkboxen, nur
   rund — der Unterschied „nur einer" statt „mehrere" bleibt so sichtbar. */
.facet-option-radio {
    border-radius: 50%;
}

/* Kopfzeile der Kurslisten: Dort steht nur noch das Suchfeld — der
   „Alle Filter"-Knopf sitzt jetzt in der Leiste über der Liste. Allein wirkte
   das 40vw schmale Feld in der zentrierten Zeile verloren und schnitt seinen
   Platzhalter ab, deshalb unterhalb des Desktops die volle Zeilenbreite. Die
   Lernapp-Übersicht behält ihre zweispaltige Kopfzeile (kein .is-solo). */
@media only screen and (max-width: 1280px) {
    .filter-sectiontop.is-solo {
        display: block;
    }
    .filter-sectiontop.is-solo .facetwp-input-wrap {
        display: block;
    }
    .filter-sectiontop.is-solo input.facetwp-search {
        width: 100% !important;
        min-width: 0 !important;
    }
}

/* ===== Interaktives Sucheingabefeld im Kopfbereich ===== */
.header-search-form {
    position: relative;
    width: clamp(280px, 48vw, 520px);
    max-width: 100%;
}
@media only screen and (max-width: 768px) {
    .header-search-form {
        width: 100%;
    }
}

.header-search-bar {
    display: flex;
    align-items: center;
    position: relative;
    background: #ffffff;
    border: 1.5px solid #d9e7ef;
    border-radius: 999px;
    padding: 4px 5px 4px 18px;
    box-shadow: 0 6px 20px rgba(44, 86, 105, 0.12);
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
}
.header-search-bar:hover {
    border-color: var(--mblau, #1A6D93);
    box-shadow: 0 8px 26px rgba(44, 86, 105, 0.18);
}
.header-search-bar.is-focused {
    border-color: var(--mblau, #1A6D93);
    box-shadow: 0 0 0 3.5px rgba(26, 109, 147, 0.22), 0 10px 30px rgba(44, 86, 105, 0.18);
}

.filter-sectiontop.is-solo input.header-search-input,
.facetwp-facet input.header-search-input,
input.header-search-input {
    flex: 1 1 auto;
    width: 100% !important;
    min-width: 0 !important;
    height: 42px !important;
    border: none !important;
    outline: none !important;
    background: transparent !important;
    color: var(--wblack, #1c1b1b) !important;
    font-size: 1rem !important;
    padding: 0 8px 0 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
}
input.header-search-input::placeholder {
    color: #8fa0ac;
    opacity: 1;
}

.header-search-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.header-search-count-pill {
    display: inline-flex;
    align-items: center;
    font-size: 0.76rem;
    font-weight: 700;
    line-height: 1;
    padding: 5px 10px;
    border-radius: 999px;
    background: var(--hellblau, #EDF5FF);
    color: var(--mblau, #1A6D93);
    border: 1px solid #c5edff;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.15s ease;
    user-select: none;
}
.header-search-count-pill:hover {
    background: #c5edff;
    transform: scale(1.04);
}
.header-search-count-pill.is-zero {
    background: #FFF6ED;
    color: #c25e00;
    border-color: #ffd8a8;
}

.header-search-clear-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: none;
    background: #f1f5f9;
    color: #64748b;
    cursor: pointer;
    padding: 0;
    transition: background-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.header-search-clear-btn:hover {
    background: var(--hellblau, #EDF5FF);
    color: var(--mblau, #1A6D93);
    transform: scale(1.08);
}

.header-search-submit-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 42px;
    padding: 0 18px 0 14px;
    border-radius: 999px;
    border: none;
    background: var(--mblau, #1A6D93);
    color: #ffffff;
    font-weight: 600;
    font-size: 0.92rem;
    cursor: pointer;
    box-shadow: 0 3px 8px rgba(26, 109, 147, 0.35);
    transition: background-color 0.18s ease, transform 0.15s ease, box-shadow 0.18s ease;
    white-space: nowrap;
}
.header-search-submit-btn:hover {
    background: var(--dunkelblau, #2C5669);
    transform: translateY(-1px);
    box-shadow: 0 5px 14px rgba(26, 109, 147, 0.45);
}
.header-search-submit-btn:active {
    transform: translateY(0) scale(0.97);
}
.header-search-submit-btn svg {
    flex-shrink: 0;
}
@media only screen and (max-width: 560px) {
    .header-search-submit-label {
        display: none;
    }
    .header-search-submit-btn {
        width: 42px;
        padding: 0;
        justify-content: center;
    }
}

/* Dropdown Vorschläge */
.header-search-dropdown {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    right: 0;
    background: #ffffff;
    border: 1px solid #E2E8F0;
    border-radius: 16px;
    box-shadow: 0 16px 40px rgba(44, 86, 105, 0.16), 0 4px 10px rgba(44, 86, 105, 0.05);
    z-index: 100;
    overflow: hidden;
    animation: searchDropdownFade 0.2s ease-out;
}
@keyframes searchDropdownFade {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
@media (prefers-reduced-motion: reduce) {
    .header-search-dropdown {
        animation: none;
    }
}

.header-search-pop-header {
    padding: 10px 16px 6px;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #64748b;
    border-bottom: 1px solid #f1f5f9;
}
.header-search-topics {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 12px 16px 16px;
}
.header-search-topic-pill {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    border-radius: 999px;
    border: 1px solid #d9e7ef;
    background: #ffffff;
    font-size: 0.86rem;
    color: var(--dunkelblau, #2C5669);
    cursor: pointer;
    transition: all 0.15s ease;
}
.header-search-topic-pill:hover {
    border-color: var(--mblau, #1A6D93);
    background: var(--hellblau, #EDF5FF);
    color: var(--mblau, #1A6D93);
    transform: translateY(-1px);
}
.header-search-items {
    list-style: none;
    margin: 0;
    padding: 6px 0;
}
.header-search-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    padding: 10px 16px;
    border: none;
    background: transparent;
    cursor: pointer;
    text-align: left;
    transition: background 0.15s ease;
    border-bottom: 1px solid #f8fafc;
}
.header-search-item:last-child {
    border-bottom: none;
}
.header-search-item:hover {
    background: var(--hellblau, #EDF5FF);
}
.header-search-item-info {
    min-width: 0;
    flex: 1;
}
.header-search-item-title {
    display: block;
    font-size: 0.92rem;
    font-weight: 600;
    color: #0f172a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.header-search-item-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 2px;
    font-size: 0.78rem;
    color: #64748b;
}
.header-search-item-provider {
    font-weight: 500;
    color: var(--mblau, #1A6D93);
}
.header-search-item-badge {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 4px;
    background: #f1f5f9;
    font-size: 0.75rem;
    color: #475569;
}
.header-search-actions-bar {
    display: flex;
    flex-direction: column;
    background: #f8fafc;
    border-top: 1px solid #e2e8f0;
}
.header-search-action-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 11px 16px;
    border: none;
    background: transparent;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--mblau, #1A6D93);
    cursor: pointer;
    transition: background 0.15s ease;
    text-align: center;
}
.header-search-action-btn:hover {
    background: var(--hellblau, #EDF5FF);
}
.header-search-action-btn.is-ai {
    border-top: 1px solid #edf2f7;
    color: var(--dunkelblau, #2C5669);
    font-size: 0.84rem;
}
.header-search-action-btn.is-ai:hover {
    background: #FFF6ED;
    color: #b45309;
}
.header-search-empty {
    padding: 20px 16px;
    text-align: center;
    color: #64748b;
    font-size: 0.9rem;
}

/* Hervorhebung / Scroll-Ziel für Suchergebnisse */
.course-tabs-row {
    scroll-margin-top: 24px;
}
.content-wrapper1 {
    scroll-margin-top: 24px;
}
.course-tabs-row.is-search-highlighted {
    animation: searchResultsPulse 1.8s ease-out;
}
.content-wrapper1.is-search-highlighted {
    animation: searchResultsPulse 1.8s ease-out;
}
@keyframes searchResultsPulse {
    0% {
        box-shadow: 0 0 0 4px rgba(26, 109, 147, 0.45);
        border-radius: 8px;
    }
    50% {
        box-shadow: 0 0 0 8px rgba(26, 109, 147, 0.15);
        border-radius: 8px;
    }
    100% {
        box-shadow: 0 0 0 0 rgba(26, 109, 147, 0);
        border-radius: 8px;
    }
}
@media (prefers-reduced-motion: reduce) {
    .course-tabs-row.is-search-highlighted,
    .content-wrapper1.is-search-highlighted {
        animation: none;
    }
}