/* ============================================================
   IMMOCODEX — Mobile-Pass (Smartphone, 430px und darunter)
   Nur Layout/Abstände/Touch — keine Farbänderungen.
   ============================================================ */
html, body { overflow-x: clip; }
img, svg, .skyline { max-width: 100%; }
section[id], footer[id] { scroll-margin-top: 78px; }

@media (max-width: 430px) {
  .wrap { padding: 0 18px; }
  .band { padding: 68px 0; }

  /* Header */
  .nav-inner { padding: 13px 18px; gap: 14px; }
  .nav-inner .logo { height: 19px; }
  .nav-menu .btn { min-height: 48px; padding: 0 16px; font-size: 12.5px; display: inline-flex; align-items: center; }

  /* Touch-Ziele */
  .btn, .btn--lg { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; }
  .hero-link { min-height: 48px; display: inline-flex; align-items: center; }
  .faq-q { min-height: 56px; }
  .foot-links a, .contact a { min-height: 48px; display: inline-flex; align-items: center; }

  /* Hero C · Ticket */
  .hero-ticket { padding: 40px 0 52px; }
  .hero-ticket .tgrid { gap: 30px; }
  .hero-ticket h1 { font-size: clamp(29px,8.4vw,37px); letter-spacing: -0.03em; max-width: none; }
  .hero-ticket .sub { font-size: 16px; }
  .hero-ticket .actions { gap: 14px; }
  .hero-ticket .ticket .num .v { font-size: 46px; }
  .hero-ticket .ticket .num .k { font-size: 14px; max-width: none; }
  .hero-ticket .ticket .th { font-size: 9.5px; letter-spacing: .14em; gap: 10px; }
  .hero-ticket .ticket .tf { gap: 5px; }
  .hero-ticket .ticket .tfl { font-size: 9.5px; letter-spacing: .06em; gap: 4px; }
  .hero-ticket .ticket .tfl span { flex: 1; text-align: center; }
  .hero-ticket .ticket .tfl span:first-child { text-align: left; }
  .hero-ticket .ticket .tfl span:last-child { text-align: right; }

  /* Sektionsköpfe & Text */
  .section-head h2 { font-size: clamp(24px,7.4vw,30px); }
  .eyebrow { font-size: 10.5px; letter-spacing: .16em; }
  .lede p { font-size: 16px; }

  /* Prämien-Karten */
  .rw-grid { gap: 16px; margin-top: 36px; }
  .rw2 { padding: 24px 20px; }
  .rw2 h3 { font-size: 22px; }
  .rw2 li, .rw2 .txt { font-size: 15px; }

  /* Statusstufen */
  .tiers { margin-top: 36px; gap: 14px; }
  .tier { padding: 26px 20px; gap: 22px; }
  .mtl .nm { font-size: 22px; letter-spacing: .12em; }
  .tier h3 { font-size: 21px; }
  .tier li { font-size: 15px; }
  .tier .think { padding-left: 14px; font-size: 15px; }

  /* Beispielrechnungen */
  .sc-grid { gap: 16px; margin-top: 36px; }
  .sc { padding: 26px 20px 24px; }
  .sc .r { gap: 12px; align-items: baseline; }
  .sc .r .k { font-size: 14px; }
  .sc .total { font-size: 27px; }

  /* Langfristige Vorteile */
  .advitem { padding: 32px 0; gap: 18px; }
  .advitem .r p { font-size: 16px; }

  /* Team */
  .teamlite { grid-template-columns: 1fr; gap: 16px; }

  /* FAQ */
  .faq-q { font-size: 16px; line-height: 1.4; padding-right: 40px; }
  .faq-a .inner { font-size: 15.5px; }

  /* Abschluss + Formular */
  .close-card { padding: 32px 20px; }
  .close-head h2 { font-size: clamp(23px,7.2vw,29px); }
  .empf-form { margin-top: 28px; gap: 16px; }
  .empf-form input[type="text"], .empf-form input[type="tel"], .empf-form textarea { width: 100%; }
  .empf-form .fa .btn { min-height: 52px; }
  .form-done { font-size: 17px; }

  /* Footer */
  .foot-inner { gap: 22px; }
  .foot-links { flex-direction: column; align-items: flex-start; gap: 4px; }
  .foot-copy { font-size: 11.5px; line-height: 1.6; }

  /* Programmbedingungen */
  .pb-band { padding: 72px 0 56px; }
  .pb-head h1 { font-size: clamp(25px,7.4vw,32px); }
  .pb-list { margin-top: 36px; }
  .pb-item { padding: 20px 18px; }
  .pb-item p { font-size: 15.5px; }
}

@media (max-width: 370px) {
  .wrap { padding: 0 15px; }
  .hero-ticket .ticket .num .v { font-size: 40px; }
  .hero-ticket .ticket .th span:last-child { display: none; }
  .hero-ticket .ticket .tfl { font-size: 8.5px; }
  .mtl .nm { font-size: 20px; }
}

/* ============================================================
   Mobile-Fix: Statusstufen + Team einspaltig (unter 768px)
   Lädt nach allen anderen Stylesheets, gewinnt per Reihenfolge.
   ============================================================ */
@media (max-width: 767px) {
  .tiers { grid-template-columns: 1fr; }
  .tier { display: block; grid-template-columns: none; padding: 28px 20px; }
  .tier > * { min-width: 0; max-width: 100%; }
  .tier .mtl { margin-bottom: 6px; }
  .tier .thr { margin-top: 10px; }
  .tier h3 { margin-top: 20px; font-size: clamp(20px,5.8vw,25px); }
  .tier .lbl { margin-top: 20px; }
  .tier ul { margin-top: 12px; }
  .tier li { font-size: 15px; }
  .tier .think { margin-top: 20px; }
  .tier .bonus { white-space: normal; }

  .teamlite { grid-template-columns: 1fr; gap: 18px; }
  .tl { display: flex; flex-direction: column; }
  .tl .pf { width: 100%; aspect-ratio: 4 / 3; }
  .tl .bd { border-top: 3px solid var(--accent); border-left: none; padding: 20px 20px 22px; }
}

/* Bildausschnitt Porträts: Köpfe vollständig sichtbar */
.tl .pf image-slot { --slot-object-position: 50% 12%; }
.tl .pf image-slot img, .tl .pf img { object-fit: cover; object-position: 50% 12%; }
#emp-team-andi img { object-position: 50% 18%; }
#emp-team-anina img, #emp-team-robert img { object-position: 50% 10%; }