/*!
Theme Name: Kadence Child
Theme URI: https://www.kadencewp.com/kadence-theme/
Template: kadence
Author: Kadence WP
Author URI: https://www.kadencewp.com/
Description: A child theme for the Kadence Theme.
Version: 1.0.0
License: GNU General Public License v3.0 (or later)
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Text Domain: kadence-child
*/
/* Theme customization starts here
-------------------------------------------------------------- */

/* roboto-regular - latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: local(''),
       url('/fonts/roboto-v30-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('/fonts/roboto-v30-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* roboto-italic - latin */
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 400;
  src: local(''),
       url('/fonts/roboto-v30-latin-italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('/fonts/roboto-v30-latin-italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* roboto-500 - latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  src: local(''),
       url('/fonts/roboto-v30-latin-500.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('/fonts/roboto-v30-latin-500.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* roboto-500italic - latin */
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 500;
  src: local(''),
       url('/fonts/roboto-v30-latin-500italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('/fonts/roboto-v30-latin-500italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* roboto-700 - latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  src: local(''),
       url('/fonts/roboto-v30-latin-700.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('/fonts/roboto-v30-latin-700.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* roboto-700italic - latin */
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 700;
  src: local(''),
       url('/fonts/roboto-v30-latin-700italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('/fonts/roboto-v30-latin-700italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* roboto-900 - latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 900;
  src: local(''),
       url('/fonts/roboto-v30-latin-900.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('/fonts/roboto-v30-latin-900.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* roboto-900italic - latin */
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 900;
  src: local(''),
       url('/fonts/roboto-v30-latin-900italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('/fonts/roboto-v30-latin-900italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}



/* montserrat-regular - latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  src: local(''),
       url('/fonts/montserrat-v25-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('/fonts/montserrat-v25-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* montserrat-500 - latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 500;
  src: local(''),
       url('/fonts/montserrat-v25-latin-500.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('/fonts/montserrat-v25-latin-500.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* montserrat-600 - latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 600;
  src: local(''),
       url('/fonts/montserrat-v25-latin-600.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('/fonts/montserrat-v25-latin-600.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* montserrat-700 - latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  src: local(''),
       url('/fonts/montserrat-v25-latin-700.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('/fonts/montserrat-v25-latin-700.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* montserrat-800 - latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 800;
  src: local(''),
       url('/fonts/montserrat-v25-latin-800.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('/fonts/montserrat-v25-latin-800.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* montserrat-900 - latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 900;
  src: local(''),
       url('/fonts/montserrat-v25-latin-900.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('/fonts/montserrat-v25-latin-900.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}



/*Farben*/ 

:root {
  /* Seitenrand: haelt Inhalte auf schmalen Fenstern von den Fensterkanten weg.
     Wirkt nur, solange das Fenster schmaler als die Container-Maxbreite ist —
     auf breiten Bildschirmen zentrieren die Container weiterhin unveraendert. */
  --seitenrand: clamp(1rem, 3vw, 2.5rem);
  --dorange: #d77459;
  --hellblau: #EDF5FF;
  --dunkelblau:#2C5669;
  --morange:#FFC85E;
  --horange:#FFEEC4;
  /* Abstufungen des Kurslotse-Blaus fuer Navigationsflaechen (Mega-Menue und
     mobiler Drawer): Linien, Fliesstext und Icons liegen damit auf derselben
     Skala wie --dunkelblau/--hellblau statt auf neutralem Grau. */
  --navlinie: #dde8f2;
  --navlinie-kraeftig: #c3d6e6;
  --navtext: #35505e;
  --navtext-leise: #5d7684;
  --navicon: #8fabc0;
  /* Aufgehelltes --dunkelblau fuer den mobilen Drawer, der auf fast schwarzem
     Grund steht — dort waere #2C5669 nicht lesbar. */
  --navblau-dunkelgrund: #8fbcd4;
}



/* Homepage */
.page-id-3919 .hero-container.site-container {
  display: none;
}

.page-id-3919 .content-area {
  margin: 0vw 8vw 0vw 8vw;
}

.entry-taxonomies span:nth-child(0n+2) a{
  display: none;
}
.entry-taxonomies span:nth-child(0n+2) > span a{
  display: inline;
}
/*hompage posts*/


.page-id-3919 .kb-posts-id-_daec50-a2 .loop-entry {
  /* background: #ebebeb; */
  box-shadow: 0px 0px 3px 1px  #e0e0e0;
  border-radius: 6px;
  border-color: #d6dadf;
  /* border-style: solid; */
}


.page-id-3919 .kb-posts-id-_daec50-a2 .loop-entry > .entry-content-wrap  {
  padding: 20px;
}
.page-id-3919 .wp-block-kadence-posts.kb-posts.kb-posts-id-_1792fd-5e.content-wrap.grid-cols.kb-posts-style-unboxed.grid-sm-col-3.grid-lg-col-3.item-image-style-above {
margin: 0px 15px 0px 15px;
}


.page-id-3919 img.attachment-medium.size-medium.wp-post-image {
  border-radius: 6px 6px 0px 0px;
}

.kt-row-layout-inner>.kt-row-column-wrap>.kadence-column_f49b3c-65>.kt-inside-inner-col {
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  max-width: 100vw;
  width: 100vw;
  padding-left: 0;
  padding-right: 0;
  clear: both;
}

.page-id-3919 .header.entry-header { margin: 0px;
}


.site-header-row-container-inner {box-shadow: 0px 0px 3px 1px #e0e0e0;}

/* pill */
.page-id-3919 .loop-entry.type-post .entry-taxonomies .category-style-pill a {
background-color: #FFB424;
}

/* sprachen lernen */
.page-id-3919 .loop-entry.type-post .entry-taxonomies .category-style-pill a[href*="sprachen-lernen"] {
  background-color: #fb683e;
}

.page-id-3919 .loop-entry.type-post .entry-taxonomies .category-style-pill a[href*="kreative-online-kurse"] {
  background-color:#19333F;
}

.page-id-3919 .loop-entry.type-post .entry-taxonomies .category-style-pill a[href*="podcast"] {
  background-color:#a5f1c6;
  color:#19333F;
}

.category-links.term-links.category-style-pill>a {
  pointer-events: none;
display: inline-block;
}

/* pill blau */
.test >.loop-entry.type-post .entry-taxonomies .category-style-pill a {
  background: #19333f;
}

/*img kostenlos*/
.post-1938 img.attachment-medium.size-medium.wp-post-image {
max-height: 350px;
border-radius: 6px;
}
/*img kostenlos*/

.entry.content-bg.loop-entry.post-1938.post.type-post.status-publish.format-standard.has-post-thumbnail.hentry.category-tipps-und-kostenlose-kurse{
    padding: 3rem!important;
} 

/*full rounded images*/
div figure> img.wp-image-4084  {
  border-radius: 20px!important;
  width: 80%;
  padding: 0px;
}

/* Widget fixed  */
.primary-sidebar.widget-area .widget {
    margin-top: 6rem;
}


/* Vergleich */
.page-id-2 .hero-container.site-container, .page-id-5307 .hero-container.site-container {
  display: none;
}

.page-id-2  #primary, .page-id-5307 #primary {

margin: 0px!important;
}
.blueback {
  background: #EDF5FF;
  padding-top: 40px;
}
.page-id-3919 .kt-row-layout-overlay {
top: -10%; 
}
.page-id-3919 .kb-row-layout-id3919_ea8e3b-5c {
  background-color: #fff;
}
.page-id-3919 .kb-row-layout-id3919_ea8e3b-5c > .kt-row-column-wrap {
padding-bottom: 70px;
}

.page-id-3919 .entry-title {
  font-size:1rem; 
}
.alignfull.unternback {
background-color: #acdaf9;
}

.maxwidth {width: 1200px;}

.page-id-2 .entry-content-wrap, .page-id-5307 .entry-content-wrap
{padding-top: 0px; }

/* E-Learning Info Seite  */

.page-id-595 .wp-site-blocks .hero-section-overlay{

  background: #e6bd85;
}

.page-id-595 .entry-title:first-child  {
  color: white;
}

.page-id-595 a.post-thumbnail.kadence-thumbnail-ratio-2-3 {
  height: 100%;
  border-radius: 6px;
}
.page-id-595 article.entry.content-bg.loop-entry.post-4356.post.type-post.status-publish.format-standard.has-post-thumbnail.hentry.category-e-learning {
box-shadow: 0px 0px 3px 1px  #e0e0e0;
border-radius: 6px;
border-color: #d6dadf;
}
.page-id-595 img.attachment-medium_large.size-medium_large.wp-post-image {
  border-radius: 6px;
}
#block-10 {display:none; }

/* Angebote Seite  */
.page-id-1412 .wp-site-blocks .hero-section-overlay{

  background: #EDF5FF;
}
div.hero-container .entry-header .entry-title{

font-size: 2.5rem;
}

.wp-block-columns.discount {

  box-shadow: 0px 0px 3px 1px  #e0e0e0;
  border-radius: 6px;
  border-color: #d6dadf;
  background: #F3F3F3!important;
  padding-left: 35px;
}
.wp-block-columns.discount img{

    border-radius: 6px;

  }

  .wp-block-columns.has-background {
    padding: 0px;
  }

/* Beiträge Karusell */

.tns-outer .tns-controls button[aria-controls="tns1"] {
  background: black;
  opacity: 100;
}

.tns-outer .tns-controls button:hover[aria-controls="tns1"] {
background: rgba(123, 123, 123, 0.8);
}

div.carousel-item .entry.loop-entry {
  border-radius: 20px;
}

/* YT Videos responsive */
.video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 0;
    height: 0;
    overflow: hidden;
}

.video-container iframe,
.video-container object,
.video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* Text  */

.margin { margin-top:1rem; margin-bottom: 2rem;}


.imgh2 {display:flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
margin-bottom: 15px;
 }

div .imgh2 > img + h2, p, h3 {
  margin: 0px;
}


.su-spoiler .su-spoiler-title {
  font-size: 15px;
  font-weight: 600;
  background-color: #F1F1F1;
  border-radius: 6px;
  color: black;
  margin-bottom: 0;
  /* !important noetig: shortcodes.css laedt nach diesem File und ueberschreibt
     padding-left/-right der Style-Variante "default" sonst bei gleicher
     Selektor-Spezifitaet (siehe su-spoiler-icon-plus .su-spoiler-icon darunter). */
  padding: 10px 14px 10px 42px !important;
  line-height: 1.4;
}
/* shortcodes.css setzt auf .su-accordion .su-spoiler ebenfalls margin-bottom
   (gleiche Selektor-Spezifitaet, laedt aber nach diesem File) — ohne !important
   bliebe der Abstand zwischen den Fragen trotz margin-bottom:0 oben bestehen,
   weil das Kind-Margin durch den randlosen Elternblock nach aussen kollabiert. */
.su-accordion .su-spoiler {
  margin-bottom: 0 !important;
}
/* Das Plus/Minus-Icon von Shortcodes Ultimate kommt aus einer Icon-Schrift
   (ShortcodesUltimateIcons -> fork-awesome), deren Font-Dateien nicht mitmigriert
   wurden. Ohne die Datei zeigt der Browser nur ein leeres Rechteck vor der Frage.
   Ersatz durch echte Unicode-Zeichen, die ohne Font-Datei auskommen. */
.su-spoiler-icon-plus .su-spoiler-icon {
  font-family: inherit;
  width: auto;
  height: auto;
  /* !important: shortcodes.css setzt fuer die Style-Variante "default" ueber
     einen spezifischeren Selektor (.su-spoiler-style-default>.su-spoiler-title>
     .su-spoiler-icon) sonst left:0 — das Icon klebte dadurch am Rand der Box
     statt den hier beabsichtigten Abstand zu halten. */
  left: 16px !important;
  top: 50%;
  margin-top: -9px;
  font-size: 16px;
  line-height: 1;
  color: #55606b;
}
.su-spoiler.su-spoiler-icon-plus .su-spoiler-icon:before {
  content: "\2212";
}
.su-spoiler.su-spoiler-icon-plus.su-spoiler-closed .su-spoiler-icon:before {
  content: "+";
}
/* shortcodes.css zeigt bei jedem Klick auf eine Frage (nicht nur bei Tab-
   Navigation) einen gepunkteten Browser-Standard-Fokusring — das sah wie ein
   Darstellungsfehler auf der zuletzt geoeffneten Frage aus. Nur bei
   Tastatur-Fokus einen eigenen, zum Design passenden Ring zeigen. */
.su-spoiler-title:focus {
  outline: none !important;
}
.su-spoiler-title:focus-visible {
  outline: 2px solid var(--dunkelblau, #2C5669);
  outline-offset: 2px;
  border-radius: 6px;
}
.su-spoiler-title + .su-spoiler-content {
  font-size: 15px;
  /* !important: shortcodes.css setzt fuer die Style-Variante "default" das
     komplette Padding (inkl. padding-right:0) neu — ohne !important klebte
     der geoeffnete Antworttext rechts an der Box. Links auf die Einrueckung
     der Frage abgestimmt. */
  padding: 12px 16px 12px 42px !important;
  box-shadow: none;
  border: 1px solid #e3e6ea;
  border-radius: 6px;
}
/* Die obige !important-Regel gilt fuer offen UND geschlossen, ueberschreibt bei
   geschlossenen Fragen also auch shortcodes.css' padding-top/-bottom:0 — dadurch
   blieb pro Frage eine leere Luecke (Padding ohne Inhalt) stehen, die wie
   ueberschuessiger Abstand zwischen den FAQ-Zeilen aussah. Bei geschlossenem
   Zustand das Padding wieder auf 0 setzen. */
.su-spoiler.su-spoiler-closed > .su-spoiler-content {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
/* italki */

ul > .sup-spoiler,.su-spoiler-style-fancy > .su-spoiler-title {
  background: #d77459!important;
  color: white;}
.sup-spoiler,.su-spoiler-style-fancy > .su-spoiler-title a{
  color: white;
}


/* faqbox */

.faqbox {
  /* box-shadow: 0px 0px 3px 1px #e0e0e0;
  border-radius: 6px; */
  padding: 20px;
  margin-bottom: 27px;
}
/* Boxen */
.nicebox {
  box-shadow: 0px 0px 3px 1px #e0e0e0;
  border-radius: 6px;
  padding: 20px;
  border-style: solid;
  margin-bottom: 27px;
  background-color: #EDF5FF;
}
.grey{
  background-color: #F3F3F3;
}
.nicebox > li  a:link {
    color: black;
}
.white{
  background-color: white;
}
/* Autoren-Box am Beitragsende ("EndBox") — im Original hing das Autorenbild per
   float:left neben der Autorenzeile, und je nach Beitrag steckt es mal im .imgh2,
   mal in einem eigenen <figure> davor: mal klebte die Zeile am Bild, mal stand sie
   mit großer Lücke daneben. Hier stattdessen Flex — Fließtext über die volle
   Breite, darunter eine Zeile aus Bild und Autorenhinweis; beide Markup-Varianten
   landen so im selben Layout. Die Karte trägt Rahmen und Schatten der übrigen
   Beitragsboxen (vgl. #review in blog-post.css) statt des blauen Scheins aus dem
   WP-Theme. */
.EndBox {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 18px;
  row-gap: 16px;
  margin: 2.4em 0;
  padding: 24px 28px;
  border: 1px solid #e3e9f0;
  border-radius: 16px;
  background-color: #ffffff;
  box-shadow: 0 2px 6px rgba(25, 51, 63, 0.08), 0 18px 40px -28px rgba(25, 51, 63, 0.5);
}
div.EndBox > p {
  flex: 1 0 100%;
  margin: 0;
  font-size: 1.0625rem;
  line-height: 1.7;
  color: #333f4d;
}
div.EndBox > figure {
  flex: 0 0 auto;
  margin: 0;
  line-height: 0;
}
/* Echtes Porträtfoto statt der früheren Illustration — braucht deshalb einen
   eigenen Rund-Zuschnitt (object-fit statt nur Verkleinern) und den float aus
   dem WP-Markup gelöst. */
div.EndBox .imgh2 img,
div.EndBox > figure img {
  float: none;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
  margin: 0;
}
.EndBox .imgh2 strong {
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.5;
  color: #19333f;
}
.EndBox a {
  color: #1a6d93;
  text-decoration: underline;
  text-decoration-color: rgba(26, 109, 147, 0.4);
  text-underline-offset: 0.18em;
}
.EndBox a:hover {
  color: #19333f;
  text-decoration-color: #ffb424;
}
@media (max-width: 575px) {
  .EndBox { padding: 20px; }
}
/*popup*/
.pum-content.popmake-content:focus-visible,
.pum-content *:focus,
.pum-overlay .pum-content {
	outline: none !important;
}
/* Bild und Autorenzeile teilen sich die Zeile unter dem Absatz; das
   margin-bottom aus .imgh2 würde die Karte unten aufreißen. */
div.EndBox > .imgh2 {
  flex: 1 1 150px;
  gap: 16px;
  margin: 0;
}

/* Footer */
.footer-widget-area.content-valign-middle {
  align-items: start!important;
}

/* Review  */
 .review-links li {
    display: flex!important;
    flex-direction: row;
    justify-content: center;
}


/* Diese vier Regeln standen im Original als Aufzählung einzelner Beitrags-IDs
   (.wp-review-3771, .wp-review-3235, …). Jede neue Box hätte deshalb wieder wie
   das nackte Plugin ausgesehen, und in der letzten Regel fehlte zwischen
   .wp-review-2317 und .wp-review-5225 ein Komma — .wp-review-2317 bekam den
   Radius also nie. Seit die Boxen ohnehin alle dasselbe Template und dieselbe
   Palette tragen (migration/lib/wp-review.js), greift hier eine Regel für alle. */
.review-wrapper .review-links a:hover {
    background: #19333f!important;
    color: #fff!important;
    box-shadow: none!important;
}
#review.review-wrapper .review-pros-cons .review-cons {
    background: #EDF5FF!important;
    color: #000!important;
}
#review.review-wrapper .review-pros-cons .review-pros {
    color: #ffffff!important;
    background: #284d5e!important;
}


.review-wrapper {
  border-radius: 20px!important;
  border: none!important;
  margin: 5px 1% 20px!important;
  box-shadow: 0 0 20px rgba(193, 193, 193, 0.5)!important;
}


/* Widgets */
div.ez-toc-widget-container {
    position: sticky;
}

/*underline links footer*/ 

.site-top-footer-inner-wrap.site-footer-row.site-footer-row-columns-3.site-footer-row-column-layout-equal.site-footer-row-tablet-column-layout-default.site-footer-row-mobile-column-layout-row.ft-ro-dir-column.ft-ro-collapse-normal.ft-ro-t-dir-default.ft-ro-m-dir-default.ft-ro-lstyle-plain a {
    text-decoration: underline;
}

.site-middle-footer-inner-wrap.site-footer-row.site-footer-row-columns-3.site-footer-row-column-layout-equal.site-footer-row-tablet-column-layout-default.site-footer-row-mobile-column-layout-row.ft-ro-dir-column.ft-ro-collapse-normal.ft-ro-t-dir-default.ft-ro-m-dir-default.ft-ro-lstyle-plain a{
    text-decoration: underline;
}
.site-middle-footer-inner-wrap.site-footer-row.site-footer-row-columns-3.site-footer-row-column-layout-equal.site-footer-row-tablet-column-layout-default.site-footer-row-mobile-column-layout-row.ft-ro-dir-column.ft-ro-collapse-normal.ft-ro-t-dir-default.ft-ro-m-dir-default.ft-ro-lstyle-plain a:hover{
    color: #1A6D93;
}


/* Hauptmenü-Dropdown: UX-Verbesserungen
   (#site-navigation als ID-Selektor, damit die Regeln die Kadence-generated.css
   unabhängig von der Ladereihenfolge überstimmen) */

/* Sanftes Ein-/Ausblenden statt hartem display-Toggle; die verzögerte
   visibility beim Schließen wirkt als Hover-Gnadenfrist, damit das Menü nicht
   sofort zuklappt, wenn der Mauszeiger kurz den Pfad verlässt. */
#site-navigation .header-menu-container ul li.menu-item-has-children > ul.sub-menu {
  display: block;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition:
    opacity 0.16s ease 0.12s,
    transform 0.16s ease 0.12s,
    visibility 0s linear 0.3s;
}
#site-navigation .header-menu-container ul li.menu-item-has-children:hover > ul.sub-menu,
#site-navigation .header-menu-container ul li.menu-item-has-children:focus-within > ul.sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition:
    opacity 0.16s ease,
    transform 0.16s ease,
    visibility 0s;
}

/* Optik: abgerundete Karte, weichere Trennlinien statt hartem Schwarz */
#site-navigation .header-menu-container ul ul.sub-menu {
  border-radius: 8px;
  padding: 6px 0;
  box-shadow: 0 6px 24px rgba(25, 51, 63, 0.16);
}
/* Lange Listen scrollen statt aus dem Viewport zu laufen — aber nur, wenn kein
   Eintrag ein seitliches Flyout hat (overflow würde die dritte Ebene abschneiden) */
#site-navigation .header-menu-container ul ul.sub-menu:not(:has(li.menu-item-has-children)) {
  overflow: hidden auto;
  max-height: calc(100vh - 140px);
  overscroll-behavior: contain;
}
/* Seitliches Flyout (dritte Ebene): Kadence positioniert es bei left:100%/top:0;
   kleiner Versatz, damit sich die Karten optisch überlappen statt zu kleben */
#site-navigation .header-menu-container ul ul ul.sub-menu {
  left: calc(100% + 4px);
}
/* Pfeil der Flyout-Einträge zeigt zur Seite (Rotation kommt aus header.min.css),
   Platz dafür rechts in der Zeile */
#site-navigation .header-menu-container ul ul li.menu-item-has-children > a .nav-drop-title-wrap {
  padding-right: 1.4em;
}
#site-navigation .header-menu-container ul ul li.menu-item {
  border-bottom: 1px solid #eef1f4;
}
#site-navigation .header-menu-container ul ul li.menu-item:last-child {
  border-bottom: 0;
}

/* Größere Klickflächen und besser lesbare Schrift (vorher 12px) */
#site-navigation .header-menu-container ul ul li.menu-item > a {
  width: 260px;
  padding: 0.8em 1.1em;
  font-size: 13px;
  line-height: 1.4;
  color: #19333f;
}
#site-navigation .header-menu-container ul ul li.menu-item > a:hover,
#site-navigation .header-menu-container ul ul li.menu-item > a:focus-visible {
  color: var(--dunkelblau);
  background: var(--hellblau);
  padding-left: 1.35em;
}

/* Aktuelle Seite im Dropdown markieren */
#site-navigation .header-menu-container ul ul li.menu-item.current-menu-item > a {
  color: var(--dunkelblau);
  background: var(--horange);
  font-weight: 600;
  box-shadow: inset 3px 0 0 var(--morange);
}

/* Pfeil dreht sich, solange das Untermenü offen ist — nur auf der obersten
   Ebene; in Flyout-Einträgen zeigt er seitlich (Kadence rotiert dort -90°) */
#site-navigation .menu-item-has-children .dropdown-nav-toggle .kadence-svg-iconset {
  transition: transform 0.2s ease;
}
#site-navigation .menu > li.menu-item-has-children:hover > a .dropdown-nav-toggle .kadence-svg-iconset,
#site-navigation .menu > li.menu-item-has-children:focus-within > a .dropdown-nav-toggle .kadence-svg-iconset {
  transform: rotate(180deg);
}
/* ===== Mega-Menü (Menüpunkt "Weiterbildungen") =====
   Statt einer 30 Einträge langen Dropdown-Liste ein mehrspaltiges Panel. Es
   hängt nicht am <li> (dafür wäre es viel zu breit) und auch nicht an der
   Navigation (dann liefe es links über den Bildschirmrand hinaus), sondern an
   der Kopfzeile selbst: Bezugsrahmen ist .site-main-header-inner-wrap, das
   Panel läuft also exakt von der linken Logokante bis zur rechten Kante des
   Sprachumschalters und steht damit so mittig wie der Kopfbereich. Ein- und
   Ausblenden läuft über dieselbe Hover-/Focus-Mechanik wie bei den normalen
   Untermenüs.

   Farbig geführt wird das Panel über das Kurslotse-Blau (--dunkelblau /
   --hellblau): Überschriften, Icons, Zahlen und Hover liegen auf dieser Skala.
   Die beiden Karten der Randspalte setzen sich davon ab — der Ratgeber in
   Orange, die Förderung im vollen Dunkelblau. */
#main-header .site-main-header-inner-wrap {
  position: relative;
}
/* Navigation und Mega-<li> bleiben ohne eigenen Bezugsrahmen, damit das Panel
   auf die Kopfzeile durchgreift. */
#site-navigation,
#site-navigation .header-menu-container ul li.menu-item-mega {
  position: static;
}
#site-navigation .header-menu-container li.menu-item-mega > .mega-menu {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: #fff;
  border: 1px solid var(--navlinie);
  border-radius: 14px;
  box-shadow: 0 18px 40px -14px rgba(25, 51, 63, 0.28);
  z-index: 999;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition:
    opacity 0.16s ease 0.12s,
    transform 0.16s ease 0.12s,
    visibility 0s linear 0.3s;
}
#site-navigation .header-menu-container li.menu-item-mega:hover > .mega-menu,
#site-navigation .header-menu-container li.menu-item-mega:focus-within > .mega-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition:
    opacity 0.16s ease,
    transform 0.16s ease,
    visibility 0s;
}
/* Themen links (Spalten, darunter die Chip-Zeile, darunter die Fußzeile),
   Ratgeber-Karte rechts. Die Karte belegt die rechte Spalte über beide Zeilen —
   sie steht also neben den Themen UND neben der Fußzeile und deckt damit den
   gesamten rechten Bereich des Panels ab. */
#site-navigation .mega-menu-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 244px;
  grid-template-areas:
    "main aside"
    "footer aside";
  gap: 0 1.5rem;
  padding: 1.45rem 1.6rem 1.35rem;
}
#site-navigation .mega-menu-main {
  grid-area: main;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  min-width: 0;
}
/* Randspalte: zwei gleich große Karten übereinander (Ratgeber, Förderung).
   1fr je Zeile hält sie auf derselben Höhe, egal wie lang die Teaser sind. */
#site-navigation .mega-menu-aside {
  grid-area: aside;
  display: grid;
  grid-auto-rows: 1fr;
  gap: 0.7rem;
}
#site-navigation .mega-menu-footer {
  grid-area: footer;
}
@media (max-width: 1320px) {
  #site-navigation .mega-menu-inner {
    grid-template-columns: minmax(0, 1fr) 220px;
    gap: 0 1.2rem;
    padding: 1.3rem 1.2rem 1.2rem;
  }
}
/* Vier gleich breite Themenspalten. align-content:start hält sie oben, damit
   das Aufklappen einer Unterliste die Nachbarspalten nicht verschiebt. */
#site-navigation .mega-menu-columns {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-content: start;
  gap: 0.9rem 1rem;
  /* Platz für die längste aufgeklappte Spalte — das Panel behält beim
     Aufklappen einer Unterliste seine Höhe und springt nicht. */
  min-height: 13.5rem;
}
#site-navigation .mega-menu-heading {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0 0 0.45rem;
  padding: 0 0.5rem 0.35rem;
  border-bottom: 1px solid var(--navlinie);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--dunkelblau);
}
#site-navigation .mega-menu-column ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
#site-navigation .mega-menu-column li {
  border: 0;
  margin: 0;
}
#site-navigation .mega-menu a {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: auto;
  padding: 0.38rem 0.5rem;
  border-radius: 8px;
  font-size: 15px;
  line-height: 1.3;
  color: var(--navtext);
  text-decoration: none;
  background: none;
}
#site-navigation .mega-menu a:hover,
#site-navigation .mega-menu a:focus-visible {
  background: var(--hellblau);
  color: var(--dunkelblau);
}
/* Aktuelle Seite: nur Fläche und Schriftschnitt, kein Balken an der linken
   Kante — der Strich zerschnitt die Spalte optisch. */
#site-navigation .mega-menu a.is-current {
  background: var(--hellblau);
  color: var(--dunkelblau);
  font-weight: 600;
}
/* "beliebt" o. ä. an einzelnen Kategorien — steht vor der Kurszahl. */
#site-navigation .mega-menu-badge {
  flex: none;
  padding: 0.05rem 0.45rem;
  border-radius: 999px;
  background: var(--horange);
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #7a5410;
}
/* Spalten-Icon vor der Überschrift: dezent blau. Kein Hover-/Aktivzustand
   nötig — die Überschrift ist kein Link. */
#site-navigation .mega-menu-icon {
  flex: none;
  width: 19px;
  height: 19px;
  color: var(--navicon);
}
#site-navigation .mega-menu-label {
  flex: 1 1 auto;
  min-width: 0;
  hyphens: auto;
}
#site-navigation .mega-menu-count {
  flex: none;
  margin-left: auto;
  min-width: 1.7rem;
  padding: 0.05rem 0.4rem;
  border-radius: 999px;
  background: var(--hellblau);
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--dunkelblau);
  text-align: center;
  font-variant-numeric: tabular-nums;
}
#site-navigation .mega-menu a:hover .mega-menu-count,
#site-navigation .mega-menu a:focus-visible .mega-menu-count,
#site-navigation .mega-menu a.is-current .mega-menu-count {
  background: #fff;
}

/* Oberkategorien mit Unterthemen (z. B. KI → EU AI Act, Data Science):
   Die Unterliste steht eingeklappt im Dokument — mit der Tab-Taste erreichbar
   und für Suchmaschinen sichtbar — und fährt auf, sobald der Mauszeiger oder
   der Tastaturfokus auf dem Eintrag steht. Enthält sie die aktuelle Seite,
   ist sie über .is-open von Anfang an offen. */
#site-navigation .mega-menu-column > ul > li > a {
  font-weight: 500;
}
/* Fester Platz für den Chevron, auch wenn eine Kategorie keine Unterthemen
   hat: sonst rutscht die Kurszahl je nach Zeile unterschiedlich weit nach
   rechts und die Spalte wirkt aus dem Lot — mit der festen Breite stehen die
   Zahlen einer Spalte immer exakt untereinander. */
#site-navigation .mega-menu-column > ul > li > a .mega-menu-chevron-slot {
  flex: none;
  width: 14px;
  height: 14px;
  margin-left: 0.1rem;
}
#site-navigation .mega-menu-chevron {
  flex: none;
  color: var(--navicon);
  transition: transform 0.2s ease;
}
#site-navigation .mega-menu-parent:hover > a .mega-menu-chevron,
#site-navigation .mega-menu-parent:focus-within > a .mega-menu-chevron,
#site-navigation .mega-menu-parent.is-open > a .mega-menu-chevron {
  transform: rotate(180deg);
  color: var(--dunkelblau);
}
#site-navigation .mega-menu-subwrap {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.22s ease;
}
#site-navigation .mega-menu-parent:hover > .mega-menu-subwrap,
#site-navigation .mega-menu-parent:focus-within > .mega-menu-subwrap,
#site-navigation .mega-menu-parent.is-open > .mega-menu-subwrap {
  grid-template-rows: 1fr;
}
/* Unterthemen rücken ein statt an einer Linie zu hängen — Striche an der linken
   Kante haben die Spalte zerschnitten. */
#site-navigation .mega-menu-sublist {
  overflow: hidden;
  min-height: 0;
  margin: 0 0 0 1.75rem;
  padding-left: 0;
}
#site-navigation .mega-menu-sublist a {
  padding-top: 0.28rem;
  padding-bottom: 0.28rem;
  font-size: 14px;
  font-weight: 400;
  color: var(--navtext-leise);
}

/* Sprachen und Förderung: dieselben Links wie in einer Spalte, aber als
   kompakte Chip-Zeile unter den Themen. Sie sind Auswahlkriterien und keine
   Fachthemen — als Chips stehen sie sichtbar bei den Themen, ohne den vier
   Themenspalten Breite wegzunehmen. */
#site-navigation .mega-menu-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0.35rem 1.4rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--navlinie);
}
#site-navigation .mega-menu-chipgroup {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem 0.55rem;
  min-width: 0;
}
#site-navigation .mega-menu-heading-inline {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  margin: 0;
  padding: 0;
  border: 0;
  white-space: nowrap;
  color: var(--navtext-leise);
}
#site-navigation .mega-menu-chipgroup ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
#site-navigation .mega-menu-chipgroup li {
  border: 0;
  margin: 0;
}
#site-navigation a.mega-menu-chip {
  gap: 0.35rem;
  padding: 0.28rem 0.6rem 0.28rem 0.5rem;
  border: 1px solid var(--navlinie);
  border-radius: 999px;
  font-size: 14px;
  font-weight: 500;
}
#site-navigation a.mega-menu-chip:hover,
#site-navigation a.mega-menu-chip:focus-visible {
  border-color: var(--navlinie-kraeftig);
  background: var(--hellblau);
}
#site-navigation a.mega-menu-chip.is-current {
  border-color: var(--dunkelblau);
  background: var(--hellblau);
}
#site-navigation a.mega-menu-chip .mega-menu-count {
  margin-left: 0;
  min-width: 0;
  background: transparent;
  padding: 0;
  color: var(--navtext-leise);
}

/* Die beiden Karten der Randspalte: Ratgeber (redaktionell) und Förderung
   ("Wer bezahlt das?"). Beide gleich aufgebaut und gleich groß, aber farblich
   getrennt — Orange für den Ratgeber, volles Dunkelblau für die Förderung. */
#site-navigation .mega-menu .mega-menu-promo {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  height: 100%;
  padding: 1rem 1rem 0.9rem;
  border-radius: 12px;
  background: linear-gradient(160deg, var(--horange) 0%, #fff6e0 100%);
  color: var(--dunkelblau);
  transition:
    background 0.16s ease,
    box-shadow 0.16s ease,
    transform 0.16s ease;
}
#site-navigation a.mega-menu-promo:hover,
#site-navigation a.mega-menu-promo:focus-visible {
  background: linear-gradient(160deg, var(--morange) 0%, var(--horange) 100%);
  color: var(--dunkelblau);
  box-shadow: 0 8px 18px -10px rgba(25, 51, 63, 0.6);
  transform: translateY(-1px);
}
#site-navigation .mega-menu-promo-head {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}
#site-navigation .mega-menu-promo-head strong {
  font-size: 15.5px;
  line-height: 1.2;
}
#site-navigation .mega-menu-promo-icon {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: #fff;
  color: var(--dorange);
}
#site-navigation .mega-menu-promo-text {
  display: block;
  margin-top: 0.5rem;
  font-size: 13px;
  line-height: 1.45;
  color: #5b4a2e;
}
#site-navigation .mega-menu-promo-cta {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  margin-top: auto;
  padding-top: 0.6rem;
  font-size: 13px;
  font-weight: 700;
  color: var(--dunkelblau);
}
#site-navigation a.mega-menu-promo:hover .mega-menu-promo-cta svg {
  transform: translateX(3px);
}
#site-navigation .mega-menu-promo-cta svg {
  transition: transform 0.16s ease;
}

/* Förderkarte: dieselbe Form wie die Ratgeber-Karte, im vollen Dunkelblau.
   Sie ist keine einzelne Verknüpfung, sondern trägt die Förderwege als große
   Schaltflächen — mit einem Weg füllt er die Karte und wirkt als ein Button,
   mit mehreren bleibt die Karte trotzdem vollständig.
   Der Selektor nennt .mega-menu mit: ohne diese Klasse ist er schwächer als
   die Grundregel oben, und die Karte behielt den orangen Verlauf — heller
   Hintergrund unter weißer Schrift, also praktisch unlesbar. */
#site-navigation .mega-menu .mega-menu-promo-dark {
  background: var(--dunkelblau);
  color: #fff;
}
/* Die Karte ist selbst kein Link, reagiert aber wie einer: Sie hebt sich an,
   sobald Mauszeiger oder Tastaturfokus auf ihr liegen. Die Schaltflächen darin
   behalten daneben ihren eigenen, kräftigeren Hover. */
#site-navigation .mega-menu .mega-menu-promo-dark:hover,
#site-navigation .mega-menu .mega-menu-promo-dark:focus-within {
  background: #22485a;
  box-shadow: 0 8px 18px -10px rgba(25, 51, 63, 0.85);
  transform: translateY(-1px);
}
#site-navigation .mega-menu-promo-dark .mega-menu-promo-icon {
  color: var(--dunkelblau);
}
#site-navigation .mega-menu-promo-dark .mega-menu-promo-text {
  color: rgba(255, 255, 255, 0.78);
}
#site-navigation .mega-menu-promo-links {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  width: 100%;
  margin: 0.7rem 0 0;
  padding: 0;
  list-style: none;
}
#site-navigation .mega-menu-promo-links li {
  border: 0;
  margin: 0;
}
#site-navigation .mega-menu-promo-links a {
  gap: 0.5rem;
  padding: 0.55rem 0.75rem;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.14);
  font-weight: 600;
  color: #fff;
  transition:
    background 0.16s ease,
    transform 0.16s ease;
}
#site-navigation .mega-menu-promo-links a:hover,
#site-navigation .mega-menu-promo-links a:focus-visible,
#site-navigation .mega-menu-promo-links a.is-current {
  background: #fff;
  color: var(--dunkelblau);
}
#site-navigation .mega-menu-promo-links a .mega-menu-count {
  margin-left: auto;
  min-width: 0;
  background: transparent;
  padding: 0;
  color: inherit;
  opacity: 0.75;
}
#site-navigation .mega-menu-promo-links a svg {
  flex: none;
  transition: transform 0.16s ease;
}
#site-navigation .mega-menu-promo-links a:hover svg {
  transform: translateX(3px);
}

/* Fußzeile: links die beiden Schaltflächen nach Lernform, ganz rechts abgesetzt
   der Suchauftrag — der ist kein Weg in eine Liste, sondern die Notbremse für
   alle, die auch hier nichts Passendes gefunden haben. */
#site-navigation .mega-menu-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.7rem;
  margin-top: 1rem;
  padding-top: 0.95rem;
  border-top: 1px solid var(--navlinie);
}
#site-navigation .mega-menu-footer a {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.3rem 0.5rem;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  color: var(--dunkelblau);
}
#site-navigation .mega-menu-footer a svg {
  flex: none;
  transition: transform 0.16s ease;
}
#site-navigation .mega-menu-footer a:hover svg,
#site-navigation .mega-menu-footer a:focus-visible svg {
  transform: translateX(3px);
}
/* Die beiden Gesamtlisten nach Lernform als Schaltflächen: Wer sich in keiner
   Kategorie wiederfindet, soll den Ausweg sehen und nicht in der Fußzeile
   danach suchen müssen. Online trägt die weit größere Liste und ist deshalb
   die gefüllte Hauptschaltfläche, Präsenz die hellere daneben. */
#site-navigation .mega-menu-footer a.is-button {
  padding: 0.55rem 1.15rem;
  border-radius: 999px;
  transition:
    background 0.16s ease,
    box-shadow 0.16s ease,
    transform 0.16s ease;
}
#site-navigation .mega-menu-footer a.is-primary {
  background: var(--dunkelblau);
  color: #fff;
  box-shadow: 0 8px 16px -10px rgba(44, 86, 105, 0.95);
}
#site-navigation .mega-menu-footer a.is-primary:hover,
#site-navigation .mega-menu-footer a.is-primary:focus-visible {
  background: #1f4051;
  color: #fff;
  box-shadow: 0 10px 20px -10px rgba(44, 86, 105, 1);
  transform: translateY(-1px);
}
#site-navigation .mega-menu-footer a.is-secondary {
  background: var(--hellblau);
  color: var(--dunkelblau);
  box-shadow: inset 0 0 0 1.5px var(--dunkelblau);
}
#site-navigation .mega-menu-footer a.is-secondary:hover,
#site-navigation .mega-menu-footer a.is-secondary:focus-visible {
  background: #dceaff;
  color: var(--dunkelblau);
  transform: translateY(-1px);
}
/* Kein Button: steht abgesetzt am rechten Rand der Zeile. */
#site-navigation .mega-menu-footer a:not(.is-button) {
  margin-left: auto;
  color: var(--navtext-leise);
}
#site-navigation .mega-menu-footer a:not(.is-button):hover,
#site-navigation .mega-menu-footer a:not(.is-button):focus-visible {
  background: var(--hellblau);
  color: var(--dunkelblau);
}

/* Unter ~1200px Panelbreite wird die rechte Spalte zu schmal für die Teaser —
   die beiden Karten rücken dann nebeneinander zwischen Themen und Fußzeile. */
@media (max-width: 1240px) {
  #site-navigation .mega-menu-inner {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "main"
      "aside"
      "footer";
    gap: 1rem 0;
  }
  #site-navigation .mega-menu-aside {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: auto;
  }
  #site-navigation .mega-menu .mega-menu-promo {
    height: auto;
    padding: 0.8rem 0.9rem;
  }
  #site-navigation .mega-menu-footer {
    margin-top: 0;
  }
}

/* ===== Mobiler Drawer =====
   Dieselbe Struktur wie das Mega-Menü, nur untereinander. Der Drawer steht auf
   fast schwarzem Grund (Kadence, generated.css) — das Kurslotse-Blau erscheint
   hier deshalb als aufgehellte Variante (--navblau-dunkelgrund), nicht als
   --dunkelblau, das auf Schwarz nicht lesbar wäre.

   Auf dem Handy zählen zwei Dinge: Tippflächen, die man trifft (44px), und
   Zeilen, die man nicht scrollen muss — deshalb stehen Sprachen und Förderung
   auch hier als Chips nebeneinander statt als vier volle Zeilen. */
#mobile-drawer .drawer-menu-container li.menu-item > a,
#mobile-drawer .drawer-nav-drop-wrap > a {
  display: flex;
  align-items: center;
  gap: 0.5em;
  min-height: 44px;
  padding-top: 0.55em;
  padding-bottom: 0.55em;
  line-height: 1.35;
}
/* Aufklapp-Pfeil: volle Zeilenhöhe als Tippfläche, damit man ihn neben dem
   Link sicher trifft und nicht versehentlich die Kategorie öffnet. */
#mobile-drawer .drawer-sub-toggle {
  min-width: 48px;
  min-height: 44px;
}
#mobile-drawer .menu-item-icon {
  flex: none;
}
/* Auszeichnung wie im Mega-Menü ("beliebt"), vor der Kurszahl. */
#mobile-drawer .drawer-menu-badge {
  margin-left: auto;
  padding: 0.05em 0.55em;
  border-radius: 999px;
  background: var(--horange);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.7;
  text-transform: uppercase;
  color: #7a5410;
}
#mobile-drawer .drawer-menu-badge + .drawer-menu-count {
  margin-left: 0;
}
/* Kurszahl hinter der Kategorie — dieselbe Rolle wie im Mega-Menü: der
   schnellste Hinweis darauf, wo sich das Antippen lohnt. */
#mobile-drawer .drawer-menu-count {
  margin-left: auto;
  padding: 0.05em 0.55em;
  border-radius: 999px;
  background: rgba(127, 169, 190, 0.18);
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.6;
  color: var(--navblau-dunkelgrund);
  font-variant-numeric: tabular-nums;
}

/* Mega-Menü im mobilen Drawer: Spaltenüberschrift als Zwischentitel, die
   Kategorien darunter dauerhaft sichtbar (kein zweites Aufklappen). */
#mobile-drawer .drawer-menu-group > .drawer-menu-group-label {
  display: block;
  padding: 1.1em 1.2em 0.4em;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--navblau-dunkelgrund);
}
#mobile-drawer .drawer-menu-group > .sub-menu {
  display: block !important;
}
/* Sprachen und Förderung: Chips statt einzelner Zeilen — vier schmale Einträge
   würden sonst vier volle Bildschirmzeilen belegen. */
#mobile-drawer .drawer-menu-group-compact > .sub-menu {
  display: flex !important;
  flex-wrap: wrap;
  gap: 0.45em;
  padding: 0 1.2em 0.4em;
}
#mobile-drawer .drawer-menu-group-compact > .sub-menu > li.menu-item {
  border: 0;
}
#mobile-drawer .drawer-menu-group-compact > .sub-menu > li.menu-item > a {
  min-height: 40px;
  padding: 0.4em 0.9em;
  border: 1px solid rgba(127, 169, 190, 0.38);
  border-radius: 999px;
  font-size: 14px;
}
#mobile-drawer .drawer-menu-group-compact .drawer-menu-count {
  margin-left: 0;
  padding: 0;
  background: transparent;
}

/* Ratgeber als Karte am Fuß der Weiterbildungs-Gruppe — derselbe auffällige
   Hintergrund wie im Mega-Menü, damit der eine Weg, der nicht zu Kursen führt,
   auch auf dem Handy aus der Liste heraussticht. */
#mobile-drawer .drawer-promo-item {
  border: 0;
  padding: 0.7em 1.2em 1em;
}
#mobile-drawer .drawer-menu-container li.drawer-promo-item > a.drawer-promo {
  display: block;
  min-height: 0;
  padding: 0.9em 1em;
  border: 0;
  border-radius: 12px;
  background: linear-gradient(160deg, var(--horange) 0%, #fff6e0 100%);
  color: var(--dunkelblau);
}
#mobile-drawer .drawer-promo-head {
  display: flex;
  align-items: center;
  gap: 0.6em;
}
#mobile-drawer .drawer-promo-head strong {
  font-size: 15.5px;
  line-height: 1.2;
}
#mobile-drawer .drawer-promo-icon {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: #fff;
  color: var(--dorange);
}
#mobile-drawer .drawer-promo-text {
  display: block;
  margin-top: 0.45em;
  font-size: 13px;
  line-height: 1.45;
  color: #5b4a2e;
}

/* Media Queries  tablet und smartphones*/
@media (max-width: 1080px) {
  .page-id-3919 .entry-content-wrap {
    padding: 0rem!important;
}
  .page-id-3919 .content-area {
    margin: 0vw 8vw 0vw 8vw;
  }
  figure.wp-block-image.size-full .wp-image-4084 {
    width: 100%;
  }

  figure.wp-block-image.size-full .wp-image-4122 {
    display: none;
  }
  .ez-toc-widget-container.ez-toc-v2_0_18.ez-toc-widget.counter-hierarchy.counter-decimal {
    display: none;
  }
  aside#secondary {
      display: none;
  }
  .wp-block-columns.discount {

    padding-right: 55px;
    padding-left: 55px;
    padding-bottom: 25px;
  }


}

/* Logo und h2  */

.wp-block-media-text.alignwide.is-vertically-aligned-center {
margin: 0px;
padding-right: 15px;
}

/*Smartphone*/
@media (max-width: 768px) {
.post-1938 img.attachment-medium.size-medium.wp-post-image {
max-height: 250px;
}

.site-middle-footer-inner-wrap {grid-row-gap: 30px!important;
}
.page-id-595 a.post-thumbnail.kadence-thumbnail-ratio-2-3 {

  max-height: 240px;
}
/* abstand unten ausblenden */

/* Tabelle masterclass */
.postid-1313	td {
		hyphens: auto;
    padding: 15px;
	}
/* post e-leraning lexikon */

.page-id-595 .loop-entry .entry-content-wrap{  padding: 3rem;}

.wp-block-kadence-posts.kb-posts.kb-posts-id-_6be7c1-57.content-wrap.grid-cols.kb-posts-style-boxed.grid-sm-col-1.grid-lg-col-1.item-image-style-beside.test {
  margin: 0 20px 0 20px;
}
.wp-review-3771.review-wrapper li {
font-size: 0.8rem;}
.wp-review-3771.review-wrapper h5 {
font-size: 1rem;}

}



/* /Desktop */


@media (min-width: 1024px){

.wp-block-media-text .wp-block-media-text__media img, .wp-block-media-text .wp-block-media-text__media video {

width: 55%!important;
}
.wp-block-media-text .wp-block-media-text__content{
  padding: 0px;
}

.site-middle-footer-inner-wrap {

margin: 0px 120px 0px 120px;
}
.site-top-footer-inner-wrap.site-footer-row.site-footer-row-columns-3.site-footer-row-column-layout-equal.site-footer-row-tablet-column-layout-default.site-footer-row-mobile-column-layout-row.ft-ro-dir-column.ft-ro-collapse-normal.ft-ro-t-dir-default.ft-ro-m-dir-default.ft-ro-lstyle-plain {
  margin: 0px 120px 0px 120px;
}
}