/* =====================================================================
   WelfenAkademie Refresh
   Portiert aus dem Mobile-Entwurf, aufgezogen auf alle Bildschirmgroessen.
   Alle Design-Anpassungen gehoeren in diese Datei.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. Design-Tokens
   Groessen skalieren ueber clamp() fluide mit der Viewport-Breite,
   statt an einzelnen Breakpoints zu springen.
   --------------------------------------------------------------------- */
:root{
  --wa-navy:#28395b;
  --wa-navy-deep:#0f2d58;
  --wa-navy-press:#0b2243;
  --wa-red:#fc3a2f;
  --wa-red-dark:#e83228;
  --wa-red-press:#b10025;
  --wa-ink:#3b3b3b;

  --wa-section-white:#ffffff;
  --wa-section-gray:#f6f6f6;
  --wa-section-border:rgba(40,57,91,.08);

  --wa-font-display:'Roboto Slab',Georgia,serif;

  /* Seitliche Textluft: 20px auf dem Handy bis 42px auf grossen Schirmen */
  --wa-gutter:clamp(20px,4vw,42px);
  --wa-gutter-mobile:clamp(26px,7vw,34px);

  /* Vertikaler Sektionsrhythmus */
  --wa-section-space:clamp(48px,7vw,96px);

  /* Fliessende Grundschrift statt fester Sprung auf Mobil */
  --wa-body-size:clamp(15px,0.45vw + 14px,18px);
  --wa-body-line:1.75;

  --wa-bar-height:62px;
}

/* ---------------------------------------------------------------------
   2. Sektionsrhythmus
   Alle Container weiss, danach jede zweite Sektion grau. Ergibt die
   ruhige Streifung des Entwurfs, ohne dass im Backend etwas
   umgestellt werden muss. Gilt auf allen Bildschirmgroessen.
   --------------------------------------------------------------------- */
html,body,
.wrapper,.wrapper_inner,
.content,.content_inner,
.full_width,.full_width_inner{
  background:var(--wa-section-white) !important;
  background-color:var(--wa-section-white) !important;
  background-image:none !important;
}

.full_width_inner > .vc_row,
.full_width_inner > section{
  position:relative;
  background:var(--wa-section-white) !important;
  background-color:var(--wa-section-white) !important;
  background-image:none !important;
  border-top:1px solid var(--wa-section-border);
}

.full_width_inner > .vc_row:nth-child(even),
.full_width_inner > section:nth-child(even){
  background:var(--wa-section-gray) !important;
  background-color:var(--wa-section-gray) !important;
  background-image:none !important;
}

/* Innere Wrapper duerfen die Streifung nicht wieder zumalen */
.full_width_inner > .vc_row > .full_section_inner,
.full_width_inner > .vc_row > .section_inner,
.full_width_inner > .vc_row .section_inner_margin,
.full_width_inner > section > .parallax_content,
.full_width_inner > section .parallax_section_inner_margin,
.full_width_inner > section .full_section_inner,
.full_width_inner .call_to_action,
.wa-teaser-section,
.wa-teaser-section:before,
.wa-teaser-section:after,
.wa-teaser-section .section_inner,
.wa-teaser-section .section_inner_margin,
.wa-teaser-section .wpb_column,
.wa-teaser-section .vc_column-inner,
.wa-teaser-section .wpb_wrapper,
.wa-teaser-section .qode-animation-holder,
.wa-teaser-section .qode-animation-holder-inner{
  background:transparent !important;
  background-color:transparent !important;
  background-image:none !important;
}
.wa-teaser-section{box-shadow:none !important}

/* Sektionen, die frueher ein dunkles Hintergrundbild hatten */
.wa-static-bg-section{background-image:none !important}
.wa-ev-section{position:relative}
.wa-ev-section:before{content:none !important;display:none !important;background:none !important}
.wa-ev-section .parallax_content{position:relative;z-index:1}

/* ---------------------------------------------------------------------
   3. Typografie und Textspalten
   --------------------------------------------------------------------- */
.full_width_inner .wpb_text_column{
  box-sizing:border-box;
  padding-left:var(--wa-gutter);
  padding-right:var(--wa-gutter);
}
.full_width_inner .call_to_action .container_inner{
  box-sizing:border-box;
  padding-left:var(--wa-gutter);
  padding-right:var(--wa-gutter);
}
.full_width_inner .wpb_text_column.toptext{
  margin-left:0 !important;
  margin-right:0 !important;
}

.full_width_inner .wpb_text_column p{
  font-size:var(--wa-body-size) !important;
  line-height:var(--wa-body-line) !important;
  margin:0 0 18px !important;
}
.full_width_inner .wpb_text_column p:last-child{margin-bottom:0 !important}
.full_width_inner .wpb_text_column p span{
  font-size:inherit !important;
  line-height:inherit !important;
}

/* Ehemals helle Schrift auf dunklem Grund wieder dunkel setzen */
.full_width_inner > section .wpb_text_column h2 span,
.full_width_inner > section .wpb_text_column h3 span,
.full_width_inner > section .counter,
.wa-ev-section h2 span{
  color:var(--wa-navy) !important;
  text-shadow:none !important;
}
.full_width_inner > section .wpb_text_column p span,
.wa-ev-section p span{
  color:var(--wa-ink) !important;
  text-shadow:none !important;
}

/* Redaktionell gesetzte Hervorhebungen im Fliesstext */
.full_width_inner .wpb_text_column p .wa-mobile-highlight,
.full_width_inner .wpb_text_column p .wa-highlight{
  background:transparent !important;
  color:var(--wa-navy) !important;
  font-weight:700 !important;
  padding:0;
  text-shadow:none !important;
}

.wa-ev-section .vc_custom_1472805182667{
  padding-top:var(--wa-section-space) !important;
  padding-bottom:var(--wa-section-space) !important;
}
.wa-ev-section .wpb_text_column.toptext{
  column-count:1 !important;
  column-gap:0 !important;
}
.wa-ev-section .wpb_text_column.toptext p{
  hyphens:none !important;
  text-align:left !important;
  text-align-last:auto !important;
}

/* Lesbare Zeilenlaenge auf grossen Schirmen */
@media only screen and (min-width:1001px){
  .wa-ev-section .vc_inner .full_section_inner > .wpb_column{
    float:none !important;
    margin-left:auto !important;
    margin-right:auto !important;
    width:66.66666667% !important;
  }
}

/* ---------------------------------------------------------------------
   4. Buttons
   --------------------------------------------------------------------- */

/* Weiterlesen-Buttons in den Teasern: gefuellt statt Outline */
.wa-read-more-button.qbutton,
.wa-read-more-button.qbutton.small{
  align-items:center !important;
  background:var(--wa-red) !important;
  background-color:var(--wa-red) !important;
  border:2px solid var(--wa-red) !important;
  box-sizing:border-box !important;
  color:#fff !important;
  display:flex !important;
  font-family:var(--wa-font-display) !important;
  font-size:13px !important;
  font-weight:600 !important;
  justify-content:center !important;
  line-height:1.1 !important;
  margin-left:auto !important;
  margin-right:auto !important;
  min-height:40px !important;
  padding:0 18px !important;
  text-decoration:none !important;
  text-transform:none !important;
  transition:background-color .18s ease,border-color .18s ease !important;
  width:fit-content !important;
}
.wa-read-more-button.qbutton:hover,
.wa-read-more-button.qbutton:focus,
.wa-read-more-button.qbutton.small:hover,
.wa-read-more-button.qbutton.small:focus{
  background:var(--wa-red-dark) !important;
  background-color:var(--wa-red-dark) !important;
  border-color:var(--wa-red-dark) !important;
  color:#fff !important;
}
.wa-read-more-button .qode_button_icon_element{
  color:#fff !important;
  margin-left:8px !important;
}

/* Semester-Aufruf: gestapelt und zentriert statt 75/25-Spalten */
.wa-semester-cta-section .call_to_action{
  padding-top:var(--wa-section-space) !important;
  padding-bottom:var(--wa-section-space) !important;
}
.wa-semester-cta-section .call_to_action .container_inner{
  box-sizing:border-box !important;
  max-width:none !important;
  padding-left:clamp(var(--wa-gutter-mobile),16.66666667%,16.66666667%) !important;
  padding-right:clamp(var(--wa-gutter-mobile),16.66666667%,16.66666667%) !important;
}
.wa-semester-cta-section .two_columns_75_25{display:block !important}
.wa-semester-cta-section .text_wrapper,
.wa-semester-cta-section .button_wrapper{
  box-sizing:border-box !important;
  float:none !important;
  margin:0 !important;
  padding:0 !important;
  text-align:center !important;
  width:100% !important;
}
.wa-semester-cta-section .call_to_action_text h2{
  color:var(--wa-navy) !important;
  margin:0 !important;
  text-align:center !important;
}
.wa-semester-cta-section .button_wrapper{margin-top:60px !important}
.wa-semester-cta-section .button_wrapper .qbutton{
  align-items:center !important;
  display:inline-flex !important;
  float:none !important;
  justify-content:center !important;
  margin:0 auto !important;
}

/* ---------------------------------------------------------------------
   5. Hero-Slider
   Einheitliche Buttons auf allen Groessen, Umbau der Textbox nur dort,
   wo der Platz knapp ist.
   --------------------------------------------------------------------- */
#qode-welfenakademie-home{
  --wa-hero-button-bg:#ffffff;
  --wa-hero-button-text:var(--wa-navy);
  --wa-hero-button-bg-active:var(--wa-navy);
  --wa-hero-button-text-active:#ffffff;
}
#qode-welfenakademie-home .slider_content .text > a.qbutton,
#qode-welfenakademie-home .slider_content .text > a.qode-btn{
  align-items:center !important;
  background:var(--wa-hero-button-bg) !important;
  background-color:var(--wa-hero-button-bg) !important;
  border:0 !important;
  border-radius:2px !important;
  box-shadow:0 6px 18px rgba(0,0,0,.22) !important;
  box-sizing:border-box !important;
  color:var(--wa-hero-button-text) !important;
  display:inline-flex !important;
  font-family:var(--wa-font-display) !important;
  font-size:clamp(13px,.3vw + 12px,15px) !important;
  font-style:normal !important;
  font-weight:600 !important;
  justify-content:center !important;
  letter-spacing:0 !important;
  line-height:1.1 !important;
  min-height:44px !important;
  opacity:1 !important;
  padding:0 22px !important;
  pointer-events:auto;
  text-align:center !important;
  text-decoration:none !important;
  text-transform:none !important;
  transition:background-color .18s ease !important;
  vertical-align:middle !important;
}
#qode-welfenakademie-home .slider_content .text > a.qbutton:hover,
#qode-welfenakademie-home .slider_content .text > a.qbutton:focus,
#qode-welfenakademie-home .slider_content .text > a.qbutton:active,
#qode-welfenakademie-home .slider_content .text > a.qode-btn:hover,
#qode-welfenakademie-home .slider_content .text > a.qode-btn:focus,
#qode-welfenakademie-home .slider_content .text > a.qode-btn:active{
  background:var(--wa-hero-button-bg-active) !important;
  background-color:var(--wa-hero-button-bg-active) !important;
  color:var(--wa-hero-button-text-active) !important;
}
#qode-welfenakademie-home .slider_content .text > a.qbutton:focus-visible,
#qode-welfenakademie-home .slider_content .text > a.qode-btn:focus-visible{
  outline:3px solid var(--wa-navy) !important;
  outline-offset:3px !important;
}
#qode-welfenakademie-home .slider_content .text > a.qode-btn .qode-btn-text{
  color:inherit !important;
  display:block !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
}

/* ---------------------------------------------------------------------
   6. Fortschrittsbalken
   Groessere Labels, kontrastreicher Track, Prozentwert immer sichtbar.
   --------------------------------------------------------------------- */
.wa-progress .progress_title_holder{
  align-items:start !important;
  display:grid !important;
  gap:12px !important;
  grid-template-columns:minmax(0,1fr) max-content !important;
  line-height:1.35 !important;
  margin:0 0 12px !important;
  padding:0 !important;
  text-align:left !important;
}
.wa-progress .progress_title,
.wa-progress .progress_title span{
  color:var(--wa-navy) !important;
  font-size:clamp(16px,.3vw + 15px,18px) !important;
  font-weight:700 !important;
  text-shadow:none !important;
}
.wa-progress .progress_title{
  display:block !important;
  float:none !important;
  grid-column:1 !important;grid-row:1 !important;
  margin:0 !important;
  max-width:none !important;min-width:0 !important;
  padding-right:0 !important;
  position:static !important;
  text-align:left !important;
  white-space:normal !important;
}
.wa-progress .progress_title span{display:inline !important;white-space:normal !important}
.wa-progress .progress_number{
  color:var(--wa-navy) !important;
  display:block !important;
  float:none !important;
  font-size:clamp(19px,.4vw + 18px,22px) !important;
  font-weight:700 !important;
  grid-column:2 !important;grid-row:1 !important;
  margin:0 !important;
  min-width:58px !important;
  padding:0 !important;
  position:static !important;
  text-align:right !important;
  text-shadow:none !important;
  transform:none !important;
  white-space:nowrap !important;
  width:auto !important;
}
.wa-progress .progress_content_outer{
  background:rgba(40,57,91,.18) !important;
  border-radius:8px !important;
  box-shadow:inset 0 0 0 1px rgba(40,57,91,.16);
  height:16px !important;
}
.wa-progress .progress_content{
  background:var(--wa-navy) !important;
  border-radius:8px !important;
  height:16px !important;
}
@media only screen and (max-width:768px){
  .wa-progress .progress_title_holder{
    gap:8px !important;
    grid-template-columns:minmax(0,1fr) 54px !important;
    margin:0 0 8px !important;
  }
  .wa-progress .progress_number{min-width:54px !important}
}

/* ---------------------------------------------------------------------
   7. News-Banner
   Im Entwurf nur mobil, hier auf allen Groessen sichtbar.
   --------------------------------------------------------------------- */
.wa-news-banner{
  background:var(--wa-red);
  box-shadow:0 4px 12px rgba(252,58,47,.22);
  display:block;
  left:0;right:0;
  position:fixed;
  top:var(--wa-news-top,142px);
  width:100%;
  z-index:99997;
}
.wa-news-banner.is-hidden{display:none !important}
.wa-news-banner-link{
  align-items:center;
  box-sizing:border-box;
  color:#fff !important;
  display:flex;
  gap:8px;
  justify-content:center;
  margin:0 auto;
  max-width:1300px;
  min-height:38px;
  padding:8px clamp(54px,5vw,72px);
  text-decoration:none !important;
}
.wa-news-banner-link:hover .wa-news-title{text-decoration:underline}
.wa-news-icon{color:#fff;flex:0 0 auto;font-size:15px;line-height:1}
/* Optionales Bild aus dem Beitrag, ersetzt das Symbol wenn gesetzt (siehe
   wa_refresh_news_banner() in der functions.php). Gleiche Zeilenhoehe wie
   der Text, damit eine zweizeilige Meldung nicht dagegen springt. */
.wa-news-image{
  border-radius:6px;
  flex:0 0 auto;
  height:32px;
  object-fit:cover;
  width:32px;
}
.wa-news-title{
  color:#fff;
  font-family:var(--wa-font-display);
  font-size:clamp(15px,.3vw + 14px,17px);
  font-weight:400;
  line-height:1.35;
  text-align:center;
  /* War auf dem Desktop bewusst einzeilig (nowrap) und lief bei langen
     Meldungen aus der Leiste. Jetzt wie mobil: die Leiste waechst mit,
     initNewsBanner() misst die Hoehe ohnehin laufend nach. */
  white-space:normal;
}
.wa-news-close{
  align-items:center;
  background:transparent;border:0;
  color:#fff;cursor:pointer;display:flex;
  font-family:Arial,sans-serif;font-size:24px;
  height:38px;width:38px;
  justify-content:center;line-height:1;
  opacity:.82;padding:0;
  position:absolute;right:clamp(14px,3vw,34px);top:50%;
  transform:translateY(-50%);
  transition:opacity .2s ease;
}
.wa-news-close:hover,.wa-news-close:focus{opacity:1}
.wa-news-close:focus{outline:2px solid rgba(255,255,255,.75);outline-offset:-4px}
/* Der Banner liegt fest ueber dem Seitenanfang. Jede Seite rueckt um
   seine Hoehe nach unten, nicht nur die mit Slider: auf den Unterseiten
   stand die Ueberschrift sonst dahinter. Weggeklickt ist
   --wa-news-height 0. */
.content{padding-top:var(--wa-news-height,0px) !important}
/* Der obere Rand der ersten Ueberschrift schlug bisher durch bis an
   .content und stand dort als weisser Streifen unter dem Banner. Als
   eigener Formatierungskontext behalten die Kaesten ihn innen, der
   Abstand traegt dann ihre Farbe. */
.content_inner > .container,
.content_inner > .full_width{display:flow-root}
@media only screen and (max-width:760px){
  .wa-news-banner-link{min-height:42px;padding:9px 54px 9px 18px}
  .wa-news-title{white-space:normal}
}
/* Safari ab iOS 26 faerbt die Statusleiste in der Farbe eines fixierten
   Elements, das an der Oberkante des Bildschirms liegt, und behaelt sie
   auch nach dem Zurueckscrollen. Unter 1001px scrollt der Kopfbereich
   weg und der Banner rueckt an die Oberkante, oben waere dann alles rot.
   Ein schmaler weisser Streifen (.wa-news-kappe aus der functions.php)
   faengt diese Erkennung ab: er liegt direkt ueber dem Banner, laeuft
   mit ihm hoch und haelt an der Oberkante, der Banner darunter. Solange
   der Kopfbereich zu sehen ist, liegt er auf dessen weissem Rand.
   Getestet im Simulator (iOS 26.3): ein Pseudo-Element ignoriert Safari,
   2px sind zu wenig, 12px greifen. */
@media only screen and (max-width:1000px){
  :root{--wa-safari-kappe:12px}
  /* Am Element statt am :root: --wa-news-top setzt die refresh.js beim
     Scrollen direkt an Banner und Kappe. Eine Eigenschaft am :root zu
     aendern rechnet die ganze Seite neu, pro Bild. */
  .wa-news-banner,
  .wa-news-kappe{
    --wa-news-top-mobil:max(var(--wa-safari-kappe), var(--wa-news-top,142px));
  }
  .wa-news-banner{top:var(--wa-news-top-mobil)}
  .wa-news-banner:not(.is-hidden) + .wa-news-kappe{
    background:#fff;
    height:var(--wa-safari-kappe);
    left:0;right:0;
    position:fixed;
    top:calc(var(--wa-news-top-mobil) - var(--wa-safari-kappe));
    z-index:99997;
  }
}

/* ---------------------------------------------------------------------
   8. Schnellzugriffsleiste am unteren Rand
   Bewusst nur bis 1000px. Auf groesseren Schirmen uebernimmt die
   normale Kopfnavigation, eine fixierte Leiste waere dort im Weg.
   --------------------------------------------------------------------- */
#wa-mobile-bar{
  background:var(--wa-navy-deep);
  bottom:0;left:0;right:0;
  box-shadow:0 -3px 14px rgba(0,0,0,.28);
  display:none;
  font-family:var(--wa-font-display);
  padding-bottom:env(safe-area-inset-bottom);
  position:fixed;
  z-index:99999;
}
#wa-mobile-bar ul{display:flex;list-style:none;margin:0;padding:0}
#wa-mobile-bar li{flex:1;margin:0;padding:0}
#wa-mobile-bar li + li{border-left:1px solid rgba(255,255,255,.16)}
#wa-mobile-bar a,#wa-mobile-bar button{
  align-items:center;
  background:transparent;border:0;
  box-sizing:border-box;
  color:#fff;cursor:pointer;
  display:flex;flex-direction:column;gap:4px;
  font-size:11px;font-weight:400;
  height:var(--wa-bar-height);
  justify-content:center;
  letter-spacing:.2px;line-height:1;
  text-decoration:none;width:100%;
}
#wa-mobile-bar a:hover,#wa-mobile-bar button:hover{color:#fff}
#wa-mobile-bar a:active,#wa-mobile-bar button:active{background:var(--wa-navy-press)}
#wa-mobile-bar a:focus-visible,#wa-mobile-bar button:focus-visible{
  outline:2px solid rgba(255,255,255,.9);outline-offset:-3px;
}
#wa-mobile-bar svg{
  display:block;fill:none;height:22px;width:22px;
  stroke:#fff;stroke-linecap:round;stroke-linejoin:round;stroke-width:2;
}
@media only screen and (max-width:1000px){
  #wa-mobile-bar{display:block}
  body{padding-bottom:var(--wa-bar-height) !important}
  #back_to_top{bottom:calc(var(--wa-bar-height) + 12px) !important}
}

/* ---------------------------------------------------------------------
   9. Vollbild-Navigation (bis 1000px)
   --------------------------------------------------------------------- */
@media only screen and (max-width:1000px){
  nav.mobile_menu{display:none !important}

  body.wa-mobile-menu-open{overflow:hidden !important}
  body.wa-mobile-menu-open .page_header{z-index:99998 !important}
  body.wa-mobile-menu-open .header_bottom{
    background:#fff !important;
    left:0;right:0;top:0;
    position:fixed !important;
    z-index:100000 !important;
  }
  body.wa-mobile-menu-open nav.mobile_menu{
    animation:wa-mobile-menu-rise 260ms cubic-bezier(.2,.8,.2,1) both;
    background:var(--wa-navy-deep) !important;
    box-sizing:border-box;
    display:block !important;
    height:calc(100vh - var(--wa-mobile-menu-top,70px));
    max-height:calc(100dvh - var(--wa-mobile-menu-top,70px));
    left:0;right:0;top:var(--wa-mobile-menu-top,70px);
    min-height:0;
    overflow-x:hidden;overflow-y:auto !important;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior:contain;touch-action:pan-y;
    padding:24px 24px 92px;
    position:fixed !important;
    width:100%;z-index:99998;
  }
  /* Offen liegt die Kopfleiste fixiert am oberen Rand. Der News-Banner
     rueckt direkt unter sie (ueber --wa-news-top-mobil aus Abschnitt 7,
     so zieht die Safari-Kappe mit), die Navigation beginnt erst unter
     dem Banner. Weggeklickt ist --wa-news-height 0. */
  body.wa-mobile-menu-open .wa-news-banner,
  body.wa-mobile-menu-open .wa-news-kappe{--wa-news-top-mobil:var(--wa-mobile-menu-top,70px)}
  body.wa-mobile-menu-open nav.mobile_menu{
    height:calc(100vh - var(--wa-mobile-menu-top,70px) - var(--wa-news-height,0px));
    max-height:calc(100dvh - var(--wa-mobile-menu-top,70px) - var(--wa-news-height,0px));
    top:calc(var(--wa-mobile-menu-top,70px) + var(--wa-news-height,0px));
  }
  body.wa-mobile-menu-open.wa-mobile-menu-closing nav.mobile_menu{
    animation:wa-mobile-menu-fall 200ms cubic-bezier(.4,0,.2,1) both;
    pointer-events:none;
  }
  body.wa-mobile-menu-open nav.mobile_menu ul{
    background:transparent !important;box-sizing:border-box;
    list-style:none;margin:0;padding:0;
  }
  body.wa-mobile-menu-open nav.mobile_menu > ul{
    display:block !important;height:auto !important;
    margin:0 auto;max-height:none !important;max-width:520px;
    opacity:1 !important;visibility:visible !important;
  }
  body.wa-mobile-menu-open nav.mobile_menu li{
    background:transparent !important;
    border-bottom:1px solid rgba(255,255,255,.18);
    display:block !important;
  }
  body.wa-mobile-menu-open nav.mobile_menu a,
  body.wa-mobile-menu-open nav.mobile_menu .mobile_arrow,
  body.wa-mobile-menu-open nav.mobile_menu i,
  body.wa-mobile-menu-open nav.mobile_menu span{color:#fff !important}
  body.wa-mobile-menu-open nav.mobile_menu a{
    background:transparent !important;display:block !important;
    font-family:var(--wa-font-display);text-decoration:none;
  }
  body.wa-mobile-menu-open nav.mobile_menu > ul > li > a{font-size:22px;line-height:56px}
  body.wa-mobile-menu-open nav.mobile_menu > ul > li.has_sub > a{cursor:pointer}
  body.wa-mobile-menu-open nav.mobile_menu > ul > li.has_sub > .sub_menu{display:none !important}
  body.wa-mobile-menu-open nav.mobile_menu > ul > li.has_sub.wa-submenu-closing > .sub_menu,
  body.wa-mobile-menu-open nav.mobile_menu > ul > li.has_sub.wa-submenu-open > .sub_menu{
    display:block !important;overflow:hidden;
  }
  body.wa-mobile-menu-open nav.mobile_menu > ul > li.has_sub.wa-submenu-open > .sub_menu{
    animation:wa-mobile-submenu-rise 240ms cubic-bezier(.2,.7,.2,1) both;
  }
  body.wa-mobile-menu-open nav.mobile_menu > ul > li.has_sub.wa-submenu-closing > .sub_menu{
    animation:wa-mobile-submenu-fall 200ms cubic-bezier(.4,0,.2,1) both;
  }
  body.wa-mobile-menu-open nav.mobile_menu .sub_menu a{
    font-size:16px;line-height:42px;padding-left:18px !important;
  }
  body.wa-mobile-menu-open nav.mobile_menu .mobile_arrow{display:none !important}
  /* Pfeil an den Punkten mit Untermenue, wie in der Kopfleiste
     (Abschnitt 29): zwei Rahmenkanten, gedreht. Bridges span.mobile_arrow
     ist dafuer schon da, seine Icon-Schrift faellt weg. Der Pfeil nimmt
     keine Klicks an, getippt wird auf den Link darunter. */
  body.wa-mobile-menu-open nav.mobile_menu > ul > li.has_sub{position:relative}
  body.wa-mobile-menu-open nav.mobile_menu > ul > li.has_sub > .mobile_arrow{
    border-bottom:2px solid currentColor;
    border-right:2px solid currentColor;
    box-sizing:border-box;
    display:block !important;
    float:none;
    height:9px;
    line-height:0;
    margin:0;
    padding:0;
    pointer-events:none;
    position:absolute;
    right:6px;
    /* Mitte der ersten Zeile: 10px padding von Bridge plus halbe 56px */
    top:31px;
    transform:rotate(45deg);
    transition:transform 220ms var(--wa-ease);
    width:9px;
  }
  body.wa-mobile-menu-open nav.mobile_menu > ul > li.has_sub > .mobile_arrow i{display:none !important}
  body.wa-mobile-menu-open nav.mobile_menu > ul > li.has_sub.wa-submenu-open:not(.wa-submenu-closing) > .mobile_arrow{
    transform:translateY(5px) rotate(-135deg);
  }
  /* Beim Oeffnen schiebt die refresh.js Kopfleiste, Banner und Navigation
     von ihrer vorherigen Lage herein (Eigenschaft translate). Solange die
     Navigation dabei hoeher steht als am Ende, fehlt unten ein Stueck;
     der Schatten ohne Unschaerfe fuellt es in ihrer Farbe. */
  body.wa-mobile-menu-open nav.mobile_menu{box-shadow:0 40vh 0 var(--wa-navy-deep)}
  /* Die Hauptpunkte laufen kurz versetzt ein, --wa-i setzt die refresh.js */
  body.wa-mobile-menu-open nav.mobile_menu > ul > li{
    animation:wa-mobile-item-in 220ms cubic-bezier(.2,.8,.2,1) both;
    animation-delay:calc(50ms + var(--wa-i,0) * 25ms);
  }
  body.wa-mobile-menu-open #wa-nav-btn{background:var(--wa-navy-press)}
}

@keyframes wa-mobile-menu-rise{
  from{opacity:.88;transform:translateY(12px)}
  to{opacity:1;transform:translateY(0)}
}
@keyframes wa-mobile-menu-fall{
  from{opacity:1;transform:translateY(0)}
  to{opacity:0;transform:translateY(10px)}
}
@keyframes wa-mobile-item-in{
  from{opacity:0;transform:translateY(8px)}
  to{opacity:1;transform:translateY(0)}
}
@keyframes wa-mobile-submenu-rise{
  from{opacity:0;transform:translateY(8px)}
  to{opacity:1;transform:translateY(0)}
}
@keyframes wa-mobile-submenu-fall{
  from{opacity:1;transform:translateY(0)}
  to{opacity:0;transform:translateY(6px)}
}

/* ---------------------------------------------------------------------
   10. Bild-Lightbox
   Sichtbarkeit haengt an opacity und visibility statt an display, sonst
   gaebe es nichts zu ueberblenden. visibility nimmt den Kasten aus dem
   Zeigerbetrieb, solange er zu ist, und wird erst am Ende des Uebergangs
   umgeschaltet.
   --------------------------------------------------------------------- */
.wa-impressions-lightbox{
  align-items:center;
  background:rgba(8,14,28,.94);
  cursor:zoom-out;
  display:flex;
  inset:0;
  justify-content:center;
  opacity:0;
  padding:clamp(12px,3vw,40px);
  position:fixed;
  transition:opacity .28s ease,visibility 0s linear .28s;
  visibility:hidden;
  z-index:1000000;
}
.wa-impressions-lightbox.is-open{
  opacity:1;
  transition:opacity .28s ease,visibility 0s linear 0s;
  visibility:visible;
}
.wa-lightbox-figure{
  margin:0;
  transform:scale(.965);
  transition:transform .34s cubic-bezier(.2,.8,.2,1);
}
.wa-impressions-lightbox.is-open .wa-lightbox-figure{transform:none}
.wa-impressions-lightbox img{
  display:block;height:auto;width:auto;
  max-height:calc(100vh - 2 * clamp(12px,3vw,40px));
  max-width:100%;
  object-fit:contain;
  pointer-events:none;user-select:none;
}
.wa-lightbox-close{
  background:rgba(255,255,255,.12);
  border:0;
  border-radius:var(--wa-radius-pill);
  color:#fff;
  cursor:pointer;
  font-size:26px;
  height:44px;
  line-height:1;
  position:absolute;
  right:clamp(10px,2vw,24px);
  top:clamp(10px,2vw,24px);
  transition:background .2s ease;
  width:44px;
}
.wa-lightbox-close:hover,
.wa-lightbox-close:focus-visible{background:rgba(255,255,255,.26)}
body.wa-impressions-open{overflow:hidden !important}
body.wa-impressions-open .pp_overlay,
body.wa-impressions-open .pp_pic_holder{display:none !important}

/* ---------------------------------------------------------------------
   11. Textsatz auf schmalen Schirmen
   --------------------------------------------------------------------- */
@media only screen and (max-width:1000px){
  .full_width_inner .wpb_text_column{
    padding-left:var(--wa-gutter-mobile) !important;
    padding-right:var(--wa-gutter-mobile) !important;
  }
  .full_width_inner .q_elements_holder_custom_667827,
  .full_width_inner .q_elements_item_content[style*="padding:0 5%"]{
    padding-left:0 !important;padding-right:0 !important;
  }
  .full_width_inner .wpb_text_column h1,
  .full_width_inner .wpb_text_column h2,
  .full_width_inner .wpb_text_column h3{text-align:center !important}
  .full_width_inner .wpb_text_column p{
    hyphens:auto;
    overflow-wrap:break-word;
    text-align:justify !important;
    text-align-last:left;
  }
  .full_width_inner .wpb_text_column p:empty{text-align:left !important}
  .wa-ev-section .wpb_text_column.toptext p{
    hyphens:none !important;
    text-align:left !important;
    text-align-last:auto !important;
  }
  .wa-ev-section .vc_inner .full_section_inner > .wpb_column{
    float:none !important;margin-left:0 !important;margin-right:0 !important;
    width:100% !important;
  }
}

/* ---------------------------------------------------------------------
   12. Bewegung reduzieren
   --------------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  body.wa-mobile-menu-open nav.mobile_menu,
  body.wa-mobile-menu-open nav.mobile_menu > ul > li,
  body.wa-mobile-menu-open nav.mobile_menu > ul > li.has_sub.wa-submenu-open > .sub_menu,
  body.wa-mobile-menu-open nav.mobile_menu > ul > li.has_sub.wa-submenu-closing > .sub_menu{
    animation:none !important;
  }
  #qode-welfenakademie-home .wa-hero-dot-track{transition:none !important}
}

/* =====================================================================
   13. Nachtrag: Kopfbereich, Schrift, Slider-Zentrierung
   Diese Regeln stehen bewusst am Ende, damit sie die Abschnitte
   daruber schlagen, ohne dass ueberall !important-Ketten wachsen.
   ===================================================================== */

/* ---------------------------------------------------------------------
   13.1 Schriftart
   Roboto Slab wird lokal aus /fonts/ geladen. Auf der lokalen
   Entwicklungsinstanz liegt die Datei nicht, deshalb steht die
   Live-Adresse als zweite Quelle dahinter. Der Browser nimmt die
   erste, die antwortet.
   --------------------------------------------------------------------- */
/* Beide Schriften liegen selbst gehostet in assets/fonts/. Der Browser
   laedt sie also vom eigenen Server, es geht keine Anfrage an Google.
   Urheber- und Lizenzangaben stehen in assets/fonts/LIZENZEN.txt, die
   Datei muss dort bleiben, das verlangen beide Lizenzen.

   Warum selbst gehostet: die Live-Seite laedt Roboto Slab aus /fonts/ im
   Serverwurzelverzeichnis, das nicht im Backup steckt und lokal 404
   liefert. Von der Live-Domain nachladen scheitert an der CORS-Regel fuer
   Schriften. Open Sans wurde bisher ueberhaupt nicht geladen, das Theme
   verweist zwar darauf, die Datei fehlte aber.

   Die Familiennamen tragen mit Absicht das Kuerzel WA. Im Customizer der
   Seite steht noch eine alte @font-face-Regel fuer "Roboto Slab", die ins
   Leere zeigt. Die beiden wuerden sich sonst um das Gewicht 400 streiten. */

/* Ueberschriften, Titel, Buttons. Variabel, Gewicht 100 bis 900. */
@font-face{
  font-family:'Roboto Slab WA';
  src:url('fonts/roboto-slab-var.woff2') format('woff2-variations'),
      url('fonts/roboto-slab-var.woff2') format('woff2');
  font-weight:100 900;
  font-style:normal;
  font-display:swap;
}

/* Fliesstext und uebrige Inhalte. Variabel, Gewicht 300 bis 800. */
@font-face{
  font-family:'Open Sans WA';
  src:url('fonts/open-sans-var.woff2') format('woff2-variations'),
      url('fonts/open-sans-var.woff2') format('woff2');
  font-weight:300 800;
  font-style:normal;
  font-display:swap;
}

:root{
  --wa-font-display:'Roboto Slab WA','Roboto Slab',Georgia,'Times New Roman',serif;
  --wa-font-body:'Open Sans WA','Open Sans','Helvetica Neue',Helvetica,Arial,sans-serif;
}

/* Grundschrift fuer alles. Icon-Schriften wie FontAwesome setzen ihre
   eigene Familie mit eigener Spezifitaet und bleiben unberuehrt. */
body,
body p,body li,body dd,body dt,body td,body th,
body blockquote,body address,body figcaption,
body label,body input,body textarea,body select,
body .wpb_text_column,
body .widget,
body .q_slide_text,
body .call_to_action_text,
body footer{
  font-family:var(--wa-font-body) !important;
}

/* Ueberschriften, Titel und Bedienelemente in der Auszeichnungsschrift.
   Steht bewusst nach der Grundschrift, damit es sie schlaegt. */
h1,h2,h3,h4,h5,h6,
h1 span,h2 span,h3 span,h4 span,h5 span,h6 span,
body h1,body h2,body h3,body h4,body h5,body h6,
.q_slide_title,.q_slide_title span,
.q_slide_subtitle,.q_slide_subtitle span,
.call_to_action_text h2,
.qbutton,.qode-btn,
.qode-btn .qode-btn-text,
button,input[type="submit"],
nav.main_menu > ul > li > a,
nav.mobile_menu a,
.counter,
.wa-progress .progress_title,
.wa-progress .progress_title span,
.wa-progress .progress_number,
.wa-news-title,
#wa-mobile-bar a,#wa-mobile-bar button{
  font-family:var(--wa-font-display) !important;
}

/* ---------------------------------------------------------------------
   13.2 Kopfbereich aufraeumen
   Die dunkle Leiste ganz oben (Social-Icons, Alumni/Presse/Downloads/
   Stellen, Suche) faellt auf allen Bildschirmgroessen weg. Die Links
   dazu stehen im Footer.
   --------------------------------------------------------------------- */
header .header_top,
header.sticky .header_top,
header .header_top_bottom_holder > .header_top{
  display:none !important;
}
header .left,
.side_menu_button_wrapper.right{
  display:none !important;
}

/* Nutzlinks im Footer jetzt auf allen Groessen sichtbar */
.footer_top .wak-mobile-useful-link,
.wak-mobile-useful-link{
  display:block !important;
}

/* Logo groesser, Kopfleiste luftiger */
header .header_bottom{
  background:#fff !important;
  background-color:#fff !important;
}
header .q_logo img.normal,
header .q_logo img{
  max-height:none !important;
  width:auto !important;
}
@media only screen and (min-width:1001px){
  /* Bridge setzt das Logo per JavaScript absolut und rechnet dabei mit
     der urspruenglichen Bildhoehe. Sobald man die Hoehe aendert, stimmt
     die Rechnung nicht mehr und das Logo rutscht aus dem Kopfbereich.
     Deshalb hier zurueck auf normalen Fluss und selbst zentrieren. */
  header .header_bottom,
  header .header_bottom .container,
  header .header_bottom .container_inner,
  header .header_inner_left,
  header .logo_wrapper,
  header nav.main_menu{
    height:var(--wa-header-h) !important;
    min-height:var(--wa-header-h) !important;
  }
  header .logo_wrapper{
    align-items:center !important;
    display:flex !important;
  }
  header .q_logo{
    align-items:center !important;
    display:flex !important;
    height:auto !important;
    left:0 !important;
    position:relative !important;
    top:0 !important;
    transform:none !important;
  }
  header .q_logo a{
    align-items:center !important;
    display:flex !important;
    height:auto !important;
  }
  header .q_logo img.normal{
    height:78px !important;
    left:auto !important;
    margin:0 !important;
    max-height:78px !important;
    position:static !important;
    top:auto !important;
    width:auto !important;
  }
  header .q_logo img.light,
  header .q_logo img.dark,
  header .q_logo img.sticky,
  header .q_logo img.mobile{display:none !important}

  /* Hauptnavigation bleibt, sonst gaebe es auf dem Desktop keine.
     Zeilenhoehe an die Kopfhoehe koppeln, damit sie mit dem Logo
     auf einer Linie sitzt. */
  header nav.main_menu > ul > li{height:var(--wa-header-h) !important}
  header nav.main_menu > ul > li > a{
    font-size:15px !important;
    height:var(--wa-header-h) !important;
    letter-spacing:.2px !important;
  }

  /* Mitgescrollter, geschrumpfter Kopfbereich */
  header.sticky .header_bottom,
  header.sticky .header_bottom .container,
  header.sticky .header_bottom .container_inner,
  header.sticky .header_inner_left,
  header.sticky .logo_wrapper,
  header.sticky nav.main_menu,
  header.sticky nav.main_menu > ul > li,
  header.sticky nav.main_menu > ul > li > a{
    height:72px !important;
    min-height:72px !important;
  }

  header.sticky .q_logo img.normal{
    height:52px !important;
    max-height:52px !important;
  }
}
@media only screen and (max-width:1000px){
  header .header_bottom,
  header .header_bottom .container,
  header .header_bottom .container_inner,
  header .header_inner_left,
  header .logo_wrapper{
    min-height:140px !important;
  }
  header .header_bottom{display:block !important}
  header .logo_wrapper,
  header .q_logo{
    align-items:center !important;
    display:flex !important;
    justify-content:center !important;
  }
  header .q_logo img.mobile{
    height:118px !important;
    max-height:none !important;
    width:auto !important;
  }
  header .q_logo{transform:translateY(-22px)}
  .mobile_menu_button{display:none !important}

  .footer_top .footer_col1,
  .footer_top .footer_col1 .column_inner,
  .footer_top #text-2 .textwidget{text-align:center !important}
  .footer_top #text-2{margin:0 0 24px !important}
  .footer_top .wak-footer-logo{
    display:block;
    margin:0 auto !important;
    max-width:52vw;
    width:158px !important;
  }
}

/* ---------------------------------------------------------------------
   13.3 Alte Nachrichtenwege abschalten
   Die Meldung steht jetzt im Banner unter dem Kopfbereich. Der rote
   Flyer im Slider und das Aufklapp-Fenster "Aktuelles" waeren daneben
   zwei weitere Wege fuer dieselbe Sache.
   --------------------------------------------------------------------- */
.flyer-panel,
.flyer-panel-text,
.ays-pb-modals,
.ays-pb-modal,
#ays-pb-screen-shade_1,
.ays-pb-modals.av_pop_modals_1{
  display:none !important;
  visibility:hidden !important;
  pointer-events:none !important;
}
body.ays-pb-disable-scroll-on-popup{overflow-y:auto !important}

/* ---------------------------------------------------------------------
   13.4 Slider: Inhalt immer mittig
   Bridge setzt je Slide .left oder .right, dadurch springen Titel und
   Buttons von Bild zu Bild. Hier wird das auf allen Groessen auf eine
   feste, zentrierte Position gezogen.
   --------------------------------------------------------------------- */
#qode-welfenakademie-home .slider_content,
#qode-welfenakademie-home .slider_content.left,
#qode-welfenakademie-home .slider_content.right,
#qode-welfenakademie-home .slider_content.center{
  left:0 !important;
  right:0 !important;
  margin-left:auto !important;
  margin-right:auto !important;
  text-align:center !important;
  width:100% !important;
}
#qode-welfenakademie-home .slider_content_inner,
#qode-welfenakademie-home .slider_content_inner.left,
#qode-welfenakademie-home .slider_content_inner.right{
  left:0 !important;
  right:0 !important;
  margin-left:auto !important;
  margin-right:auto !important;
  text-align:center !important;
}
#qode-welfenakademie-home .slider_content .text,
#qode-welfenakademie-home .slider_content .text > *{
  text-align:center !important;
}

/* ---------------------------------------------------------------------
   13.5 Aus der oberen Leiste in den Footer umgezogen
   Die Links erben ihr Aussehen von den vorhandenen Footer-Widgets,
   hier braucht es nur noch die Social-Icons. Die Glyphen sind Inline-SVGs
   aus refresh.js und folgen per currentColor der Textfarbe.
   --------------------------------------------------------------------- */
.wa-footer-social{
  display:flex;
  flex-wrap:wrap;
  gap:18px;
  margin-top:22px;
}
.footer_top a.wa-footer-social-link{
  display:inline-flex;
  align-items:center;
  background:none !important;
  border:0;
  padding:0;
  color:#fff !important;
  text-decoration:none !important;
  transition:opacity .2s ease, transform .2s ease;
}
.wa-footer-social-link svg{
  display:block;
  width:24px;
  height:24px;
}
.footer_top a.wa-footer-social-link:hover,
.footer_top a.wa-footer-social-link:focus-visible{
  opacity:.65;
  transform:translateY(-2px);
}
.footer_top a.wa-footer-social-link:focus-visible{
  outline:2px solid #fff;
  outline-offset:4px;
}
@media only screen and (max-width:1000px){
  .wa-footer-social{justify-content:center}
}

/* =====================================================================
   14. Schwebende Kopfleiste
   Oben sitzt die Leiste ueber die volle Breite. Beim Scrollen loest sie
   sich vom Rand und schwebt als abgerundete Insel ueber dem Inhalt,
   dann mit der Wortmarke statt des Siegels.

   Die Leiste ist dauerhaft fixiert, davor liegt ein Platzhalter in
   gleicher Hoehe. Dadurch springt beim Umschalten nichts, weil sich an
   der Dokumenthoehe nie etwas aendert.
   ===================================================================== */
:root{
  --wa-header-h:100px;
  --wa-header-h-float:68px;
  --wa-radius-sm:10px;
  --wa-radius:16px;
  --wa-radius-lg:22px;
  --wa-radius-pill:999px;
  --wa-shadow-sm:0 1px 2px rgba(16,24,40,.05);
  --wa-shadow:0 4px 16px rgba(16,24,40,.07),0 1px 3px rgba(16,24,40,.05);
  --wa-shadow-lg:0 18px 40px rgba(16,24,40,.13),0 2px 8px rgba(16,24,40,.06);
  --wa-ease:cubic-bezier(.2,.7,.2,1);
}

.wa-header-spacer{
  height:var(--wa-header-h);
  pointer-events:none;
  width:100%;
}

/* Dauer und Kurve des Uebergangs an einer Stelle. Die Kurve startet
   zuegig und laeuft weich aus, das wirkt ruhiger als ein gleichmaessiges
   Tempo. */
:root{
  --wa-morph-dauer:560ms;
  /* Gleichmaessiges Tempo wirkt bei Groessenaenderungen mechanisch, weil
     die Bewegung ohne Anlauf einsetzt und genauso abrupt stoppt. Diese
     Kurve beschleunigt kurz, laeuft zuegig durch und bremst weich aus.
     Alle beteiligten Angaben nutzen sie, damit nichts aus dem Takt
     faellt. */
  --wa-morph-kurve:cubic-bezier(.4,0,.2,1);
}

/* Die Leiste ist in beiden Zustaenden mittig verankert. Vorher wanderte
   left von 0 auf 50 Prozent, waehrend gleichzeitig die Breite schrumpfte.
   Genau das sah aus, als fliege sie von links ein. Jetzt aendert sich
   nur noch die Breite, und die waechst symmetrisch nach innen. */
body.wa-header-fixed header.page_header{
  left:50%;
  /* Bewusst 100vw statt none. none ist keine Laenge und laesst sich
     nicht interpolieren: der Browser springt sofort auf den Zielwert
     und die ganze Breitenaenderung passiert im ersten Frame. Genau das
     hat die Verwandlung ruckelig gemacht. */
  max-width:100vw;
  position:fixed !important;
  right:auto;
  top:0;
  transform:translateX(-50%);
  width:100% !important;
  z-index:99998 !important;
  /* Nur zwei Groessen laufen: die Breitenbegrenzung und der Abstand nach
     oben. width bleibt konstant bei 100 Prozent, sonst rechnen zwei
     Angaben gegeneinander. */
  transition:max-width var(--wa-morph-dauer) var(--wa-morph-kurve),
             top var(--wa-morph-dauer) var(--wa-morph-kurve);
  will-change:max-width,top;
}
body.wa-header-fixed header.page_header .header_bottom{
  border:1px solid transparent;
  border-radius:0;
  box-shadow:none;
  /* Von Anfang an gesetzt, nur mit Staerke 0. Wird der Weichzeichner
     erst im Zielzustand zugeschaltet, springt er hart an. */
  -webkit-backdrop-filter:saturate(100%) blur(0px);
  backdrop-filter:saturate(100%) blur(0px);
  transition:height var(--wa-morph-dauer) var(--wa-morph-kurve),
             backdrop-filter var(--wa-morph-dauer) var(--wa-morph-kurve),
             -webkit-backdrop-filter var(--wa-morph-dauer) var(--wa-morph-kurve),
             min-height var(--wa-morph-dauer) var(--wa-morph-kurve),
             background-color var(--wa-morph-dauer) var(--wa-morph-kurve),
             border-radius var(--wa-morph-dauer) var(--wa-morph-kurve),
             box-shadow var(--wa-morph-dauer) var(--wa-morph-kurve),
             border-color var(--wa-morph-dauer) var(--wa-morph-kurve);
}

/* --- Schwebender Zustand ---
   Bridge bringt fuer die Kopfleiste eigene Regeln mit, teils mit
   !important. Deshalb hier durchgehend zwei Zustandsklassen am body
   und ebenfalls !important, sonst gewinnt das Theme. */
/* Alle Kaesten, die beim Verwandeln ihre Hoehe aendern, brauchen
   denselben Uebergang. Vorher lief nur die aeussere Leiste weich, die
   Container darin sprangen von 120 auf 68 Pixel. Das war der Ruckler. */
/* Nur ein einziger Kasten aendert wirklich seine Hoehe: .header_bottom.
   Alles darin haengt sich mit height:100% dran und folgt dadurch von
   selbst, ohne eigenen Uebergang. Vorher animierten acht Kaesten
   gleichzeitig ihre Hoehe, was den Browser jedes Bild achtmal neu
   rechnen liess. */
body.wa-header-fixed header.page_header .header_bottom .container,
body.wa-header-fixed header.page_header .header_bottom .container_inner,
body.wa-header-fixed header.page_header .header_inner_left,
body.wa-header-fixed header.page_header .logo_wrapper,
body.wa-header-fixed header.page_header .q_logo,
body.wa-header-fixed header.page_header nav.main_menu,
body.wa-header-fixed header.page_header nav.main_menu > ul,
body.wa-header-fixed header.page_header nav.main_menu > ul > li,
body.wa-header-fixed header.page_header nav.main_menu > ul > li > a{
  height:100% !important;
  min-height:0 !important;
  transition:none !important;
}

/* Die Menueliste muss die Hoehe durchreichen, sonst haengt height:100%
   an einer Elternhoehe, die es nicht gibt, und die Punkte fallen auf
   ihre Texthoehe zusammen. Die Listenpunkte bleiben relativ
   positioniert, damit die Untermenues weiter darunter aufklappen. */
body.wa-header-fixed header.page_header nav.main_menu > ul{
  align-items:stretch !important;
  display:flex !important;
  margin:0 !important;
  padding:0 !important;
}
body.wa-header-fixed header.page_header nav.main_menu > ul > li{
  float:none !important;
  position:relative !important;
}

/* Die Menuepunkte zentrieren sich selbst, statt ueber die Zeilenhoehe.
   Eine mitlaufende Zeilenhoehe laesst die Schrift beim Verwandeln
   zappeln, eine Flexbox nicht. */
body.wa-header-fixed header.page_header nav.main_menu > ul > li > a{
  align-items:center !important;
  display:flex !important;
  line-height:1.2 !important;
}

/* Kein Ein- und Ausblenden mehr. Die Leiste bleibt durchgehend dasselbe
   Element und schrumpft stetig zur Insel. Sobald irgendetwas dabei
   ausgeblendet und ein anderes eingeblendet wird, sieht es nach Wechsel
   aus statt nach Verwandlung. */
body.wa-header-fixed.wa-header-floating header.page_header{
  max-width:1180px !important;
  top:14px !important;
}
/* Auf schmaleren Desktops den seitlichen Rand ueber die Begrenzung
   holen statt ueber eine zweite Groessenangabe. */
@media only screen and (min-width:1001px) and (max-width:1243px){
  body.wa-header-fixed.wa-header-floating header.page_header{
    max-width:calc(100vw - 32px) !important;
  }
}
body.wa-header-fixed.wa-header-floating header.page_header .header_bottom{
  height:var(--wa-header-h-float) !important;
  min-height:var(--wa-header-h-float) !important;
}

/* Bridge legt den Kopfinhalt auf ein festes Raster von 1300px
   (Theme-Einstellung qode_grid_1300). Die Insel ist aber nur 1180 breit.
   Ohne Angleich ragt die Navigation 140px darueber hinaus und wird vom
   abgerundeten Rand abgeschnitten, genau das war beim Studienplaetze-
   Button zu sehen. Das Raster bekommt deshalb dieselbe Begrenzung wie
   die Insel und laeuft im selben Takt mit. */
body.wa-header-fixed header.page_header .header_bottom .container,
body.wa-header-fixed header.page_header .header_bottom .container_inner{
  box-sizing:border-box !important;
  margin-left:auto !important;
  margin-right:auto !important;
  max-width:1300px !important;
  width:100% !important;
  transition:max-width var(--wa-morph-dauer) var(--wa-morph-kurve) !important;
}
body.wa-header-fixed.wa-header-floating header.page_header .header_bottom .container,
body.wa-header-fixed.wa-header-floating header.page_header .header_bottom .container_inner{
  max-width:1180px !important;
}
@media only screen and (min-width:1001px) and (max-width:1243px){
  body.wa-header-fixed.wa-header-floating header.page_header .header_bottom .container,
  body.wa-header-fixed.wa-header-floating header.page_header .header_bottom .container_inner{
    max-width:calc(100vw - 32px) !important;
  }
}
body.wa-header-fixed.wa-header-floating header.page_header .header_bottom{
  background:rgba(255,255,255,.86) !important;
  background-color:rgba(255,255,255,.86) !important;
  -webkit-backdrop-filter:saturate(180%) blur(16px) !important;
  backdrop-filter:saturate(180%) blur(16px) !important;
  border:1px solid rgba(40,57,91,.08) !important;
  border-radius:var(--wa-radius-lg) !important;
  box-shadow:var(--wa-shadow-lg) !important;
  overflow:hidden !important;
}
body.wa-header-fixed.wa-header-floating header.page_header .header_bottom .container_inner{
  box-sizing:border-box !important;
  padding-left:26px !important;
  padding-right:26px !important;
}


/* Wortmarke statt Siegel, sobald die Leiste schwebt.
   Bewusst ueber Breite und Deckkraft statt ueber display. display laesst
   sich nicht ueberblenden, das Siegel wuerde schlagartig verschwinden und
   genau das macht die Verwandlung ruckelig. */
.wa-wordmark{
  display:none;
  height:auto;
  left:auto !important;
  margin:0 !important;
  max-height:none;
  position:static !important;
  top:auto !important;
  width:auto;
}
/* Das Siegel liegt absolut im Logo-Link und traegt damit nichts zur
   Breite bei. Vorher lief es ueber max-width auf 0, das ist eine
   Layout-Aenderung und sah aus, als klappe es zusammen. Jetzt bleibt
   seine Groesse unveraendert und es blendet nur aus.

   Die Wortmarke rutscht per transform an seine Stelle. Deckkraft und
   transform rechnet die Grafikkarte, da entsteht kein Umbruch. */
header .q_logo a{
  align-items:center !important;
  display:flex !important;
  position:relative !important;
}
header .q_logo img.normal{
  left:0 !important;
  position:absolute !important;
  top:50% !important;
  transform:translateY(-50%) !important;
  /* Deutlich kuerzer als die Verwandlung selbst. Das Siegel ist 78px
     hoch, die Insel nur 68px. Blendet es zu langsam aus, sieht man,
     wie die schrumpfende Leiste es oben und unten abschneidet, und
     genau das wirkt wie ein Zusammenfalten. Nach 220ms ist es weg,
     lange bevor die Leiste schmal genug dafuer ist. */
  transition:opacity 220ms ease-out !important;
}
header .q_logo .wa-wordmark{
  flex:0 0 auto;
  transition:transform var(--wa-morph-dauer) var(--wa-morph-kurve);
  will-change:transform;
}
body.wa-header-floating header .q_logo img.normal{
  opacity:0 !important;
}

/* Der News-Banner haengt an der Leiste und laeuft in die Insel mit.
   Oben liegt er ueber die volle Breite unter der Leiste, als Insel wird
   er zur Lasche an ihrer Unterkante: unten abgerundet, oben mit zwei
   Innenrundungen, damit er aus der Insel herauszuwachsen scheint.

   Die Lage steht hier fest in CSS statt ueber --wa-news-top aus dem
   Skript. Das Skript misst nur beim Scrollen, waehrend der Verwandlung
   laege der Banner sonst hinter der Leiste zurueck. So laufen Abstand,
   Breite und Rundung mit derselben Dauer und Kurve wie die Insel.

   Weggeklickt bleibt er ueber is-hidden in beiden Zustaenden weg.

   Die Ruhelage haengt bewusst nicht an wa-header-fixed. Die Klasse kommt
   erst aus dem Skript, bis dahin stuende der Banner auf dem Rueckfallwert
   aus Abschnitt 7 und wuerde beim Laden sichtbar hochgleiten. */
@media only screen and (min-width:1001px){
  .wa-news-banner{
    left:0;
    margin:0 auto;
    /* 100vw statt none, aus demselben Grund wie bei der Leiste */
    max-width:100vw;
    right:0;
    /* Unterkante der Leiste: Hoehe plus je 1px Rahmen oben und unten */
    top:calc(var(--wa-header-h) + 2px);
    transition:top var(--wa-morph-dauer) var(--wa-morph-kurve),
               max-width var(--wa-morph-dauer) var(--wa-morph-kurve),
               border-radius var(--wa-morph-dauer) var(--wa-morph-kurve);
  }
  /* Schmaler als die Insel: je Seite ihre Eckrundung plus die
     Innenrundung. Dadurch setzt die Lasche auf der geraden Unterkante
     an und nicht dort, wo die Insel schon in die Ecke laeuft. */
  body.wa-header-fixed.wa-header-floating .wa-news-banner{
    border-radius:0 0 var(--wa-radius) var(--wa-radius);
    max-width:calc(1180px - 2 * (var(--wa-radius-lg) + var(--wa-news-fillet)));
    top:calc(14px + var(--wa-header-h-float) + 2px);
  }
  body.wa-header-fixed .wa-news-banner::before,
  body.wa-header-fixed .wa-news-banner::after{
    content:"";
    height:var(--wa-news-fillet);
    opacity:0;
    pointer-events:none;
    position:absolute;
    top:0;
    transition:opacity calc(var(--wa-morph-dauer) * .6) var(--wa-morph-kurve);
    width:var(--wa-news-fillet);
  }
  body.wa-header-fixed .wa-news-banner::before{
    background:radial-gradient(circle at 0 100%, transparent calc(var(--wa-news-fillet) - .5px), var(--wa-red) var(--wa-news-fillet));
    right:100%;
  }
  body.wa-header-fixed .wa-news-banner::after{
    background:radial-gradient(circle at 100% 100%, transparent calc(var(--wa-news-fillet) - .5px), var(--wa-red) var(--wa-news-fillet));
    left:100%;
  }
  body.wa-header-fixed.wa-header-floating .wa-news-banner::before,
  body.wa-header-fixed.wa-header-floating .wa-news-banner::after{
    opacity:1;
  }
}
@media only screen and (min-width:1001px) and (max-width:1243px){
  body.wa-header-fixed.wa-header-floating .wa-news-banner{
    max-width:calc(100vw - 32px - 2 * (var(--wa-radius-lg) + var(--wa-news-fillet)));
  }
}
:root{--wa-news-fillet:12px}

/* --- Logo-Lockup im Ruhezustand: Siegel plus Wortmarke --- */
@media only screen and (min-width:1001px){
  /* Der linke Innenabstand haelt den Platz fuers Siegel frei und bleibt
     in beiden Zustaenden gleich. Nichts daran wird animiert. */
  header .q_logo a{
    gap:0 !important;
    padding-left:96px !important;
  }
  header .q_logo img.normal{
    height:78px !important;
    max-height:78px !important;
    max-width:none !important;
    opacity:1;
  }
  /* Feste Hoehe in beiden Zustaenden. Eine mitlaufende Hoehe waere schon
     wieder eine Groessenaenderung. */
  header .q_logo .wa-wordmark{
    display:block !important;
    height:30px !important;
    max-height:30px !important;
    transform:translateX(0);
    width:auto !important;
  }
  /* Sobald das Siegel weg ist, rueckt die Wortmarke an seinen Platz. */
  body.wa-header-floating header .q_logo .wa-wordmark{
    transform:translateX(-96px);
  }
}

/* Auf schmalen Schirmen gibt es die Insel nicht.
   Die Navigation laeuft dort komplett ueber die Leiste am unteren
   Bildschirmrand, eine zweite schwebende Leiste oben waere nur im Weg.
   Der Kopfbereich verhaelt sich wieder wie urspruenglich: er steht oben
   und scrollt mit weg. Die Klassen wa-header-fixed und
   wa-header-floating setzt das Skript unterhalb von 1001px gar nicht
   erst, die Regeln hier sind die Absicherung. */
@media only screen and (max-width:1000px){
  .wa-header-spacer{display:none !important}

  header.page_header,
  body.wa-header-fixed header.page_header,
  body.wa-header-fixed.wa-header-floating header.page_header{
    left:auto !important;
    max-width:none !important;
    position:relative !important;
    right:auto !important;
    top:auto !important;
    transform:none !important;
    width:100% !important;
  }
  body.wa-header-fixed header.page_header .header_bottom,
  body.wa-header-fixed.wa-header-floating header.page_header .header_bottom{
    -webkit-backdrop-filter:none !important;
    backdrop-filter:none !important;
    border:0 !important;
    border-radius:0 !important;
    box-shadow:none !important;
    background:#fff !important;
    background-color:#fff !important;
  }

  /* Oben bleibt das Siegel, die Wortmarke spielt hier keine Rolle */
  header .q_logo .wa-wordmark{display:none !important}

  /* Der News-Banner bleibt sichtbar, er gehoert zum normalen Seitenkopf */
  body.wa-header-floating .wa-news-banner{
    opacity:1 !important;
    pointer-events:auto !important;
    transform:none !important;
  }
}

@media (prefers-reduced-motion:reduce){
  body.wa-header-fixed header.page_header,
  body.wa-header-fixed header.page_header .header_bottom,
  .wa-news-banner{transition:none !important}
  body.wa-header-fixed header.page_header .q_logo img.normal,
  body.wa-header-fixed header.page_header .q_logo .wa-wordmark{
    transition:none !important;
  }
}

/* =====================================================================
   15. Moderner Look
   Corporate Design bleibt: Marineblau, Rot, Roboto Slab und Open Sans.
   Geaendert wird die Bauweise drumherum, also Rundungen, Schatten,
   Abstaende und Bewegung.
   ===================================================================== */

/* ---------------------------------------------------------------------
   15.1 Sektionen: Haarlinien raus, mehr Luft
   Die 1px-Trennlinien waren das Altbackenste am Ganzen. Der Wechsel
   zwischen Weiss und Grau trennt bereits ausreichend.
   --------------------------------------------------------------------- */
.full_width_inner > .vc_row,
.full_width_inner > section{
  border-top:0 !important;
}
.full_width_inner > .vc_row > .full_section_inner,
.full_width_inner > .vc_row > .section_inner,
.full_width_inner > section > .parallax_content{
  padding-top:var(--wa-section-space);
  padding-bottom:var(--wa-section-space);
}

/* ---------------------------------------------------------------------
   15.2 Typografie
   Grosse Serifenschrift wirkt schnell schwer. Etwas engere Laufweite
   und knappere Zeilenhoehe nehmen ihr das Behaebige.
   --------------------------------------------------------------------- */
h1,h2,h3,
h1 span,h2 span,h3 span,
.q_slide_title,.q_slide_title span{
  letter-spacing:-.015em !important;
  line-height:1.18 !important;
  text-transform:none !important;
}
h4,h5,h6{
  letter-spacing:-.005em !important;
  line-height:1.3 !important;
  text-transform:none !important;
}
.full_width_inner h2,
.full_width_inner h2 span{
  font-size:clamp(28px,2.2vw + 18px,44px) !important;
}
.full_width_inner h3,
.full_width_inner h3 span{
  font-size:clamp(21px,1vw + 16px,28px) !important;
}
/* Etwas Abstand unter Ueberschriften, sonst kleben sie am Text */
.full_width_inner .wpb_text_column h2,
.full_width_inner .wpb_text_column h3{
  margin-bottom:.6em !important;
}

/* ---------------------------------------------------------------------
   15.3 Buttons
   Abgerundet, groessere Trefferflaeche, sanfte Bewegung beim Ueberfahren.
   --------------------------------------------------------------------- */
.qbutton,
.qode-btn,
.call_to_action .qbutton,
input[type="submit"],
.wpcf7-submit{
  border-radius:var(--wa-radius-pill) !important;
  box-shadow:var(--wa-shadow-sm);
  letter-spacing:.01em !important;
  padding-left:26px !important;
  padding-right:26px !important;
  text-transform:none !important;
  transition:background-color .2s var(--wa-ease),
             border-color .2s var(--wa-ease),
             box-shadow .2s var(--wa-ease),
             transform .2s var(--wa-ease) !important;
}
.qbutton:hover,
.qode-btn:hover,
input[type="submit"]:hover,
.wpcf7-submit:hover{
  box-shadow:var(--wa-shadow);
  transform:translateY(-1px);
}
.qbutton:active,
.qode-btn:active{transform:translateY(0)}

/* Weiterlesen-Buttons ebenfalls rund */
.wa-read-more-button.qbutton,
.wa-read-more-button.qbutton.small{
  border-radius:var(--wa-radius-pill) !important;
  min-height:44px !important;
  padding:0 24px !important;
}

/* Hero-Buttons: rund, aber ohne den harten Schlagschatten */
#qode-welfenakademie-home .slider_content .text > a.qbutton,
#qode-welfenakademie-home .slider_content .text > a.qode-btn{
  border-radius:var(--wa-radius-pill) !important;
  box-shadow:0 8px 24px rgba(0,0,0,.18) !important;
}

/* Sichtbarer Fokus fuer Tastaturbedienung */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible{
  outline:3px solid rgba(40,57,91,.55) !important;
  outline-offset:2px !important;
}

/* ---------------------------------------------------------------------
   15.4 Teaser als Karten
   Die drei Spalten mit Bild, Text und Weiterlesen-Button bekommen eine
   echte Kartenform statt frei stehender Elemente.
   --------------------------------------------------------------------- */
.wa-teaser-section .wpb_column > .vc_column-inner{
  background:#fff !important;
  border:1px solid rgba(40,57,91,.07) !important;
  border-radius:var(--wa-radius) !important;
  box-shadow:var(--wa-shadow);
  box-sizing:border-box !important;
  display:flex !important;
  flex-direction:column !important;
  height:100% !important;
  overflow:hidden !important;
  padding:0 0 28px !important;
  transition:box-shadow .28s var(--wa-ease),transform .28s var(--wa-ease);
}
.wa-teaser-section .wpb_column > .vc_column-inner:hover{
  box-shadow:var(--wa-shadow-lg);
  transform:translateY(-4px);
}
.wa-teaser-section .wpb_column > .vc_column-inner > .wpb_wrapper{
  display:flex !important;
  flex-direction:column !important;
  flex:1 1 auto !important;
}
/* Bild sitzt buendig oben in der Karte */
.wa-teaser-section .qode-animation-holder{
  margin:0 0 30px !important;
  overflow:hidden !important;
}
.wa-teaser-section .qode-animation-holder img{
  border-radius:0 !important;
  display:block !important;
  transition:transform .5s var(--wa-ease);
  width:100% !important;
}
.wa-teaser-section .wpb_column > .vc_column-inner:hover .qode-animation-holder img{
  transform:scale(1.04);
}
/* Text und Button bekommen den Karteninnenrand */
.wa-teaser-section .wpb_text_column,
.wa-teaser-section .wa-read-more-button{
  padding-left:26px !important;
  padding-right:26px !important;
}
.wa-teaser-section .wa-read-more-button{
  margin-top:auto !important;
}
/* Die vielen Leerraum-Elemente von WPBakery auf ein einheitliches Mass
   bringen. Ihre Originalhoehen aus dem Page Builder schwanken stark und
   zerreissen die Karte, gleich gross gesetzt ergeben sie den Takt
   zwischen Bild, Ueberschrift, Text und Button. */
.wa-teaser-section .vc_empty_space{height:24px !important}

/* Lange Komposita wie "Berufsakademie" passen in der schmalen Karte
   nicht in eine Zeile. Ohne Silbentrennung standen sie ueber den
   Kartenrand hinaus und wurden vom overflow:hidden der Karte glatt
   abgeschnitten. */
.wa-teaser-section .wpb_text_column h2{
  -webkit-hyphens:auto;
  hyphens:auto;
}

/* Abstand zwischen den Karten. Steht als eigene Angabe, weil ihn sowohl
   der Zwischenraum als auch die Breitenrechnung darunter braucht. */
.wa-teaser-section{
  --wa-teaser-gap:clamp(20px,2vw,32px);
}

/* Alle drei Karten gleich hoch und gleich breit, mit Luft dazwischen.
   Bridge stellt die Spalten mit float nebeneinander: sie liegen ohne
   Zwischenraum aneinander und jede ist nur so hoch wie ihr eigener
   Inhalt, weshalb die laengste unten uebersteht. Als Flexbox ziehen sie
   sich gegenseitig auf dieselbe Hoehe, und weil der Button schon
   margin-top:auto hat, sitzt er dann in allen Karten auf gleicher Linie.

   Erst ab 1001px: darunter stapeln die Spalten (83.33% Breite plus
   Versatz), das erledigt der Umbruch heute schon richtig. */
@media only screen and (min-width:1001px){
  .wa-teaser-section .section_inner_margin{
    align-items:stretch !important;
    display:flex !important;
    /* Kein Umbruch: die drei Spalten stehen in diesem Bereich immer
       nebeneinander. Mit flex-wrap rutscht die dritte Karte durch den
       Zwischenraum in eine zweite Reihe. */
    flex-wrap:nowrap !important;
    gap:var(--wa-teaser-gap) !important;
  }
  /* Die clearfix-Platzhalter wuerden als Flex-Elemente mitzaehlen */
  .wa-teaser-section .section_inner_margin:before,
  .wa-teaser-section .section_inner_margin:after{
    display:none !important;
  }
  .wa-teaser-section .wpb_column{
    display:flex !important;
    float:none !important;
    /* Breite fest ausgerechnet statt ueber flex-shrink verteilt. Beim
       Schrumpfen kommt keine gleiche Breite heraus: eine Karte kann nur
       bis zur Breite ihres laengsten Wortes nachgeben und bliebe
       dadurch breiter als die anderen. */
    flex:0 0 auto !important;
    min-width:0 !important;
    width:calc((100% - 2 * var(--wa-teaser-gap)) / 3) !important;
  }
  .wa-teaser-section .wpb_column > .vc_column-inner{
    width:100% !important;
  }
}

/* Gestapelt lagen die Karten ebenfalls ohne Zwischenraum aufeinander */
@media only screen and (max-width:1000px){
  .wa-teaser-section .wpb_column{
    margin-bottom:var(--wa-teaser-gap) !important;
  }
  .wa-teaser-section .wpb_column:last-child{
    margin-bottom:0 !important;
  }
}

/* ---------------------------------------------------------------------
   15.5 Bilder
   --------------------------------------------------------------------- */
.full_width_inner .wpb_single_image img,
.full_width_inner .wpb_gallery img{
  border-radius:var(--wa-radius) !important;
  box-shadow:var(--wa-shadow-sm);
  transition:transform .4s var(--wa-ease),box-shadow .4s var(--wa-ease);
}
.full_width_inner .wpb_gallery a:hover img{
  box-shadow:var(--wa-shadow);
  transform:translateY(-3px);
}

/* ---------------------------------------------------------------------
   15.6 Zahlen
   Grosse Zahlen wirken moderner, wenn sie leichter gesetzt sind.
   --------------------------------------------------------------------- */
.counter{
  font-size:clamp(38px,3vw + 24px,58px) !important;
  font-weight:300 !important;
  letter-spacing:-.02em !important;
  line-height:1.05 !important;
}
.q_counter_holder .counter_text,
.q_counter_holder p{
  letter-spacing:.02em !important;
  margin-top:8px !important;
  opacity:.85;
}

/* ---------------------------------------------------------------------
   15.7 Handlungsaufruf
   --------------------------------------------------------------------- */
.wa-semester-cta-section .call_to_action{
  background:linear-gradient(135deg,rgba(40,57,91,.05),rgba(40,57,91,.02)) !important;
  border:1px solid rgba(40,57,91,.08) !important;
  border-radius:var(--wa-radius-lg) !important;
  margin:0 var(--wa-gutter) !important;
}
.wa-semester-cta-section .call_to_action_text h2{
  font-size:clamp(24px,1.8vw + 16px,38px) !important;
}

/* ---------------------------------------------------------------------
   15.8 Hero
   Ein weicher Verlauf am unteren Rand traegt den Text besser als
   Schlagschatten auf jedem Buchstaben.
   --------------------------------------------------------------------- */
#qode-welfenakademie-home .carousel-inner .item:after{
  background:linear-gradient(to bottom,rgba(9,18,36,0) 42%,rgba(9,18,36,.55) 100%);
  bottom:0;
  content:"";
  left:0;
  pointer-events:none;
  position:absolute;
  right:0;
  top:0;
  z-index:1;
}
#qode-welfenakademie-home .slider_content_outer{z-index:2}
#qode-welfenakademie-home .q_slide_title,
#qode-welfenakademie-home .q_slide_title span{
  text-shadow:0 2px 18px rgba(0,0,0,.35) !important;
}
#qode-welfenakademie-home .q_slide_subtitle,
#qode-welfenakademie-home .q_slide_subtitle span{
  text-shadow:0 2px 14px rgba(0,0,0,.3) !important;
}

/* ---------------------------------------------------------------------
   15.9 Fortschrittsbalken und Banner an die neuen Rundungen angleichen
   --------------------------------------------------------------------- */
.wa-progress .progress_content_outer,
.wa-progress .progress_content{
  border-radius:var(--wa-radius-pill) !important;
}
.wa-news-banner-link{border-radius:0}
.wa-impressions-lightbox img{border-radius:var(--wa-radius-sm)}

@media (prefers-reduced-motion:reduce){
  .qbutton,.qode-btn,
  .wa-teaser-section .wpb_column > .vc_column-inner,
  .wa-teaser-section .qode-animation-holder img,
  .full_width_inner .wpb_single_image img,
  .full_width_inner .wpb_gallery img{
    transition:none !important;
    transform:none !important;
  }
}

/* =====================================================================
   16. Mehr CD-Blau
   Die Seite war fast durchgehend weiss. Hier kommt das Marineblau als
   tragende Flaeche dazu: getoente Wechselstreifen, zwei volle blaue
   Baender, blauer Handlungsaufruf und blauer Footer.
   ===================================================================== */
:root{
  /* Der Wechselstreifen bekommt einen Blaustich statt Neutralgrau */
  --wa-section-gray:#eef2f8;
  --wa-band:#28395b;
  --wa-band-tief:#1d2b45;
  --wa-auf-blau:#ffffff;
  --wa-auf-blau-leise:rgba(255,255,255,.82);
}

/* ---------------------------------------------------------------------
   16.1 Die beiden Parallax-Sektionen werden zu vollen blauen Baendern
   Beide trugen bisher ein Hintergrundbild, das jetzt entfaellt. Dadurch
   loesen sich zwei Dinge auf einmal: veraltete Motive raus, Farbe rein.
   --------------------------------------------------------------------- */
.full_width_inner > section,
.full_width_inner > section.wa-ev-section,
.full_width_inner > section.wa-static-bg-section{
  background:linear-gradient(160deg,var(--wa-band) 0%,var(--wa-band-tief) 100%) !important;
  background-color:var(--wa-band) !important;
  background-image:linear-gradient(160deg,var(--wa-band) 0%,var(--wa-band-tief) 100%) !important;
}
.full_width_inner > section:before,
.full_width_inner > section:after{content:none !important;display:none !important}

/* Schrift auf Blau. Steht bewusst nach Abschnitt 3, wo dieselben
   Selektoren die Schrift dunkel setzen. */
.full_width_inner > section h1,
.full_width_inner > section h2,
.full_width_inner > section h3,
.full_width_inner > section h4,
.full_width_inner > section .wpb_text_column h2 span,
.full_width_inner > section .wpb_text_column h3 span,
.full_width_inner > section .counter,
.wa-ev-section h2 span,
.wa-ev-section h3 span{
  color:var(--wa-auf-blau) !important;
  text-shadow:none !important;
}
.full_width_inner > section .wpb_text_column p,
.full_width_inner > section .wpb_text_column p span,
.full_width_inner > section .q_counter_holder p,
.wa-ev-section p span,
.wa-ev-section .wpb_text_column.toptext p{
  color:var(--wa-auf-blau-leise) !important;
  text-shadow:none !important;
}
.full_width_inner > section a:not(.qbutton):not(.qode-btn){
  color:#fff !important;
  text-decoration:underline;
  text-underline-offset:3px;
}

/* Fortschrittsbalken auf Blau umdrehen */
.wa-ev-section .wa-progress .progress_title,
.wa-ev-section .wa-progress .progress_title span,
.wa-ev-section .wa-progress .progress_number{
  color:var(--wa-auf-blau) !important;
}
.wa-ev-section .wa-progress .progress_content_outer{
  background:rgba(255,255,255,.18) !important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.22) !important;
}
.wa-ev-section .wa-progress .progress_content{
  background:#fff !important;
}

/* Buttons auf blauem Grund: weiss gefuellt */
.full_width_inner > section .qbutton,
.full_width_inner > section .qode-btn{
  background:#fff !important;
  background-color:#fff !important;
  border-color:#fff !important;
  color:var(--wa-band) !important;
}
.full_width_inner > section .qbutton:hover,
.full_width_inner > section .qode-btn:hover{
  background:var(--wa-red) !important;
  background-color:var(--wa-red) !important;
  border-color:var(--wa-red) !important;
  color:#fff !important;
}

/* ---------------------------------------------------------------------
   16.2 Handlungsaufruf als blaues Band
   --------------------------------------------------------------------- */
.wa-semester-cta-section .call_to_action{
  background:linear-gradient(135deg,var(--wa-band) 0%,var(--wa-band-tief) 100%) !important;
  border:0 !important;
  box-shadow:var(--wa-shadow-lg);
}
.wa-semester-cta-section .call_to_action_text h2,
.wa-semester-cta-section .call_to_action_text h2 span{
  color:var(--wa-auf-blau) !important;
}
.wa-semester-cta-section .button_wrapper .qbutton{
  background:#fff !important;
  background-color:#fff !important;
  border-color:#fff !important;
  color:var(--wa-band) !important;
}
.wa-semester-cta-section .button_wrapper .qbutton:hover{
  background:var(--wa-red) !important;
  background-color:var(--wa-red) !important;
  border-color:var(--wa-red) !important;
  color:#fff !important;
}

/* ---------------------------------------------------------------------
   16.3 Footer in Marineblau statt Anthrazit
   --------------------------------------------------------------------- */
.footer_top_holder,
.footer_top{
  background:var(--wa-band-tief) !important;
  background-color:var(--wa-band-tief) !important;
}
.footer_bottom_holder,
.footer_bottom{
  background:#16223a !important;
  background-color:#16223a !important;
}

/* ---------------------------------------------------------------------
   16.4 Akzente in den hellen Abschnitten
   Damit das Blau nicht nur in den Baendern klebt.
   --------------------------------------------------------------------- */
/* Ueberschriften bekommen eine kurze blaue Marke darueber */
.full_width_inner > .vc_row .wpb_text_column h2:first-child:before{
  background:var(--wa-red);
  border-radius:2px;
  content:"";
  display:block;
  height:4px;
  margin:0 0 18px;
  width:52px;
}
@media only screen and (max-width:1000px){
  .full_width_inner > .vc_row .wpb_text_column h2:first-child:before{
    margin-left:auto;
    margin-right:auto;
  }
}

/* Teaserkarten: blaue Kante beim Ueberfahren */
.wa-teaser-section .wpb_column > .vc_column-inner{
  border-top:3px solid transparent !important;
}
.wa-teaser-section .wpb_column > .vc_column-inner:hover{
  border-top-color:var(--wa-band) !important;
}

/* Hero-Verlauf ins Marineblau ziehen statt ins Neutralschwarz */
#qode-welfenakademie-home .carousel-inner .item:after{
  background:linear-gradient(to bottom,rgba(21,35,66,0) 40%,rgba(21,35,66,.62) 100%);
}

/* Galeriebilder auf getoentem Grund brauchen keinen zusaetzlichen Rahmen */
.full_width_inner .wpb_gallery img{
  box-shadow:0 2px 10px rgba(21,35,66,.10);
}

/* =====================================================================
   17. Semesterkasten
   Aufbau des Handlungsaufrufs: Text und Button sauber gestapelt, der
   Kasten als eigene Flaeche fuer das Hintergrundbild aus Abschnitt 20.
   ===================================================================== */

/* ---------------------------------------------------------------------
   17.1 Button und Text sauber stapeln
   Bridge baut den Aufruf als Tabellenlayout. Float und Breite allein
   reichen nicht, die Zellen muessen zu Bloecken werden, sonst steht der
   Button im Text.
   --------------------------------------------------------------------- */
.wa-semester-cta-section .call_to_action .two_columns_75_25,
.wa-semester-cta-section .call_to_action .two_columns_75_25 > .column1,
.wa-semester-cta-section .call_to_action .two_columns_75_25 > .column2,
.wa-semester-cta-section .call_to_action .text_wrapper,
.wa-semester-cta-section .call_to_action .button_wrapper{
  display:block !important;
  float:none !important;
  margin:0 !important;
  max-width:none !important;
  padding:0 !important;
  position:static !important;
  table-layout:auto !important;
  text-align:center !important;
  vertical-align:baseline !important;
  width:100% !important;
}
.wa-semester-cta-section .call_to_action .text_wrapper{
  padding-bottom:0 !important;
}
.wa-semester-cta-section .call_to_action_text{
  display:block !important;
  width:100% !important;
}
.wa-semester-cta-section .button_wrapper{
  margin-top:60px !important;
  min-height:0 !important;
}

/* Der Wrapper zentriert selbst, dann ist es egal, was das Theme mit dem
   Button vorhat. */
.wa-semester-cta-section .call_to_action .button_wrapper{
  align-items:center !important;
  display:flex !important;
  justify-content:center !important;
}

/* Bridge stellt den Button im 75/25-Layout absolut neben den Text und
   schiebt ihn per translateY(-50%) auf die Textmitte. Das ist der Grund,
   warum er im Text stand. Klasse doppelt notiert, um die Spezifitaet
   sicher ueber die Theme-Regel zu heben. */
.wa-semester-cta-section .call_to_action .button_wrapper .qbutton.qbutton,
.wa-semester-cta-section .call_to_action .button_wrapper .qode-btn.qode-btn{
  transform:none !important;
  translate:none !important;
  vertical-align:middle !important;
}
.wa-semester-cta-section .call_to_action .button_wrapper .qbutton,
.wa-semester-cta-section .call_to_action .button_wrapper .qode-btn{
  bottom:auto !important;
  display:inline-flex !important;
  float:none !important;
  left:auto !important;
  margin:0 auto !important;
  position:static !important;
  right:auto !important;
  top:auto !important;
  transform:none !important;
  width:auto !important;
}

/* ---------------------------------------------------------------------
   17.2 Der Kasten selbst
   --------------------------------------------------------------------- */
.wa-semester-cta-section .call_to_action{
  isolation:isolate;
  overflow:hidden !important;
  position:relative !important;
}
.wa-semester-cta-section .call_to_action .container_inner,
.wa-semester-cta-section .call_to_action_text,
.wa-semester-cta-section .button_wrapper{
  position:relative;
  z-index:2;
}

/* =====================================================================
   18. Hero-Slider, neu aufgesetzt
   Vorher standen Textbox und Innenraster auf festen Hoehen (250px und
   ein Raster mit festen Zeilen). Sobald ein Titel eine Zeile mehr
   brauchte, lief er aus dem Kasten und wurde abgeschnitten.

   Hier gibt es keine festen Hoehen mehr. Die Textbox fuellt die Folie,
   zentriert ihren Inhalt in beiden Achsen und haelt ueber Innenabstaende
   Abstand zu Kopfleiste, Pfeilen und der Leiste am unteren Rand. Die
   Schriftgroessen skalieren mit der Viewportbreite und der Titel darf
   umbrechen.
   ===================================================================== */

/* Lage und Hoehe der Seitenanzeige (Abschnitt 23). Stehen hier, weil die
   Buehne ihr unteres Polster danach ausrichtet. Unter Tabletbreite ist der
   Slider nicht fensterhoch und scrollt mit, die Anzeige haengt deshalb
   knapp an seiner Unterkante. Mit dem Abstand fuer die Leiste am unteren
   Bildschirmrand stand sie mitten im Bild. */
#qode-welfenakademie-home{
  --wa-hero-pager-bottom:clamp(18px,3.5vh,34px);
  --wa-hero-pager-h:40px;
}
@media only screen and (max-width:1000px){
  #qode-welfenakademie-home{
    --wa-hero-pager-bottom:14px;
    --wa-hero-pager-h:32px;
  }
}

/* Die Buehne. pointer-events aus, damit Wischgesten weiter
   funktionieren, die Links darin bekommen es einzeln zurueck. */
#qode-welfenakademie-home .slider_content_outer,
#qode-welfenakademie-home .slider_content_outer.left,
#qode-welfenakademie-home .slider_content_outer.right{
  /* Bewusst kein "safe center": faellt der Inhalt hoeher aus als der
     Platz, wuerde safe auf Oberkante zurueckfallen, und genau dann stand
     der Text ganz oben statt in der Mitte. */
  align-items:center !important;
  bottom:0 !important;
  box-sizing:border-box !important;
  display:flex !important;
  justify-content:center !important;
  left:0 !important;
  pointer-events:none !important;
  position:absolute !important;
  right:0 !important;
  top:0 !important;
  transform:none !important;
  width:100% !important;
  /* seitlich etwas Luft, unten Platz fuer die Seitenanzeige */
  padding:clamp(20px,3vh,44px) clamp(22px,4vw,64px)
          calc(var(--wa-hero-pager-bottom) + var(--wa-hero-pager-h) + 16px) !important;
}

/* Das unsichtbare Vorschaubild aus dem Theme raus. Es hat opacity:0 und
   height:100%, traegt also nichts bei, macht die Textbox aber hoeher als
   den verfuegbaren Platz und verschiebt dadurch die Zentrierung. */
#qode-welfenakademie-home .slider_content .thumb{
  display:none !important;
}

/* Sicherheitsnetz: die Buehne ist nie hoeher als die Folie, sonst
   zentriert sie gegen eine Hoehe, die gar nicht sichtbar ist.
   Hier stand frueher zusaetzlich position:relative fuer alle Folien. Das
   hob die absolute Lage der einfahrenden Folie auf: sie hing waehrend des
   Wechsels unter der aktiven und sprang am Ende hoch. Die Lage der Folien
   regelt jetzt Abschnitt 23. */
#qode-welfenakademie-home .slider_content_outer{
  max-height:100% !important;
  overflow:hidden !important;
}

/* Die Textbox selbst: keine Hoehe, keine Verankerung, keine Verschiebung */
#qode-welfenakademie-home .slider_content,
#qode-welfenakademie-home .slider_content.left,
#qode-welfenakademie-home .slider_content.right,
#qode-welfenakademie-home .slider_content.center,
#qode-welfenakademie-home .item.content_vertical_middle .slider_content{
  bottom:auto !important;
  box-sizing:border-box !important;
  /* Bridge setzt hier display:table-cell und eine feste Hoehe von 35%
     der Folie. Genau daran wurden die Texte abgeschnitten. */
  display:block !important;
  vertical-align:baseline !important;
  height:auto !important;
  left:auto !important;
  margin:0 auto !important;
  max-width:920px !important;
  min-height:0 !important;
  padding:0 !important;
  position:relative !important;
  right:auto !important;
  text-align:center !important;
  top:auto !important;
  transform:none !important;
  width:100% !important;
}
#qode-welfenakademie-home .slider_content_inner,
#qode-welfenakademie-home .slider_content_inner.left,
#qode-welfenakademie-home .slider_content_inner.right{
  box-sizing:border-box !important;
  height:auto !important;
  left:auto !important;
  margin:0 !important;
  max-width:100% !important;
  position:relative !important;
  right:auto !important;
  text-align:center !important;
  top:auto !important;
  transform:none !important;
  width:100% !important;
}

/* Inhalt gestapelt, gleiche Reihenfolge auf jeder Folie */
#qode-welfenakademie-home .slider_content .text{
  align-items:center !important;
  display:flex !important;
  flex-direction:column !important;
  gap:clamp(10px,1.6vh,20px) !important;
  height:auto !important;
  justify-content:center !important;
  margin:0 !important;
  max-width:100% !important;
  padding:0 !important;
  width:100% !important;
}
#qode-welfenakademie-home .slider_content .text > *{
  margin:0 !important;
  max-width:100% !important;
  text-align:center !important;
}

/* Einblend-Animationen aus. Sie sind der haeufigste Grund dafuer, dass
   auf einzelnen Folien gar kein Text erscheint. */
#qode-welfenakademie-home .slider_content .text,
#qode-welfenakademie-home .slider_content .text.one_by_one,
#qode-welfenakademie-home .slider_content .text.all_at_once,
#qode-welfenakademie-home .slider_content .text > *,
#qode-welfenakademie-home .slider_content .text.one_by_one h2,
#qode-welfenakademie-home .slider_content .text.one_by_one h4,
#qode-welfenakademie-home .slider_content .text.one_by_one p,
#qode-welfenakademie-home .slider_content .text.one_by_one span,
#qode-welfenakademie-home .slider_content .text.one_by_one a,
#qode-welfenakademie-home .slider_content .text.all_at_once h2,
#qode-welfenakademie-home .slider_content .text.all_at_once h4,
#qode-welfenakademie-home .slider_content .text.all_at_once p,
#qode-welfenakademie-home .slider_content .text.all_at_once span,
#qode-welfenakademie-home .slider_content .text.all_at_once a{
  animation:none !important;
  opacity:1 !important;
  transition:none !important;
  visibility:visible !important;
  /* Bridge parkt die Elemente fuer die Einblendung 70px tiefer und holt
     sie per Skript hoch. Bleibt das aus, stehen sie zu tief und der
     untere Rand faellt aus der Folie. */
  bottom:auto !important;
  left:auto !important;
  position:relative !important;
  right:auto !important;
  top:auto !important;
  transform:none !important;
}

/* Schriftgroessen fliessend, Titel darf umbrechen */
#qode-welfenakademie-home .q_slide_subtitle,
#qode-welfenakademie-home .q_slide_subtitle span{
  color:#fff !important;
  display:block !important;
  font-size:clamp(13px,1.1vw + 9px,19px) !important;
  font-weight:400 !important;
  letter-spacing:.01em !important;
  line-height:1.4 !important;
  margin:0 !important;
  text-transform:none !important;
}
#qode-welfenakademie-home .q_slide_title,
#qode-welfenakademie-home .q_slide_title span{
  color:#fff !important;
  display:block !important;
  font-size:clamp(27px,3.6vw + 12px,56px) !important;
  font-weight:400 !important;
  hyphens:auto;
  letter-spacing:-.015em !important;
  line-height:1.12 !important;
  margin:0 !important;
  overflow-wrap:break-word !important;
  text-transform:none !important;
  white-space:normal !important;
  word-break:normal !important;
}
#qode-welfenakademie-home .q_slide_text,
#qode-welfenakademie-home .slider_content .text > p{
  color:rgba(255,255,255,.92) !important;
  display:block !important;
  font-size:clamp(14px,.6vw + 12px,17px) !important;
  line-height:1.55 !important;
  margin:0 !important;
  min-height:0 !important;
}

/* Buttons: klickbar, umbruchfaehig, nie breiter als die Box */
#qode-welfenakademie-home .slider_content .text > a.qbutton,
#qode-welfenakademie-home .slider_content .text > a.qode-btn{
  box-sizing:border-box !important;
  flex:0 0 auto !important;
  height:auto !important;
  max-width:100% !important;
  min-height:46px !important;
  min-width:min(240px,100%) !important;
  padding:12px 26px !important;
  pointer-events:auto !important;
  white-space:normal !important;
  width:auto !important;
}
#qode-welfenakademie-home .slider_content .text > a.qode-btn .qode-btn-text{
  overflow:visible !important;
  text-overflow:clip !important;
  white-space:normal !important;
}
#qode-welfenakademie-home .slider_content a,
#qode-welfenakademie-home .slider_content button{pointer-events:auto !important}

/* Unter Tabletbreite: unten Platz fuer die Seitenanzeige. */
@media only screen and (max-width:1000px){
  #qode-welfenakademie-home .slider_content_outer,
  #qode-welfenakademie-home .slider_content_outer.left,
  #qode-welfenakademie-home .slider_content_outer.right{
    padding:clamp(20px,4vh,40px) 22px
            calc(var(--wa-hero-pager-bottom) + var(--wa-hero-pager-h) + 14px) !important;
  }
  #qode-welfenakademie-home .slider_content .text > a.qbutton,
  #qode-welfenakademie-home .slider_content .text > a.qode-btn{
    min-width:min(280px,100%) !important;
    width:100% !important;
  }
}

/* Ab Tabletbreite liegen Kopfleiste und News-Banner ueber dem Slider,
   der als fixierte Flaeche die volle Fensterhoehe einnimmt. Ohne
   Ausgleich zentriert der Inhalt gegen die volle Hoehe und wirkt dadurch
   zu hoch. Das zusaetzliche Polster oben schiebt ihn in die Mitte des
   tatsaechlich freien Bereichs. */
@media only screen and (min-width:1001px){
  #qode-welfenakademie-home .slider_content_outer,
  #qode-welfenakademie-home .slider_content_outer.left,
  #qode-welfenakademie-home .slider_content_outer.right{
    padding-top:calc(var(--wa-header-h) + clamp(20px,3vh,44px)) !important;
  }
}

/* Sehr flache Fenster: Titel kleiner, Abstaende enger, damit alles
   in die sichtbare Hoehe passt. */
@media only screen and (max-height:640px){
  #qode-welfenakademie-home .q_slide_title,
  #qode-welfenakademie-home .q_slide_title span{
    font-size:clamp(24px,2.6vw + 12px,36px) !important;
  }
  #qode-welfenakademie-home .slider_content .text{gap:10px !important}
  #qode-welfenakademie-home .slider_content_outer{
    padding-top:16px !important;
    padding-bottom:calc(var(--wa-hero-pager-bottom) + var(--wa-hero-pager-h) + 10px) !important;
  }
}

/* =====================================================================
   19. Studienplaetze-Button in der Kopfleiste
   Der letzte Menuepunkt ist der Handlungsaufruf. Vorher war er ein
   gefuellter Kasten, der in der Insel abgeschnitten wurde. Jetzt eine
   umrandete Form, die in beiden Zustaenden mitlaeuft.
   ===================================================================== */
@media only screen and (min-width:1001px){
  header nav.main_menu > ul > li:last-child{
    align-items:center !important;
    display:flex !important;
    margin-left:16px !important;
  }
  /* Die Hoehenregel weiter oben setzt allen Menuepunkten height:100%.
     Sie ist mit den beiden Zustandsklassen am body notiert und damit
     spezifischer, deshalb steht hier dieselbe Auszeichnung. */
  header nav.main_menu > ul > li:last-child > a,
  body.wa-header-fixed header.page_header nav.main_menu > ul > li:last-child > a{
    align-items:center !important;
    background:transparent !important;
    background-color:transparent !important;
    border:2px solid var(--wa-navy) !important;
    border-radius:var(--wa-radius-sm) !important;
    box-sizing:border-box !important;
    color:var(--wa-navy) !important;
    display:flex !important;
    height:auto !important;
    justify-content:center !important;
    line-height:1.1 !important;
    min-height:44px !important;
    padding:0 22px !important;
    transition:background-color 220ms ease-out,
               border-color 220ms ease-out,
               color 220ms ease-out !important;
  }
  /* Bridge gibt dem inneren span einen dunkelblauen Hintergrund, damit
     der Punkt frueher wie ein gefuellter Kasten aussah. Auf der neuen
     Umrandung stuende damit blaue Schrift auf blauem Grund. */
  header nav.main_menu > ul > li:last-child > a span,
  body.wa-header-fixed header.page_header nav.main_menu > ul > li:last-child > a span{
    background:transparent !important;
    background-color:transparent !important;
    color:var(--wa-navy) !important;
    display:inline !important;
    height:auto !important;
    line-height:1.1 !important;
    padding:0 !important;
    transition:color 220ms ease-out;
  }
  /* Die Grundregel oben ist mit den Zustandsklassen am body notiert und
     damit spezifischer. Ohne dieselbe Auszeichnung hier gewinnt beim
     Ueberfahren weiter der transparente Hintergrund. */
  header nav.main_menu > ul > li:last-child > a:hover,
  header nav.main_menu > ul > li:last-child > a:focus-visible,
  body.wa-header-fixed header.page_header nav.main_menu > ul > li:last-child > a:hover,
  body.wa-header-fixed header.page_header nav.main_menu > ul > li:last-child > a:focus-visible{
    background:var(--wa-navy) !important;
    background-color:var(--wa-navy) !important;
    border-color:var(--wa-navy) !important;
    color:#fff !important;
  }
  header nav.main_menu > ul > li:last-child > a:hover span,
  header nav.main_menu > ul > li:last-child > a:focus-visible span,
  body.wa-header-fixed header.page_header nav.main_menu > ul > li:last-child > a:hover span,
  body.wa-header-fixed header.page_header nav.main_menu > ul > li:last-child > a:focus-visible span{
    background:transparent !important;
    color:#fff !important;
  }
  /* Das leere Icon-Element von Bridge wuerde links Platz fressen */
  header nav.main_menu > ul > li:last-child > a .menu_icon.blank,
  header nav.main_menu > ul > li:last-child > a .plus{
    display:none !important;
  }

  /* In der Insel etwas kompakter, damit er zur flacheren Leiste passt */
  body.wa-header-floating header nav.main_menu > ul > li:last-child > a,
  body.wa-header-fixed.wa-header-floating header.page_header nav.main_menu > ul > li:last-child > a{
    min-height:38px !important;
    padding:0 18px !important;
  }
}

/* =====================================================================
   20. Foto im Semesterkasten
   Der Kasten zeigt den Campus-Eingang. Darueber liegt ein blauer
   Schleier, sonst waere die weisse Schrift auf dem hellen Himmel nicht
   lesbar.
   ===================================================================== */
.wa-semester-cta-section .call_to_action{
  /* Gleichmaessiger Ton statt eines schraegen Verlaufs. Der Verlauf lief
     vorher von oben links nach unten rechts und legte dadurch einen
     Schatten quer ueber das Gebaeude, der wie ein Fehler im Bild aussah.
     Jetzt eine ebene Abdunklung, nur so stark wie noetig, damit die
     weisse Schrift traegt. */
  background-image:
    linear-gradient(rgba(21,35,66,.42),rgba(21,35,66,.42)),
    url('img/wa-campus-eingang.jpg') !important;
  background-position:center 62%, center 62% !important;
  background-repeat:no-repeat, no-repeat !important;
  background-size:cover, cover !important;
}

/* Auf schmalen Schirmen den Bildausschnitt enger fassen, sonst
   verschwindet das Gebaeude aus dem sichtbaren Bereich. */
@media only screen and (max-width:760px){
  .wa-semester-cta-section .call_to_action{
    background-position:60% 60%, 60% 60% !important;
  }
}

/* =====================================================================
   21. Schrift im Semesterkasten
   Auf dem Foto muss der Text weiss sein. WPBakery haengt Ueberschriften
   und Absaetzen teils eine Farbe direkt ans Element, deshalb hier
   ausdruecklich bis auf die inneren span-Elemente hinunter.
   ===================================================================== */
.wa-semester-cta-section .call_to_action,
.wa-semester-cta-section .call_to_action_text,
.wa-semester-cta-section .call_to_action_text h1,
.wa-semester-cta-section .call_to_action_text h2,
.wa-semester-cta-section .call_to_action_text h3,
.wa-semester-cta-section .call_to_action_text h4,
.wa-semester-cta-section .call_to_action_text p,
.wa-semester-cta-section .call_to_action_text span,
.wa-semester-cta-section .call_to_action_text a:not(.qbutton):not(.qode-btn),
.wa-semester-cta-section .call_to_action .text_wrapper,
.wa-semester-cta-section .call_to_action .text_wrapper *{
  color:#ffffff !important;
}

/* Leichter Schatten, damit die Schrift auch ueber hellen Stellen des
   Fotos steht. Bewusst weich und knapp, sonst wirkt sie schmutzig.
   Die Ueberschrift in diesem Kasten ist ein h4, nicht h2. */
.wa-semester-cta-section .call_to_action_text h1,
.wa-semester-cta-section .call_to_action_text h2,
.wa-semester-cta-section .call_to_action_text h3,
.wa-semester-cta-section .call_to_action_text h4,
.wa-semester-cta-section .call_to_action_text h1 span,
.wa-semester-cta-section .call_to_action_text h2 span,
.wa-semester-cta-section .call_to_action_text h3 span,
.wa-semester-cta-section .call_to_action_text h4 span{
  text-shadow:0 2px 14px rgba(12,22,44,.45) !important;
}

/* =====================================================================
   22. Semesterkasten, abschliessende Festlegung
   Fuer diesen Kasten haben sich ueber die Abschnitte hinweg mehrere
   Regeln angesammelt, die sich gegenseitig schlagen: das 75/25-Layout
   von Bridge, die Kurzform margin:0, der absolut gestellte Button und
   eine Inline-Farbe am Link. Statt weiter dagegen zu halten steht hier
   am Ende der Datei einmal verbindlich, wie der Kasten aussieht.
   Der body im Selektor hebt die Spezifitaet ueber alles Vorherige.
   ===================================================================== */

/* Text und Button untereinander, mittig */
body .wa-semester-cta-section .call_to_action .two_columns_75_25,
body .wa-semester-cta-section .call_to_action .text_wrapper,
body .wa-semester-cta-section .call_to_action .button_wrapper{
  box-sizing:border-box !important;
  display:block !important;
  float:none !important;
  max-width:none !important;
  padding:0 !important;
  position:static !important;
  text-align:center !important;
  vertical-align:baseline !important;
  width:100% !important;
}
body .wa-semester-cta-section .call_to_action .text_wrapper{
  margin:0 !important;
}
/* Der Abstand zum Text sitzt nicht hier. Der Wrapper ist im 75/25-Aufbau
   von Bridge ein Tabellenkasten, und an Tabellenkaesten laesst der Browser
   margin und padding fallen. Hintergrund und Rahmen greifen, Abstaende
   nicht. Deshalb steht der Abstand weiter unten am Button selbst. */
body .wa-semester-cta-section .call_to_action .button_wrapper{
  margin:0 !important;
}

/* Der Button. Bridge stellt ihn im 75/25-Layout absolut neben den Text
   und schiebt ihn per translateY(-50%) auf die Textmitte, deshalb stand
   er im Text. Zurueck in den Fluss und mittig. */
body .wa-semester-cta-section .call_to_action .button_wrapper .qbutton,
body .wa-semester-cta-section .call_to_action .button_wrapper .qode-btn{
  background:#ffffff !important;
  background-color:#ffffff !important;
  border:0 !important;
  bottom:auto !important;
  color:var(--wa-navy) !important;
  display:inline-flex !important;
  float:none !important;
  left:auto !important;
  /* Oben der Abstand zum Text, seitlich zentriert, unten nichts. */
  margin:clamp(13px,1.5vw,22px) auto 0 !important;
  position:static !important;
  right:auto !important;
  top:auto !important;
  transform:none !important;
  translate:none !important;
  width:auto !important;
}
/* Die Beschriftung liegt in einem span mit eigener Farbe */
body .wa-semester-cta-section .call_to_action .button_wrapper .qbutton span,
body .wa-semester-cta-section .call_to_action .button_wrapper .qode-btn span{
  background:transparent !important;
  color:var(--wa-navy) !important;
}
body .wa-semester-cta-section .call_to_action .button_wrapper .qbutton:hover,
body .wa-semester-cta-section .call_to_action .button_wrapper .qbutton:focus-visible{
  background:var(--wa-red) !important;
  background-color:var(--wa-red) !important;
  color:#ffffff !important;
}
body .wa-semester-cta-section .call_to_action .button_wrapper .qbutton:hover span,
body .wa-semester-cta-section .call_to_action .button_wrapper .qbutton:focus-visible span{
  color:#ffffff !important;
}

/* =====================================================================
   23. Hero-Slider: Folienwechsel und Seitenanzeige
   Den Wechsel steuert initHeroSlider() in der refresh.js, das Karussell
   des Themes ist dort stillgelegt. Bootstrap schob die Folien ueber die
   Eigenschaft left, rechnete also in jedem Bild das Layout neu, und
   wartete vor jedem Wechsel eine volle Sekunde, waehrend Bridge den Text
   ausblendete. Jetzt gleiten die Folien per transform in einem Zug.

   Alles haengt an der Klasse .wa-hero, die erst das Skript setzt. Laeuft
   es nicht, bleibt das Karussell des Themes mit seinen Pfeilen bestehen.
   ===================================================================== */

/* Senkrechtes Wischen scrollt weiter die Seite, waagerechtes gehoert
   dem Slider. */
#qode-welfenakademie-home.wa-hero .carousel-inner{
  touch-action:pan-y;
}

/* Keine Parallaxe. Bridge schiebt die Folien per skrollr beim Scrollen
   nach oben (data-1440="transform: translateY(-500px)" als Inline-Style),
   schneller als den Rest der Seite. Die Seitenanzeige liegt ausserhalb
   von .carousel-inner und blieb dabei zurueck. skrollr laeuft nur ohne
   Touch (html.no-touchevents), zu sehen war es also im schmalen
   Desktop-Browser, nicht auf dem Telefon. */
#qode-welfenakademie-home .carousel-inner{
  transform:none !important;
}

/* Nur die aktuelle Folie steht im Fluss und gibt der Buehne ihre Hoehe.
   Die einfahrende liegt absolut daneben. Alle uebrigen bleiben wie im
   Theme auf display:none und sind damit auch fuer Tastatur und
   Vorleser weg. */
#qode-welfenakademie-home.wa-hero .carousel-inner > .item{
  left:0 !important;
  position:absolute !important;
  top:0 !important;
  transition:none;
  width:100%;
}
#qode-welfenakademie-home.wa-hero .carousel-inner > .item.active{
  position:relative !important;
}
#qode-welfenakademie-home.wa-hero .carousel-inner > .item.wa-hero-moving{
  display:block;
}

/* Pfeile und Punkte des Themes weichen der eigenen Seitenanzeige */
#qode-welfenakademie-home.wa-hero .carousel-control,
#qode-welfenakademie-home.wa-hero .carousel-indicators{
  display:none !important;
}

/* Seitenanzeige: Punkte in einer dunklen Glaskapsel. Die aktuelle Folie
   ist eine Linie, die sich bis zum naechsten Wechsel von links fuellt.
   Lage und Hoehe stehen als Variablen in Abschnitt 18. */
#qode-welfenakademie-home .wa-hero-pager{
  align-items:center;
  -webkit-backdrop-filter:blur(18px) saturate(1.6);
  backdrop-filter:blur(18px) saturate(1.6);
  background:rgba(24,26,32,.42);
  border-radius:var(--wa-radius-pill);
  bottom:var(--wa-hero-pager-bottom);
  box-sizing:border-box;
  display:flex;
  height:var(--wa-hero-pager-h);
  left:50%;
  padding:0 10px;
  position:absolute;
  transform:translateX(-50%);
  z-index:20;
}
#qode-welfenakademie-home .wa-hero-dot{
  -webkit-appearance:none;
  appearance:none;
  align-items:center;
  background:transparent !important;
  border:0 !important;
  border-radius:var(--wa-radius-pill);
  box-shadow:none !important;
  cursor:pointer;
  display:flex;
  height:100%;
  justify-content:center;
  margin:0 !important;
  min-height:0 !important;
  padding:0 8px !important;
  -webkit-tap-highlight-color:transparent;
}
#qode-welfenakademie-home .wa-hero-dot:focus-visible{
  outline:2px solid #fff !important;
  outline-offset:-4px !important;
}
#qode-welfenakademie-home .wa-hero-dot-track{
  background:rgba(255,255,255,.55);
  border-radius:var(--wa-radius-pill);
  display:block;
  height:8px;
  overflow:hidden;
  position:relative;
  transition:width .5s var(--wa-ease), background-color .25s ease;
  width:8px;
}
#qode-welfenakademie-home .wa-hero-dot:hover .wa-hero-dot-track{
  background:rgba(255,255,255,.9);
}
#qode-welfenakademie-home .wa-hero-dot.is-active .wa-hero-dot-track{
  background:rgba(255,255,255,.35);
  width:40px;
}
/* Die Fuellung ist eine volle Linie, die von links hereingeschoben wird.
   Geschoben statt gestaucht, damit ihr rundes Ende rund bleibt. Den
   Stand setzt das Skript in jedem Bild. */
#qode-welfenakademie-home .wa-hero-dot-fill{
  background:#fff;
  border-radius:inherit;
  bottom:0;
  left:0;
  position:absolute;
  right:0;
  top:0;
  transform:translate3d(-100%,0,0);
}

/* =====================================================================
   24. Vorstellung "WelfenAkademie e.V." auf der Startseite
   Hinter dem Textbaustein liegt die Skizze des Akademiegebaeudes.
   Die Zeile wird per :has() erkannt (h1 plus Textspalte .toptext) und
   nicht ueber tagSections() in der refresh.js. Eine Klasse aus dem
   Skript kaeme erst nach dem ersten Zeichnen, und weil hier auch der
   Abstand schrumpft, wuerde die Seite dann sichtbar springen.
   ===================================================================== */
body.home .full_width_inner > .vc_row:has(.wpb_text_column h1):has(.wpb_text_column.toptext){
  --wa-verein-grund:var(--wa-section-gray);
  background-color:var(--wa-verein-grund) !important;
  /* Drei Ebenen ueber der Skizze, von oben nach unten:
     1. ein weicher Fleck in Grundfarbe hinter dem Text, damit die
        Linien dort kaum noch mitlesen
     2. ein gleichmaessiger Schleier, der die Skizze insgesamt auf
        einen Hauch zuruecknimmt
     3. die Skizze selbst, unten buendig. Unter 960px wird sie nicht
        weiter verkleinert, sondern seitlich beschnitten, sonst waere
        sie auf dem Handy nur noch ein Streifen. */
  background-image:
    radial-gradient(ellipse 42% 62% at 50% 44%,
      color-mix(in srgb,var(--wa-verein-grund) 62%,transparent) 0%,
      color-mix(in srgb,var(--wa-verein-grund) 40%,transparent) 55%,
      transparent 100%),
    linear-gradient(
      color-mix(in srgb,var(--wa-verein-grund) 76%,transparent),
      color-mix(in srgb,var(--wa-verein-grund) 76%,transparent)),
    url('img/welfenakademie-gebaeude.svg') !important;
  background-position:center, center, center bottom !important;
  background-repeat:no-repeat, no-repeat, no-repeat !important;
  background-size:100% 100%, 100% 100%, max(100%, 960px) auto !important;
}

/* Unten etwas mehr Luft, damit Sockel und Boden der Skizze unter dem
   Text hervorschauen und das Gebaeude einen Stand bekommt. */
body.home .full_width_inner > .vc_row:has(.wpb_text_column h1):has(.wpb_text_column.toptext) > .full_section_inner{
  padding-bottom:calc(var(--wa-section-space) + clamp(24px,5vw,80px)) !important;
}

/* Ueber der Ueberschrift standen im Page Builder zwei Leer-Elemente
   (64px und 32px) zusaetzlich zum Sektionsabstand. Ausgeblendet werden
   nur die vor der Ueberschrift, der Abstand zum Fliesstext bleibt. */
body.home .full_width_inner > .vc_row:has(.wpb_text_column h1):has(.wpb_text_column.toptext) .wpb_wrapper > .vc_empty_space:has(~ .wpb_text_column h1){
  display:none !important;
}

/* Lesbarkeit: das Grau des Themes (#797979) lag auf dem Streifen schon
   ohne Skizze unter 4,5:1. Ein dunkles, leicht blaues Grau haelt den
   Kontrast auch ueber den Linien deutlich darueber. */
body.home .full_width_inner > .vc_row:has(.wpb_text_column h1):has(.wpb_text_column.toptext) .wpb_text_column.toptext p,
body.home .full_width_inner > .vc_row:has(.wpb_text_column h1):has(.wpb_text_column.toptext) .wpb_text_column.toptext p span{
  color:color-mix(in srgb,var(--wa-navy) 82%,#ffffff) !important;
}

/* =====================================================================
   25. Anfahrtskarte (Google Maps erst nach Zustimmung)
   Markup kommt aus wa_refresh_google_maps() in der functions.php, das
   jede Google-Maps-Einbettung im Seiteninhalt ersetzt. Oben steht zuerst
   ein Platzhalter (.wa-map-consent): die schematische Zeichnung, darauf
   ein Hinweis mit Knopf. Erst der Klick setzt das iframe ein, siehe
   initMapConsent() in der refresh.js.
   ===================================================================== */
.wa-map-card{
  background:#fff;
  border:1px solid rgba(40,57,91,.07);
  border-radius:var(--wa-radius);
  box-shadow:var(--wa-shadow);
  overflow:hidden;
  transition:box-shadow .28s var(--wa-ease);
}
.wa-map-card:hover{box-shadow:var(--wa-shadow-lg)}

/* Auf dem Handy etwas hoeher, sonst bleibt zum Verschieben kaum Platz */
.wa-map-visual{
  aspect-ratio:16/10;
  background:#e9edf3;
  display:block;
  overflow:hidden;
  position:relative;
}
@media (max-width:600px){
  .wa-map-visual{aspect-ratio:4/3}
}
.wa-map-streets{
  display:block;
  height:100%;
  transition:opacity .4s var(--wa-ease);
  width:100%;
}

/* Hinweis mittig auf der Zeichnung. Die Zeichnung bleibt als ruhiger
   Grund stehen, bis die Karte da ist. */
.wa-map-consent-box{
  align-items:center;
  display:flex;
  flex-direction:column;
  gap:14px;
  inset:0;
  justify-content:center;
  padding:clamp(20px,4vw,40px);
  position:absolute;
  text-align:center;
  /* Schleier ueber der Zeichnung, damit keine Linie durch den Text laeuft */
  background:radial-gradient(ellipse 60% 55% at 50% 50%,rgba(255,255,255,.92),rgba(255,255,255,.55) 70%,rgba(255,255,255,.35));
  transition:opacity .3s var(--wa-ease),visibility .3s;
}
.wa-map-card .wa-map-consent-text{
  color:var(--wa-ink) !important;
  font-size:14px !important;
  line-height:1.5 !important;
  margin:0 !important;
  max-width:34ch;
}
.wa-map-consent-text a{
  color:var(--wa-navy) !important;
  text-decoration:underline !important;
  text-underline-offset:2px;
  white-space:nowrap;
}

.wa-map-visual iframe{
  border:0;
  display:block;
  height:100%;
  inset:0;
  opacity:0;
  position:absolute;
  transition:opacity .4s var(--wa-ease);
  width:100%;
}
.wa-map-consent.wa-map-loaded iframe{opacity:1}
.wa-map-consent.wa-map-loading .wa-map-consent-box,
.wa-map-consent.wa-map-loaded .wa-map-consent-box{
  opacity:0;
  pointer-events:none;
  visibility:hidden;
}
.wa-map-consent.wa-map-loaded .wa-map-streets{opacity:0}

.wa-map-body{padding:clamp(20px,2.4vw,28px)}
.wa-map-card .wa-map-name{
  color:var(--wa-navy) !important;
  font-family:var(--wa-font-display) !important;
  font-size:clamp(19px,.6vw + 16px,22px) !important;
  line-height:1.25 !important;
  margin:0 0 .35em !important;
}
.wa-map-card .wa-map-address{
  color:var(--wa-ink) !important;
  margin:0 0 18px !important;
}

.wa-map-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.wa-map-card .wa-map-btn{
  align-items:center;
  border:2px solid var(--wa-navy);
  border-radius:var(--wa-radius-pill);
  color:var(--wa-navy) !important;
  display:inline-flex;
  font-family:var(--wa-font-display);
  font-size:15px;
  font-weight:500;
  gap:8px;
  line-height:1.2;
  min-height:44px;
  padding:0 22px;
  text-decoration:none !important;
  transition:background-color .2s var(--wa-ease),
             border-color .2s var(--wa-ease),
             box-shadow .2s var(--wa-ease),
             color .2s var(--wa-ease),
             transform .2s var(--wa-ease);
}
.wa-map-card .wa-map-btn:hover{
  background:var(--wa-navy);
  box-shadow:var(--wa-shadow);
  color:#fff !important;
  transform:translateY(-1px);
}
.wa-map-card .wa-map-btn-primary{
  background:var(--wa-navy);
  color:#fff !important;
}
.wa-map-card .wa-map-btn-primary:hover{
  background:var(--wa-navy-deep);
  border-color:var(--wa-navy-deep);
}
.wa-map-btn svg{
  fill:none;
  height:16px;
  stroke:currentColor;
  stroke-linejoin:round;
  stroke-width:2;
  width:16px;
}

@media (prefers-reduced-motion:reduce){
  .wa-map-streets,
  .wa-map-visual iframe,
  .wa-map-consent-box,
  .wa-map-card .wa-map-btn{transition:none}
}

/* =====================================================================
   26. "Akkreditiert seit 2004" auf der Startseite
   Gegenstueck zu Abschnitt 24: hinter dem Textbaustein liegt die Skizze
   der Gebaeuderueckseite. Erkannt wird die Zeile ebenfalls per :has(),
   hier ueber h2 plus Textspalte .toptext. Den e.V.-Baustein trifft das
   nicht, der hat eine h1, und die Teaser-Zeile hat keine .toptext.
   ===================================================================== */
body.home .full_width_inner > .vc_row:has(.wpb_text_column h2):has(.wpb_text_column.toptext){
  --wa-akkreditiert-grund:var(--wa-section-gray);
  background-color:var(--wa-akkreditiert-grund) !important;
  /* Dieselben drei Ebenen wie in Abschnitt 24. Der Baustein ist deutlich
     hoeher, deshalb sitzt der Fleck tiefer, dort wo Text und Skizze
     sich ueberlagern. */
  background-image:
    radial-gradient(ellipse 42% 40% at 50% 78%,
      color-mix(in srgb,var(--wa-akkreditiert-grund) 62%,transparent) 0%,
      color-mix(in srgb,var(--wa-akkreditiert-grund) 40%,transparent) 55%,
      transparent 100%),
    linear-gradient(
      color-mix(in srgb,var(--wa-akkreditiert-grund) 76%,transparent),
      color-mix(in srgb,var(--wa-akkreditiert-grund) 76%,transparent)),
    url('img/welfenakademie-gebaeude-rueckseite.svg') !important;
  background-position:center, center, center bottom !important;
  background-repeat:no-repeat, no-repeat, no-repeat !important;
  background-size:100% 100%, 100% 100%, max(100%, 960px) auto !important;
}

/* Kompakter als der Page Builder es anlegt. Dort stehen drei
   Leer-Elemente (64px ueber der Ueberschrift, 32px darunter, 64px unter
   dem Text) zusaetzlich zum Sektionsabstand, dazu 32px Rand ueber der h2.
   Alles faellt weg, die Abstaende kommen nur noch aus der Sektion und
   dem Rand unter der h2, so wie beim e.V.-Baustein. Unten gibt es einen
   kleinen Zuschlag, damit der Boden der Skizze nicht am Text klebt. */
body.home .full_width_inner > .vc_row:has(.wpb_text_column h2):has(.wpb_text_column.toptext) > .full_section_inner{
  padding-bottom:calc(var(--wa-section-space) + clamp(8px,2vw,32px)) !important;
}
body.home .full_width_inner > .vc_row:has(.wpb_text_column h2):has(.wpb_text_column.toptext) .wpb_wrapper > .vc_empty_space{
  display:none !important;
}
body.home .full_width_inner > .vc_row:has(.wpb_text_column h2):has(.wpb_text_column.toptext) .wpb_text_column h2{
  margin-top:0 !important;
}
/* Ohne die rote Marke aus Abschnitt 16.4: die Ueberschrift steht hier
   mittig, die Marke haengt links und wirkt dadurch verloren. */
body.home .full_width_inner > .vc_row:has(.wpb_text_column h2):has(.wpb_text_column.toptext) .wpb_text_column h2:first-child:before{
  content:none !important;
}

/* Lesbarkeit wie in Abschnitt 24 */
body.home .full_width_inner > .vc_row:has(.wpb_text_column h2):has(.wpb_text_column.toptext) .wpb_text_column.toptext p,
body.home .full_width_inner > .vc_row:has(.wpb_text_column h2):has(.wpb_text_column.toptext) .wpb_text_column.toptext p span{
  color:color-mix(in srgb,var(--wa-navy) 82%,#ffffff) !important;
}

/* =====================================================================
   27. "WelfenAkademie in Zahlen"
   Der Page Builder legt hier 139px und 116px Innenabstand an die Spalte,
   dazu Leer-Elemente (21px unter der Ueberschrift, 104px ueber den
   Zahlen, 50px unter jedem Label) und 28px grosse Labels. Bei 1440px
   ergab das ueber 1000px Hoehe fuer vier Zahlen. Alles faellt weg, die
   Abstaende kommen aus dem Sektionsabstand und den Werten hier.
   Erkannt wird die Sektion per :has() an den Zaehlern, aus demselben
   Grund wie in Abschnitt 24: eine Klasse aus dem Skript kaeme erst nach
   dem ersten Zeichnen.
   ===================================================================== */
.full_width_inner > section:has(.q_counter_holder) .vc_column-inner{
  padding-top:0 !important;
  padding-bottom:0 !important;
}
.full_width_inner > section:has(.q_counter_holder) .vc_empty_space{
  display:none !important;
}
.full_width_inner > section:has(.q_counter_holder) h2{
  margin:0 0 clamp(6px,.8vw,12px) !important;
}

/* Die vier Zahlen als Raster: zwei mal zwei, ab 900px in einer Reihe */
.full_width_inner > section:has(.q_counter_holder) .vc_inner{
  margin:clamp(28px,3.5vw,52px) 0 0 !important;
}
.full_width_inner > section:has(.q_counter_holder) .vc_inner > .full_section_inner{
  display:grid;
  gap:clamp(28px,3vw,36px) clamp(16px,3vw,40px);
  grid-template-columns:repeat(2,minmax(0,1fr));
}
.full_width_inner > section:has(.q_counter_holder) .vc_inner > .full_section_inner::before,
.full_width_inner > section:has(.q_counter_holder) .vc_inner > .full_section_inner::after{
  content:none !important;
  display:none !important;
}
.full_width_inner > section:has(.q_counter_holder) .vc_inner .wpb_column{
  float:none !important;
  margin:0 !important;
  min-height:0 !important;
  padding:0 !important;
  width:auto !important;
}
@media (min-width:900px){
  .full_width_inner > section:has(.q_counter_holder) .vc_inner > .full_section_inner{
    grid-template-columns:repeat(4,minmax(0,1fr));
  }
}

.full_width_inner > section:has(.q_counter_holder) .q_counter_holder{
  opacity:1 !important;
  padding:0 !important;
}
.full_width_inner > section:has(.q_counter_holder) .counter{
  height:auto !important;
}
.full_width_inner > section:has(.q_counter_holder) .vc_inner h3,
.full_width_inner > section:has(.q_counter_holder) .vc_inner h3 span{
  font-size:clamp(14px,.3vw + 13px,17px) !important;
  font-weight:400 !important;
  letter-spacing:.01em !important;
  line-height:1.4 !important;
}
.full_width_inner > section:has(.q_counter_holder) .vc_inner h3{
  margin:clamp(4px,.6vw,8px) auto 0 !important;
  max-width:17em;
}
/* Textspalten tragen sonst den seitlichen Textabstand aus Abschnitt 3,
   in einer Rasterzelle von knapp 300px blieben davon nur 180px fuers Label */
.full_width_inner > section:has(.q_counter_holder) .vc_inner .vc_column-inner,
.full_width_inner > section:has(.q_counter_holder) .vc_inner .wpb_text_column{
  padding-left:0 !important;
  padding-right:0 !important;
}

/* ---------------------------------------------------------------------
   27.1 Hochzaehlen
   initCounters() in der refresh.js zerlegt jede Zahl in Ziffern. Jede
   Ziffer ist eine Walze von 0 aufwaerts, die nach oben durchlaeuft und
   auf der Zielziffer weich auslaeuft. Solange sie schnell ist, liegt
   Unschaerfe darauf. Rechte Ziffern drehen mehr Runden und laufen
   laenger, dadurch steht die Zahl von links nach rechts.
   Die unsichtbare Zielziffer im Fluss gibt dem Fenster Breite und Hoehe,
   so steht jede Ziffer schon waehrend der Walze an ihrer Endposition.
   Der Innenabstand mit gleich grossem negativen Rand ueberdeckt die
   Unschaerfe oben und unten, die Maske blendet dort weich aus.
   --------------------------------------------------------------------- */
.wa-count{
  display:inline-block;
  white-space:nowrap;
}
.wa-count-digit{
  display:inline-block;
  margin:-.2em -.15em;
  -webkit-mask-image:linear-gradient(transparent,#000 .2em,#000 calc(100% - .2em),transparent);
  mask-image:linear-gradient(transparent,#000 .2em,#000 calc(100% - .2em),transparent);
  overflow:hidden;
  padding:.2em .15em;
  position:relative;
  vertical-align:top;
}
.wa-count-final{visibility:hidden}
.wa-count-reel{
  display:flex;
  flex-direction:column;
  left:50%;
  opacity:0;
  position:absolute;
  top:.2em;
  transform:translate(-50%,0);
  transition:transform var(--wa-count-dur) cubic-bezier(.16,1,.3,1) var(--wa-count-delay);
  will-change:transform,filter;
}
/* Luft zwischen den Ziffern auf der Walze. Ohne sie ragen die Serifen der
   vorherigen Ziffer oben in die Maske und stehen beim Auslaufen als
   Striche ueber der Zahl. Die Verschiebung rechnet in Prozent der Walze,
   der Abstand geht also automatisch mit ein. */
.wa-count-reel > span{
  display:block;
  padding-bottom:.4em;
}
.wa-count-run .wa-count-reel{
  animation:wa-count-blur var(--wa-count-dur) linear var(--wa-count-delay) both;
  transform:translate(-50%,var(--wa-count-to));
}
/* Die Kurve oben ist am Anfang am schnellsten, deshalb sitzt die meiste
   Unschaerfe vorn und ist weg, bevor die Ziffer auslaeuft */
@keyframes wa-count-blur{
  0%{filter:blur(.14em);opacity:0}
  12%{opacity:1}
  30%{filter:blur(.07em)}
  60%{filter:blur(.015em)}
  80%,100%{filter:blur(0);opacity:1}
}

/* Label kommt nach, sobald die Zahl steht */
.wa-count-col.wa-count-armed .wpb_text_column{
  opacity:0;
  transform:translateY(8px);
}
.wa-count-col.wa-count-run .wpb_text_column{
  opacity:1;
  transform:none;
  transition:
    opacity .7s var(--wa-ease) calc(var(--wa-count-i) * 120ms + 450ms),
    transform .7s var(--wa-ease) calc(var(--wa-count-i) * 120ms + 450ms);
}

.wa-count-sr{
  border:0;
  clip:rect(0 0 0 0);
  clip-path:inset(50%);
  height:1px;
  margin:-1px;
  overflow:hidden;
  padding:0;
  position:absolute !important;
  white-space:nowrap;
  width:1px;
}

@media (prefers-reduced-motion:reduce){
  .wa-count-reel{animation:none !important;transition:none !important}
  .wa-count-col .wpb_text_column{opacity:1 !important;transform:none !important;transition:none !important}
}

/* =====================================================================
   28. Haeufige Fragen im Band "WelfenAkademie e.V."
   Im Page Builder standen dort drei Fortschrittsbalken, alle auf 100
   Prozent. Jetzt kommen fuenf Fragen zum Aufklappen aus der
   functions.php (wa_refresh_faq_entries), jede Antwort endet mit einem
   Link auf die weiterfuehrende Seite. Haarlinien trennen die Eintraege.

   Rot ist hier bewusst bis auf einen Rest zurueckgenommen: die Balken
   waren flaechig rot und haben die halbe Spalte eingefaerbt. Uebrig
   bleibt die Marke ueber der Ueberschrift, wie in den hellen
   Abschnitten (16.4). Alles andere traegt Weiss in zwei Abstufungen
   (--wa-auf-blau, --wa-auf-blau-leise); Rot auf Marineblau kaeme
   ohnehin nur auf 3,2:1.

   Die Klasse wa-faq steht schon im Markup, das Band wird per :has()
   erkannt. So haengt nichts an tagSections() und nichts springt nach
   dem ersten Zeichnen.
   ===================================================================== */
:root{
  --wa-faq-line:rgba(255,255,255,.16);
  --wa-faq-zeichen:clamp(30px,2.4vw,36px);
  --wa-faq-gap:clamp(14px,1.8vw,24px);
}

/* Button buendig mit dem Text darueber. Die Textspalten tragen den
   seitlichen Abstand aus Abschnitt 3 und 11, der Button stand ohne. */
.full_width_inner > section:has(.wa-faq) .wpb_wrapper > a.qbutton{
  margin-left:var(--wa-gutter) !important;
}

/* Ohne den oberen Rand der h2 (32px) beginnen Ueberschrift und erste
   Haarlinie auf einer Hoehe */
.full_width_inner > section:has(.wa-faq) .wpb_text_column h2{
  margin-top:0 !important;
}

/* Marke ueber der Ueberschrift, wie in den hellen Abschnitten (16.4).
   Der einzige rote Fleck in diesem Band. */
.full_width_inner > section:has(.wa-faq) .wpb_text_column h2:first-child::before{
  background:var(--wa-red);
  border-radius:2px;
  content:"";
  display:block;
  height:4px;
  margin:0 0 18px;
  width:52px;
}

/* Die Leer-Elemente zwischen den Balken ersetzen jetzt die Haarlinien */
.full_width_inner .wpb_wrapper:has(> .qode-animation-holder .wa-faq) > .vc_empty_space{
  display:none !important;
}

/* Derselbe seitliche Abstand wie bei den Textspalten der Nachbarspalte,
   die ihn aus Abschnitt 3 und 11 mitbringen */
.wa-faq{
  margin:0 var(--wa-gutter);
}

/* Ueberschrift der Liste: klein und leise, damit sie der h2 in der
   linken Spalte nicht die Schau stiehlt */
.wa-faq-ueberschrift{
  color:var(--wa-auf-blau-leise) !important;
  font-family:var(--wa-font-display) !important;
  font-size:13px !important;
  font-weight:700 !important;
  letter-spacing:.12em !important;
  line-height:1.4 !important;
  margin:0 0 clamp(8px,1vw,14px) !important;
  text-transform:uppercase;
}

.wa-faq-eintrag{
  border-top:1px solid var(--wa-faq-line);
}
.wa-faq-eintrag:last-of-type{
  border-bottom:1px solid var(--wa-faq-line);
}

.wa-faq-eintrag > summary{
  align-items:center;
  cursor:pointer;
  display:grid;
  gap:var(--wa-faq-gap);
  grid-template-columns:minmax(0,1fr) var(--wa-faq-zeichen);
  list-style:none;
  padding:clamp(14px,1.6vw,20px) 0;
}
.wa-faq-eintrag > summary::-webkit-details-marker{display:none}
.wa-faq-eintrag > summary:focus-visible{
  border-radius:var(--wa-radius-sm,8px);
  outline:2px solid #fff;
  outline-offset:4px;
}

.wa-faq-frage{
  color:var(--wa-auf-blau) !important;
  font-family:var(--wa-font-display) !important;
  font-size:clamp(16px,.4vw + 15px,19px) !important;
  font-weight:400 !important;
  letter-spacing:0 !important;
  line-height:1.4 !important;
  margin:0 !important;
  text-transform:none !important;
}
.wa-faq-eintrag > summary:hover .wa-faq-frage{
  opacity:.82;
}

/* Schalter: nur das Zeichen, offen ein Minus. Die Flaeche bleibt so
   gross wie der Ring vorher, damit sie gut zu treffen ist. */
.wa-faq-zeichen{
  flex:none;
  height:var(--wa-faq-zeichen);
  opacity:.7;
  position:relative;
  transition:opacity .25s var(--wa-ease,ease);
  width:var(--wa-faq-zeichen);
}
.wa-faq-zeichen::before,
.wa-faq-zeichen::after{
  background:#fff;
  border-radius:1px;
  content:"";
  height:2px;
  left:50%;
  position:absolute;
  top:50%;
  transform:translate(-50%,-50%);
  transition:transform .35s var(--wa-ease,ease);
  width:40%;
}
.wa-faq-zeichen::after{transform:translate(-50%,-50%) rotate(90deg)}
.wa-faq-eintrag > summary:hover .wa-faq-zeichen,
.wa-faq-eintrag[open] .wa-faq-zeichen{opacity:1}
.wa-faq-eintrag[open] .wa-faq-zeichen::after{transform:translate(-50%,-50%) rotate(0deg)}

.wa-faq-antwort{
  padding:0 var(--wa-faq-zeichen) clamp(18px,2vw,24px) 0;
}
.wa-faq-antwort p{
  color:var(--wa-auf-blau-leise);
  font-size:var(--wa-body-size);
  line-height:var(--wa-body-line);
  margin:0;
}

/* Weiterleitung auf die Unterseite, die die Frage ausfuehrlich
   beantwortet. Weiss statt Rot: der Link soll auffallen, ohne die
   Farbe zurueckzuholen, die aus dem Band verschwunden ist. */
.wa-faq-link{
  color:var(--wa-auf-blau) !important;
  /* inline und nicht inline-flex: bei zwei Zeilen haengt der Pfeil aus
     einem Flex-Kasten sonst am rechten Rand der ersten Zeile statt
     hinter dem letzten Wort */
  display:inline;
  font-family:var(--wa-font-display);
  font-size:clamp(14px,.25vw + 13px,16px);
  font-weight:700;
  text-decoration:underline;
  text-decoration-color:rgba(255,255,255,.45);
  text-underline-offset:5px;
  transition:text-decoration-color .25s var(--wa-ease,ease);
}
.wa-faq-antwort > .wa-faq-link{
  display:inline-block;
  margin-top:clamp(10px,1.2vw,16px);
}
/* geschuetztes Leerzeichen: der Pfeil bleibt beim letzten Wort */
.wa-faq-link::after{content:"\00a0\2192"}
.wa-faq-link:hover,
.wa-faq-link:focus{
  color:var(--wa-auf-blau) !important;
  text-decoration-color:#fff;
}
.wa-faq-link:focus-visible{
  border-radius:var(--wa-radius-sm,8px);
  outline:2px solid #fff;
  outline-offset:4px;
}

.wa-faq-eintrag[open] .wa-faq-antwort{animation:wa-faq-in .45s var(--wa-ease,ease) both}
@keyframes wa-faq-in{
  from{opacity:0;transform:translateY(-6px)}
  to{opacity:1;transform:none}
}

/* Hoehe weich auf- und zufahren, wo der Browser das kann. Sonst klappt
   es ohne Uebergang, der Inhalt blendet trotzdem ein. */
@supports selector(::details-content){
  .wa-faq-eintrag{interpolate-size:allow-keywords}
  .wa-faq-eintrag::details-content{
    block-size:0;
    overflow:clip;
    transition:block-size .4s var(--wa-ease,ease),content-visibility .4s allow-discrete;
  }
  .wa-faq-eintrag[open]::details-content{block-size:auto}
}

/* Bridge gibt dem Inhalt des Bandes feste Breiten in Stufen (300px
   unter 480px), zentriert per Rand. Mit Spaltenabstand und Textabstand
   blieben auf dem Telefon zwei Drittel der Breite. Dort laeuft er jetzt
   fluide ueber die volle Breite, den Rand stellt allein
   --wa-gutter-mobile. Darueber bleibt Bridges Stufe, sonst wuerden die
   Zeilen im gestapelten Band zu lang. */
@media only screen and (max-width:768px){
  .full_width_inner > section:has(.wa-faq) .parallax_content{
    margin-left:0 !important;
    margin-right:0 !important;
    width:auto !important;
  }
}

@media only screen and (max-width:1000px){
  .full_width_inner > section:has(.wa-faq) .wpb_wrapper > a.qbutton{
    margin-left:var(--wa-gutter-mobile) !important;
  }
  .full_width_inner > section:has(.wa-faq) .wpb_text_column h2:first-child::before{
    margin-left:auto;
    margin-right:auto;
  }
  .wa-faq{margin:0 var(--wa-gutter-mobile)}
}

@media (prefers-reduced-motion:reduce){
  .wa-faq-zeichen,
  .wa-faq-zeichen::before,
  .wa-faq-zeichen::after,
  .wa-faq-link{transition:none !important}
  .wa-faq-eintrag[open] .wa-faq-antwort{animation:none !important}
  .wa-faq-eintrag::details-content{transition:none !important}
}

/* =====================================================================
   29. Aufklappmenue in der Kopfleiste
   "Studierende", "Unternehmen" und "Studieninteressierte" haben
   Unterseiten. Bridge haengt sie als .second an den Menuepunkt und
   klappt sie dort als schmale Liste auf. In der schwebenden Insel war
   davon nichts zu sehen: die Insel braucht overflow:hidden fuer ihre
   Rundung und schneidet damit alles ab, was unter der Leiste haengt.

   Jetzt waechst die Leiste selbst. Unter der Zeile mit Logo und
   Navigation liegt ein zweiter Streifen (.wa-mega), der von 0 auf die
   Hoehe des Panels faehrt. Zuerst wird eine Trennlinie von links nach
   rechts gezogen, danach laufen die Unterpunkte in derselben Richtung
   nach. Das gilt in beiden Zustaenden, oben wie in der Insel.

   Aufbau im Markup (gesetzt von initMegaMenu() in der refresh.js):

     .header_bottom
       .container > .container_inner   (die bestehende Zeile)
       .wa-mega
         .wa-mega-rule                 (die Trennlinie)
         .container > .container_inner (Kopie des Rasters)
           .wa-mega-panel je Oberpunkt
             ul.wa-mega-list > li.wa-mega-item

   Die Kopie der Rasterkaesten ist Absicht: Abschnitt 14 formt
   .header_bottom .container und .container_inner bereits mit (Breite
   1300 oben, 1180 in der Insel, seitlicher Abstand). Dadurch stehen die
   Unterpunkte ohne eigene Breitenrechnung genau unter der Navigation
   und laufen bei der Verwandlung im selben Takt mit.
   ===================================================================== */
:root{
  --wa-mega-dauer:420ms;
  --wa-mega-h:0px;
}

/* Die Leiste ist nicht mehr selbst der Hoehenanker, sonst passte der
   zweite Streifen nicht hinein. Die feste Zeilenhoehe sitzt jetzt an
   ihrem direkten Kind .container, die Leiste waechst mit dem Inhalt.
   Alles darin haengt weiter mit height:100% an .container und folgt
   dadurch von selbst. */
@media only screen and (min-width:1001px){
  body.wa-header-fixed header.page_header .header_bottom,
  body.wa-header-fixed.wa-header-floating header.page_header .header_bottom{
    height:auto !important;
    min-height:0 !important;
  }
  /* Dieselbe Auszeichnung wie in Abschnitt 14, dort steht fuer .container
     sowohl height:100% als auch der Uebergang fuer max-width. Beides muss
     hier mitgeschrieben werden, weil eine zweite transition-Angabe die
     erste vollstaendig ersetzt. */
  body.wa-header-fixed header.page_header .header_bottom > .container{
    height:var(--wa-header-h) !important;
    transition:height var(--wa-morph-dauer) var(--wa-morph-kurve),
               max-width var(--wa-morph-dauer) var(--wa-morph-kurve) !important;
  }
  body.wa-header-fixed.wa-header-floating header.page_header .header_bottom > .container{
    height:var(--wa-header-h-float) !important;
  }
}

/* --- Der aufklappende Streifen --- */
.wa-mega{
  height:0;
  overflow:hidden;
  position:relative;
  transition:height var(--wa-mega-dauer) var(--wa-morph-kurve);
  width:100%;
  will-change:height;
}
/* Die Linie liegt ueber die volle Breite der Leiste, nicht nur ueber dem
   Raster. In der Insel laeuft sie damit von Rand zu Rand. */
.wa-mega-rule{
  background:rgba(40,57,91,.14);
  display:block;
  height:1px;
  left:0;
  position:absolute;
  right:0;
  top:0;
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform 360ms var(--wa-morph-kurve);
}
body.wa-mega-is-open .wa-mega-rule{transform:scaleX(1)}

.wa-mega .container_inner{position:relative}
/* Der seitliche Abstand steht am Panel, nicht am Rasterkasten: ein
   absolut liegendes Kind richtet sich am Polsterkasten seines Elters
   aus und ueberspringt dessen padding. Mit inherit uebernimmt es genau
   den Wert, den Abschnitt 14 dem Rasterkasten gibt (oben 0, in der
   Insel 26px), ohne dass er hier ein zweites Mal stehen muss. */
.wa-mega-panel{
  box-sizing:border-box;
  left:0;
  opacity:0;
  padding-bottom:16px;
  padding-left:inherit;
  padding-right:inherit;
  padding-top:12px;
  pointer-events:none;
  position:absolute;
  right:0;
  top:0;
  transition:opacity 200ms var(--wa-ease),
             padding-left var(--wa-morph-dauer) var(--wa-morph-kurve),
             padding-right var(--wa-morph-dauer) var(--wa-morph-kurve);
  visibility:hidden;
}
/* visibility statt display: nur so laesst sich die Hoehe des Panels im
   Voraus messen, und daraus kommt die Zielhoehe des Streifens. */
.wa-mega-panel.is-active{
  opacity:1;
  pointer-events:auto;
  visibility:visible;
}

/* Eine Zeile, die den Platz von links nach rechts ausfuellt: auto-breite
   Spalten, der Rest verteilt sich gleichmaessig dazwischen. Wie viele
   Spalten hineinpassen rechnet layoutPanel() in der refresh.js aus und
   gibt es als --wa-mega-cols herein. Der Spaltenabstand hier und
   MEGA_GAP im Skript muessen denselben Wert haben. */
.wa-mega-list{
  align-items:center;
  column-gap:26px;
  display:grid;
  grid-template-columns:repeat(var(--wa-mega-cols,4),auto);
  justify-content:space-between;
  list-style:none !important;
  margin:0 !important;
  padding:0 !important;
  row-gap:8px;
}
/* Kurze Liste (von layoutPanel() gesetzt): dicht beieinander, rechtsbuendig */
.wa-mega-list.is-sparse{
  column-gap:40px;
  justify-content:end;
}
.wa-mega-item{
  justify-self:start;
  list-style:none !important;
  margin:0 !important;
  opacity:0;
  padding:0 !important;
  transform:translateY(9px);
  transition:opacity 240ms var(--wa-ease),transform 240ms var(--wa-ease);
}
/* Was nicht in die Zeile passt, faellt aus dem Raster. display:none ist
   noetig, sonst belegt es weiter eine Zelle. */
.wa-mega-item.is-hidden{display:none !important}
/* Beim Ausklappen kommen Eintraege aus display:none zurueck. Ohne
   Startwert gaebe es nichts zu ueberblenden, deshalb setzt das Skript
   diese Klasse, erzwingt einen Umbruch und nimmt sie wieder weg. */
.wa-mega-item.wa-mega-enter{
  opacity:0 !important;
  transform:translateY(9px) !important;
}
/* Von links nach rechts: der Versatz haengt an der Reihenfolge im
   Raster, die das Skript als --wa-mega-i mitgibt. */
.wa-mega-panel.is-active .wa-mega-item{
  opacity:1;
  transform:none;
  transition-delay:calc(90ms + var(--wa-mega-i,0) * 30ms);
}
/* Schrift wie in der Kopfzeile: gleiche Familie, Groesse, Laufweite und
   Strichstaerke. Nur der Grauton ist dunkler als die 170er der
   Kopfzeile, der laege bei einer Liste aus zwoelf Zielen unter 4,5:1. */
.wa-mega-item > a,
.wa-mega-more button{
  color:#6f7480 !important;
  font-family:var(--wa-font-display);
  font-size:15px;
  font-weight:400 !important;
  letter-spacing:.2px;
  line-height:1.4;
  white-space:nowrap;
}
.wa-mega-item > a{
  display:inline-block;
  padding:4px 0 !important;
  text-decoration:none !important;
  transition:color 180ms ease-out;
}
.wa-mega-item > a:hover,
.wa-mega-item > a:focus-visible{
  color:var(--wa-navy) !important;
  text-decoration:underline !important;
}
.wa-mega-item > a:focus-visible{outline:2px solid var(--wa-navy);outline-offset:3px}

/* Die Oberseite ist ueber den Menuepunkt nicht mehr erreichbar, ein
   Klick darauf klappt jetzt auf. Deshalb steht sie als erster Eintrag
   im Panel. Sie bleibt eine Textzeile wie die uebrigen, nur fett und
   einen Schritt dunkler Richtung Marineblau. */
.wa-mega-overview > a{
  color:#4d5872 !important;
  font-weight:600 !important;
}

/* Passt nicht alles in eine Zeile, steht hier ganz rechts der Schalter
   fuer den Rest. */
.wa-mega-more[hidden]{display:none !important}
.wa-mega-more button{
  align-items:center;
  background:none;
  border:0;
  cursor:pointer;
  display:inline-flex;
  gap:7px;
  padding:4px 0;
  transition:color 180ms ease-out;
}
.wa-mega-more button:hover,
.wa-mega-more button:focus-visible{
  color:var(--wa-navy) !important;
  text-decoration:underline;
}
.wa-mega-more button:focus-visible{outline:2px solid var(--wa-navy);outline-offset:3px}
.wa-mega-more button::after{
  border-bottom:1.7px solid currentColor;
  border-right:1.7px solid currentColor;
  box-sizing:border-box;
  content:"";
  height:6px;
  transform:translateY(-2px) rotate(45deg);
  transition:transform 300ms var(--wa-ease);
  width:6px;
}
.wa-mega-more.is-expanded button::after{transform:translateY(1px) rotate(-135deg)}

/* --- Pfeil am Menuepunkt --- */
@media only screen and (min-width:1001px){
  header nav.main_menu > ul > li.wa-has-mega > a{position:relative !important}
  /* Bridge liefert fuer jeden Punkt ein leeres span.plus mit. Daraus
     wird der Pfeil, es muss also nichts ins Markup. */
  header nav.main_menu > ul > li.wa-has-mega > a .plus{
    border-bottom:1.7px solid currentColor;
    border-right:1.7px solid currentColor;
    box-sizing:border-box;
    display:block !important;
    flex:0 0 auto;
    height:6px;
    margin:0 0 0 8px;
    padding:0 !important;
    transform:translateY(-2px) rotate(45deg);
    transition:transform 300ms var(--wa-ease);
    width:6px;
  }
  header nav.main_menu > ul > li.wa-has-mega.wa-mega-open > a .plus{
    transform:translateY(1px) rotate(-135deg);
  }
  /* Marke unter dem offenen Punkt, sie sitzt genau auf der Trennlinie */
  header nav.main_menu > ul > li.wa-has-mega > a::after{
    background:var(--wa-navy);
    bottom:0;
    content:"";
    height:2px;
    left:0;
    opacity:0;
    position:absolute;
    right:0;
    transform:scaleX(.35);
    transition:opacity 200ms var(--wa-ease),transform 320ms var(--wa-ease);
  }
  header nav.main_menu > ul > li.wa-has-mega.wa-mega-open > a::after{
    opacity:1;
    transform:scaleX(1);
  }

  /* Bridges eigenes Aufklappfeld bleibt im Quelltext, wird aber nicht
     mehr gezeigt. Die Unterpunkte stehen jetzt im Streifen. */
  header nav.main_menu li .second{display:none !important}
}

/* Auf schmalen Desktops wird es in der Zeile eng. Schon vorher lagen
   Wortmarke und erster Menuepunkt dort uebereinander, der Pfeil an den
   drei Aufklapp-Punkten kostet weitere Breite. Deshalb in diesem Band
   engere Menuepunkte und eine kleinere Wortmarke. */
@media only screen and (min-width:1001px) and (max-width:1240px){
  header nav.main_menu > ul > li > a{
    padding-left:13px !important;
    padding-right:13px !important;
  }
  header nav.main_menu > ul > li:last-child{margin-left:10px !important}
  header nav.main_menu > ul > li:last-child > a,
  body.wa-header-fixed header.page_header nav.main_menu > ul > li:last-child > a{
    padding-left:15px !important;
    padding-right:15px !important;
  }
  header .q_logo .wa-wordmark{
    height:24px !important;
    max-height:24px !important;
  }
}

/* Oben ohne Insel fehlt der Rand, der den Streifen vom Inhalt trennt.
   Ein weicher Schatten uebernimmt das, solange aufgeklappt ist. */
body.wa-header-fixed.wa-mega-is-open:not(.wa-header-floating) header.page_header .header_bottom{
  box-shadow:var(--wa-shadow-lg) !important;
}

/* Der News-Banner haengt an der Unterkante der Leiste. Waechst sie,
   rutscht er um dieselbe Strecke nach. Bewusst ueber transform statt
   ueber top: top traegt aus Abschnitt 14 bereits den langsameren Takt
   der Verwandlung, der Streifen laeuft schneller. */
@media only screen and (min-width:1001px){
  body.wa-header-fixed .wa-news-banner{
    transform:translateY(var(--wa-mega-h,0px));
    transition:top var(--wa-morph-dauer) var(--wa-morph-kurve),
               max-width var(--wa-morph-dauer) var(--wa-morph-kurve),
               border-radius var(--wa-morph-dauer) var(--wa-morph-kurve),
               transform var(--wa-mega-dauer) var(--wa-morph-kurve);
  }
}

/* Unterhalb von 1001px laeuft die Navigation ueber die Leiste am
   unteren Bildschirmrand, die Hauptnavigation ist dort ausgeblendet. */
@media only screen and (max-width:1000px){
  .wa-mega{display:none !important}
}

@media (prefers-reduced-motion:reduce){
  .wa-mega,
  .wa-mega-rule,
  .wa-mega-panel,
  .wa-mega-item,
  .wa-mega-more button::after,
  header nav.main_menu > ul > li.wa-has-mega > a .plus,
  header nav.main_menu > ul > li.wa-has-mega > a::after{
    transition:none !important;
  }
  .wa-mega-panel.is-active .wa-mega-item{transition-delay:0s !important}
}



/* =====================================================================
   30. Hinweis auf "Dein Weg zu uns" auf der Startseite
   Die Sektion war ein weisser Kasten mit Foto links und einer Wand aus
   mittig gesetztem Fliesstext rechts. Der Text bestand fast nur aus
   Fragen und beantwortete keine davon.

   Jetzt ist es ein schmaler Hinweis: kleines Foto, Ueberschrift, ein
   Satz, Knopf. Die Einladung steht in wa_refresh_dual_texts() in der
   functions.php, die Zielseite ist /dein-weg-zu-uns/ mit dem
   Kontaktformular.

   Der Abschnitt ist bewusst halb so hoch wie die anderen und liegt
   flach auf dem getoenten Wechselstreifen: darueber steht schon das
   blaue Band fuer Unternehmen, zwei gleich laute Aufrufe hintereinander
   waeren einer zu viel.

   Die Klasse setzt tagSections() in der refresh.js. Die Reihe enthaelt
   einen kleinen Button und galt vorher als Teaser, daher die weisse
   Kartenflaeche quer ueber die Sektion.
   ===================================================================== */
.wa-dual-section{
  --wa-dual-bild:clamp(132px,16vw,196px);
  text-align:left !important;
}
/* Marineblaues Band, derselbe Verlauf wie die beiden Baender in
   Abschnitt 16.1. Grund und Innenabstand brauchen die zweite Klasse:
   die Reihe traegt aus dem Page Builder eigenes Weiss und eigene
   Innenabstaende mit !important, und dessen Stylesheet steht im Kopf
   der Seite nach diesem hier. */
.vc_row.wa-dual-section{
  background:linear-gradient(160deg,var(--wa-band) 0%,var(--wa-band-tief) 100%) !important;
  background-color:var(--wa-band) !important;
  padding-bottom:0 !important;
  padding-top:0 !important;
}
/* Der Abstand steht am inneren Kasten, wie bei allen Reihen in
   Abschnitt 15.1, nur knapper: dieser Abschnitt ist ein Hinweis und
   kein eigener Auftritt. Am Rand selbst steht er auf 0, sonst kaeme der
   Abstand des Page Builders (75 und 89 Pixel) noch dazu. */
.full_width_inner > .vc_row.wa-dual-section > .section_inner{
  padding-bottom:clamp(30px,3.8vw,54px);
  padding-top:clamp(30px,3.8vw,54px);
}

/* Der Takt kommt aus dem Stylesheet, nicht aus den Leerraum-Elementen
   des Page Builders. Unter dem Foto steht ausserdem ein leeres
   Textfeld, das sonst Abstand nach unten aufreisst. */
.wa-dual-section .vc_empty_space{display:none !important}
.wa-dual-section .q_elements_item:first-child .wpb_text_column{display:none !important}

/* Die Textspalte trug zusaetzlich zum seitlichen Abstand aus Abschnitt 3
   noch 5 Prozent Innenabstand aus dem Page Builder. */
.wa-dual-section .q_elements_item_content{
  padding-left:0 !important;
  padding-right:0 !important;
}

/* ---------------------------------------------------------------------
   30.1 Eine Zeile: Foto, Text
   Bridge stellt den Halter als Tabelle mit zwei gleich breiten Zellen.
   Das Foto ist hier nur noch Beigabe und bekommt eine feste Breite, den
   Rest nimmt der Text. Unterhalb von 769px stapelt Bridge von sich aus
   (responsive_mode_from_768).
   --------------------------------------------------------------------- */
@media only screen and (min-width:769px){
  .wa-dual-section .q_elements_holder{
    align-items:center !important;
    display:grid !important;
    gap:clamp(22px,3vw,46px) !important;
    grid-template-columns:var(--wa-dual-bild) minmax(0,1fr) !important;
  }
  /* Bridge gibt den Zellen width:50%. In der Tabelle war das die halbe
     Breite des Halters, im Raster die Haelfte der Spalte. */
  .wa-dual-section .q_elements_item{
    display:block !important;
    vertical-align:middle !important;
    width:100% !important;
  }
}

/* ---------------------------------------------------------------------
   30.2 Foto
   Quadratisch beschnitten, damit es neben drei Zeilen Text nicht als
   breiter Streifen liegt. Der Ausschnitt sitzt etwas ueber der Mitte,
   dort stehen die Absolventen.
   --------------------------------------------------------------------- */
.wa-dual-section .wpb_single_image,
.wa-dual-section .wpb_single_image .wpb_wrapper{
  display:block !important;
  margin:0 !important;
}
/* Rundung und Schatten sitzen am Rahmen, nicht am Bild: das Bild steht
   darin vergroessert (siehe unten) und wuerde seine eigenen Ecken
   ueber den Rahmen hinausschieben. */
.wa-dual-section .vc_single_image-wrapper{
  border-radius:var(--wa-radius) !important;
  display:block !important;
  margin:0 !important;
  overflow:hidden !important;
}
/* Das Motiv ist bewusst eine Nahaufnahme (wa-publikum.jpg, Zuordnung in
   der functions.php): eine weite Szene waere in einem 164 Pixel breiten
   Quadrat nur noch Struktur. Der Ausschnitt sitzt links der Mitte, dort
   stehen die Gesichter.

   Das Quadrat steht am Bild selbst und nicht als aspect-ratio am Rahmen
   mit height:100% am Bild. Safari loest die Prozenthoehe gegen die
   abgeleitete Hoehe des Rahmens falsch auf, auf dem iPhone stand dann
   nur ein vergroesserter, unscharfer Ausschnitt vom Banner im Rahmen. */
.wa-dual-section .vc_single_image-wrapper img{
  aspect-ratio:1 / 1;
  border-radius:0 !important;
  box-shadow:none !important;
  display:block !important;
  height:auto !important;
  max-width:100% !important;
  object-fit:cover;
  object-position:44% 46%;
  width:100% !important;
}

/* ---------------------------------------------------------------------
   30.3 Ueberschrift, Satz, Knopf
   --------------------------------------------------------------------- */
/* Kleiner als die Ueberschriften der grossen Abschnitte: dieser ist
   keiner. Ohne Silbentrennung, sonst stand auf dem Telefon
   "Dein duales Studi-um an der WelfenAkademie". */
.wa-dual-section .wpb_text_column h2,
.wa-dual-section .wpb_text_column h2 span{
  color:var(--wa-auf-blau) !important;
  font-size:clamp(20px,.85vw + 15.5px,27px) !important;
  hyphens:none !important;
  line-height:1.22 !important;
  text-align:left !important;
  text-shadow:none !important;
}
.wa-dual-section .wpb_text_column h2{
  margin:0 0 10px !important;
}
/* Die Marke aus Abschnitt 16.4 wird mit der Ueberschrift kleiner */
.full_width_inner > .vc_row.wa-dual-section .wpb_text_column h2:first-child:before{
  height:3px;
  margin-bottom:13px;
  width:40px;
}

/* Der Satz darf nicht ueber die ganze Zeile laufen, sonst liest er sich
   wie eine Zeile Kleingedrucktes. Der Selektor nennt .full_width_inner
   und das p mit, sonst gewinnt Abschnitt 3 mit
   .wpb_text_column p:last-child{margin-bottom:0}. */
.full_width_inner .wa-dual-section p.wa-dual-lead{
  color:var(--wa-auf-blau-leise) !important;
  hyphens:none !important;
  margin:0 0 clamp(18px,1.8vw,26px) !important;
  max-width:66ch;
  text-align:left !important;
  text-align-last:auto !important;
}

/* Der Knopf stand mittig unter der Textwand. Jetzt linksbuendig, und
   zwar buendig mit dem Text: den seitlichen Abstand der Textspalten aus
   Abschnitt 3 traegt er nicht von sich aus.

   Auf blauem Grund weiss gefuellt, rot beim Ueberfahren, genau wie die
   Knoepfe in den Baendern in Abschnitt 16.1 und 16.2. Deren Regeln
   greifen hier nicht: sie haengen an .full_width_inner > section, das
   hier ist eine .vc_row. Rot gefuellt waere der Knopf ausserdem kaum
   vom Grund zu unterscheiden, Rot auf Marineblau kommt nur auf 3,2:1.
   Das Pfeilsymbol traegt im Page Builder ein eigenes Rot als
   Inline-Style, das muss mit umgestellt werden. */
.wa-dual-section .wa-read-more-button.qbutton,
.wa-dual-section .wa-read-more-button.qbutton.small{
  background:#fff !important;
  background-color:#fff !important;
  border-color:#fff !important;
  color:var(--wa-band) !important;
  margin-left:var(--wa-gutter) !important;
  margin-right:auto !important;
}
.wa-dual-section .wa-read-more-button.qbutton .qode_button_icon_element{
  color:var(--wa-band) !important;
}
.wa-dual-section .wa-read-more-button.qbutton:hover,
.wa-dual-section .wa-read-more-button.qbutton:focus,
.wa-dual-section .wa-read-more-button.qbutton.small:hover,
.wa-dual-section .wa-read-more-button.qbutton.small:focus{
  background:var(--wa-red) !important;
  background-color:var(--wa-red) !important;
  border-color:var(--wa-red) !important;
  color:#fff !important;
}
.wa-dual-section .wa-read-more-button.qbutton:hover .qode_button_icon_element,
.wa-dual-section .wa-read-more-button.qbutton:focus .qode_button_icon_element{
  color:#fff !important;
}
/* Der Fokusrahmen aus Abschnitt 15.3 ist marineblau und waere auf dem
   Band nicht zu sehen. */
.wa-dual-section a:focus-visible{
  outline-color:rgba(255,255,255,.85) !important;
}

/* ---------------------------------------------------------------------
   30.4 Schmale Schirme
   Abschnitt 11 setzt Ueberschriften bis 1000px mittig und den
   Fliesstext im Blocksatz. Hier bleibt alles an der linken Kante, und
   der Knopf braucht denselben seitlichen Abstand, den die Textspalten
   dort bekommen.

   Bis 768px gilt ein eigenes Layout, siehe 30.5.
   --------------------------------------------------------------------- */
@media only screen and (max-width:1000px){
  .wa-dual-section .wpb_text_column h2,
  .wa-dual-section .wpb_text_column p{
    text-align:left !important;
    text-align-last:auto !important;
  }
  .full_width_inner > .vc_row.wa-dual-section .wpb_text_column h2:first-child:before{
    margin-left:0 !important;
    margin-right:0 !important;
  }
  .wa-dual-section .wa-read-more-button.qbutton,
  .wa-dual-section .wa-read-more-button.qbutton.small{
    margin-left:var(--wa-gutter-mobile) !important;
  }
}

/* ---------------------------------------------------------------------
   30.5 Telefon und kleines Tablet
   Bridge stapelte hier Foto und Text und liess dem Ganzen die feste
   Stufenbreite des grid_section (300 Pixel unter 480px). Mit Spalten-
   und Textabstand blieb fuer den Satz kaum mehr als die halbe Breite,
   darueber hing das Foto als einsames Quadrat.

   Jetzt: Kasten fluide ueber die volle Breite, Rand nur aus
   --wa-gutter-mobile. Foto und Ueberschrift stehen nebeneinander in der
   ersten Zeile, Satz und Knopf laufen darunter ueber die ganze Breite.
   Dafuer loesen sich Bridges Zellen per display:contents auf, die
   Bausteine darin werden direkt zu Kindern des Rasters. Die 40px
   Abstand, die Bridge per Skript an die Zelle haengt
   (data-480 und Geschwister), fallen damit von selbst weg.
   --------------------------------------------------------------------- */
@media only screen and (max-width:768px){
  .wa-dual-section{
    --wa-dual-bild:clamp(76px,23vw,112px);
  }
  /* Bridge zieht die Reihe auf beiden Seiten 15px ueber den Rand, der
     Text stand dann 15px zu weit links. */
  .full_width_inner > .vc_row.wa-dual-section{
    margin-left:0 !important;
    margin-right:0 !important;
  }
  .full_width_inner > .vc_row.wa-dual-section > .section_inner{
    box-sizing:border-box;
    margin-left:0 !important;
    margin-right:0 !important;
    padding:clamp(38px,10vw,56px) var(--wa-gutter-mobile) !important;
    width:auto !important;
  }
  .wa-dual-section .section_inner_margin{
    margin-left:0 !important;
    margin-right:0 !important;
  }
  .wa-dual-section .vc_column-inner{
    padding-left:0 !important;
    padding-right:0 !important;
  }

  .wa-dual-section .q_elements_holder{
    align-items:center !important;
    column-gap:clamp(16px,4.5vw,24px) !important;
    display:grid !important;
    grid-template-columns:var(--wa-dual-bild) minmax(0,1fr) !important;
    margin-left:auto !important;
    margin-right:auto !important;
    max-width:560px;
    width:100% !important;
  }
  .wa-dual-section .q_elements_item,
  .wa-dual-section .q_elements_item_inner,
  .wa-dual-section .q_elements_item_content{
    display:contents !important;
  }

  .wa-dual-section .wpb_single_image{
    grid-column:1;
    grid-row:1;
    padding:0 !important;
  }
  .wa-dual-section .wpb_single_image .wpb_wrapper{
    max-width:none !important;
  }

  /* Abschnitt 11 gibt den Textspalten bis 1000px seitlichen Abstand.
     Den Rand stellt hier schon der Kasten. */
  .full_width_inner .wa-dual-section .wpb_text_column{
    padding-left:0 !important;
    padding-right:0 !important;
  }
  .wa-dual-section .q_elements_item:last-child .wpb_text_column:not(.wa-dual-text){
    grid-column:2;
    grid-row:1;
  }
  .wa-dual-section .wpb_text_column h2,
  .wa-dual-section .wpb_text_column h2 span{
    font-size:clamp(19px,2.4vw + 11px,24px) !important;
  }
  .wa-dual-section .wpb_text_column h2{
    margin:0 !important;
  }
  .full_width_inner > .vc_row.wa-dual-section .wpb_text_column h2:first-child:before{
    margin-bottom:11px;
    width:32px;
  }

  .wa-dual-section .wa-dual-text{
    grid-column:1 / -1;
    grid-row:2;
    margin-top:clamp(20px,5.5vw,28px) !important;
  }
  .full_width_inner .wa-dual-section p.wa-dual-lead{
    hyphens:manual !important;
    margin-bottom:clamp(22px,6vw,30px) !important;
    max-width:none;
  }

  .wa-dual-section .wa-read-more-button.qbutton,
  .wa-dual-section .wa-read-more-button.qbutton.small{
    grid-column:1 / -1;
    grid-row:3;
    justify-self:start;
    margin-left:0 !important;
  }
}

/* =====================================================================
   31. Seite /dein-weg-zu-uns/
   Der Inhalt aus dem Page Builder wird beim Ausliefern verworfen, die
   Seite kommt komplett aus wa_kontakt_seite() in der functions.php:
   oben Kopf, Zielgruppen und Angebot, darunter das Kontaktformular, am
   Ende der Ablauf. Die Pruefung im Browser
   macht initKontaktForm() in der refresh.js, verschickt wird in PHP.

   Die Mittel kommen von der Startseite: die rote Marke ueber der
   Ueberschrift (16.4), die Gebaeudeskizze als Grund (24), der getoente
   Streifen (2), Rundungen aus Abschnitt 15, runde Knoepfe (15.3).

   Rot bleibt Marke und Hover. Der Absendeknopf ist Marineblau und wird
   beim Ueberfahren rot: Weiss auf --wa-red kommt nur auf 3,35:1, Weiss
   auf Marineblau auf 10:1.
   ===================================================================== */

/* ---------------------------------------------------------------------
   31.1 Breite der Seite
   Bridge gibt Unterseiten eine feste Spaltenbreite in Stufen (1300,
   950, 768, 600, 420, 300 Pixel), auf dem Telefon bleiben davon 300
   Pixel. Fuer ein Formular zu schmal. Hier laeuft die Spalte fluide mit
   und nimmt seitlich --wa-gutter wie die Startseite. Die Hoechstbreite
   ist so gerechnet, dass der Inhalt bei 1300 Pixeln buendig unter dem
   Logo steht.

   Der lange Selektor ist noetig, das Theme setzt den Innenabstand
   dieses Kastens mit demselben Gewicht. Erkannt wird die Seite per
   :has() und nicht an der Seiten-ID, die ist lokal und live nicht
   dieselbe.
   --------------------------------------------------------------------- */
.content .container .container_inner.page_container_inner:has(.wa-kontakt){
  box-sizing:border-box;
  margin-left:auto;
  margin-right:auto;
  max-width:calc(1300px + 2 * var(--wa-gutter));
  padding:0 var(--wa-gutter);
  width:100%;
}
/* Bridge legt unter Unterseiten ein helles Grau. Der Kopf steht auf
   Weiss, sonst saesse er als Kasten auf der Flaeche. */
.content .container:has(.wa-kontakt){
  background-color:var(--wa-section-white) !important;
}

/* ---------------------------------------------------------------------
   31.2 Grundlagen
   --------------------------------------------------------------------- */
.wa-kontakt{
  /* Fliesstext. Das Grau des Themes (#797979) liegt unter 4,5:1, der
     Ton ist derselbe wie ueber der Skizze auf der Startseite (24). */
  --wa-kontakt-ink:color-mix(in srgb,var(--wa-navy) 82%,#ffffff);
  --wa-kontakt-leise:#55596a;
  --wa-kontakt-rand:rgba(40,57,91,.24);
  --wa-kontakt-fehler:var(--wa-red-press);

  padding:0 0 clamp(56px,6vw,104px);
  text-align:left;
}
.wa-kontakt p{
  color:var(--wa-kontakt-ink);
  margin:0;
}
.wa-kontakt h1,
.wa-kontakt h2{
  color:var(--wa-navy-deep);
  font-family:var(--wa-font-display);
  hyphens:none;
}

/* Die rote Marke wie in Abschnitt 16.4 */
.wa-kontakt-kopf-text:before,
.wa-kontakt-formular-kopf h2:before{
  background:var(--wa-red);
  border-radius:2px;
  content:"";
  display:block;
  height:4px;
  margin:0 0 20px;
  width:52px;
}

/* Der Sprungpunkt liegt sonst hinter der festen Kopfleiste. Ueber
   1000px sind das Insel (68px) und News-Banner (39px), darunter scrollt
   der Kopfbereich mit weg. */
.wa-kontakt #kontaktformular{scroll-margin-top:24px}
@media only screen and (min-width:1001px){
  .wa-kontakt #kontaktformular{scroll-margin-top:128px}
}

/* ---------------------------------------------------------------------
   31.3 Kopf
   Hinter dem Text haengt die Skizze des Akademiegebaeudes oben rechts,
   in der Hoehe fest begrenzt. Ein weisser Schleier deckt sie links ganz
   und daemmt sie rechts, damit die Textspalte frei bleibt. Unter 769px
   ist sie aus.

   Den Platz fuer den News-Banner haelt Abschnitt 7 schon an .content
   frei, fuer alle Seiten.
   --------------------------------------------------------------------- */
.wa-kontakt-kopf{
  padding:clamp(38px,4.4vw,72px) 0 clamp(40px,4.4vw,72px);
  position:relative;
}
@media only screen and (min-width:769px){
  .wa-kontakt-kopf{
    background-image:
      linear-gradient(to right,
        #ffffff 0%,
        #ffffff 42%,
        color-mix(in srgb,#ffffff 84%,transparent) 64%,
        color-mix(in srgb,#ffffff 84%,transparent) 100%),
      url('img/welfenakademie-gebaeude.svg');
    background-position:center, right 0 top 18px;
    background-repeat:no-repeat, no-repeat;
    background-size:100% 100%, auto clamp(240px,26vw,380px);
  }
}

.wa-kontakt-kopf-text{
  max-width:min(100%,40em);
  position:relative;
}
.wa-kontakt .wa-kontakt-zeile{
  color:var(--wa-navy);
  font-family:var(--wa-font-display) !important;
  font-size:15px;
  font-weight:500;
  line-height:1.3;
  margin:0 0 clamp(10px,1vw,14px);
}
.wa-kontakt h1{
  font-size:clamp(34px,2.6vw + 18px,56px);
  font-weight:400;
  margin:0 0 clamp(18px,1.6vw,28px);
}
.wa-kontakt .wa-kontakt-lead{
  font-size:clamp(17px,.5vw + 15px,20px);
  line-height:1.7;
}
.wa-kontakt .wa-kontakt-lead + .wa-kontakt-lead{margin-top:.8em}
/* Der zweite Satz ist die eigentliche Aufforderung */
.wa-kontakt .wa-kontakt-lead-aufruf{
  color:var(--wa-navy);
  font-weight:600;
}

/* ---------------------------------------------------------------------
   31.4 Formularabschnitt
   Getoenter Block mit Rundung wie die Karten aus Abschnitt 15. Ab
   1001px links Ueberschrift und Satz, rechts das Formular, darunter
   gestapelt. Auf dem Telefon laeuft der Block bis an die Kanten.
   --------------------------------------------------------------------- */
.wa-kontakt-formular{
  background:var(--wa-section-gray);
  border-radius:var(--wa-radius);
  box-sizing:border-box;
  display:grid;
  gap:clamp(24px,3vw,56px);
  padding:clamp(28px,4vw,64px);
}
@media only screen and (min-width:1001px){
  .wa-kontakt-formular{
    align-items:start;
    grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);
  }
}
@media only screen and (max-width:600px){
  .wa-kontakt-formular{
    border-radius:0;
    margin-left:calc(-1 * var(--wa-gutter));
    margin-right:calc(-1 * var(--wa-gutter));
    padding:clamp(30px,8vw,40px) var(--wa-gutter);
  }
}

.wa-kontakt h2{
  font-size:clamp(26px,1.4vw + 18px,38px);
  font-weight:400;
  line-height:1.2;
  margin:0 0 12px;
}
.wa-kontakt-formular-kopf p{
  font-size:var(--wa-body-size);
  line-height:1.7;
  max-width:34ch;
}

/* ---------------------------------------------------------------------
   31.5 Felder
   Beschriftung ueber dem Feld, Felder weiss mit feiner Kante. 16px
   Schrift in den Feldern, sonst zoomt iOS beim Antippen. Ab 769px
   stehen Name und E-Mail sowie Telefon und Firma paarweise, Auswahl
   und Nachricht ueber die ganze Breite.

   Die Regeln fuer die Felder tragen !important: Bridge setzt Rahmen,
   Hoehe und Hintergrund fuer alle Eingabefelder mit demselben Gewicht.
   --------------------------------------------------------------------- */
.wa-kontakt-felder{
  display:grid;
  gap:20px 18px;
}
@media only screen and (min-width:769px){
  .wa-kontakt-felder{grid-template-columns:repeat(2,minmax(0,1fr))}
  .wa-kontakt-felder .wa-feld-breit{grid-column:1 / -1}
}

.wa-kontakt .wa-feld label:not(.wa-kontakt-zustimmung){
  align-items:baseline;
  color:var(--wa-navy);
  display:flex;
  font-family:var(--wa-font-display) !important;
  font-size:15px;
  font-weight:500;
  gap:8px;
  line-height:1.3;
  margin:0 0 8px;
}
.wa-kontakt .wa-feld-optional{
  color:var(--wa-kontakt-leise);
  font-family:var(--wa-font-body) !important;
  font-size:13px;
  font-weight:400;
}

.wa-kontakt-form input[type="text"],
.wa-kontakt-form input[type="email"],
.wa-kontakt-form input[type="tel"],
.wa-kontakt-form select,
.wa-kontakt-form textarea{
  -webkit-appearance:none;
  appearance:none;
  background-color:#fff !important;
  border:1px solid var(--wa-kontakt-rand) !important;
  border-radius:10px !important;
  box-shadow:none !important;
  box-sizing:border-box !important;
  color:var(--wa-ink) !important;
  display:block;
  font-family:var(--wa-font-body) !important;
  font-size:16px !important;
  height:52px !important;
  line-height:1.4 !important;
  margin:0 !important;
  max-width:100% !important;
  padding:0 16px !important;
  transition:border-color .2s var(--wa-ease),box-shadow .2s var(--wa-ease);
  width:100% !important;
}
.wa-kontakt-form textarea{
  height:auto !important;
  min-height:140px !important;
  padding:14px 16px !important;
  resize:vertical;
}
.wa-kontakt-form input:hover,
.wa-kontakt-form select:hover,
.wa-kontakt-form textarea:hover{
  border-color:color-mix(in srgb,var(--wa-navy) 55%,#ffffff) !important;
}
/* Der Rahmen aus 15.3 wuerde am runden Feld eckig abstehen. Stattdessen
   ein Ring in derselben Form. */
.wa-kontakt-form input:focus,
.wa-kontakt-form select:focus,
.wa-kontakt-form textarea:focus{
  border-color:var(--wa-navy) !important;
  box-shadow:0 0 0 3px rgba(40,57,91,.18) !important;
  outline:0 !important;
}
.wa-kontakt-form ::placeholder{color:#767b88;opacity:1}

/* Bridge nimmt den Auswahlfeldern das Aussehen des Systems, liefert
   aber kein eigenes Zeichen. Ohne Pfeil sieht ein Auswahlfeld aus wie
   ein Textfeld. Solange nichts gewaehlt ist, steht "Bitte auswaehlen"
   in Platzhaltergrau. */
.wa-kontakt-form select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='8'%3E%3Cpath d='M1 1.5 6.5 7l5.5-5.5' fill='none' stroke='%2328395b' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-position:right 18px center !important;
  background-repeat:no-repeat !important;
  cursor:pointer;
  padding-right:46px !important;
}
.wa-kontakt-form select:has(option[value=""]:checked){color:#767b88 !important}
.wa-kontakt-form select option{color:var(--wa-ink)}

.wa-kontakt .wa-feld-hilfe{
  color:var(--wa-kontakt-leise);
  font-size:13.5px;
  line-height:1.5;
  margin-top:8px;
}

/* Fehler: Kante und Zeile in dunklem Rot. Die helle CD-Farbe kaeme als
   Schrift auf dem grauen Grund nur auf 3,2:1. */
.wa-kontakt .wa-feld-meldung{
  color:var(--wa-kontakt-fehler);
  font-size:13.5px;
  font-weight:600;
  line-height:1.45;
  margin-top:7px;
}
.wa-kontakt .wa-feld-fehlerhaft input,
.wa-kontakt .wa-feld-fehlerhaft select,
.wa-kontakt .wa-feld-fehlerhaft textarea{
  border-color:var(--wa-kontakt-fehler) !important;
}

/* Sammelhinweis ueber den Feldern, wenn der Server etwas zurueckweist */
.wa-kontakt .wa-kontakt-hinweis{
  background:#fff;
  border-left:3px solid var(--wa-kontakt-fehler);
  border-radius:0 10px 10px 0;
  color:var(--wa-ink);
  font-size:15px;
  line-height:1.55;
  margin:0 0 22px;
  padding:13px 16px;
}

/* Spamfalle aus dem Bild, aber nicht per display:none: manche Roboter
   ueberspringen genau solche Felder */
.wa-kontakt-falle{
  height:1px;
  left:-9999px;
  overflow:hidden;
  position:absolute;
  width:1px;
}

/* ---------------------------------------------------------------------
   31.6 Datenschutz und Absenden
   --------------------------------------------------------------------- */
.wa-feld-datenschutz{margin:26px 0 0}
.wa-kontakt .wa-kontakt-zustimmung{
  align-items:flex-start;
  color:var(--wa-kontakt-ink);
  cursor:pointer;
  display:flex;
  font-family:var(--wa-font-body);
  font-size:14.5px;
  font-weight:400;
  gap:12px;
  line-height:1.55;
  margin:0;
}
.wa-kontakt-zustimmung input[type="checkbox"]{
  accent-color:var(--wa-navy);
  cursor:pointer;
  flex:0 0 auto;
  height:20px !important;
  margin:1px 0 0 !important;
  width:20px !important;
}
.wa-feld-fehlerhaft .wa-kontakt-zustimmung input[type="checkbox"]{
  outline:2px solid var(--wa-kontakt-fehler);
  outline-offset:1px;
}
.wa-kontakt-zustimmung a,
.wa-kontakt-danke a:not(.wa-kontakt-knopf){
  color:var(--wa-navy);
  font-weight:600;
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:3px;
}
.wa-kontakt-zustimmung a:hover,
.wa-kontakt-danke a:not(.wa-kontakt-knopf):hover{color:var(--wa-red-press)}
.wa-feld-datenschutz .wa-feld-meldung{padding-left:32px}

/* Rund wie ueberall (15.3), ohne Sprung beim Ueberfahren */
.wa-kontakt .wa-kontakt-knopf{
  align-items:center;
  background:var(--wa-navy) !important;
  border:0 !important;
  border-radius:var(--wa-radius-pill) !important;
  box-shadow:none !important;
  box-sizing:border-box;
  color:#fff !important;
  cursor:pointer;
  display:inline-flex;
  font-family:var(--wa-font-display) !important;
  font-size:16px !important;
  font-weight:600 !important;
  height:auto !important;
  justify-content:center;
  letter-spacing:.01em !important;
  line-height:1.1 !important;
  margin:28px 0 0;
  min-height:54px;
  padding:0 34px !important;
  text-decoration:none !important;
  text-transform:none !important;
  transition:background-color .2s var(--wa-ease) !important;
}
.wa-kontakt .wa-kontakt-knopf:hover,
.wa-kontakt .wa-kontakt-knopf:focus-visible{
  background:var(--wa-red) !important;
  color:#fff !important;
  transform:none !important;
}
.wa-kontakt .wa-kontakt-knopf[disabled]{
  cursor:progress;
  opacity:.72;
}
@media only screen and (max-width:600px){
  .wa-kontakt .wa-kontakt-knopf{width:100%}
}

/* ---------------------------------------------------------------------
   31.7 Nach dem Absenden
   --------------------------------------------------------------------- */
.wa-kontakt-danke{outline:0}
.wa-kontakt .wa-kontakt-danke p{
  font-size:var(--wa-body-size);
  line-height:1.7;
  max-width:46ch;
}
.wa-kontakt-danke .wa-kontakt-knopf{margin-top:24px}

/* ---------------------------------------------------------------------
   31.8 Kopf, Zielgruppen und Angebot
   Die Seite spricht Studieninteressierte und Unternehmen an. Unter dem
   Kopftext stehen Vertrauensleiste und Knopf, danach zwei Karten (die
   Unternehmenskarte in Marineblau, damit man beide auseinanderhaelt) und
   das Angebot in drei Kacheln. Texte wie auf der bisherigen Seite.

   Bridge macht jedes li zur Tabelle und setzt davor ein eigenes "•". Die
   Listen hier brauchen deshalb .content davor und !important an display,
   Abstaenden und dem :before.
   --------------------------------------------------------------------- */
.content .wa-kontakt ul.wa-kontakt-vertrauen,
.content .wa-kontakt ul.wa-kontakt-liste,
.content .wa-kontakt ul.wa-kontakt-angebot-liste,
.content .wa-kontakt ol.wa-kontakt-schritte{
  list-style:none !important;
  padding:0 !important;
}
.content .wa-kontakt ul.wa-kontakt-vertrauen > li,
.content .wa-kontakt ul.wa-kontakt-liste > li,
.content .wa-kontakt ul.wa-kontakt-angebot-liste > li,
.content .wa-kontakt ol.wa-kontakt-schritte > li{
  list-style:none !important;
  margin:0 !important;
}
.content .wa-kontakt ul.wa-kontakt-angebot-liste > li:before,
.content .wa-kontakt ol.wa-kontakt-schritte > li:before{
  content:none !important;
  display:none !important;
}

.content .wa-kontakt ul.wa-kontakt-vertrauen{
  display:flex !important;
  flex-wrap:wrap;
  gap:8px 24px;
  margin:clamp(22px,2vw,30px) 0 0 !important;
}
.content .wa-kontakt ul.wa-kontakt-vertrauen > li{
  color:var(--wa-navy);
  display:block !important;
  font-family:var(--wa-font-display);
  font-size:15px;
  font-weight:500;
  line-height:1.4;
  padding:0 0 0 18px !important;
  position:relative;
}
.content .wa-kontakt ul.wa-kontakt-vertrauen > li:before{
  background:var(--wa-red);
  border-radius:50%;
  content:"" !important;
  display:block !important;
  height:7px;
  left:0;
  position:absolute;
  top:.5em;
  width:7px;
}

.wa-kontakt-gruppen{
  display:grid;
  gap:clamp(16px,2vw,28px);
  grid-template-columns:repeat(2,minmax(0,1fr));
  margin:0 0 clamp(36px,4vw,64px);
}
@media only screen and (max-width:768px){
  .wa-kontakt-gruppen{grid-template-columns:minmax(0,1fr)}
}
.wa-kontakt-gruppe{
  border-radius:var(--wa-radius);
  box-sizing:border-box;
  padding:clamp(24px,3vw,44px);
}
.wa-kontakt-gruppe-stud{background:var(--wa-section-gray)}
.wa-kontakt-gruppe-firm{background:var(--wa-navy)}
.wa-kontakt .wa-kontakt-gruppe-label{
  color:var(--wa-navy);
  font-family:var(--wa-font-display);
  font-size:13px;
  font-weight:600;
  letter-spacing:.08em;
  margin:0 0 14px;
  text-transform:uppercase;
}
.wa-kontakt .wa-kontakt-gruppe h2{
  font-size:clamp(22px,1vw + 17px,30px);
  margin:0 0 12px;
}
.wa-kontakt .wa-kontakt-gruppe p:last-child{
  font-size:var(--wa-body-size);
  line-height:1.7;
}
.wa-kontakt .wa-kontakt-gruppe-firm h2,
.wa-kontakt .wa-kontakt-gruppe-firm p{color:#fff}
.wa-kontakt .wa-kontakt-gruppe-firm .wa-kontakt-gruppe-label{color:rgba(255,255,255,.82)}

.wa-kontakt-angebot{margin:0 0 clamp(36px,4vw,64px)}
.wa-kontakt .wa-kontakt-angebot h2{margin:0 0 clamp(18px,2vw,28px)}
.content .wa-kontakt ul.wa-kontakt-angebot-liste{
  display:grid !important;
  gap:clamp(12px,1.6vw,20px);
  grid-template-columns:repeat(3,minmax(0,1fr));
  margin:0 !important;
}
@media only screen and (max-width:900px){
  .content .wa-kontakt ul.wa-kontakt-angebot-liste{grid-template-columns:minmax(0,1fr)}
}
.content .wa-kontakt ul.wa-kontakt-angebot-liste > li{
  background:#ffffff;
  border:1px solid var(--wa-kontakt-rand);
  border-radius:var(--wa-radius);
  box-sizing:border-box;
  display:flex !important;
  flex-direction:column;
  gap:8px;
  padding:clamp(20px,2.2vw,28px) !important;
}
.wa-kontakt-angebot-liste strong{
  color:var(--wa-navy-deep);
  display:block;
  font-family:var(--wa-font-display);
  font-size:clamp(17px,.4vw + 15px,20px);
  font-weight:500;
  line-height:1.3;
}
.wa-kontakt-angebot-liste span{
  color:var(--wa-kontakt-ink);
  display:block;
  font-size:var(--wa-body-size);
  line-height:1.65;
}

/* ---------------------------------------------------------------------
   31.9 Haken im Formularkopf und "Was passiert danach?"
   --------------------------------------------------------------------- */
.content .wa-kontakt ul.wa-kontakt-liste{
  display:grid !important;
  gap:8px;
  margin:20px 0 0 !important;
}
.content .wa-kontakt ul.wa-kontakt-liste > li{
  color:var(--wa-navy);
  display:block !important;
  font-family:var(--wa-font-display);
  font-size:15px;
  font-weight:500;
  line-height:1.5;
  padding:0 0 0 28px !important;
  position:relative;
}
.content .wa-kontakt ul.wa-kontakt-liste > li:before{
  border-bottom:2px solid var(--wa-red-press);
  border-left:2px solid var(--wa-red-press);
  content:"" !important;
  display:block !important;
  height:6px;
  left:2px;
  position:absolute;
  top:.5em;
  transform:rotate(-45deg);
  width:11px;
}

.wa-kontakt-ablauf{margin:clamp(40px,5vw,80px) 0 0}
.wa-kontakt .wa-kontakt-ablauf h2{margin:0 0 clamp(18px,2vw,28px)}
.content .wa-kontakt ol.wa-kontakt-schritte{
  display:grid !important;
  gap:clamp(16px,2vw,32px);
  grid-template-columns:repeat(3,minmax(0,1fr));
  margin:0 !important;
}
@media only screen and (max-width:768px){
  .content .wa-kontakt ol.wa-kontakt-schritte{grid-template-columns:minmax(0,1fr)}
}
.content .wa-kontakt ol.wa-kontakt-schritte > li{
  border-top:2px solid var(--wa-kontakt-rand);
  display:block !important;
  padding:18px 0 0 !important;
}
.wa-kontakt-nr{
  color:var(--wa-navy);
  display:block;
  font-family:var(--wa-font-display);
  font-size:15px;
  font-weight:600;
  letter-spacing:.06em;
  margin:0 0 8px;
}
.wa-kontakt-schritte strong{
  color:var(--wa-navy-deep);
  display:block;
  font-family:var(--wa-font-display);
  font-size:clamp(18px,.5vw + 15px,22px);
  font-weight:500;
  line-height:1.3;
  margin:0 0 8px;
}
.wa-kontakt .wa-kontakt-schritte p{
  font-size:var(--wa-body-size);
  line-height:1.65;
}

/* =====================================================================
   32. Impressionen
   Aus zwei Galerien mit denselben Motiven wird eine Sektion: Titel,
   ein Satz, darunter eine Bilderleiste, die dauerhaft nach rechts
   laeuft. Markup aus wa_refresh_impressions_gallery() in der
   functions.php, Bewegung aus initImpressions() in der refresh.js.

   Die Kartenbreite steht hier und nicht im Skript. Dadurch stimmt die
   Breite eines Durchlaufs schon vor dem Laden der Bilder und die Leiste
   muss nach jedem Bild nicht neu messen.
   ===================================================================== */
.wa-impressions{
  --wa-impr-card:clamp(152px,19vw,286px);
  --wa-impr-gap:clamp(10px,1.2vw,18px);
  --wa-impr-fade:clamp(24px,6vw,110px);
}

/* Die Reihe der frueheren oberen Impressionen-Sektion. Sie bleibt im
   Dokument stehen, damit die Streifung aus Abschnitt 2 (:nth-child)
   nicht kippt, zeigt aber nichts mehr. display:none zaehlt bei
   :nth-child weiter mit, deshalb reicht das hier. */
.full_width_inner > .vc_row:has(.wa-impressions-legacy){
  display:none !important;
}

/* Die Reihe bringt aus dem Page Builder 42px Abstand nach oben mit.
   Der Sektionsabstand aus Abschnitt 15.1 kaeme noch dazu. Zwei Klassen
   plus :has(), sonst gewinnt das Stylesheet des Page Builders, das im
   Kopf der Seite nach diesem steht. */
.full_width_inner > .vc_row:has(.wa-impressions){
  padding-top:0 !important;
  padding-bottom:0 !important;
}

/* ---------------------------------------------------------------------
   32.1 Ueberschrift und Satz
   --------------------------------------------------------------------- */
.wa-impressions-head{
  margin:0 auto clamp(26px,3.4vw,46px);
  max-width:720px;
  padding:0 var(--wa-gutter);
  text-align:center;
}
.wa-impressions-head h2{
  color:var(--wa-navy);
  margin:0 0 .5em;
}
/* Die rote Marke wie in Abschnitt 16.4, hier mittig: die Ueberschrift
   steht zentriert, links haengend wirkte die Marke verloren. */
.wa-impressions-head h2:before{
  background:var(--wa-red);
  border-radius:2px;
  content:"";
  display:block;
  height:4px;
  margin:0 auto 18px;
  width:52px;
}
.wa-impressions-head p{
  color:color-mix(in srgb,var(--wa-navy) 78%,#ffffff);
  margin:0;
}

/* ---------------------------------------------------------------------
   32.2 Die Leiste
   Weiche Kanten links und rechts, damit die Bilder nicht abgeschnitten
   wirken, sondern aus dem Grund heraus- und wieder hineinlaufen.
   touch-action:pan-y laesst das senkrechte Wischen bei der Seite; das
   waagerechte wertet das Skript selbst aus.
   --------------------------------------------------------------------- */
.wa-impressions-strip{
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 var(--wa-impr-fade),#000 calc(100% - var(--wa-impr-fade)),transparent 100%);
  mask-image:linear-gradient(to right,transparent 0,#000 var(--wa-impr-fade),#000 calc(100% - var(--wa-impr-fade)),transparent 100%);
  /* clip statt hidden: hidden macht die Leiste zum Scrollcontainer, und
     der Browser wuerde ein fokussiertes Bild dort hineinscrollen. Die
     Lage der Reihe kommt aber allein aus dem transform, das Fenster laege
     danach daneben. clip laesst kein Scrollen zu; das Nachruecken zum
     Fokus macht initImpressions(). hidden bleibt als Rueckfall stehen. */
  overflow:hidden;
  overflow:clip;
  -webkit-user-select:none;
  user-select:none;
  touch-action:pan-y;
}
/* Solange der Fokus auf einem Bild steht, faellt die weiche Kante weg.
   Das erste Bild sitzt buendig am linken Rand, sein Fokusrahmen laege
   sonst mitten im Verlauf. */
.wa-impressions-strip:has(.wa-impressions-shot:focus-visible){
  -webkit-mask-image:none;
  mask-image:none;
}

.wa-impressions-track{
  display:flex;
  gap:var(--wa-impr-gap);
  list-style:none !important;
  margin:0 !important;
  padding:6px 0 16px !important;
  width:max-content;
  will-change:transform;
}
/* Der Altbestand in der style.css setzt .content_inner li::before auf
   einen Aufzaehlungspunkt und die Listenpunkte selbst auf display:table,
   beides mit !important. Deshalb hier zwei Klassen im Selektor. */
.wa-impressions-track .wa-impressions-item{
  display:block !important;
  flex:0 0 var(--wa-impr-card);
  list-style:none !important;
  margin:0 !important;
  padding:0 !important;
}
.wa-impressions-track .wa-impressions-item::before{
  content:none !important;
  display:none !important;
}

.wa-impressions-shot{
  /* Fuellung statt background:none, damit eine Karte, deren Bild noch
     laedt, als ruhige Flaeche dasteht und nicht als leerer Rahmen. */
  background:color-mix(in srgb,var(--wa-navy) 7%,#ffffff);
  border:0;
  border-radius:var(--wa-radius);
  box-shadow:var(--wa-shadow);
  cursor:zoom-in;
  display:block;
  overflow:hidden;
  padding:0;
  transition:transform .32s cubic-bezier(.2,.8,.2,1),box-shadow .32s ease;
  width:100%;
}
.wa-impressions-shot img{
  aspect-ratio:3 / 2;
  display:block;
  height:auto;
  object-fit:cover;
  transition:transform .55s cubic-bezier(.2,.8,.2,1);
  width:100%;
}
/* Hover nur mit echtem Zeiger. Auf Touch bliebe die angetippte Karte
   sonst angehoben und vergroessert stehen, waehrend die Reihe weiterlaeuft. */
.wa-impressions-shot:focus-visible{
  box-shadow:var(--wa-shadow-lg);
  transform:translateY(-4px);
}
@media (hover:hover) and (pointer:fine){
  .wa-impressions-shot:hover{
    box-shadow:var(--wa-shadow-lg);
    transform:translateY(-4px);
  }
  .wa-impressions-shot:hover img{transform:scale(1.06)}
}
/* Kein grauer Tipp-Blitz auf iOS */
.wa-impressions-shot{-webkit-tap-highlight-color:transparent}
/* Waehrend gezogen wird zeigt der Zeiger die Bewegung an, nicht die Lupe */
.wa-impressions-strip.is-dragging .wa-impressions-shot{cursor:grabbing}
.wa-impressions-strip.is-dragging .wa-impressions-shot:hover{
  box-shadow:var(--wa-shadow);
  transform:none;
}
.wa-impressions-strip.is-dragging .wa-impressions-shot:hover img{transform:none}

@media (prefers-reduced-motion:reduce){
  .wa-impressions-shot,
  .wa-impressions-shot img{transition:none}
  .wa-impressions-shot:hover{transform:none}
  .wa-impressions-shot:hover img{transform:none}
}