/* ============================================================
   COMPONENTS — Logos, Icons, Buttons, Formular, Marquee, Modal
   ============================================================ */

/* ------------------------------------------------------------
   LOGO-MARKE
   Die SVGs liegen einfarbig weiß vor. Über `mask` werden sie
   als Form benutzt und über `background-color` eingefärbt —
   so bleibt eine Datei die Quelle für jede Farbvariante.
   ------------------------------------------------------------ */
.logo {
  display: inline-block;
  background-color: var(--brand);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

.logo--wp {
  -webkit-mask-image: url("../logo/WP_LOGO_Weiss.svg");
  mask-image: url("../logo/WP_LOGO_Weiss.svg");
  aspect-ratio: 446.1 / 168.3;
}

.logo--talents {
  -webkit-mask-image: url("../logo/WP-Talents_LOGO_solo_Weiss.svg");
  mask-image: url("../logo/WP-Talents_LOGO_solo_Weiss.svg");
  aspect-ratio: 415.9 / 109.8;
}

/* „talents"-Schriftzug innerhalb einer Headline: skaliert mit
   der Schriftgröße und sitzt mit der Unterkante auf der
   Grundlinie des umgebenden Textes. 0.85em entspricht der
   Oberlänge der Headline-Schrift. */
.logo--inline {
  height: 0.85em;
  vertical-align: baseline;
}

.logo--white {
  background-color: var(--white);
}

/* ------------------------------------------------------------
   ICONS (Google Material Symbols als SVG-Maske)
   ------------------------------------------------------------ */
.icon {
  display: inline-block;
  flex: none;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  width: 24px;
  height: 24px;
}

.icon--mail {
  -webkit-mask-image: url("../icons/mail.svg");
  mask-image: url("../icons/mail.svg");
}

.icon--calendar {
  -webkit-mask-image: url("../icons/calendar_month_24dp_E3E3E3_FILL0_wght400_GRAD0_opsz24.svg");
  mask-image: url("../icons/calendar_month_24dp_E3E3E3_FILL0_wght400_GRAD0_opsz24.svg");
}

.icon--money-off {
  -webkit-mask-image: url("../icons/money_off_24dp_E3E3E3_FILL0_wght400_GRAD0_opsz24.svg");
  mask-image: url("../icons/money_off_24dp_E3E3E3_FILL0_wght400_GRAD0_opsz24.svg");
}

.icon--arrow {
  -webkit-mask-image: url("../icons/arrow_forward_24dp_E3E3E3_FILL0_wght400_GRAD0_opsz24.svg");
  mask-image: url("../icons/arrow_forward_24dp_E3E3E3_FILL0_wght400_GRAD0_opsz24.svg");
}

.icon--arrow-up {
  -webkit-mask-image: url("../icons/arrow_upward_24dp_E3E3E3_FILL0_wght400_GRAD0_opsz24.svg");
  mask-image: url("../icons/arrow_upward_24dp_E3E3E3_FILL0_wght400_GRAD0_opsz24.svg");
}

.icon--rocket {
  -webkit-mask-image: url("../icons/rocket_launch_24dp_E3E3E3_FILL0_wght400_GRAD0_opsz24.svg");
  mask-image: url("../icons/rocket_launch_24dp_E3E3E3_FILL0_wght400_GRAD0_opsz24.svg");
}

.icon--tiktok {
  -webkit-mask-image: url("../icons/tiktok-brands-solid-full.svg");
  mask-image: url("../icons/tiktok-brands-solid-full.svg");
}

.icon--linkedin {
  -webkit-mask-image: url("../icons/linkedin-in-brands-solid-full.svg");
  mask-image: url("../icons/linkedin-in-brands-solid-full.svg");
}

.icon--instagram {
  -webkit-mask-image: url("../icons/instagram-brands-solid-full.svg");
  mask-image: url("../icons/instagram-brands-solid-full.svg");
}

/* Eigenhändig gezeichnet statt aus Material Symbols übernommen:
   Bei 10px Kantenlänge sind die gefüllten Grundformen (zwei Balken,
   ein Dreieck) sauberer als eine verkleinerte Glyphe. Beide teilen
   die viewBox 4 4 16 16, damit sie gleich groß erscheinen. */
.icon--pause {
  -webkit-mask-image: url("../icons/pause_24dp_E3E3E3_FILL1_wght400_GRAD0_opsz24.svg");
  mask-image: url("../icons/pause_24dp_E3E3E3_FILL1_wght400_GRAD0_opsz24.svg");
}

.icon--play {
  -webkit-mask-image: url("../icons/play_arrow_24dp_E3E3E3_FILL1_wght400_GRAD0_opsz24.svg");
  mask-image: url("../icons/play_arrow_24dp_E3E3E3_FILL1_wght400_GRAD0_opsz24.svg");
}

.icon--verified {
  -webkit-mask-image: url("../icons/verified_24dp_E3E3E3_FILL0_wght400_GRAD0_opsz24.svg");
  mask-image: url("../icons/verified_24dp_E3E3E3_FILL0_wght400_GRAD0_opsz24.svg");
}

/* ------------------------------------------------------------
   BUTTONS
   ------------------------------------------------------------ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  padding-inline: 32px;
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease),
    color var(--dur) var(--ease),
    transform var(--dur) var(--ease);
}

.btn:active {
  transform: translateY(1px);
}

.btn--brand {
  background: var(--brand);
  color: var(--white);
}

.btn--brand:hover {
  background: var(--brand-dark);
}

.btn--white {
  background: var(--white);
  color: var(--ink);
}

.btn--white:hover {
  background: #F0F0F0;
}

/* Text-Button (Link-Optik) */
.link {
  color: var(--brand);
  font: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: color var(--dur) var(--ease);
}

.link:hover {
  color: var(--brand-dark);
  text-decoration: underline;
}

/* ------------------------------------------------------------
   NEWSLETTER-FORMULAR
   ------------------------------------------------------------ */
.subscribe {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  max-width: 750px;
  height: 66px;
  padding: 4px 4px 4px 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--white);
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.06);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.subscribe:focus-within {
  border-color: var(--brand);
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.06), 0 0 0 3px rgba(211, 37, 102, 0.12);
}

.subscribe__icon {
  width: 24px;
  height: 24px;
  color: var(--ink-soft);
  transition: background-color var(--dur) var(--ease);
}

.subscribe:focus-within .subscribe__icon {
  color: var(--brand);
}

.subscribe__input {
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  color: var(--ink-soft);
}

.subscribe__input::placeholder {
  color: var(--ink-faint);
  opacity: 1;
}

/* Der große Button im Hero-Formular trägt eine Stufe mehr:
   20px Bold statt 17px SemiBold. */
.subscribe__btn {
  height: 100%;
  padding-inline: 40px;
  font-size: 20px;
  font-weight: var(--fw-bold);
}

/* Rückmeldung unter dem Formular. Leer nimmt sie keinen Platz ein,
   der Abstand zwischen Formular und Hinweiszeile bleibt also
   unverändert, bis es wirklich etwas zu sagen gibt. */
.subscribe__status {
  margin-bottom: 12px;
  max-width: 750px;
  font-size: var(--fs-sm);
  line-height: 1.4;
  color: var(--ink-soft);
}

.subscribe__status:empty {
  display: none;
}

.subscribe__status--error {
  color: var(--brand);
  font-weight: var(--fw-semibold);
}

/* ------------------------------------------------------------
   FEATURE-LISTE (3 Aufzählungen im Hero)
   ------------------------------------------------------------ */
.features {
  display: flex;
  flex-wrap: wrap;
  gap: 24px 54px;
  max-width: 660px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.features__item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.features__icon {
  width: 18px;
  height: 18px;
  max-width: 18px;
  max-height: 18px;
  margin-top: 2px;
  color: var(--brand);
}

.features__text {
  font-size: var(--fs-body);
  line-height: 22px;
  color: var(--ink-soft);
}

.features__text b {
  display: block;
  font-weight: var(--fw-bold);
  color: var(--ink);
}

/* ------------------------------------------------------------
   MARQUEE — Endlos-Slider im perfekten Loop
   Der Track enthält die Wortliste doppelt und wandert exakt
   um 50 % — dadurch ist der Übergang nahtlos.
   ------------------------------------------------------------ */
.marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 60px, #000 calc(100% - 60px), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 60px, #000 calc(100% - 60px), transparent 100%);
}

.marquee__track {
  display: flex;
  width: max-content;
  animation: marquee-scroll var(--marquee-duration, 40s) linear infinite;
}

.marquee:hover .marquee__track {
  animation-play-state: paused;
}

.marquee__group {
  display: flex;
  align-items: center;
}

.marquee__item {
  display: flex;
  align-items: center;
  font-family: var(--font-display);
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
  /* Nicht auf 1 setzen: der Track läuft in einem overflow:hidden-Fenster,
     eine zu enge Zeilenbox schneidet Unterlängen wie „g" und „j" ab. */
  line-height: 1.4;
  color: var(--ink);
  white-space: nowrap;
}

.marquee__item::after {
  content: "";
  flex: none;
  width: 4px;
  height: 4px;
  margin-inline: 24px;
  border-radius: var(--radius-pill);
  background: var(--brand);
}

/* ------------------------------------------------------------
   HALT-SCHALTER
   ------------------------------------------------------------
   WCAG 2.2.2 verlangt für Bewegung, die länger als fünf Sekunden
   läuft, eine Bedienmöglichkeit zum Anhalten. Die Pause beim
   Überfahren mit der Maus zählt nicht — Tastatur und Touch kämen
   nicht daran.

   Er liegt außerhalb von `.marquee`, weil dessen Maske den eigenen
   Inhalt an den Rändern ausblendet, und sitzt absolut im Freiraum
   unter dem Streifen: dadurch ändert er die Höhe der Sektion nicht.
   ------------------------------------------------------------ */
.marquee-wrap {
  position: relative;
}

.marquee__toggle {
  position: absolute;
  right: 0;
  top: calc(100% + 10px);
  display: flex;
  align-items: center;
  justify-content: center;
  /* 24 × 24 ist die kleinste Zielgröße, die WCAG 2.5.8 ohne die
     Abstands-Ausnahme zulässt. Zu sehen ist davon nur die 10px
     große Glyphe — der Rest ist reine Trefferfläche. */
  width: 24px;
  height: 24px;
  /* #949494 ist der hellste Grauwert, der gegen Weiß noch 3:1
     erreicht (3,03:1) und damit 1.4.11 für Bedienelemente erfüllt.
     Eine Stufe heller (#959595) sind es nur noch 2,99:1. */
  color: #949494;
  transition: color var(--dur) var(--ease);
}

.marquee__toggle .icon {
  width: 10px;
  height: 10px;
}

.marquee__toggle:hover {
  color: var(--ink-soft);
}

.marquee.is-paused .marquee__track {
  animation-play-state: paused;
}

/* Bittet das Betriebssystem um weniger Bewegung, steht der Streifen
   ohnehin still — dann hat der Schalter nichts zu tun. */
@media (prefers-reduced-motion: reduce) {
  .marquee__toggle { display: none; }
}

@keyframes marquee-scroll {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

/* ------------------------------------------------------------
   MODAL (Rechtstexte: Impressum, Datenschutz, Nutzungsbedingungen)
   ------------------------------------------------------------ */

/* `display` steht bewusst NUR auf [open]. Ein geschlossenes <dialog>
   versteckt der Browser über `dialog:not([open]) { display: none }`
   aus seinem eigenen Stylesheet — und jede Autoren-Regel schlägt das
   Browser-Stylesheet, unabhängig von der Spezifität. Ein schlichtes
   `.modal { display: flex }` hätte die drei Rechtstexte also
   dauerhaft unter dem Footer ausgerollt. */
.modal[open] {
  display: flex;
}

/* Flex-Spalte: der Kopf behält seine Höhe, der Body bekommt den
   Rest und scrollt. So bleibt die Aufteilung auch dann korrekt,
   wenn der Titel mal zweizeilig umbricht. */
.modal {
  flex-direction: column;
  width: min(720px, calc(100vw - 48px));
  max-height: min(84vh, 760px);
  padding: 0;
  border: 0;
  border-radius: var(--radius);
  background: var(--white);
  color: var(--ink-soft);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.18);
}

.modal::backdrop {
  background: rgba(34, 34, 34, 0.45);
  backdrop-filter: blur(2px);
}

/* Ein offenes <dialog> hält die Seite dahinter nicht an — das Rad
   scrollt weiter durch den Hintergrund, während der Rechtstext
   stehen bleibt. Deshalb hier gesperrt.

   `scrollbar-gutter: stable` steht dauerhaft, nicht nur im offenen
   Zustand: sonst verschwindet mit dem Scrollbalken auch sein Platz
   und die ganze Seite ruckt beim Öffnen um dessen Breite zur Seite.
   Da die Seite ohnehin immer scrollt, ändert die Reserve im Normal-
   fall nichts. */
html { scrollbar-gutter: stable; }

html:has(dialog[open]) { overflow: hidden; }

.modal__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex: none;
  gap: 24px;
  padding: 32px 32px 20px;
}

.modal__title {
  font-size: 28px;
  font-weight: var(--fw-bold);
  line-height: 1.2;
}

.modal__close {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-pill);
  background: var(--surface-soft);
  color: var(--ink);
  font-size: 20px;
  line-height: 1;
  transition: background-color var(--dur) var(--ease);
}

.modal__close:hover {
  background: #ECECEC;
}

/* Lange Rechtstexte lesen sich luftiger als der Fließtext der
   Seite — deshalb hier eine eigene Zeilenhöhe. */
.modal__body {
  flex: 1 1 auto;
  min-height: 0;
  padding: 0 32px 32px;
  overflow-y: auto;
  line-height: 1.6;
}

/* Grundrhythmus: jedes Element bekommt Luft nach oben, statt
   einzelner Regeln je Elementpaar. Überschriften und Listen
   feilen daran unten nach. */
.modal__body>*+* {
  margin-top: 16px;
}

.modal__body>*:first-child {
  margin-top: 0;
}

/* Kapitel („1. Rechtsgrundlagen …“) setzen sich deutlich ab,
   Unterkapitel („9.1 Auskunftsrecht“) etwas weniger. */
.modal__body>h3 {
  margin-top: 40px;
  font-size: 21px;
  font-weight: var(--fw-semibold);
  line-height: 1.3;
  color: var(--ink);
}

.modal__body>h4 {
  margin-top: 28px;
  font-size: 17px;
  font-weight: var(--fw-semibold);
  line-height: 1.4;
  color: var(--ink);
}

/* Was direkt unter einer Überschrift steht, rückt an sie heran. */
.modal__body>h3+*,
.modal__body>h4+* {
  margin-top: 12px;
}

/* Rechtstexte: Aufzählungen tragen ihre Nummerierung „(1)“ im Text,
   deshalb bleiben sie ohne eigene Marker – nur eingerückt. */
.modal__list {
  padding-left: 20px;
}

.modal__body>.modal__list {
  margin-top: 12px;
}

.modal__list li+li,
.modal__list ul {
  margin-top: 10px;
}

/* Adressen: enger gesetzt, damit der Block zusammenhält. */
.modal__address {
  line-height: 1.5;
}

.modal__body a {
  color: var(--brand);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  overflow-wrap: anywhere;
  transition: color var(--dur-fast) var(--ease);
}

.modal__body a:hover {
  color: var(--brand-dark);
  text-decoration: none;
}

.modal__body>.modal__footnote {
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  font-size: var(--fs-sm);
  color: var(--ink-muted);
}

/* ------------------------------------------------------------
   KI-KENNZEICHNUNG AUF BILDERN
   ------------------------------------------------------------
   Sitzt in der <figure>, nicht im <picture>: Das Bild selbst
   trägt in schmalen Ansichten einen Außenabstand — läge das
   Label darin, würde es mitwandern. Die <figure> ist genau so
   breit wie das Bild, deshalb stimmen die Abstände überall.

   Die Quelldateien tragen viel transparenten Rand; die hier
   verwendeten `label-ai-*.svg` sind auf die Pille beschnitten,
   damit 20px auch 20px sichtbare Höhe sind. */
.ai-label {
  position: absolute;
  right: 16px;
  bottom: 12px;
  width: auto;
  height: 16px;
  pointer-events: none;
}