/*!
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;
}



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

/* Einheitliche FAQ-Optik fuer alle migrierten Accordions. Sie entspricht dem
   klaren Frage-Antwort-Raster der Anbieterseite. Die !important-Regeln sind
   erforderlich, weil Shortcodes Ultimate nach theme.css eingebunden wird. */
.su-accordion {
  margin-top: 1.2rem;
  border-top: 1px solid #e2eaf0;
}
.su-accordion .su-spoiler {
  margin-bottom: 0 !important;
  border-bottom: 1px solid #e2eaf0;
}
.su-accordion .su-spoiler > .su-spoiler-title {
  min-height: 0;
  margin: 0;
  padding: 0.95rem 2.5rem 0.95rem 0.2rem !important;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #2c5669;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.45;
}
.su-accordion .su-spoiler > .su-spoiler-title:hover {
  color: #1a4152;
}
.su-accordion .su-spoiler-icon-plus > .su-spoiler-title > .su-spoiler-icon {
  right: 0.2rem;
  left: auto !important;
  color: #ffb424;
}
.su-accordion .su-spoiler > .su-spoiler-content {
  padding: 0 2.5rem 1rem 0.2rem !important;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  color: #4a616b;
  font-size: 0.95rem;
  line-height: 1.6;
}
/* 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;
  align-items: start;
  gap: 0 1.5rem;
  padding: 1.15rem 1.4rem 0.95rem;
}
/* Themen und Fußzeile stehen zusammen in einer Spalte, damit die Fußzeile
   direkt der Themenliste folgt und nicht auf die Höhe der (oft längeren)
   Randspalte wartet — sonst reißt zwischen Chip-Zeile und Schaltflächen eine
   leere Fläche auf, sobald Ratgeber- und Förderkarte zusammen höher sind als
   die Themen. */
#site-navigation .mega-menu-primary {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  min-width: 0;
}
#site-navigation .mega-menu-main {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  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 {
  display: grid;
  grid-template-rows: auto auto;
  align-content: start;
  gap: 0.55rem;
}
@media (max-width: 1320px) {
  #site-navigation .mega-menu-inner {
    grid-template-columns: minmax(0, 1fr) 220px;
    gap: 0 1.2rem;
    padding: 1.05rem 1.15rem 0.9rem;
  }
}
/* 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.65rem 0.9rem;
  /* Platz für die längste aufgeklappte Spalte — das Panel behält beim
     Aufklappen einer Unterliste seine Höhe und springt nicht. */
  min-height: 0;
}
#site-navigation .mega-menu-heading {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0 0 0.35rem;
  padding: 0 0.5rem 0.3rem;
  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.32rem 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;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--navtext-leise);
  text-align: right;
  font-variant-numeric: tabular-nums;
  padding: 0 0.15rem;
  transition: color 0.15s ease;
}
#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 {
  color: var(--dunkelblau);
  font-weight: 600;
}
#site-navigation .mega-menu-sublist .mega-menu-count {
  font-size: 11.5px;
  opacity: 0.85;
}

/* 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 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.3rem 1.2rem;
  padding-top: 0.55rem;
  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: auto;
  padding: 0.85rem 0.95rem 0.8rem;
  border-radius: 12px;
  background: linear-gradient(160deg, #edac50 0%, #f5cc84 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, #e49a36 0%, #efbc69 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.35rem;
  font-size: 12.5px;
  line-height: 1.4;
  color: #5b4a2e;
}
#site-navigation .mega-menu-promo-cta {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  margin-top: auto;
  padding-top: 0.45rem;
  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.3rem;
  width: 100%;
  margin: 0.5rem 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.42rem 0.65rem;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.14);
  font-size: 13px;
  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 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: 0.65rem;
  padding-top: 0.65rem;
  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 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 und Fernstudium stehen heller
   daneben und brechen bei schmalem Panel in die zweite Zeile. */
#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);
    gap: 1rem 0;
  }
  /* Die Themen-Fußzeile-Spalte gibt es unter dieser Breite nicht mehr — die
     Wrapper-Box löst sich auf (display: contents), Themen, Randkarten und
     Fußzeile werden wieder zu eigenständigen Grid-Zeilen und lassen sich per
     order wie gewohnt anordnen: Themen, dann die Karten, dann die Fußzeile. */
  #site-navigation .mega-menu-primary {
    display: contents;
  }
  #site-navigation .mega-menu-main {
    order: 1;
  }
  #site-navigation .mega-menu-aside {
    order: 2;
    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 {
    order: 3;
    margin-top: 0;
  }
}

/* ===== Mobiler Drawer =====
   Eigenständiges Slide-in-Panel von rechts (Burger im Header, abgedunkelter
   Hintergrund, weißes Panel) statt Kadence-Nachbau — kein gemeinsames Markup
   mit generated.css/header.min.css mehr, das CSS hier ist vollständig.
   Farblich dieselbe Sprache wie das Desktop-Mega-Menü (--dunkelblau /
   --hellblau / --navlinie): das Menü soll auf dem Handy aussehen wie dasselbe
   Menü, nicht wie ein zweites, dunkles Untermenü.

   Auf dem Handy zählen zwei Dinge: Tippflächen, die man trifft (min. 44px),
   und eine Animation, die tatsächlich läuft (das alte Kadence-Timing setzte
   zwei Klassen im selben Tick, die Schublade erschien hart). */
#mobile-drawer.kl-drawer {
  position: fixed;
  inset: 0;
  z-index: 99999;
  pointer-events: none;
}
#mobile-drawer.kl-drawer.kl-drawer-visible {
  pointer-events: auto;
}
#mobile-drawer .kl-drawer-overlay {
  position: absolute;
  inset: 0;
  background: rgba(18, 36, 46, 0.5);
  opacity: 0;
  transition: opacity 0.28s ease;
}
#mobile-drawer.kl-drawer-visible .kl-drawer-overlay {
  opacity: 1;
}
#mobile-drawer .kl-drawer-panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  width: min(86vw, 380px);
  background: #fff;
  box-shadow: -18px 0 40px -14px rgba(15, 30, 38, 0.35);
  transform: translateX(100%);
  transition: transform 0.32s cubic-bezier(0.32, 0.72, 0, 1);
}
#mobile-drawer.kl-drawer-visible .kl-drawer-panel {
  transform: translateX(0);
}
@media (prefers-reduced-motion: reduce) {
  #mobile-drawer .kl-drawer-overlay,
  #mobile-drawer .kl-drawer-panel,
  #mobile-drawer .kl-chevron,
  #mobile-drawer .kl-drawer-sub {
    transition-duration: 0.01ms;
  }
}

/* Kopfzeile: Logo zur Orientierung (welche Sprache/Seite bin ich gerade?),
   Schließen-Kreuz mit voller Tippfläche. */
#mobile-drawer .kl-drawer-top {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: calc(0.8rem + env(safe-area-inset-top, 0px)) 0.6rem 0.8rem 1.1rem;
  border-bottom: 1px solid var(--navlinie);
}
#mobile-drawer .kl-drawer-brand {
  display: flex;
  align-items: center;
}
#mobile-drawer .kl-drawer-brand img {
  display: block;
  height: 28px;
  width: auto;
}
#mobile-drawer .kl-drawer-close {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--navtext);
  transition: background 0.15s ease, color 0.15s ease;
}
#mobile-drawer .kl-drawer-close:hover,
#mobile-drawer .kl-drawer-close:focus-visible {
  background: var(--hellblau);
  color: var(--dunkelblau);
}

/* Scrollbereich der Liste — Kopf- und Fußzeile bleiben stehen. */
#mobile-drawer .kl-drawer-nav {
  flex: 1 1 auto;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
#mobile-drawer .kl-drawer-menu {
  list-style: none;
  margin: 0;
  padding: 0.3em 0;
}
#mobile-drawer .kl-drawer-menu > li.menu-item {
  border-bottom: 1px solid var(--navlinie);
}
#mobile-drawer .kl-drawer-menu > li.menu-item:last-child {
  border-bottom: 0;
}

/* Zeile aus Link + eigenem Aufklapp-Knopf, damit man den Pfeil sicher trifft
   und nicht versehentlich die Kategorie öffnet. */
#mobile-drawer .kl-drawer-row {
  display: flex;
  align-items: stretch;
}
#mobile-drawer .kl-drawer-menu a,
#mobile-drawer .kl-drawer-row-button {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  gap: 0.5em;
  min-width: 0;
  min-height: 50px;
  padding: 0.55em 1.1em;
  border: 0;
  background: none;
  font-family: inherit;
  font-size: 15.5px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--navtext);
  text-align: left;
  text-decoration: none;
}
#mobile-drawer .kl-drawer-menu a:hover,
#mobile-drawer .kl-drawer-menu a:focus-visible,
#mobile-drawer .kl-drawer-row-button:hover,
#mobile-drawer .kl-drawer-row-button:focus-visible {
  background: var(--hellblau);
  color: var(--dunkelblau);
}
#mobile-drawer .kl-drawer-sub-toggle {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 50px;
  min-height: 50px;
  border: 0;
  background: none;
  color: var(--navicon);
}
#mobile-drawer .kl-drawer-sub-toggle:hover,
#mobile-drawer .kl-drawer-sub-toggle:focus-visible {
  background: var(--hellblau);
  color: var(--dunkelblau);
}
#mobile-drawer .kl-chevron {
  transition: transform 0.22s ease;
}
#mobile-drawer .kl-drawer-sub-toggle[aria-expanded="true"] .kl-chevron {
  transform: rotate(180deg);
}

/* Aufklappen per Grid-Trick (auto->0->1fr lässt sich nicht animieren, 0fr->1fr
   schon): der innere Clip-Wrapper schneidet während der Animation sauber ab. */
#mobile-drawer .kl-drawer-sub {
  display: grid;
  grid-template-rows: 0fr;
  background: var(--hellblau);
  transition: grid-template-rows 0.25s ease;
}
#mobile-drawer .kl-drawer-sub.kl-open {
  grid-template-rows: 1fr;
}
#mobile-drawer .kl-drawer-sub-clip {
  overflow: hidden;
  min-height: 0;
}
#mobile-drawer .kl-drawer-sublist {
  list-style: none;
  margin: 0;
  padding: 0;
}
#mobile-drawer .kl-drawer-sublist li.menu-item {
  border-bottom: 1px solid rgba(44, 86, 105, 0.08);
}
#mobile-drawer .kl-drawer-sublist li.menu-item:last-child {
  border-bottom: 0;
}
#mobile-drawer .kl-drawer-sublist a,
#mobile-drawer .kl-drawer-sublist .kl-drawer-row-button {
  padding-left: 2rem;
  font-size: 14.5px;
  font-weight: 400;
  color: var(--navtext-leise);
}
/* Dritte Ebene (z. B. KI → EU AI Act) rückt noch einmal ein. */
#mobile-drawer .kl-drawer-sublist .kl-drawer-sublist a,
#mobile-drawer .kl-drawer-sublist .kl-drawer-sublist .kl-drawer-row-button {
  padding-left: 2.9rem;
}

/* 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 {
  flex: none;
  margin-left: auto;
  min-width: 1.7rem;
  padding: 0.05em 0.5em;
  border-radius: 999px;
  background: var(--hellblau);
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.6;
  color: var(--dunkelblau);
  text-align: center;
  font-variant-numeric: tabular-nums;
}
#mobile-drawer .kl-drawer-menu a:hover .drawer-menu-count,
#mobile-drawer .kl-drawer-menu a:focus-visible .drawer-menu-count {
  background: #fff;
}

/* 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: 1rem 1.1rem 0.35rem;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--dunkelblau);
}
/* 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 > .kl-drawer-sublist {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45em;
  padding: 0 1.1rem 0.5rem;
}
#mobile-drawer .drawer-menu-group-compact > .kl-drawer-sublist > li.menu-item {
  border: 0;
}
#mobile-drawer .drawer-menu-group-compact > .kl-drawer-sublist > li.menu-item > a {
  min-height: 40px;
  min-width: 0;
  padding: 0.4em 0.9em;
  border: 1px solid var(--navlinie);
  border-radius: 999px;
  font-size: 14px;
  color: var(--navtext);
}
#mobile-drawer .drawer-menu-group-compact > .kl-drawer-sublist > li.menu-item > a:hover,
#mobile-drawer .drawer-menu-group-compact > .kl-drawer-sublist > li.menu-item > a:focus-visible {
  border-color: var(--navlinie-kraeftig);
  background: var(--hellblau);
  color: var(--dunkelblau);
}
#mobile-drawer .drawer-menu-group-compact .drawer-menu-count {
  margin-left: 0;
  padding: 0;
  background: transparent;
  color: var(--navtext-leise);
}

/* 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-bottom: 0;
  padding: 0.7em 1.1em 1em;
}
#mobile-drawer a.drawer-promo {
  display: block;
  min-height: 0;
  padding: 0.9em 1em;
  border-radius: 12px;
  background: linear-gradient(160deg, #edac50 0%, #f5cc84 100%);
  color: var(--dunkelblau);
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}
#mobile-drawer a.drawer-promo:hover,
#mobile-drawer a.drawer-promo:focus-visible {
  box-shadow: 0 8px 18px -10px rgba(25, 51, 63, 0.45);
  transform: translateY(-1px);
}
#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;
}

/* Fußzeile: der eine Weg, der immer trägt (KI-Suche), plus Sprachwahl. */
#mobile-drawer .kl-drawer-footer {
  flex: none;
  padding: 0.9rem 1.1rem calc(1.1rem + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--navlinie);
  background: #fff;
}
#mobile-drawer .kl-drawer-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  width: 100%;
  min-height: 48px;
  padding: 0.7em 1em;
  border-radius: 10px;
  background: var(--dunkelblau);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.15s ease;
}
#mobile-drawer .kl-drawer-cta:hover,
#mobile-drawer .kl-drawer-cta:focus-visible {
  background: #234a5a;
}
#mobile-drawer .kl-drawer-footer .kl-lang-switch {
  justify-content: center;
  margin: 0.85rem 0 0;
  font-size: 0.95em;
  color: var(--navtext-leise);
}

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

/* --- Autor- und Lesezeit-Zeile (components/ArticleMeta.tsx) --------------- */
.entry-meta-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5em 1.1em;
  margin: 1.1em 0 0;
  font-size: 0.92rem;
  color: #57666f;
}
.entry-meta-author {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  color: inherit;
  text-decoration: none;
}
.entry-meta-author strong {
  font-weight: 700;
  color: #19333f;
}
.entry-meta-author:hover strong,
.entry-meta-author:focus-visible strong {
  color: #1a6d93;
}
.entry-meta-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px #e3e9f0;
}
.entry-meta-date::before {
  content: "";
  display: inline-block;
  width: 4px;
  height: 4px;
  margin-right: 1em;
  border-radius: 50%;
  background: #c3ced6;
  vertical-align: middle;
}
.entry-meta-date.no-author::before,
.entry-meta-bar > .entry-meta-date:first-child::before {
  display: none;
}
.entry-meta-readtime {
  display: inline-flex;
  align-items: center;
  gap: 0.42em;
  margin-left: auto;
  padding: 0.34em 0.9em;
  border-radius: 999px;
  background: var(--horange, #ffeec4);
  color: #8a5a12;
  font-size: 0.86rem;
  font-weight: 700;
  white-space: nowrap;
}
@media (max-width: 719px) {
  .entry-meta-bar { gap: 0.5em 0.9em; font-size: 0.88rem; }
  .entry-meta-readtime { margin-left: 0; }
  .entry-meta-date::before { display: none; }
}

/* Button-Links (#meinButton / .btn.btn-primary): Textfarbe immer weiß */
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,
button#meinButton a:active,
#meinButton a:hover,
#meinButton a:focus,
#meinButton a:active,
.btn.btn-primary a:hover,
.btn.btn-primary a:focus,
.btn.btn-primary a:active {
  color: #ffffff !important;
  text-decoration: none;
}