/**
 * Welcome-Modal der Recruiting-App.
 *
 * Nutzt die Design-Tokens aus app-v4.css (--bg-card, --ink, --border, --gold …) und
 * funktioniert dadurch in beiden Farbschemata ohne eigene Dark-Mode-Regeln — bis auf
 * die Overlay-Abdunklung, die im Dunkeln kräftiger sein muss.
 *
 * Der welcome-*-Präfix ist in dieser App frei (keine Kollision mit app-v4.css).
 * .modal ist hier bewusst NICHT definiert (app-v4.css:1627) — nicht einführen.
 */

.welcome-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000; /* unter subscription-check.js (99999): ein abgelaufenes Abo ist wichtiger */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(27, 25, 24, 0.55);
  backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity 200ms ease;
}

.welcome-overlay.welcome-visible {
  opacity: 1;
}

.welcome-overlay.welcome-closing {
  opacity: 0;
}

.welcome-modal {
  --welcome-accent: var(--gold);
  position: relative;
  width: 100%;
  max-width: 520px;
  max-height: 90vh;
  overflow-y: auto;
  padding: 40px 36px 32px;
  /* Zentriert wie das Gegenstück im Onboarding — eine Begrüssung, kein Formular. */
  text-align: center;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.18);
  transform: translateY(8px) scale(0.98);
  transition:
    transform 220ms cubic-bezier(0.16, 1, 0.3, 1),
    opacity 220ms ease;
}

.welcome-visible .welcome-modal {
  transform: translateY(0) scale(1);
}

.welcome-close {
  position: absolute;
  top: 14px;
  right: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  border-radius: 8px;
  background: transparent;
  /* button erbt keine Textfarbe — im Dunkeln sonst unsichtbar */
  color: var(--ink-3);
  cursor: pointer;
  transition:
    background 150ms,
    color 150ms;
}

.welcome-close:hover {
  background: var(--bg-inset);
  color: var(--ink);
}

.welcome-logo {
  display: block;
  max-width: 130px;
  max-height: 44px;
  width: auto;
  height: auto;
  /* auto-Ränder, damit das Logo im zentrierten Modal auch mittig steht */
  margin: 0 auto 18px;
  object-fit: contain;
}

.welcome-title {
  margin: 0 0 10px;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--ink);
}

.welcome-subtitle {
  margin: 0 0 28px;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--ink-2);
}

/* Zeilen statt Raster: Zu den drei Standardkarten können bis zu drei eigene aus dem
   Welcome-Editor kommen. Untereinander gibt es weder eine Lücke bei vier Karten noch
   Höhenunterschiede bei langen Beschreibungen. */
.welcome-cards {
  display: grid;
  gap: 10px;
  margin-bottom: 28px;
  text-align: left;
}

.welcome-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border: 1px solid var(--border-light);
  border-radius: 12px;
  background: var(--bg-warm);
  color: var(--ink);
  text-decoration: none;
  opacity: 0;
  transform: translateY(6px);
  animation: welcome-card-in 320ms ease forwards;
  animation-delay: var(--stagger, 0ms);
  transition:
    border-color 150ms,
    background 150ms,
    transform 150ms;
}

.welcome-card:hover {
  border-color: var(--welcome-accent);
  background: var(--bg-hover);
  transform: translateY(-2px);
}

.welcome-card span:first-child {
  display: flex;
  flex: 0 0 auto;
  color: var(--welcome-accent);
}

.welcome-card strong {
  display: block;
  font-size: 0.9rem;
  font-weight: 600;
  /* Lange Titel ohne Leerzeichen dürfen die Karte nicht sprengen */
  overflow-wrap: anywhere;
}

.welcome-card span:last-child {
  /* Eigene Karten aus dem Editor dürfen bis zu 120 Zeichen Beschreibung tragen.
     Ohne Klemmung wächst eine einzelne Karte über die anderen hinaus und reisst
     die Zeile auf. */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-top: 2px;
  font-size: 0.8rem;
  line-height: 1.4;
  color: var(--ink-3);
  overflow-wrap: anywhere;
}

@keyframes welcome-card-in {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.welcome-cta {
  display: block;
  width: 100%;
  padding: 13px 20px;
  border: none;
  border-radius: 10px;
  background: var(--welcome-accent);
  color: #fff;
  font-size: 0.95rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: filter 150ms;
}

.welcome-cta:hover {
  filter: brightness(1.08);
}

.welcome-cta:focus-visible,
.welcome-close:focus-visible,
.welcome-card:focus-visible {
  outline: 2px solid var(--welcome-accent);
  outline-offset: 2px;
}

@media (max-width: 520px) {
  .welcome-modal {
    padding: 32px 20px 24px;
  }
}

/* Im Dunkeln braucht das Overlay mehr Deckung, sonst steht das Modal zu flach im Bild */
:root[data-theme='dark'] .welcome-overlay {
  background: rgba(0, 0, 0, 0.68);
}

@media (prefers-reduced-motion: reduce) {
  .welcome-overlay,
  .welcome-modal,
  .welcome-card {
    transition: none;
    animation: none;
    opacity: 1;
    transform: none;
  }
}