/* ── Kapsel ── */
.nav-wrap{background:transparent!important;border-bottom:none!important;
  padding:10px 16px 0!important;backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important}
.nav-wrap > .nav{background:var(--bg-2)!important;border-radius:20px!important;
  border:1px solid var(--border)!important;
  box-shadow:0 8px 28px rgba(0,0,0,.10)!important;
  padding-left:18px!important;padding-right:18px!important;
  backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
[data-theme="dark"] .nav-wrap > .nav{
  box-shadow:0 8px 28px rgba(0,0,0,.45)!important}

/* ── Fortschrittsleiste auf der Unterkante der Kapsel ──
   Einzug gerechnet: bei 20 Pixeln Eckradius ist die Silhouette der Kapsel
   auf Hoehe von 3 Pixeln ueber dem Boden um 20 - sqrt(20^2 - 17^2), also
   rund 10 Pixel nach innen gewandert. Zusammen mit den 16 Pixeln
   Kapselabstand ergibt das 26.

   Wichtig ist die Breite: das Seitenskript setzt sie in Prozent, und
   Prozente beziehen sich auf die volle Fensterbreite, nicht auf die Kapsel.
   Mit einer blossen max-width-Deckelung waere der Balken deshalb schon
   optisch voll, bevor die Seite zu Ende gescrollt ist, auf schmalen
   Geraeten bereits bei rund 87 Prozent. Deshalb wird die vorgegebene Breite
   verworfen und der Fortschritt ueber scaleX abgebildet: der Balken spannt
   fest ueber die Kapselbreite und wird anteilig gestaucht. */
.nav-wrap .scroll-progress{
  left:calc(var(--nav-l,16px) + 10px)!important;
  right:calc(var(--nav-r,16px) + 10px)!important;
  bottom:0!important;width:auto!important;max-width:none!important;
  /* Duenner und gedaempfter: die Leiste soll den Fortschritt zeigen, nicht
     mit den Diagrammen um Aufmerksamkeit konkurrieren. */
  height:2px!important;border-radius:0 0 2px 2px!important;
  opacity:.55!important;box-shadow:none!important;transform-origin:left center;
  transform:scaleX(var(--ti-scroll,0))!important;
  will-change:transform}

/* ── mobiles Suchfeld als Kapsel ── */
@media(max-width:860px){
  .ti-navbar-search-panel{left:16px!important;right:16px!important;
    top:10px!important;border-radius:20px!important;
    border:1px solid var(--border)!important;
    background:var(--bg-2)!important;
    box-shadow:0 8px 28px rgba(0,0,0,.16)!important;
    padding:10px 14px!important}
  .ti-navbar-search-panel.is-open,
  .ti-navbar-search-panel[aria-hidden="false"]{transform:translateY(0)!important}
  .ti-navbar-search-dropdown{border-radius:14px!important;margin-top:8px!important}
}
/* Schwebende Kapsel wie die Navigationsleiste: gleicher Randabstand,
   gleicher Radius, gleicher Rahmen und Schatten, nur unten statt oben. */
.ti-ab{position:fixed;left:16px;right:16px;
  bottom:calc(10px + env(safe-area-inset-bottom));z-index:60;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  background:var(--bg-2);border:1px solid var(--border);border-radius:20px;
  padding:12px 18px;
  box-shadow:0 8px 28px rgba(0,0,0,.10);
  opacity:0;transform:translateY(20px);pointer-events:none;
  transition:opacity .3s ease,transform .3s ease}
[data-theme="dark"] .ti-ab{box-shadow:0 8px 28px rgba(0,0,0,.45)}
body.ti-ab-on .ti-ab{opacity:1;transform:translateY(0);pointer-events:auto}
/* Nahe der Fusszeile weg, dieselbe Regel wie beim Entdecken-Knopf */
.ti-ab.hidden,.ti-ab.am-formular{opacity:0 !important;
  transform:translateY(20px) !important;pointer-events:none !important}

.ti-ab-links{display:flex;flex-direction:column;min-width:0;gap:4px}
/* Gleiche Schrift wie die Ueberschrift im Hero */
.ti-ab-titel{font-family:'Source Serif 4',ui-serif,Georgia,'Times New Roman',
  serif !important;font-weight:400;font-size:15px;line-height:1.25;
  color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ti-ab-kurz{display:none}
.ti-ab-rechts{display:flex;align-items:center;flex:0 0 auto}
/* Der Knopf uebernimmt Abmessungen und Verhalten des Navigationsknopfs:
   6x14 Innenabstand, 6 Pixel Radius, Schriftgroesse 13, Zeilenhoehe 1.6.
   Beim Ueberfahren hebt er sich und wechselt auf denselben dunkleren Blauton
   wie der Newsletter-Knopf. */
.ti-ab .apply-btn{padding:6px 14px !important;border-radius:6px !important;
  font-size:13px !important;font-weight:400 !important;line-height:1.6;
  transition:transform .15s, background .15s}
.ti-ab .apply-btn:hover{transform:translateY(-1px);background:#1d4ed8}

/* Statuszeile wie im Hero, nur einen Tick kleiner. Die Schriftstaerke wird
   ausdruecklich gesetzt, weil die Leiste sonst eine leichtere erbt. */
.ti-ab .hxs{font-size:12px !important;font-weight:500 !important;
  font-family:inherit}
.ti-ab .hxs svg{width:13px;height:13px}

/* Der Entdecken-Knopf weicht, solange die Leiste sichtbar ist */
body.ti-ab-on .floating-btn-stack{opacity:0;pointer-events:none;
  transform:translateY(20px)}
.floating-btn-stack{transition:opacity .3s ease,transform .3s ease}

@media(max-width:640px){
  .ti-ab{left:10px;right:10px;padding:10px 14px;gap:10px}
  /* Mobil nur der Programmname, dafuer vollstaendig und ueber zwei Zeilen.
     Die Firma steht ohnehin im Kontext der Seite. */
  .ti-ab-voll{display:none}
  .ti-ab-kurz{display:inline}
  .ti-ab-titel{font-size:13px;white-space:normal;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
}
/* Grundsaetzlich unsichtbar, auch am Desktop. Sichtbar wird es nur im
   verwandelten Zustand, und den gibt es nur mobil. */
.fbm-schloss{display:none}
/* Die Schichtung der beiden Beschriftungen gilt immer, nicht nur mobil.
   Stand sie in der Medienabfrage, lagen die Texte am Desktop nebeneinander:
   die lange Fassung fuellte die gesetzte Breite, die kurze wurde
   abgeschnitten und der Knopf wirkte leer. */
.fbm-text{display:inline-block;overflow:hidden;white-space:nowrap;
  vertical-align:middle}
.fbm-wrap{position:relative;display:inline-block}
.fbm-aus{display:inline-block;opacity:1}
.fbm-an{position:absolute;left:0;top:0;opacity:0;white-space:nowrap}

@media(max-width:640px){
  .ti-ab{display:none !important}
  /* Die vorhandene Ausblendung an der Fusszeile bleibt wirksam, ebenso die
     am Benachrichtigungsformular. */
  body.ti-ab-on .floating-btn-stack:not(.hidden):not(.am-formular){
    opacity:1 !important;pointer-events:auto !important;
    transform:none !important}
  .floating-btn-stack.am-formular{opacity:0 !important;
    transform:translateY(20px) !important;pointer-events:none !important}

  .floating-btn-discover{
    transition:background .34s cubic-bezier(.22,1,.36,1),color .34s ease,
      border-color .34s ease,box-shadow .34s ease !important}
  body.ti-ab-on .floating-btn-stack .floating-btn-discover{
    background:var(--cta) !important;color:var(--cta-fg) !important;
    border-color:var(--cta) !important;font-weight:600 !important}
  /* Im dunklen Modus setzt eine eigene Regel die glasige Flaeche mit
     !important. Diese hier ist spezifischer und gewinnt. */
  [data-theme="dark"] body.ti-ab-on .floating-btn-stack
    .floating-btn-discover{background:var(--cta) !important;
    border:none !important;
    box-shadow:0 10px 30px rgba(0,0,0,.45) !important}

  /* Ein Chevron, dieselbe Maske wie der Knopf im Hero. */
  .floating-btn-discover::after{content:"";display:inline-block;
    width:0;height:13px;background:currentColor;opacity:0;
    -webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='2.4'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='m9%2018%206-6-6-6'/%3E%3C/svg%3E") no-repeat center/contain;
    mask:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='2.4'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='m9%2018%206-6-6-6'/%3E%3C/svg%3E") no-repeat center/contain;
    transition:width .32s cubic-bezier(.22,1,.36,1),opacity .2s ease,
      margin-left .32s cubic-bezier(.22,1,.36,1)}
  body.ti-ab-on .floating-btn-discover::after{width:13px;opacity:.9;
    margin-left:3px}

  /* Symbole teilen sich denselben Platz und werden ueberblendet, damit die
     Breite konstant bleibt. */
  .fbm-icons{position:relative;width:16px;height:16px;flex-shrink:0}
  .fbm-icons > svg{position:absolute;inset:0;width:16px !important;
    height:16px !important;transition:opacity .22s ease}
  .fbm-schloss{display:block;opacity:0}
  body.ti-ab-on .fbm-schloss{opacity:1}
  body.ti-ab-on .fbm-funke{opacity:0}

  /* Breite gleitet, Beschriftung wird ueberblendet. */
  .fbm-text{transition:width .34s cubic-bezier(.22,1,.36,1)}
  .fbm-aus,.fbm-an{transition:opacity .18s ease}
  body.ti-ab-on .fbm-aus{opacity:0}
  body.ti-ab-on .fbm-an{opacity:1}
}
/* Kapsel liegt IMMER ueber dem Menue, nicht erst im geoeffneten Zustand.
   Sonst deckt das geschlossene Menue, das deckungsgleich auf der Kapsel
   liegt, deren Inhalt als weisse Flaeche ab. */
.nav-wrap{z-index:101!important}
.mobile-menu-backdrop{z-index:98!important}
.mobile-menu{z-index:100!important}

/* Geschlossen ist das Menue nicht bedienbar und fuer Screenreader
   unsichtbar, sonst faengt es Beruehrungen auf der Kapsel ab. */
.mobile-menu:not(.active){pointer-events:none!important;visibility:hidden!important}
/* Frueher stand hier pointer-events:none auf dem geoeffneten Menue, damit
   Klicks auf den Hamburger durchkommen. Das hat aber auch das Wischen
   verhindert, weil der Scroll-Container selbst keine Beruehrungen mehr
   annahm. Nicht mehr noetig, seit der Klick in der Erfassungsphase am
   Dokument abgefangen wird. */
.mobile-menu.active{visibility:visible!important;pointer-events:auto!important;
  -webkit-overflow-scrolling:touch;overscroll-behavior:contain}

.mobile-menu{
  top:var(--cap-top,10px)!important;left:var(--cap-left,16px)!important;
  right:var(--cap-right,16px)!important;bottom:auto!important;
  width:auto!important;
  background:var(--bg-2)!important;
  border:1px solid var(--border)!important;border-radius:20px!important;
  box-shadow:0 8px 28px rgba(0,0,0,.10)!important;
  transform:none!important;opacity:1;overflow:hidden!important;
  height:var(--cap-h,60px)!important;
  padding:calc(var(--cap-h,60px) + 8px) 18px 18px!important;
  /* Schliessen kuerzer als Oeffnen, siehe oben. */
  transition:height .26s cubic-bezier(.22,1,.36,1),
             left .26s cubic-bezier(.22,1,.36,1),
             right .26s cubic-bezier(.22,1,.36,1),
             box-shadow .26s ease!important}
[data-theme="dark"] .mobile-menu{
  box-shadow:0 8px 28px rgba(0,0,0,.45)!important}

.mobile-menu.active{
  height:var(--cap-open,70vh)!important;
  left:8px!important;right:8px!important;
  overflow-y:auto!important;
  transition:height .34s cubic-bezier(.22,1,.36,1),
             left .34s cubic-bezier(.22,1,.36,1),
             right .34s cubic-bezier(.22,1,.36,1),
             box-shadow .34s ease!important;
  box-shadow:0 20px 52px rgba(0,0,0,.28)!important}

/* Der Menuekopf entfaellt: Logo und Bedienung stehen in der Kapsel darueber */
.mobile-menu-header{display:none!important}

/* Inhalt erscheint gestaffelt, wenn die Kapsel fast ausgefahren ist, und
   verschwindet beim Schliessen in umgekehrter Reihenfolge. Statt einer
   Keyframe-Animation, die nur in eine Richtung laeuft, arbeiten hier
   Uebergaenge: sie kehren sich beim Entfernen der Klasse von selbst um.

   Das Schliessen ist bewusst kuerzer als das Oeffnen, 0,18 gegen 0,26
   Sekunden. Weggeklicktes soll schnell weg sein, Erscheinendes darf sich
   Zeit lassen. */
.mobile-menu > *{opacity:0;transform:translateY(8px);
  transition:opacity .18s ease,transform .18s cubic-bezier(.22,1,.36,1)}
.mobile-menu.active > *{opacity:1;transform:none;
  transition:opacity .26s ease,transform .26s cubic-bezier(.22,1,.36,1);
  transition-delay:.2s}
.mobile-menu.active > *:nth-child(3){transition-delay:.24s}
.mobile-menu.active > *:nth-child(4){transition-delay:.28s}
.mobile-menu.active > *:nth-child(5){transition-delay:.32s}
.mobile-menu.active > *:nth-child(6){transition-delay:.36s}
.mobile-menu.active > *:nth-child(7){transition-delay:.40s}
/* Beim Schliessen laeuft die Staffelung rueckwaerts: der unterste Eintrag
   geht zuerst. */
.mobile-menu > *:nth-child(7){transition-delay:0s}
.mobile-menu > *:nth-child(6){transition-delay:.03s}
.mobile-menu > *:nth-child(5){transition-delay:.06s}
.mobile-menu > *:nth-child(4){transition-delay:.09s}
.mobile-menu > *:nth-child(3){transition-delay:.12s}
.mobile-menu > *:nth-child(2){transition-delay:.15s}

/* Die Staedteliste klappte hart um (display none/block), waehrend Branchen
   und Standorte weich aufgehen. Gleiche Mechanik: Hoehe animieren. */
.mobile-menu .nav-bl-cities{display:block!important;max-height:0;
  overflow:hidden;transition:max-height .25s ease}
.mobile-menu .nav-bl-wrap.open .nav-bl-cities{max-height:520px}
.mobile-menu .nav-bl-chev{transition:transform .25s ease}
.mobile-menu .nav-bl-wrap.open .nav-bl-chev{transform:rotate(180deg)}

/* Der Knopfinhalt wird getauscht, nicht ueberlagert. Das Symbol darf keine
   Klicks annehmen, damit der Knopf sie zuverlaessig bekommt. */
.nav-toggle svg{pointer-events:none;
  animation:ntIn .22s cubic-bezier(.22,1,.36,1)}
@keyframes ntIn{from{opacity:0;transform:rotate(-60deg) scale(.75)}
  to{opacity:1;transform:none}}
/* Die Flaeche gehoert dem Wrapper, nicht dem Verweis darin. Dadurch ist
   die ganze Kategorie samt Chevron hinterlegt, egal worueber die Maus
   steht. */
.nav-dropdown-wrapper{border-radius:6px;transition:background .15s}
.nav-dropdown-wrapper:hover,
.nav-dropdown-wrapper:focus-within{background:var(--bg-3)}
.nav-links .nav-dropdown-wrapper a.nav-with-chevron-link:hover,
.nav-links .nav-dropdown-wrapper a.nav-with-chevron-link.active{
  background:transparent !important}
/* Ein aktiver Eintrag bleibt hinterlegt, jetzt ueber den Wrapper. */
.nav-dropdown-wrapper:has(> a.active){background:var(--bg-3)}

/* Tastaturbedienung: das Menue oeffnet auch ohne Maus. */
.nav-dropdown-wrapper:focus-within .nav-dropdown{opacity:1;pointer-events:auto;
  transform:translateX(-50%) translateY(0);visibility:visible}
/* Der Rahmen kommt vollstaendig aus dem Bestand: .modal-overlay bringt
   Weichzeichner und Abdunklung, .modal die Karte, .modal-close das X oben
   rechts, und mobil greift dieselbe Regel, die das Fenster als Blatt von
   unten einfahren laesst. Hier steht nur, was die Skala braucht. */
.fb-eyebrow{font-size:11px;font-weight:600;letter-spacing:0.08em;
  text-transform:uppercase;color:var(--accent);margin-bottom:10px;
  text-align:center}
#fb-overlay .modal{text-align:center}
#fb-overlay .modal h3{margin:0 0 8px}
.fb-sub{font-size:13px;color:var(--text-2);line-height:1.6;margin:0 0 22px;
  opacity:.8}
.fb-scale-row{display:flex;align-items:center;justify-content:center;gap:14px;
  margin-bottom:20px}
.fb-pol{font-size:11px;color:var(--text-3);white-space:nowrap;flex:0 0 auto}
.fb-scale{display:flex;gap:10px;justify-content:center}
.fb-dot{width:54px;height:54px;border-radius:50%;
  border:1px solid var(--border);background:transparent;padding:9px;
  color:var(--text);cursor:pointer;
  transition:transform .15s,border-color .15s,box-shadow .15s}
.fb-dot svg{width:100%;height:100%;display:block}
/* Die runde Box faerbt sich beim Ueberfahren und bei Auswahl. Jede Stufe
   hat ihre feste Farbe aus der Rampe der Detailseiten, uebergeben als
   --fb-farbe. Das Gesicht selbst bleibt unberuehrt. */
.fb-dot:hover{transform:translateY(-2px);border-color:var(--fb-farbe)}
.fb-dot.is-on{border-color:var(--fb-farbe);
  box-shadow:0 0 0 2px color-mix(in srgb,var(--fb-farbe) 28%,transparent)}
.fb-note{width:100%;box-sizing:border-box;border:1px solid var(--border);
  border-radius:12px;background:var(--bg);color:var(--text);padding:12px 14px;
  font-family:inherit;font-size:14px;resize:vertical;min-height:84px;
  margin-bottom:14px;display:none;outline:none;transition:border-color .15s}
/* Gleiche Fokusfarbe wie im Newsletter-Modal */
.fb-note:focus,.fb-note:hover{border-color:var(--primary)}
.fb-note.is-open{display:block}
.fb-send{display:none}
.fb-send.is-open{display:inline-block}
@media(max-width:640px){
  /* Auf schmalen Bildschirmen laufen die Pole sonst ueber den Rand. Sie
     rutschen deshalb unter die Skala und stehen dort an den Aussenkanten.
     Die Ueberschrift bekommt rechts Platz, damit sie nicht unter das
     Schliesskreuz laeuft. */
  #fb-overlay .modal{padding-top:22px}
  #fb-overlay h3{font-size:19px!important;line-height:1.25;
    padding:0 42px 0 6px;margin-bottom:6px}
  .fb-sub{font-size:13px;margin-bottom:18px}
  .fb-scale-row{flex-direction:column;gap:8px;margin-bottom:18px}
  .fb-scale{gap:8px;width:100%;justify-content:space-between}
  .fb-pol{display:none}
  .fb-pol-mobil{display:flex;justify-content:space-between;width:100%;
    font-size:11px;color:var(--text-3);padding:0 4px}
  .fb-dot{width:52px;height:52px;padding:8px}
}
.fb-pol-mobil{display:none}
.mqs-bar-unused{position:fixed;left:50%;transform:translateX(-50%);bottom:16px;
 z-index:10002;display:flex;gap:6px;align-items:center;background:var(--bg-2);
 border:1px solid var(--border);border-radius:14px;padding:8px 10px;
 font-size:12px;box-shadow:0 10px 30px rgba(0,0,0,.2);flex-wrap:wrap;
 max-width:calc(100vw - 20px);justify-content:center}
.mqs-bar button{font-family:inherit;font-size:12px;padding:6px 10px;
 border-radius:9px;border:1px solid var(--border);background:transparent;
 color:var(--text);cursor:pointer}
.mqs-bar button.on{background:var(--cta);color:var(--cta-fg);
 border-color:var(--cta)}
.mqs-bar span{color:var(--text-3)}

.desktop-only-marquee{overflow:hidden}
.mqs .related-marquee-track{animation:none !important;display:flex;
 gap:12px;will-change:transform}
.mqs .related-marquee-track.gleitet{
 transition:transform var(--mqs-glitt,.62s) cubic-bezier(.33,0,.15,1)}
.mqs .related-marquee-track > .related-card{flex:0 0 380px}

/* Mobil bleibt es beim Wischen von Hand. Eine Eigenbewegung auf kleinem
   Schirm nimmt der Geste den Vorrang und laesst sich schlecht treffen. */
@media(max-width:900px){
 .desktop-only-marquee{overflow-x:auto;scroll-snap-type:x mandatory;
   -webkit-overflow-scrolling:touch}
 .mqs .related-marquee-track{transform:none !important;
   transition:none !important}
 .mqs .related-marquee-track > .related-card{flex-basis:80vw;
   scroll-snap-align:start}
}
/* Statuspillen mit Schloss statt Punkt, ohne Rahmen. Der Bestand zieht den
   Rahmen ueber box-shadow aus Regeln mit zwei Klassen, deshalb steht hier
   dieselbe Kombination; eine Regel mit einer Klasse verliert, auch mit
   !important. */
.related-card-pill,.mw-bento-card-pill,.pill{display:inline-flex !important;
  align-items:center;gap:5px}
.related-card-pill.pill-green,.related-card-pill.pill-closed,
.mw-bento-card-pill.pill-green,.mw-bento-card-pill.pill-closed,
.pill.pill-green,.pill.pill-closed{box-shadow:none !important;
  padding:0 !important;background:transparent !important}
.pill-schloss{display:inline-block;width:11px;height:11px;flex-shrink:0;
  opacity:.95;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='2.4'%20stroke-linecap='round'%3E%3Crect%20x='3'%20y='11'%20width='18'%20height='11'%20rx='2'/%3E%3Cpath%20d='M7%2011V7a5%205%200%200%201%2010%200v4'/%3E%3C/svg%3E") no-repeat center/contain;
  mask:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='2.4'%20stroke-linecap='round'%3E%3Crect%20x='3'%20y='11'%20width='18'%20height='11'%20rx='2'/%3E%3Cpath%20d='M7%2011V7a5%205%200%200%201%2010%200v4'/%3E%3C/svg%3E") no-repeat center/contain}
/* Offen: derselbe Rahmen, der Buegel aufgeklappt. Die Form haengt an der
   Klasse der Pille, das Schloss kann also nie dem Status widersprechen. */
.pill-green .pill-schloss{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='2.4'%20stroke-linecap='round'%3E%3Crect%20x='3'%20y='11'%20width='18'%20height='11'%20rx='2'/%3E%3Cpath%20d='M7%2011V7a5%205%200%200%201%209.9-1'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='2.4'%20stroke-linecap='round'%3E%3Crect%20x='3'%20y='11'%20width='18'%20height='11'%20rx='2'/%3E%3Cpath%20d='M7%2011V7a5%205%200%200%201%209.9-1'/%3E%3C/svg%3E")}
/* Absendeknoepfe mit Papierflieger, ausgerichtet wie der Newsletter-Knopf
   in der Navigation. */
.notify-form button[type="submit"],#newsletter-cta-submit,
#mw-lp-newsletter-submit{display:inline-flex !important;align-items:center;
  gap:7px;justify-content:center}
.notify-form button[type="submit"] .nav-cta-ic,
#newsletter-cta-submit .nav-cta-ic,
#mw-lp-newsletter-submit .nav-cta-ic{width:15px;height:15px;flex-shrink:0}
/* Mobile Fusszeile: die sieben Verweise als Raster in zwei Spalten.
   Der Bestand blendet sie unter 768 Pixeln mit !important aus, wohl weil
   das Mobilmenue diese Ziele abdeckt. Dort fehlt aber das Verzeichnis, es
   war mobil von Programmseiten und Startseite aus nicht erreichbar.
   Drei Klassen, damit die Regel die Bestandsregel mit zwei schlaegt.

   Reihenfolge mobil: Traineeprogramme und Gehaelter, Insider Match und
   Insider Compare, Branchen und Standorte, darunter Unternehmen mittig.
   Gesetzt ueber order und am Verweisziel festgemacht, nicht an der
   Position, damit ein neuer Eintrag nichts verschiebt. Der Desktop bleibt
   unveraendert; Tastatur und Vorleseprogramme folgen der Reihenfolge im
   Markup. */
@media(max-width:768px){
  .footer .footer-inner .footer-nav{display:grid !important;
    grid-template-columns:1fr 1fr;gap:10px 16px;justify-items:center;
    width:100%;max-width:300px;margin:4px auto 6px;padding-bottom:14px;
    border-bottom:1px solid var(--border)}
  .footer .footer-nav a[href="/"]{order:1}
  .footer .footer-nav a[href="/gehalt/"]{order:2}
  .footer .footer-nav a[href="/insider-match/"]{order:3}
  .footer .footer-nav a[href="/insider-compare/"]{order:4}
  .footer .footer-nav a[href="/branchen/"]{order:5}
  .footer .footer-nav a[href="/standorte/"]{order:6}
  .footer .footer-nav a[href="/unternehmen/"]{order:7;grid-column:1 / -1}
}
/* Werbe-Toasts fuer Insider Match und Insider Compare, mobil senkrecht
   mittig. Sie sassen fest 76 Pixel ueber dem unteren Rand und damit dicht
   an den schwebenden Knoepfen. Die Mitte des Bandes zwischen Navigation
   (endet bei rund 66 Pixeln) und Knoepfen (beginnen rund 64 Pixel ueber
   dem Rand) liegt praktisch in der Bildschirmmitte.

   Die Einblendbewegung des Bestands, 20 Pixel von unten, bleibt erhalten:
   sie laeuft jetzt um die Mitte herum. Das Element im Selektor hebt die
   Spezifitaet ueber die Bestandsregel, unabhaengig von der Reihenfolge der
   Stylesheets. Am Desktop bleibt alles, wie es ist. */
@media(max-width:640px){
  body #ti-im-toast,body #ti-ic-toast{top:50% !important;bottom:auto !important;
    transform:translateY(calc(-50% + 20px)) !important}
  body #ti-im-toast.ti-im-visible,body #ti-ic-toast.ti-ic-visible{
    transform:translateY(-50%) !important}
}