/* ==========================================================================
   MASK – Theme-Styles (Header, Footer, Dialog, eigene Module).
   Typografie/Inhalt kommen vorerst aus legacy.css (Coverage aus bb-theme + Skin + Child),
   damit BB-Seiteninhalte 1:1 aussehen. Werte unten = gemessen am alten Themer-Header/Footer.
   Breakpoints wie bisher: 1200 / 992 (medium) / 768 (mobile); Mobile-Menü-Plugin: 1004.
   ========================================================================== */
:root{
  --mask-navy:#0f2c3b; --mask-footer:#001e34; --mask-blue:#005fac; --mask-blue-light:#c2e5ef;
  --mask-ink:#1a1a1a; --mask-orange:#d88500; --mask-wrap:1250px;
}
.mask-icon{width:1em;height:1em;display:inline-block;vertical-align:-.125em;fill:currentColor}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}

/* ---------- Header ---------- */
/* Header steht im Dokumentfluss (Seite beginnt darunter). Ab 769px bleibt er beim Scrollen oben kleben (sticky, ohne JS). */
.mask-header{position:relative;width:100%;z-index:100}
@media (min-width:769px){ .mask-header{position:sticky;top:var(--wp-admin--admin-bar--height,0)} }
.mask-topbar{background:var(--mask-navy);padding:5px 50px}
.mask-topbar__inner,.mask-bar__inner{max-width:var(--mask-wrap);margin:0 auto;display:flex;align-items:center}
.mask-topbar__contact{flex:0 0 50%;padding:5px 20px 0;color:#fff;font-weight:600;font-size:15px}
.mask-topbar__contact p{margin:0}
.mask-topbar__search{flex:0 0 40%;padding:0 0 0 20px;display:flex;justify-content:flex-end}
.mask-topbar__lang{flex:0 0 10%}
.mask-search{display:inline-flex;align-items:center;margin:0}
.mask-search__input{width:0;padding:5px 0;border:0;border-radius:4px;background:rgba(239,240,243,.25);color:#fff;font-size:14px;line-height:16px;opacity:0;transition:width .4s,opacity .4s,padding .4s,margin .4s;box-sizing:border-box}
.mask-search__input::placeholder{color:#fff}
.mask-search.is-open .mask-search__input{width:200px;padding:5px;margin-right:10px;opacity:1}
.mask-search__btn{all:unset;box-sizing:border-box;cursor:pointer;flex:none;width:26px;height:20px;display:inline-flex;align-items:center;justify-content:center;background:var(--mask-navy);color:#fff;font-size:14px}
.mask-search__btn:focus-visible{outline:2px solid #fff;outline-offset:2px}
.mask-search__btn:hover,.mask-search__btn:focus,.mask-search__btn:active{background:var(--mask-navy);color:#fff;border:0}

.mask-bar{background:#fff;box-shadow:0 4px 8px rgba(0,0,0,.15);padding:0 50px;position:relative}
.mask-bar__logo{flex:0 0 25.04%;padding:0 20px}
.mask-bar__logo a{display:inline-block;line-height:0}
.mask-bar__logo-img{width:256px;height:auto;max-width:100%}
.mask-bar__nav{flex:0 0 74.96%;text-align:right}

.mask-bar__nav--landing{padding:20px}
.mask-bar__home{display:inline-flex;align-items:center;gap:8px;padding:25px 24px;border-radius:4px;color:#d88500;font-size:16px;font-weight:700;line-height:18px;text-transform:uppercase;text-decoration:none}
.mask-bar__home:hover{color:#a86200}
@media (max-width:768px){.mask-bar__nav--landing{display:none}}

/* Desktop-Menü (Markup wie BB-Menümodul). Regeln 1:1 aus dem BB-Menümodul des alten Headers (Layout 2570, Knoten y5l8qm3h9ogz)
   + BB-Basis (.fl-menu …). Spezifität bewusst niedrig, damit die Klassen-Regeln aus legacy.css (menu-prs-kurse …) wie früher gewinnen. */
.mask-menu{text-align:right}
.mask-menu ul,.mask-menu li{list-style:none;margin:0;padding:0}
.mask-menu .menu{display:inline-flex;flex-wrap:wrap;align-items:center;justify-content:right;font-weight:600;font-size:15px;line-height:1;text-transform:uppercase}
.mask-menu .menu::before,.mask-menu .menu::after{content:"";display:table;clear:both}
.mask-menu li{position:relative;border-top:1px solid transparent}
.mask-menu li:first-child{border-top:none}
@media (min-width:993px){
  .mask-menu .menu>li{display:inline-block}
  .mask-menu .menu li{border-left:1px solid transparent;border-top:none}
  .mask-menu .menu li:first-child{border:none}
  .mask-menu .menu li li{border-top:1px solid transparent;border-left:none}
}
.mask-menu a{display:block;padding:50px 12px;text-decoration:none;color:var(--mask-ink)}
.mask-menu a:hover{text-decoration:none}
.mask-menu .menu-item :is(:focus,a:hover,.fl-has-submenu-container:hover>*),.mask-menu .current-menu-item>a,.mask-menu .current-menu-item>.fl-has-submenu-container>*{color:var(--mask-orange)}
.mask-menu .menu .fl-has-submenu-container:has(button.fl-menu-toggle){display:grid;grid-template-columns:1fr 40px}
.mask-menu button.fl-menu-toggle{all:unset;position:relative;cursor:pointer}
.mask-menu .fl-menu-toggle::before{content:"";position:absolute;right:50%;top:50%;z-index:1;display:block;width:9px;height:9px;margin:-5px -5px 0 0;border-right:2px solid;border-bottom:2px solid;border-color:var(--mask-ink);transform-origin:right bottom;transform:translateX(-5px) rotate(45deg)}
.mask-menu :is(.fl-menu-toggle:focus,.fl-has-submenu-container:hover>.fl-menu-toggle)::before,.mask-menu .current-menu-item>.fl-has-submenu-container>.fl-menu-toggle::before{border-color:var(--mask-orange)}
.mask-menu .fl-has-submenu:hover>.fl-has-submenu-container>.fl-menu-toggle,.mask-menu .fl-has-submenu.is-open>.fl-has-submenu-container>.fl-menu-toggle{transform:rotate(-180deg)}
.mask-menu .menu .fl-has-submenu .sub-menu{display:none}
.mask-menu .sub-menu{min-width:220px;position:absolute;top:100%;left:0;z-index:10;visibility:hidden;opacity:0;text-align:left;background-color:#f8fafd;box-shadow:0 1px 20px rgba(0,0,0,.1);padding:0;border-style:none;border-width:0}
.mask-menu .fl-has-submenu .fl-has-submenu .sub-menu{top:0;left:100%}
.mask-menu .sub-menu a{color:var(--mask-ink)}
.mask-menu .sub-menu:hover{border-style:none;border-width:0}
.mask-menu .fl-has-submenu:hover>.sub-menu,.mask-menu .fl-has-submenu:focus-within>.sub-menu,.mask-menu .fl-has-submenu.is-open>.sub-menu{display:block;visibility:visible;opacity:1}
.mask-menu .menu .sub-menu>li{font-weight:400;font-size:16px;line-height:1;text-transform:capitalize}
.mask-menu .menu .sub-menu>li>a:is(:hover,:focus),.mask-menu .menu .sub-menu>li>.fl-has-submenu-container:is(:hover,:focus)>*,.mask-menu .menu .sub-menu>li.current-menu-item>a,.mask-menu .menu .sub-menu>li.current-menu-item>.fl-has-submenu-container>*{background-color:#eff0f3;color:#003159}
.mask-menu .sub-menu .fl-has-submenu-container .fl-menu-toggle::before{border-color:var(--mask-ink)}
.mask-menu .sub-menu .fl-has-submenu-container:hover>.fl-menu-toggle::before,.mask-menu .sub-menu .fl-has-submenu-container:focus>.fl-menu-toggle::before{border-color:#003159}
@media (min-width:993px){ .mask-menu .fl-has-submenu .fl-has-submenu .fl-menu-toggle::before{transform:translateY(-5px) rotate(-45deg)} }
/* Mega-Menü: volle Breite des 1250er-Rasters */
.mask-bar__inner{position:relative}
.mask-menu li.mega-menu{position:static}
.mask-menu li.mega-menu>.sub-menu{top:auto;left:0;right:0;width:100%}
.mask-menu li.mega-menu:hover>.sub-menu,.mask-menu li.mega-menu:focus-within>.sub-menu,.mask-menu li.mega-menu.is-open>.sub-menu{display:flex!important}
.mask-menu li.mega-menu>.sub-menu li{border-color:transparent}
.mask-menu li.mega-menu>.sub-menu>li{width:100%}
.mask-menu li.mega-menu>.sub-menu>li>.fl-has-submenu-container{display:block!important}
.mask-menu li.mega-menu>.sub-menu>li>.fl-has-submenu-container a{font-weight:700}
.mask-menu .menu li.mega-menu>.sub-menu>li>.fl-has-submenu-container a:hover{background:0 0;color:var(--mask-ink)}
.mask-menu li.mega-menu>.sub-menu .fl-menu-toggle{display:none}
.mask-menu li.mega-menu>.sub-menu .sub-menu{position:static;display:block;visibility:visible;opacity:1;min-width:0;padding:0;background:0 0;box-shadow:none}
/* Alt: die 22px-Spalte aus dem Child-CSS griff nie (BB-Regel mit :has() war spezifischer) → effektiv 1fr 40px, Button 22px. */
@media (min-width:1005px){
  .mask-menu .menu>li>.fl-has-submenu-container>a{padding-right:4px}
  .mask-menu .menu>li>.fl-has-submenu-container>.fl-menu-toggle{width:22px}
  .mask-menu .menu>li>.fl-has-submenu-container>.fl-menu-toggle::before{left:4px}
}
/* EN-Header: das alte EN-Menümodul (Layout 2537) hatte Pfeile als absolut positioniertes <span> (26px) statt Grid-Spalte. */
@media (min-width:993px){
  .mask-menu.mask-menu--en .menu .fl-has-submenu-container,.mask-menu.mask-menu--en .menu .fl-has-submenu-container:has(button.fl-menu-toggle){display:block;position:relative}
  .mask-menu.mask-menu--en .menu .fl-has-submenu-container a{padding-right:26px}
  .mask-menu.mask-menu--en .menu .fl-has-submenu-container>.fl-menu-toggle{position:absolute;top:0;right:0;bottom:0;height:100%;width:26px}
}
@media (max-width:1200px){ .mask-topbar,.mask-bar{padding-left:30px;padding-right:30px} }
/* Verbesserung ggü. alt (23.10.2026): zwischen 993 und 1199 px brach das Menü in zwei Zeilen um, und von 993 bis 1004 px
   waren Desktop-Menü UND Burger (Mobile-Menü-Plugin ab ≤1004 px) gleichzeitig sichtbar.
   → bis 1004 px nur Burger; 1005–1199 px kompakteres Menü in einer Zeile. Sprachumschalter bricht nicht mehr um. */
.mask-topbar__lang{flex:none}
.mask-topbar__lang .mask-lang>ul{white-space:nowrap}
@media (max-width:1004px){ .mask-menu{display:none} }
@media (min-width:1005px) and (max-width:1199px){
  .mask-bar__logo img{width:180px;height:auto}
  .mask-menu .menu{font-size:14px}
  .mask-menu .menu>li>a,.mask-menu .menu>li>.fl-has-submenu-container>a{padding-left:7px;padding-right:7px}
  .mask-menu.mask-menu--en .menu>li>.fl-has-submenu-container>a{padding-right:26px}
}
@media (max-width:992px){
  .mask-topbar{padding:5px 5px 0}
  .mask-topbar__inner{height:38px}
  .mask-topbar__search{flex-basis:50%;padding-bottom:10px}
  .mask-bar{padding:10px 5px 0}
  .mask-bar__logo{padding:20px}
  .mask-topbar__lang,.mask-menu{display:none}
  .mask-bar__nav{margin-right:5px}
}
@media (max-width:768px){
  .mask-topbar{display:none}
  .mask-bar{padding:5px}
  .mask-bar__logo{flex-basis:80%;padding:10px}
  .mask-bar__nav{flex-basis:20%}
}

/* ---------- Footer ---------- */
.mask-footer{color:#fff}
.mask-footer a,.mask-footer a:hover{color:#fff}
.mask-footer a:hover,.mask-footer a:focus{text-decoration:none}
.mask-footer__main{background:var(--mask-footer);padding:50px}
.mask-footer__inner{max-width:var(--mask-wrap);margin:0 auto;display:flex;align-items:flex-start}
.mask-footer__inner--wide{max-width:1580px}
.mask-footer__brand{flex:0 0 30%;padding-right:50px;border-right:1px solid var(--mask-blue-light)}
.mask-footer__logo{display:block;width:250px;max-width:100%;height:auto;margin:20px 20px 20px 0}
.mask-footer__social{list-style:none;margin:0;padding:0;display:flex}
.mask-footer__social li{flex:0 0 22%;padding:20px 10px}
.mask-footer__social li:nth-child(1){text-align:right}
.mask-footer__social li:nth-child(2){text-align:center}
.mask-footer__social img{width:48px;max-width:100%;height:auto}
.mask-footer__contact{flex:0 0 25%;padding-left:50px}
.mask-footer__contact-btn{all:unset;box-sizing:border-box;cursor:pointer;display:inline-flex;align-items:center;gap:10px;margin:20px 20px 20px 0;padding:12px 33px;border-radius:4px;background:var(--mask-blue);color:#fff;font-size:18px;line-height:1.3;transition:background .2s,color .2s}
.mask-footer__contact-btn:hover,.mask-footer__contact-btn:focus-visible{background:var(--mask-blue-light);color:#003159}
.mask-footer__links{margin:40px 20px 20px 0;line-height:1.2}
.mask-footer__certs{flex:0 0 45%;display:flex;align-items:flex-start}
.mask-footer__telc{flex:0 0 55%;padding:20px 20px 20px 40px}
.mask-footer__telc img{max-width:100%;height:auto}
.mask-footer__tuv{flex:0 0 45%;padding:20px 0 0 20px}
.mask-footer__tuv a{display:inline-block;margin-right:40px}
.mask-footer__tuv img{max-width:100%;height:auto}
.mask-footer__azav{margin:20px 35px 0 0;font-size:11px;font-style:italic}
.mask-footer__bottom{background:#000;padding:13px 50px 0}
.mask-footer__bottom .mask-footer__inner{justify-content:space-between;align-items:center}
.mask-footer__copy{flex:1 1 0;margin:10px 20px 20px;font-size:16px}
.mask-footer__legal{flex:0 0 50%;text-align:right;padding:0 20px 20px}
.mask-footer__legal .menu{display:inline-flex;flex-wrap:wrap;justify-content:right;list-style:none;margin:0;padding:0;font-size:16px;line-height:1}
.mask-footer__legal li{list-style:none}
.mask-footer__legal li+li{border-left:1px solid #fff}
.mask-footer__legal a{display:block;padding:5px 14px;text-decoration:none}
@media (max-width:1200px){ .mask-footer__contact{padding-left:30px} }
@media (max-width:992px){
  .mask-footer__main{padding:20px 30px}
  .mask-footer__brand{flex-basis:25%;padding-right:40px}
  .mask-footer__logo{margin:20px -20px 20px -10px;width:calc(100% + 30px);max-width:none}
  .mask-footer__social li{flex-basis:33%;padding:20px 0 20px 10px}
  .mask-footer__social li:nth-child(2){padding:20px 5px}
  .mask-footer__social li:nth-child(3){padding:20px 10px 20px 0}
  .mask-footer__contact{flex-basis:38%;padding-left:40px}
  .mask-footer__contact-btn{margin-bottom:10px}
  .mask-footer__links{margin-top:20px}
  .mask-footer__certs{flex-basis:37%;padding-left:20px;flex-wrap:wrap}
  .mask-footer__telc{flex-basis:100%;padding:10px}
  .mask-footer__tuv{flex-basis:100%;padding:20px 0 0 20px}
  .mask-footer__tuv a{margin-right:0}
  .mask-footer__azav{margin:20px 40px 0 0}
  .mask-footer__bottom{padding-left:0;padding-right:0}
}
@media (max-width:768px){
  .mask-footer__inner{flex-wrap:wrap}
  .mask-footer__brand,.mask-footer__contact,.mask-footer__certs{flex-basis:100%;padding:0 10px;border:0;margin:0}
  .mask-footer__brand .mask-footer__logo{display:none}
  .mask-footer__contact{text-align:center;padding-bottom:10px}
  .mask-footer__links,.mask-footer__copy,.mask-footer__legal{text-align:center}
  .mask-footer__certs{padding:0}
  .mask-footer__telc{text-align:center;padding:10px 50px}
  .mask-footer__tuv{text-align:center;padding:10px 0 0}
  .mask-footer__tuv a{display:block;margin:0 50px 10px}
  .mask-footer__contact-btn{margin:20px 0 10px}
  .mask-footer__links{margin:20px 20px 20px 0}
  .mask-footer__contact{padding:0 0 10px}
  .mask-footer__azav{font-size:10px;text-align:center;margin:20px 40px 0}
  .mask-footer__copy,.mask-footer__legal{flex-basis:100%;font-size:14px}
  .mask-footer__legal .menu{justify-content:center;font-size:14px}
  .mask-footer__legal li+li{border-left:0}
}

/* ---------- Dialog „Sofortkontakt“ ---------- */
.mask-dialog{width:min(980px,calc(100% - 40px));max-height:calc(100% - 40px);padding:0;border:0;background:#fff;overflow:auto}
.mask-dialog::backdrop{background:rgba(0,0,0,.75)}
.mask-dialog[open]{animation:mask-fade .3s ease}
@keyframes mask-fade{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:none}}
.mask-dialog__close{all:unset;cursor:pointer;position:absolute;top:10px;left:10px;width:24px;height:24px;display:flex;align-items:center;justify-content:center;color:#333;z-index:2}
.mask-dialog__close .mask-icon{width:18px;height:18px}
.mask-dialog__head{background:#eff0f3;padding:20px 20px 20px 50px}
.mask-dialog__title{margin:0}
.mask-dialog__form{margin:30px 20px 20px}
@media (max-width:768px){.mask-dialog__form{margin-top:20px}}

/* ---------- Nach oben ---------- */
#fl-to-top .mask-icon{position:absolute;top:13px;left:14px;width:16px;height:16px;color:#fff}
#fl-to-top.is-visible{display:block}

/* ---------- Modul: MASK Tabs ----------
   Inhalt-Klassen (mask-tabs__cols, __media, __checklist …) werden 1:1 aus
   mask-tabs-etalon/mask-tabs.css übernommen; hier nur die neue, BB-unabhängige Hülle. */
.mask-tabs__list { display: flex; flex-wrap: wrap; gap: 0; margin: 0; padding: 0; }
.mask-tabs__label { margin: 0; flex: 1 1 0; }
.mask-tabs__btn { all: unset; box-sizing: border-box; display: block; width: 100%; padding: 1rem 1.25rem; cursor: pointer; text-align: center; font: inherit; }
.mask-tabs__btn[aria-selected="true"] { background: var(--mask-blue); color: #fff; } /* TODO Farben/Linien wie Etalon */
.mask-tabs__panel { padding: 2rem 0; }
.mask-tabs__panel[hidden] { display: none; }
@media (max-width: 768px) { .mask-tabs__label { flex-basis: 50%; } }
@media (max-width: 450px) { .mask-tabs__panel { hyphens: auto; } }

/* ---------- Modul: MASK FAQ (natives <details>, kein JS) ---------- */
.mask-faq__item { border-bottom: 1px solid #e5e7eb; }
.mask-faq__q { cursor: pointer; padding: 1rem 2rem 1rem 0; list-style: none; position: relative; font-weight: 600; }
.mask-faq__q::-webkit-details-marker { display: none; }
.mask-faq__q::after { content: "+"; position: absolute; right: 0; top: 1rem; }
.mask-faq__item[open] > .mask-faq__q::after { content: "–"; }
.mask-faq__q > * { display: inline; margin: 0; font: inherit; }
.mask-faq__a { padding-bottom: 1rem; }

/* ---------- Sprachumschalter (bisher WPML-CSS: legacy-list-horizontal + Inline-Farben) ---------- */
.mask-lang{border:1px solid #0f2c3b;padding:7px;clear:both;background-color:#0f2c3b}
.mask-lang>ul{padding:0;margin:0!important;list-style-type:none}
.mask-lang .mask-lang__item{padding:0;margin:0;list-style-type:none;display:inline-block}
.mask-lang a,.mask-lang a:link{display:block;text-decoration:none;padding:5px 10px 6px;line-height:1;border-color:#0f2c3b;color:#fff}
.mask-lang a span{vertical-align:middle}
.mask-lang .mask-lang__item--current>a{color:#f7c63e}
.mask-lang__item--first{border-right:solid 1px #fff}
@media (max-width:768px){.mask-lang__item--first{border-right:none}}

/* Bewertungen: Feld „Designation“ wird nirgends genutzt – wie im alten Child-Theme ausblenden (kein Platzhalter, kein Leerabstand) */
.uabb-testimonial-author-designation{display:none}

/* 24.10.2026 Hauptmenü Desktop: gleiche Abstände zwischen allen Punkten (DE und EN gleich), Pfeil sitzt fest
   (dreht sich um die eigene Mitte statt dass der ganze Button rotiert und „springt“). Öffnen/Schließen über .is-open (mask.js, mit Verzögerung). */
@media (min-width:1005px){
  .mask-menu .menu>li>a,.mask-menu .menu>li>.fl-has-submenu-container>a{padding-left:14px!important;padding-right:14px!important}
  .mask-menu .menu>li>.fl-has-submenu-container,.mask-menu.mask-menu--en .menu>li>.fl-has-submenu-container:has(button.fl-menu-toggle){display:flex!important;align-items:center;position:relative}
  .mask-menu .menu>li>.fl-has-submenu-container>a{padding-right:0!important}
  .mask-menu .menu>li>.fl-has-submenu-container>.fl-menu-toggle{position:relative!important;inset:auto!important;flex:none;width:14px!important;height:14px!important;margin:0 14px 0 7px;transform:none!important}
  .mask-menu .menu>li>.fl-has-submenu-container>.fl-menu-toggle::before{left:50%!important;right:auto!important;top:50%!important;margin:0!important;transform-origin:center!important;transform:translate(-50%,-70%) rotate(45deg)!important;transition:transform .2s ease}
  .mask-menu .menu>li.is-open>.fl-has-submenu-container>.fl-menu-toggle::before{transform:translate(-50%,-30%) rotate(-135deg)!important}
  .mask-menu .menu>li.is-open>.fl-has-submenu-container>*{color:var(--mask-orange)}
  .mask-menu .menu>li.is-open>.fl-has-submenu-container>.fl-menu-toggle::before{border-color:var(--mask-orange)}
  .mask-menu.js-hi .menu>li.fl-has-submenu:not(.is-open):not(:has(:focus-visible))>.sub-menu{display:none!important}
}
@media (min-width:1005px) and (max-width:1199px){
  .mask-menu .menu>li>a,.mask-menu .menu>li>.fl-has-submenu-container>a{padding-left:9px!important;padding-right:9px!important}
  .mask-menu .menu>li>.fl-has-submenu-container>a{padding-right:0!important}
  .mask-menu .menu>li>.fl-has-submenu-container>.fl-menu-toggle{margin:0 9px 0 5px}
}

/* 24.10.2026 Kurs-Kacheln, Variante A (Karte): Bild 220px, Oberzeile + Titel direkt darunter, Kurslinks immer sichtbar.
   Markup: HTML-Modul auf der Startseite (DE/EN), Klasse .mask-kc. */
.mask-kc{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}
.mask-kc__card{position:relative;display:flex;flex-direction:column;background:#fff;border-radius:0 30px 30px 30px;overflow:hidden;box-shadow:0 4px 18px rgba(0,36,65,.08);transition:transform .25s ease,box-shadow .25s ease}
.mask-kc__card:hover,.mask-kc__card:focus-within{transform:translateY(-4px);box-shadow:0 14px 34px rgba(0,36,65,.16)}
.mask-kc__img{display:block;width:100%;height:220px;object-fit:cover;object-position:50% 20%;transform-origin:50% 20%;transition:transform .5s ease}
.mask-kc__card:hover .mask-kc__img{transform:scale(1.04)}
/* Zoom bleibt im Bildbereich: Bild unter den weißen Textbereich legen (isolation = eigener Stapelkontext der Karte) */
.mask-kc__card{isolation:isolate}
.mask-kc__img{position:relative;z-index:-1}
.mask-kc__body{position:relative;flex:1;display:flex;flex-direction:column;padding:18px 26px 24px;background:#fff}
.mask-kc__eb{margin:0 0 4px;min-height:1.3em;font-size:13px;line-height:1.3;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--mask-orange)}
.mask-kc__title{margin:0 0 12px;font-family:Unbounded,sans-serif;font-weight:400;font-size:21px;line-height:1.2;color:#003159}
.mask-kc ul{list-style:none;margin:0;padding:0}
.mask-kc li{position:relative;margin:0;padding:7px 0 7px 20px;border-top:1px solid rgba(0,49,89,.1);font-size:15px;line-height:1.4;color:#383838}
.mask-kc li::before{content:"›";position:absolute;left:3px;top:6px;font-weight:700;color:var(--mask-orange)}
.mask-kc li a{color:#003159;text-decoration:none}
.mask-kc li a:hover,.mask-kc li a:focus-visible{color:var(--mask-orange);text-decoration:underline}
.mask-kc__cta{align-self:flex-start;margin-top:auto;padding-top:14px;font-weight:600;color:#003159;text-decoration:none}
.mask-kc__cta:hover{color:var(--mask-orange)}
.mask-kc__card--link .mask-kc__cta::after{content:"";position:absolute;inset:0}
.mask-kc__card--link{cursor:pointer}
.mask-kc__card--link .mask-kc__body{position:static}
@media (max-width:992px){.mask-kc{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}}
@media (max-width:767px){.mask-kc{grid-template-columns:1fr;gap:18px}.mask-kc__img{height:190px}.mask-kc__body{padding:16px 20px 20px}.mask-kc__title{font-size:20px}}
@media (prefers-reduced-motion:reduce){.mask-kc__card,.mask-kc__img{transition:none}.mask-kc__card:hover{transform:none}.mask-kc__card:hover .mask-kc__img{transform:none}}
/* Oberzeile in den Originalfarben unten auf dem Bild (wie im alten Block), Titel auf der weißen Fläche */
.mask-kc__body{position:static;padding-top:18px}
.mask-kc__eb{position:absolute;left:26px;right:26px;top:184px;margin:0;min-height:0;z-index:1;text-shadow:0 1px 6px rgba(0,20,40,.55)}
.mask-kc__eb:empty{display:none}
@media (max-width:767px){.mask-kc__eb{left:20px;right:20px;top:156px}}
/* 24.10 Korrektur: kein „Mehr erfahren“ – bei Karten ohne Kursliste ist der Titel der Link und die ganze Karte klickbar */
.mask-kc .mask-kc__title{margin:30px 0 20px}
.mask-kc__title a{color:inherit;text-decoration:none}
.mask-kc__card--link .mask-kc__title a::after{content:"";position:absolute;inset:0;z-index:2}
.mask-kc__card--link:hover .mask-kc__title a{color:var(--mask-orange)}
.mask-kc__title a:focus-visible{outline:2px solid var(--mask-orange);outline-offset:3px}
/* Oberzeile auf allen Breiten 13px (mobile.css setzt Absätze in HTML-Modulen auf 16px) */
.fl-builder-content .mask-kc p.mask-kc__eb{font-size:13px!important;line-height:1.3!important}
.mask-kc .mask-kc__body{padding-top:0}

/* 24.10.2026 Tests und Prüfungen (DE/EN): Block „Prüfungsarten“ auf Grau → inaktive Tabs weiß statt grau */
.fl-node-0tl9ufmizyeh .mask-tabs .fl-tabs-label:not(.fl-tab-active){background-color:#fff!important}

/* 25.10.2026 MASK Tabs: zusätzliche Bausteine für Firmenkurse / Tests (früher UABB-Tabs mit Saved Rows) */
.mask-tabs .mask-tabs__cols--spaced{margin-top:40px}
.mask-tabs .mask-tabs__cta-wrap{margin:28px 0 0}
.mask-tabs a.mask-tabs__cta{display:inline-flex;align-items:center;gap:8px;padding:12px 18px 12px 24px;border-radius:13px;background:#005fac;color:#fff;font-size:18px;line-height:20px;text-decoration:none;transition:background-color .2s}
.mask-tabs a.mask-tabs__cta:hover,.mask-tabs a.mask-tabs__cta:focus-visible{background:#003159;color:#fff}
.mask-tabs a.mask-tabs__cta .ua-icon{font-size:20.8px;line-height:1}
.mask-tabs .mask-tabs__cols--halves>.mask-tabs__main,.mask-tabs .mask-tabs__cols--halves>.mask-tabs__side{flex:1 1 300px;max-width:none}
.mask-tabs .mask-tabs__cols--halves>.mask-tabs__main>p+.mask-tabs__media{margin-top:20px}

/* 25.10.2026 Alle Buttons der Website: einheitlich 13px auf allen Ecken (statt einseitig abgerundet / 4–6px / Pillen) */
a.fl-button,button.fl-button,.fl-builder-content a.fl-button,.uabb-button,.uabb-creative-button,a.mask-tabs__cta,.mask-tabs a.mask-tabs__cta,
.mask-events__btn,.mask-events__more,.mask-mm-contact a.mask-mm-btn,.mask-footer__contact-btn,
.quform-submit,.quform-back,.quform-next,.quform-default-submit,.quform-button-submit button,.quform-button-back button,.quform-button-next button{border-radius:13px!important}

/* 25.10.2026 Bewertungen („Rezensionen“ auf Kursseiten, „Unsere Erfolge“ auf der Startseite): Kästen 25px rund */
.fl-builder-content .fl-col-content:has(> .fl-module-adv-testimonials){border-radius:25px!important}
.fl-builder-content .uabb-testimonials.box .uabb-testimonial{border-radius:25px!important}
/* Tabs (Desktop-Reiter): oben 13px, unten gerade */
.mask-tabs .fl-tabs-labels .fl-tabs-label,.uabb-tabs>nav li,.uabb-tabs>nav li .uabb-tab-link{border-radius:13px 13px 0 0!important}

/* 25.10.2026 „Aktuelle Termine“ (Startseite, UABB-Tabs): Fläche hinter der Kursliste weiß wie überall */
.fl-module-advanced-tabs .uabb-content-wrap:has(.mask-events){background-color:#fff!important}
/* Bewertungen: Name überall wie in „Rezensionen“ (Kursseiten) */
.uabb-testimonial-author-name{font-family:Unbounded,sans-serif!important;font-size:18px!important;font-weight:400!important;line-height:1.3!important;color:#3e3e3e!important;margin:0 0 10px!important;letter-spacing:normal;text-transform:none}
@media (max-width:767px){.uabb-testimonial-author-name{font-size:16px!important;line-height:1.25!important}}
/* „Rezensionen“-Kasten: Schatten auch auf Desktop (wie mobil) */
.fl-builder-content .fl-col-content:has(> .fl-module-adv-testimonials .uabb-testimonials-wrap){box-shadow:0 0 20px 0 #d9dade!important}

/* EN-Kursseiten: Seitentitel als H1 im Stil von .qh1 (EN hat keine separate H1-Zeile) */
.kurs-header h1.qh1{font-size:2em;line-height:1.2em;font-weight:400;color:#fff;margin:5px 0 0;font-family:Unbounded,sans-serif;text-shadow:rgba(0,0,0,.59) 0 3px 6px}

/* Kursseiten (DE/EN), Tablet 768–1023: Eckdaten-Raster + Seitenspalte (Akkordeon/Termine) untereinander,
   sonst brechen die Info-Box-Titel mitten im Wort (z. B. „Teilnehme-nde“, „Participa-nts“). */
@media (min-width:768px) and (max-width:1023px){
  .fl-builder-content .fl-col:has(> .fl-col-content > .fl-col-group > .fl-col .fl-module-info-box),
  .fl-builder-content .fl-col:has(> .fl-col-content > .fl-col-group > .fl-col .fl-module-info-box) + .fl-col{width:100%!important;max-width:100%!important}
}

/* ---------- Buttons: einheitlich 18px auf allen Breiten (Beaver-Standardbutton, UABB-Button).
   Einzelne Buttongrößen NICHT in BB-Modulen setzen – nur hier. Eigene Komponenten (Tabs-CTA, Termine, Footer) haben 18px direkt in ihrer Regel. ---------- */
.fl-page .fl-builder-content .fl-button:is(a,button),.fl-page .fl-builder-content a.fl-button:visited,
.fl-page .fl-builder-content .uabb-button-wrap a,.fl-page .fl-builder-content .uabb-button-wrap a:visited{font-size:18px}

/* ---------- Modul: MASK Kurskarte (Bildkarte mit Titel, Icon, Link) ---------- */
.mask-card{position:relative;isolation:isolate;display:flex;align-items:flex-end;height:100%;min-height:234px;overflow:hidden;border-radius:0 40px 40px 40px;background:#003159;color:#fff;text-decoration:none;box-shadow:0 0 7px rgba(168,168,168,.5);transform:translateY(0);transition:transform .45s cubic-bezier(.2,.7,.2,1),box-shadow .45s cubic-bezier(.2,.7,.2,1)}
.mask-card,.mask-card:hover,.mask-card:focus{color:#fff;text-decoration:none}
.mask-card__media{position:absolute;inset:0;z-index:-2}
.mask-card__img{display:block;width:100%;height:100%;max-width:none;object-fit:cover;object-position:center top;transform:scale(1);transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.mask-card--img-center .mask-card__img{object-position:center}
.mask-card--img-bottom .mask-card__img{object-position:center bottom}
.mask-card::before,.mask-card::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none}
.mask-card::before{background:linear-gradient(0deg,rgba(0,49,89,.95) 0%,rgba(2,49,89,.5) 50%)}
.mask-card::after{background:linear-gradient(0deg,rgba(0,49,89,.9) 0%,rgba(0,49,89,.15) 100%);opacity:0;transition:opacity .45s ease}
.mask-card__body{display:flex;flex-direction:column;align-items:flex-start;gap:10px;width:100%;padding:22px 33px;font:400 18px/1.3 "Unbounded",var(--mask-font,sans-serif)}
.mask-card__icon{flex:none;font-size:20.8px;line-height:1}
.mask-card__title{flex:none;width:100%;min-width:0;margin:0;padding:0;font:inherit;color:inherit;letter-spacing:normal;text-transform:none}
.mask-card__arrow{position:absolute;top:22px;right:22px;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:#fff;color:#003159;opacity:0;transform:translateX(-10px);transition:opacity .35s ease,transform .45s cubic-bezier(.2,.7,.2,1)}
@media (hover:hover){
  a.mask-card:hover{transform:translateY(-4px);box-shadow:0 14px 30px -12px rgba(0,49,89,.45)}
  a.mask-card:hover .mask-card__img{transform:scale(1.06)}
  a.mask-card:hover::after{opacity:1}
  a.mask-card:hover .mask-card__arrow{opacity:1;transform:none}
}
@media (hover:none){ .mask-card__arrow{opacity:1;transform:none} }
a.mask-card:focus-visible{outline:3px solid var(--mask-orange,#d88500);outline-offset:3px}
a.mask-card:focus-visible .mask-card__arrow{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){ .mask-card,.mask-card__img,.mask-card__arrow,.mask-card::after{transition:none} a.mask-card:hover,a.mask-card:hover .mask-card__img{transform:none} }

/* 27.10.2026 Quform: eine Schriftgröße für alle Formulare (Labels, Felder, Optionen) = Fließtext 18px; Hinweise 16px.
   Die alten 14px kamen aus den Formular-Styles in Quform selbst und sind dort entfernt. */
.quform{font-size:18px}
.quform .quform-description{font-size:16px}
.quform .quform-page-progress-text,.quform .quform-page-progress-percentage{font-size:14px}