/* GEHALTSATLAS atlas.css — D-115 Stufe 2: Berufssuche, mobiler Knopf, Wegweiser-Knopf */

/* Berufssuche im Hero (dunkler Hintergrund) */
.atlas-suche { position: relative; max-width: 620px; margin: 28px 0 22px; }
.atlas-suche-label { display: block; font-weight: 600; font-size: 1rem; color: #fff; margin: 0 0 10px; letter-spacing: .01em; }
.atlas-suche-box { position: relative; }
.atlas-suche-icon { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); color: #64748B; pointer-events: none; }
.atlas-suche-box input {
  width: 100%; box-sizing: border-box; height: 58px; padding: 0 18px 0 48px;
  font: inherit; font-size: 1.0625rem; color: #0F172A; background: #fff;
  border: 2px solid transparent; border-radius: 14px; box-shadow: 0 10px 30px rgba(2, 6, 23, .35);
  -webkit-appearance: none; appearance: none;
}
.atlas-suche-box input::placeholder { color: #64748B; }
.atlas-suche-box input:focus { outline: none; border-color: #60A5FA; box-shadow: 0 0 0 4px rgba(96, 165, 250, .35), 0 10px 30px rgba(2, 6, 23, .35); }
.atlas-suche-hinweis { margin: 10px 0 0; font-size: .875rem; color: rgba(255, 255, 255, .72); }
.atlas-treffer {
  position: absolute; z-index: 40; left: 0; right: 0; top: calc(100% - 26px); margin: 0; padding: 6px; list-style: none;
  background: #fff; border-radius: 14px; box-shadow: 0 18px 40px rgba(2, 6, 23, .28); max-height: 380px; overflow-y: auto;
}
.atlas-treffer li a { display: flex; flex-direction: column; gap: 2px; padding: 11px 14px; border-radius: 10px; color: #0F172A; text-decoration: none; }
.atlas-treffer li a:hover, .atlas-treffer li[aria-selected="true"] a { background: #EFF6FF; }
.atlas-treffer-name { font-weight: 600; font-size: 1rem; }
.atlas-treffer-meta { font-size: .8125rem; color: #475569; }
.atlas-treffer-leer { padding: 12px 14px; color: #475569; font-size: .9375rem; }
.hero .hero-actions { margin-top: 6px; }

/* Wegweiser-Ergebnis: Gehaltscheck-Knopf */
.atlas-quiz-cta { margin-top: 26px; padding-top: 22px; border-top: 1px solid rgba(148, 163, 184, .35); text-align: center; }
.atlas-quiz-cta p { margin: 0 0 14px; font-weight: 600; }

/* Mobil: fester Gehaltscheck-Knopf */
.atlas-sticky-cta { display: none; }
@media (max-width: 767px) {
  .atlas-sticky-cta {
    display: block; position: fixed; z-index: 60; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom));
    padding: 15px 18px; text-align: center; font-weight: 700; font-size: 1rem; color: #fff; text-decoration: none;
    background: #2563EB; border-radius: 14px; box-shadow: 0 12px 28px rgba(2, 6, 23, .35);
    transform: translateY(140%); transition: transform .25s ease;
  }
  .atlas-sticky-cta.is-visible { transform: translateY(0); }
  .atlas-suche { margin-top: 22px; }
  .atlas-suche-box input { height: 54px; font-size: 1rem; }
}
@media (prefers-reduced-motion: reduce) { .atlas-sticky-cta { transition: none; } }

/* Sieben Branchen-Reiter (Bau dazu) */
@media (min-width: 881px) { .branchen-tabs { grid-template-columns: repeat(7, 1fr); } }
@media (max-width: 880px) and (min-width: 541px) { .branchen-tabs { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 540px) {
  .branchen-tabs { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; }
  .branchen-tab { flex: 0 0 38%; scroll-snap-align: start; }
}

/* Handy: Team, Methodik und Trends als waagerechte Wischreihe statt drei bis vier Karten untereinander (Startseite ~15.700 px) */
@media (max-width: 767px) {
  .team-grid, .method-content, .stats-grid {
    display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 14px;
    margin-inline: -20px; padding: 0 20px 12px; scroll-padding-left: 20px;
  }
  .team-grid > *, .method-content > *, .stats-grid > * { flex: 0 0 82%; scroll-snap-align: start; }
  .team-photo { aspect-ratio: 4 / 3; }
}