: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 a
{
        color: #ffffff;
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;
}
.aside-container #category-filter-form.filter-sort-form {
    position: absolute;
      top: 40rem;
      padding: 1rem;
      border-color: var(--dunkelblau)!important;
      border-radius: 10px;
      border: solid;
      min-width: 340px; 
    }

    button.facetwp-reset {
        background:var(--dunkelblau);
    }


/* 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 {
color: white;
margin-top:3rem; 
display: flex;
  flex-direction: column;
  gap: 1vw;
}


.titelheader h1 {
    color:white; 
}

.filter-sectiontop {
    margin-top: 2rem;
    margin-bottom: 7rem;
  }

.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: radial-gradient(
        ellipse at center, 
        rgba(0,0,0,0.2) 50%, 
        rgba(0,0,0,0.5) 100%, 
        rgba(77, 77, 77, 0.8) 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%;
    overflow: hidden;
    background: #fff;
    z-index: 10000;
    transition: width 0.3s ease;
}
.facetwp-flyout.active {
    width:100%;
}

.facetwp-flyout-close {
    font-size: 2rem;
    color: var(--cred);
}
.facetwp-flyout-content {
    height: 100%;
    overflow-y: auto;
}
.facetwp-flyout-open {
    display:none;
}
.facetwp-flyout-content {
    padding:30px !important;
}
.flyout-row {
margin-bottom: 1rem!important;
}
.facetwp-flyout-content h3 {
    margin-bottom:0.5rem!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: flex;
    flex-wrap: wrap;
    gap: 15px;
    justify-content: center;
}

.category-box {
    flex: 1 1 calc(33.333% - 30px);
    min-width: 200px;
    max-width: 300px;
    text-decoration: none;
    display: block; /* Macht das gesamte Element klickbar */
    border-radius: 8px;
    padding:25px 0px 25px 0px; 
}

.category-contentlink {
    border: 2px solid #ddd;
    padding: 15px;
    border-radius: 8px;
    background: #f9f9f9;
    text-align: center;
    transition: background 0.3s, box-shadow 0.3s;
}

.category-box:hover .category-contentlink {
    background: #eee;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
}

.category-contentlink span {
    font-weight: bold;
}
.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;
}

    
/*filter styles*/ 

.facetwp-facet.facetwp-facet-reset_filter.facetwp-type-reset {
    margin-bottom: 0px;
}
.facetwp-facet.facetwp-facet-result_count.facetwp-type-pager{
    margin-bottom: 10px;
    font-size: 1.2rem;
    font-weight: 600;
}
.fhead {
padding: 1rem;
    margin: -1rem;
    background-color: var(--hellblau);
    border-radius: 6px;
    margin-bottom: 1rem;
}
.facetwp-slider-reset {
    display: none!important;
  }

/* Facetten-Abschnitte: einheitlicher Abstand zwischen den Filtergruppen statt
   der uneinheitlichen Browser-Standardränder von <h4> und <select> — vorher
   ergab sich der Abstand zufällig aus deren UA-Stylesheet statt aus CSS hier. */
.filter-section {
    margin-bottom: 0.9rem;
    padding-bottom: 0.9rem;
    border-bottom: 1px solid #e3e6ea;
}
.filter-section:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}
.filter-section h4 {
    margin-top: 0;
    margin-bottom: 0.45rem;
    color: var(--dunkelblau);
    font-size: 0.95rem;
}
/* facetwp.css gibt jeder .facetwp-facet 40px margin-bottom. In der
   Filterspalte kam das oben auf den Abstand von .filter-section drauf, dadurch
   stand zwischen Slider und Trennlinie fast eine ganze Zeilenhöhe Luft und die
   Spalte wurde unnötig lang. Der Abstand kommt jetzt nur noch aus
   .filter-section. */
.filter-section .facetwp-facet {
    margin-bottom: 0;
}

/* Checkbox-Facetten (Anbieter, Ort, Sprache, Abschluss, Förderung): Zeilen mit
   Innenabstand statt aneinandergeklebter Divs, mit sichtbarem Hover- und
   Auswahlzustand (vorher gab es außer der unsichtbaren .checked-Klasse kein
   optisches Feedback, welche Werte schon gewählt sind). */
.facetwp-facet.facetwp-type-checkboxes {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.facetwp-checkbox {
    display: flex;
    justify-content: space-between;
    /* Links Platz für das Checkbox-Icon aus facetwp.css (checkbox.png/-on.png,
       14px breit) lassen, statt dessen padding-left:20px zu überschreiben. */
    padding: 0.4rem 0.5rem 0.4rem 1.5rem;
    margin-bottom: 0;
    border-radius: 6px;
    font-size: 0.92rem;
    cursor: pointer;
    transition: background-color 0.15s ease;
}
.facetwp-checkbox:hover {
    background-color: var(--hellblau);
}
.facetwp-checkbox.checked {
    background-color: var(--hellblau);
    font-weight: 600;
    color: var(--dunkelblau);
}
.facetwp-counter {
    color: #7c8b94;
    font-weight: 400;
    margin-left: 0.5rem;
}
.facetwp-checkbox.checked .facetwp-counter {
    color: var(--mblau);
}
.facetwp-toggle {
    padding: 0.3rem 0.5rem;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--mblau);
    cursor: pointer;
}
.facetwp-toggle:hover {
    text-decoration: underline;
}

/* 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; 
            gap: 1rem;

        }
        .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%
        }

        .facetwp-flyout-open {
            display:block;
        }
        .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;
}

.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. Bewusst ohne max-height/overflow-y: die Box bleibt so lang wie
   ihr Inhalt (Sprache, Abschluss, Förderung …) und wird von der Seite selbst
   überscrollt statt in einem eigenen Innenscroll-Kasten mit Scrollbalken zu
   sitzen. */
.term-kostenlose-online-kurse .aside-container #category-filter-form.filter-sort-form {
    position: sticky;
    top: 130px;
}

/* 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):
   Name, Screenshot und Stichpunkte je Anbieter sauber getrennt statt als
   durchlaufender Fließtext mit vereinzelten <hr>. */
.top-content .kl-free-providers {
    margin-top: 1.5rem;
}
.top-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 {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}
.top-content .kl-free-provider h3,
.top-content .kl-free-provider h4 {
    margin-top: 0 !important;
}
.top-content .kl-free-shot {
    display: block;
    margin: 0 0 1rem 0;
}
.top-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 {
    margin: 0;
    padding-left: 1.3rem;
}
.top-content .kl-free-provider li {
    margin-bottom: 0.6rem;
    line-height: 1.5;
}
.top-content .kl-free-provider li:last-child {
    margin-bottom: 0;
}

@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: 28px;
    margin: 0.25rem 0;
}
.dual-slider::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    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: 28px;
    margin: 0;
    background: none;
    -webkit-appearance: none;
    appearance: none;
    pointer-events: none;
}
.dual-slider input[type="range"]::-webkit-slider-runnable-track {
    height: 28px;
    background: transparent;
}
.dual-slider input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    pointer-events: auto;
    width: 18px;
    height: 18px;
    margin-top: 5px;
    border-radius: 50%;
    background: var(--mblau);
    border: 2px solid #fff;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.35);
    cursor: pointer;
}
.dual-slider input[type="range"]::-moz-range-track {
    background: transparent;
}
.dual-slider input[type="range"]::-moz-range-thumb {
    pointer-events: auto;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--mblau);
    border: 2px solid #fff;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.35);
    cursor: pointer;
}
.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-desc {
    font-size: 0.95rem;
    color: #475569;
    margin: -0.5rem 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 in der Werkzeugzeile des Eingabefelds, direkt vor „Senden" */
.ki-counter-badge {
    flex-shrink: 0;
    margin-left: auto;
    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;
    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%;
    min-height: 26px;
    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 und breiter bekommt der Chat den
   Platz, der sonst ungenutzt neben der Karte stünde. */
.allcontent.ki-active {
    display: block;
    width: min(1560px, calc(100% - var(--seitenrand) * 2));
    max-width: none;
}

.allcontent.ki-active .maincontainer {
    max-width: 1560px;
}

/* ===== Ü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));
}

.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;
}
.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;
    }
}