/* Whiteboard-Animation im Kopf der Karriere-Seite.
   Alle Masse haengen an --u (setzt das Skript aus Breite und Hoehe der Flaeche):
   die Zeichnung ist 100u breit und 114u hoch und passt damit immer ganz hinein. */
.dfwb{position:absolute;top:0;right:0;bottom:0;left:0;z-index:2;background:#f1f1f1;overflow:hidden;color:#16181d;
  font-family:"Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif;font-weight:300;line-height:1.15;--u:6px}
.dfwb *{box-sizing:border-box}
.dfwb-box{position:absolute;left:50%;top:50%;width:calc(100*var(--u));height:calc(114*var(--u));
  transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center}
.dfwb-logo{width:calc(50*var(--u));height:auto;display:block;flex:none}
.dfwb-scenes{position:relative;flex:1;width:100%}
.dfwb-scene{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;opacity:0;pointer-events:none}
.dfwb-w{display:inline-block;white-space:nowrap;clip-path:inset(-20% 100% -60% -2%)}
.dfwb-t{font-size:calc(6*var(--u))}
.dfwb-c{color:#12b6e0}
.dfwb-big{font-size:calc(6.2*var(--u));line-height:1.28}
.dfwb-gap{height:calc(4.5*var(--u));flex:none}
.dfwb-gap.s{height:calc(2.2*var(--u))}
.dfwb-gap.l{height:calc(6.5*var(--u))}
/* Unterstreichung mit dem Pinsel */
.dfwb-u{position:relative;display:inline-block}
.dfwb-stroke{position:absolute;left:-4%;width:108%;top:100%;margin-top:calc(.4*var(--u));height:calc(2.1*var(--u));
  clip-path:inset(-10% 100% -10% 0);overflow:visible}
.dfwb-stroke path{fill:#1b93a6}
/* Liste mit Haken */
.dfwb-list{display:flex;flex-direction:column;align-items:flex-start;gap:calc(2.3*var(--u));font-size:calc(4.6*var(--u))}
.dfwb-li{display:flex;align-items:center;gap:calc(2.6*var(--u))}
.dfwb-check{width:calc(5.2*var(--u));height:calc(4.2*var(--u));flex:none;overflow:visible}
.dfwb-check path{fill:none;stroke:#12b6e0;stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round}
/* Symbole */
.dfwb-ic{display:block;overflow:visible;visibility:hidden}
.dfwb-ic .c{fill:#12b6e0}.dfwb-ic .s{fill:#111}
.dfwb-facts{display:flex;justify-content:center;gap:calc(7*var(--u));font-size:calc(4.1*var(--u));line-height:1.12}
.dfwb-fact{display:flex;flex-direction:column;align-items:center;gap:calc(2.6*var(--u));width:calc(27*var(--u))}
.dfwb-fact-bild{height:calc(21*var(--u));display:flex;align-items:center;justify-content:center;flex:none}
.dfwb-row{display:flex;align-items:center;justify-content:center;gap:calc(3*var(--u))}
/* Knopf */
.dfwb-cta{position:relative;flex:none;width:calc(76*var(--u));margin-bottom:calc(1*var(--u))}
.dfwb-btn{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;width:100%;height:calc(9.6*var(--u));
  background:#F4FF00;color:#000;font-weight:700;font-size:calc(3.3*var(--u));letter-spacing:.03em;text-decoration:none;text-transform:uppercase;
  border-radius:999px;box-shadow:0 calc(1.7*var(--u)) calc(3.6*var(--u)) rgba(0,0,0,.20),0 calc(.35*var(--u)) calc(1*var(--u)) rgba(0,0,0,.14);
  opacity:0;transition:background .15s}
.dfwb-btn:hover{background:#e6f200}
.dfwb-btn:focus-visible{outline:3px solid #12b6e0;outline-offset:3px}
/* Zwei Pfeile, die von links und rechts oben auf den Knopf zeigen */
.dfwb-eck{position:absolute;top:calc(-10.2*var(--u));width:calc(8.6*var(--u));height:auto;overflow:visible;transform:scale(0)}
.dfwb-eck.l{left:calc(-2.5*var(--u));rotate:-42deg}
.dfwb-eck.r{right:calc(-2.5*var(--u));rotate:42deg}
.dfwb-eck path{fill:#111}
/* Hand mit Stift: die Stiftspitze sitzt im Bild bei 4,6 % / 7,6 % */
.dfwb-hand{position:absolute;left:0;top:0;width:calc(66*var(--u));height:auto;z-index:3;pointer-events:none;
  transform-origin:4.6% 7.6%;will-change:transform;user-select:none;
  -webkit-mask-image:linear-gradient(to bottom,#000 80%,transparent 98%);mask-image:linear-gradient(to bottom,#000 80%,transparent 98%)}
.dfwb-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}