/* ===========================================================
   Career Scout — gemeinsame Styles für alle Seiten
   =========================================================== */

html { scroll-behavior: smooth; scroll-padding-top: 6rem; }
body {
  background: #F7F6F3;
  color: #16191B;
  font-family: 'Source Sans 3', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
.font-display { font-family: 'Lexend', system-ui, sans-serif; }

/* Editorial display type */
.display-xl { font-size: clamp(2.6rem, 7vw, 6rem);   line-height: 0.98; letter-spacing: -0.03em;  font-weight: 700; }
.display-lg { font-size: clamp(2rem, 4.6vw, 3.6rem); line-height: 1.02; letter-spacing: -0.025em; font-weight: 700; }
.eyebrow    { letter-spacing: 0.28em; text-transform: uppercase; font-weight: 600; font-size: 0.72rem; }
.chapter-no { font-family: 'Lexend'; font-weight: 300; letter-spacing: -0.02em; }
.lead       { font-size: clamp(1.1rem, 1.6vw, 1.4rem); line-height: 1.6; }

/* Scroll-reveal */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .9s cubic-bezier(.16,1,.3,1), transform .9s cubic-bezier(.16,1,.3,1); }
.reveal.in { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: .08s; }
.reveal[data-delay="2"] { transition-delay: .16s; }
.reveal[data-delay="3"] { transition-delay: .24s; }

/* The "scout line" — a thin brand trail */
.scout-line { background: linear-gradient(90deg, #1987C1, #22A3E0); }

/* Scroll progress bar */
#progress { transform-origin: 0 50%; transform: scaleX(0); }

/* Image treatments */
.img-duo  { filter: saturate(1.02) contrast(1.02); }
.ring-soft { box-shadow: 0 30px 60px -25px rgba(22,25,27,.45); }

/* Animated underline for links */
.link-underline { background-image: linear-gradient(currentColor, currentColor); background-size: 0% 2px; background-repeat: no-repeat; background-position: 0 100%; transition: background-size .35s ease; }
.link-underline:hover { background-size: 100% 2px; }

/* Active nav item */
.nav-link[aria-current="page"] { color: #16191B; }
.nav-link[aria-current="page"]::after { content: ""; display: block; height: 2px; background: #1987C1; border-radius: 2px; margin-top: 2px; }

/* Give embedded job widgets room to breathe */
#ttsSearchBarWidget { width: 100%; }

/* Stimmen-Karussell: 3 scharf, Nachbarn seitlich verschwommen */
.stimmen-viewport {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 5%, #000 95%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 5%, #000 95%, transparent);
}
.stimmen-track { transition: transform .55s cubic-bezier(.16,1,.3,1); will-change: transform; }
.stimmen-card { flex: 0 0 82%; }
.stimmen-card > figure { transition: filter .45s ease, opacity .45s ease; filter: blur(4px); opacity: .5; }
.stimmen-card.is-active > figure { filter: none; opacity: 1; }
@media (min-width: 640px)  { .stimmen-card { flex-basis: 46%; } }
@media (min-width: 1024px) { .stimmen-card { flex-basis: 30%; } }
@media (prefers-reduced-motion: reduce) { .stimmen-track { transition: none; } }

/* FAQ-Akkordeon (details/summary) */
details.faq > summary { list-style: none; cursor: pointer; }
details.faq > summary::-webkit-details-marker { display: none; }
.faq-chevron { transition: transform .25s ease; }
details.faq[open] .faq-chevron { transform: rotate(180deg); }
details.faq[open] { box-shadow: 0 18px 40px -28px rgba(22,25,27,.4); }

/* Initiativbewerbungs-Popup: Widget zentrieren & etwas vergrößern.
   Das tts-application-Widget positioniert seine Teile sonst absolut mit festen
   Offsets (öffnet unten rechts, klein). Wir heben das auf und stapeln es
   zentriert in der Bildschirmmitte. */
/* Bühne: füllt den Bildschirm, zentriert das Widget und ist scrollbar,
   falls das Popup höher als der Viewport ist (sonst wird der Titel oben
   abgeschnitten). pointer-events:none, damit Klicks daneben auf das
   dahinterliegende Backdrop durchfallen und schließen. */
#cs-apply .cs-stage {
  position: fixed; inset: 0; z-index: 60;
  overflow-y: auto;
  display: flex;
  pointer-events: none;
}
#cs-apply #ttsApplicationWidget {
  position: static !important;
  margin: auto !important;          /* zentriert; oberer Rand bleibt scrollbar erreichbar */
  zoom: 1.2;                        /* etwas größer – skaliert inkl. Layout */
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  width: auto !important; height: auto !important;
  padding: 2.5rem 1rem;
  pointer-events: auto;
}
#cs-apply #ttsApplicationWidget > div {
  position: static !important;
  top: auto !important; left: auto !important; right: auto !important; bottom: auto !important;
  transform: none !important;
  margin: 0 !important;
}
/* Titel/Inhalt nicht abschneiden */
#cs-apply .tts-application-apply { overflow: visible !important; }
/* eigenes Schließen-Icon nutzen statt des internen × */
#cs-apply .tts-application-cancel { display: none !important; }
@media (max-width: 420px) {
  #cs-apply #ttsApplicationWidget { zoom: 1; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
}