/* ================================================================
   AnaCalling – Homepage & Branchen-Vorlage (Premium)
   Ergänzt css/style.css (Tokens/Buttons/Sections werden wiederverwendet).
   ================================================================ */

/* ---------- HERO (Aurora, minimalistisch) ---------- */
.home-hero {
  position: relative; z-index: 5;
  padding: clamp(5rem, 9vw, 8rem) 0 clamp(3.5rem, 6vw, 5.5rem);
  background: #fff;
  isolation: isolate;
}
/* Deko-Hintergrund gekapselt: clippt Aurora/Grid, OHNE das Branchen-Dropdown
   (das unter die Hero-Unterkante reicht) zu beschneiden. */
.home-hero__bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
/* Hero-Foto (nur Homepage): rechts verankert; Scrim hält den Text links lesbar.
   Liegt im __bg-Layer (z-index:-1), also hinter allen Hero-Inhalten. */
.home-hero__photo { position: absolute; inset: 0; pointer-events: none; }
.home-hero__photo img { width: 100%; height: 100%; object-fit: cover; object-position: right center; display: block; }
.home-hero__scrim { position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, #fff 0%, #fff 28%, rgba(255,255,255,.88) 42%, rgba(255,255,255,.4) 58%, rgba(255,255,255,.05) 76%, rgba(255,255,255,0) 92%);
}
@media (max-width: 940px) {
  /* Mobil: kein Hero-Foto (Lesbarkeit) → sauberer Aurora-Hintergrund. */
  .home-hero__photo, .home-hero__scrim { display: none; }
}
.home-hero__aurora {
  position: absolute; inset: -20% -10% auto -10%; height: 120%; z-index: -1; pointer-events: none;
  background:
    radial-gradient(40% 50% at 78% 18%, rgba(13,148,136,.18), transparent 70%),
    radial-gradient(45% 55% at 12% 75%, rgba(27,58,92,.16), transparent 70%),
    radial-gradient(30% 40% at 50% 0%, rgba(20,184,166,.10), transparent 70%);
  filter: saturate(1.05);
  animation: hh-aurora 18s ease-in-out infinite alternate;
}
@keyframes hh-aurora { from { transform: translate3d(0,0,0) scale(1); } to { transform: translate3d(0,-2%,0) scale(1.06); } }
.home-hero__grid { z-index:-1; position:absolute; inset:0; opacity:.5;
  background-image: radial-gradient(rgba(15,23,42,.045) 1px, transparent 1px); background-size: 22px 22px; -webkit-mask-image: linear-gradient(#000, transparent 70%); mask-image: linear-gradient(#000, transparent 70%); }

.home-hero__inner { display:grid; grid-template-columns: 1.05fr .95fr; gap: clamp(2rem,4vw,4rem); align-items:center; }
@media (max-width: 940px){ .home-hero__inner { grid-template-columns: 1fr; } }

.home-hero__eyebrow {
  display:inline-flex; align-items:center; gap:.55rem; padding:.4rem .85rem;
  border:1px solid var(--gray-200); border-radius:var(--r-full); background:#fff;
  font-size:.82rem; font-weight:700; color:var(--gray-600); box-shadow:var(--shadow-xs);
}
.home-hero__eyebrow .dot { width:8px; height:8px; border-radius:50%; background:var(--teal); box-shadow:0 0 0 4px rgba(13,148,136,.18); animation: hh-pulse 2s infinite; }
@keyframes hh-pulse { 0%{box-shadow:0 0 0 0 rgba(13,148,136,.35)} 70%{box-shadow:0 0 0 7px rgba(13,148,136,0)} 100%{box-shadow:0 0 0 0 rgba(13,148,136,0)} }

.home-hero h1 { font-size: clamp(2.3rem, 5vw, 3.6rem); line-height:1.08; letter-spacing:-.02em; font-weight:900; color:var(--gray-900); margin:1.1rem 0 1rem; }
.home-hero h1 .hl {
  background: linear-gradient(120deg, var(--teal), var(--primary-light));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.home-hero__sub { font-size: clamp(1.02rem,1.6vw,1.2rem); line-height:1.65; color:var(--gray-600); max-width:34em; margin-bottom: 1.6rem; }
.home-hero__sub b { color: var(--gray-800); }

/* Sanfter Wechsel bei Branchenwahl */
.swap { transition: opacity .28s ease, transform .28s ease; }
.swap.is-out { opacity:0; transform: translateY(6px); }

.home-hero__actions { display:flex; gap:.8rem; flex-wrap:wrap; margin-bottom:1.4rem; }
.home-hero__trust { display:flex; gap:1.1rem 1.4rem; flex-wrap:wrap; color:var(--gray-500); font-size:.85rem; font-weight:600; }
.home-hero__trust span { display:inline-flex; align-items:center; gap:.4rem; }
.home-hero__trust svg { width:16px; height:16px; color:var(--teal); }

/* ---------- BRANCHEN-SELECTOR (Custom-Dropdown) ---------- */
.ind-select { position:relative; display:inline-block; margin:0 0 1.5rem; max-width:100%; }
.ind-select__label { display:block; font-size:.8rem; font-weight:700; color:var(--gray-500); margin-bottom:.4rem; }
.ind-select__trigger {
  display:inline-flex; align-items:center; gap:.7rem; width:min(420px,100%);
  padding:.85rem 1rem; border:1.5px solid var(--gray-200); border-radius:var(--r-md);
  background:#fff; cursor:pointer; box-shadow:var(--shadow-sm); transition:border-color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast);
  font-family:inherit; font-size:1.02rem; font-weight:700; color:var(--gray-900); text-align:left;
}
.ind-select__trigger:hover { border-color:var(--teal); transform:translateY(-1px); box-shadow:var(--shadow-md); }
.ind-select.is-open .ind-select__trigger { border-color:var(--teal); box-shadow:0 0 0 4px rgba(13,148,136,.12); }
.ind-select__ico { font-size:1.25rem; line-height:1; }
.ind-select__name { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ind-select__chev { width:18px; height:18px; flex-shrink:0; color:var(--gray-400); transition:transform .2s ease; }
.ind-select.is-open .ind-select__chev { transform:rotate(180deg); }

.ind-select__panel {
  position:absolute; z-index:60; top:calc(100% + 8px); left:0; width:min(440px,92vw);
  background:#fff; border:1px solid var(--gray-200); border-radius:var(--r-lg);
  box-shadow:var(--shadow-xl); padding:.6rem; max-height:60vh; overflow:auto;
  opacity:0; transform:translateY(-6px) scale(.98); pointer-events:none; transform-origin:top left;
  transition:opacity .16s ease, transform .16s ease;
}
.ind-select.is-open .ind-select__panel { opacity:1; transform:none; pointer-events:auto; }
.ind-select__cat { font-size:.68rem; text-transform:uppercase; letter-spacing:.06em; font-weight:800; color:var(--gray-400); padding:.7rem .6rem .3rem; }
.ind-opt {
  display:flex; align-items:center; gap:.7rem; width:100%; padding:.6rem .65rem; border-radius:var(--r);
  cursor:pointer; border:none; background:none; font-family:inherit; text-align:left; transition:background var(--t-fast);
}
.ind-opt:hover, .ind-opt.is-active { background:var(--teal-50); }
.ind-opt__ico { font-size:1.2rem; line-height:1; flex-shrink:0; }
.ind-opt__name { flex:1; font-size:.95rem; font-weight:600; color:var(--gray-800); }
.ind-opt__badge { font-size:.62rem; font-weight:800; text-transform:uppercase; letter-spacing:.04em; padding:.15rem .45rem; border-radius:var(--r-full); }
.ind-opt__badge.live { background:var(--green-50); color:var(--green-dark); }
.ind-opt__badge.soon { background:var(--gray-100); color:var(--gray-500); }
.ind-opt__go { color:var(--teal); font-weight:800; flex-shrink:0; opacity:.65; transition:transform var(--t-fast), opacity var(--t-fast); }
.ind-opt:hover .ind-opt__go, .ind-opt.is-active .ind-opt__go { opacity:1; transform:translateX(3px); }

/* ---------- HERO-ANIMATION (Anruf → Ana → Mail), reines CSS ---------- */
.hero-anim { position:relative; width:100%; max-width:460px; margin-inline:auto; aspect-ratio: 1 / .92; }
.hero-anim__card {
  position:absolute; background:#fff; border:1px solid var(--gray-200); border-radius:var(--r-xl);
  box-shadow:var(--shadow-xl); padding:1.1rem 1.2rem;
}
/* Beide Karten im UNTEREN Bereich (über Arm/Tisch) → halten das Gesicht frei.
   Sequenziell: erst „Ana nimmt an" (Anruf), dann „Zusammenfassung" (Ergebnis). */
.hero-anim__phone { left:0; bottom:22%; width:62%; animation: ha-phone 11s ease-in-out infinite; }
.hero-anim__mail  { right:0; bottom:2%;  width:66%; animation: ha-mail 11s ease-in-out infinite; }
@keyframes ha-phone {
  0%, 4%   { opacity:0; transform:translateY(10px) scale(.97); }
  12%, 42% { opacity:1; transform:none; }                          /* Anruf kommt rein */
  50%,100% { opacity:0; transform:translateY(-8px) scale(.985); }  /* blendet aus, übergibt an Mail */
}
@keyframes ha-mail {
  0%, 50%  { opacity:0; transform:translateY(14px) scale(.96); }
  58%, 92% { opacity:1; transform:none; }                          /* Zusammenfassung, ~4 s lesbar */
  100%     { opacity:0; transform:translateY(-6px) scale(.98); }   /* sanftes Fade-out */
}
/* ---------- MOBILE BÜHNE: Foto randlos hinter der Animation ----------
   Ausgangslage: Im Textbereich bleibt das Hero-Foto mobil ausgeblendet (siehe
   .home-hero__photo oben) — sonst leidet die Lesbarkeit. Darunter, wo ohnehin
   nur die Animationskarten stehen, wird das Foto zur Bühne:

     • randlos von Kante zu Kante (100vw aus dem Container ausbrechen),
     • oben weich in die weiße Seite auslaufen (mask) → keine sichtbare Naht,
     • unten ein weißer Verlauf, damit die Karten lesbar bleiben,
     • die E-Mail-Karte ragt 26px über die Bildkante auf den weißen Grund —
       dieser Überstand verbindet Foto und Karten zu einer Szene.

   Desktop: .hero-stage ist display:none, und die <source> im Markup greifen erst
   ab max-width:940px ⇒ die Bilddatei wird dort gar nicht erst geladen. */
.hero-stage { display: none; }

@media (max-width: 940px) {
  /* Ohne Bild bleibt der Container flach (so nutzt es branche.php weiter). */
  .hero-anim { aspect-ratio: auto; height: 250px; }

  /* Nur der Startseiten-Hero hat die Bühne: +26px Höhe für den Überstand der
     unteren Karte über die Bildkante, Karten über das Foto legen. */
  .home-hero--photo .hero-anim { height: 352px; position: relative; z-index: 1; }
  .home-hero--photo .hero-anim__phone { bottom: 26%; }
  .home-hero--photo .hero-anim__mail  { bottom: 0; }

  .home-hero__visual { position: relative; }
  .hero-stage {
    display: block; position: absolute; top: 0; height: 326px;
    /* randlos: aus dem Container auf volle Viewport-Breite ausbrechen */
    left: 50%; transform: translateX(-50%); width: 100vw;
    pointer-events: none;
  }
  .hero-stage picture { display: block; width: 100%; height: 100%; }
  .hero-stage img {
    width: 100%; height: 100%; object-fit: cover; object-position: 64% 20%;
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 22%);
            mask-image: linear-gradient(180deg, transparent 0, #000 22%);
  }
  .hero-stage::after {
    content: ''; position: absolute; inset: auto 0 0 0; height: 58%;
    background: linear-gradient(180deg, rgba(255,255,255,0), rgba(255,255,255,.92));
  }
}

.ha-row { display:flex; align-items:center; gap:.7rem; }
.ha-avatar { width:42px; height:42px; border-radius:50%; background:linear-gradient(135deg,var(--primary),var(--teal)); display:flex; align-items:center; justify-content:center; color:#fff; flex-shrink:0; }
.ha-avatar svg { width:20px; height:20px; }
.ha-name { font-weight:800; color:var(--gray-900); font-size:.95rem; }
.ha-meta { font-size:.75rem; color:var(--gray-400); }
.ha-ring { margin-left:auto; width:10px; height:10px; border-radius:50%; background:var(--green); animation: ha-blink 1.1s ease-out infinite; }
@keyframes ha-blink { 0%{box-shadow:0 0 0 0 rgba(16,185,129,.5)} 70%{box-shadow:0 0 0 8px rgba(16,185,129,0)} 100%{box-shadow:0 0 0 0 rgba(16,185,129,0)} }

.ha-wave { display:flex; align-items:center; gap:3px; height:34px; margin-top:.9rem; }
.ha-wave i { flex:1; background:linear-gradient(var(--teal),var(--primary-light)); border-radius:3px; height:30%; animation: ha-wave 1.1s ease-in-out infinite; }
.ha-wave i:nth-child(2){animation-delay:.1s} .ha-wave i:nth-child(3){animation-delay:.2s} .ha-wave i:nth-child(4){animation-delay:.3s}
.ha-wave i:nth-child(5){animation-delay:.4s} .ha-wave i:nth-child(6){animation-delay:.5s} .ha-wave i:nth-child(7){animation-delay:.15s} .ha-wave i:nth-child(8){animation-delay:.35s}
@keyframes ha-wave { 0%,100%{height:25%} 50%{height:95%} }

/* Zusammenfassungs-Karte = Push-Benachrichtigung (aufs Wesentliche reduziert) */
.ha-push { display:flex; align-items:center; gap:.5rem; margin-bottom:.6rem; }
.ha-push__app { width:24px; height:24px; border-radius:7px; background:linear-gradient(135deg,var(--primary),var(--teal)); color:#fff; line-height:1; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.ha-push__app svg { width:14px; height:14px; }
.ha-push__name { font-size:.82rem; font-weight:800; letter-spacing:.03em; text-transform:uppercase; color:var(--gray-700); }
.ha-push__when { margin-left:auto; font-size:.68rem; font-weight:600; color:var(--gray-400); }
.ha-push__title { font-size:.9rem; font-weight:800; color:var(--gray-900); line-height:1.25; }
.ha-push__msg { margin-top:.18rem; font-size:.82rem; color:var(--gray-700); line-height:1.4; }
.ha-badge { display:inline-flex; align-items:center; margin-top:.7rem; font-size:.68rem; font-weight:800; color:#b45309; background:var(--orange-50); border:1px solid #fde68a; padding:.15rem .5rem; border-radius:var(--r-full); }

/* ---------- INDUSTRIE-MARQUEE ---------- */
.ind-marquee { overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); padding:.4rem 0; }
.ind-marquee__track { display:flex; gap:.7rem; width:max-content; animation: ind-marq 36s linear infinite; }
.ind-marquee:hover .ind-marquee__track { animation-play-state:paused; }
@keyframes ind-marq { to { transform:translateX(-50%); } }
.ind-chip { display:inline-flex; align-items:center; gap:.45rem; padding:.5rem .9rem; border:1px solid var(--gray-200); border-radius:var(--r-full); background:#fff; font-size:.85rem; font-weight:600; color:var(--gray-700); white-space:nowrap; box-shadow:var(--shadow-xs); }

/* ---------- STAT COUNT-UP ---------- */
.stat-row { display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:1.25rem; }
.stat { text-align:center; }
.stat__num { font-size:clamp(2.2rem,4vw,3rem); font-weight:900; line-height:1; letter-spacing:-.02em;
  background:linear-gradient(120deg,var(--primary),var(--teal)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.stat__label { margin-top:.5rem; font-size:.9rem; color:var(--gray-500); }

/* ---------- OFFER-CARD (Grand Slam) ---------- */
.offer { position:relative; background:linear-gradient(135deg,var(--primary-dark),var(--primary)); color:#fff; border-radius:var(--r-2xl); padding:clamp(1.8rem,4vw,3rem); overflow:hidden; box-shadow:var(--shadow-xl); }
.offer::after { content:""; position:absolute; inset:auto -10% -40% auto; width:60%; height:80%; background:radial-gradient(circle,rgba(13,148,136,.45),transparent 70%); }
.offer__inner { position:relative; display:grid; grid-template-columns:1.1fr .9fr; gap:2rem; align-items:center; }
@media(max-width:820px){ .offer__inner{ grid-template-columns:1fr; } }
.offer h2 { color:#fff; font-size:clamp(1.6rem,3vw,2.2rem); line-height:1.15; margin-bottom:1rem; }
.offer__list { list-style:none; padding:0; margin:0 0 1.3rem; display:grid; gap:.6rem; }
.offer__list li { display:flex; align-items:flex-start; gap:.6rem; font-size:1rem; color:rgba(255,255,255,.92); }
.offer__list svg { width:20px; height:20px; flex-shrink:0; color:var(--teal-light); margin-top:1px; }
.offer__stack { background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.15); border-radius:var(--r-lg); padding:1.3rem; backdrop-filter:blur(6px); }
.offer__stack-row { display:flex; justify-content:space-between; align-items:center; padding:.5rem 0; border-bottom:1px solid rgba(255,255,255,.12); font-size:.92rem; }
.offer__stack-row:last-child{ border-bottom:none; }
.offer__stack-row s { color:rgba(255,255,255,.5); }
.offer__stack-total { display:flex; justify-content:space-between; align-items:baseline; margin-top:.8rem; font-weight:800; font-size:1.05rem; }
.offer__stack-total .free { color:var(--teal-light); font-size:1.4rem; }
.offer__guarantee { display:inline-flex; align-items:center; gap:.5rem; margin-top:1rem; font-size:.85rem; color:rgba(255,255,255,.8); }

/* ---------- STEPS ---------- */
.steps { display:grid; grid-template-columns:repeat(4,1fr); gap:1.25rem; counter-reset:step; }
@media(max-width:820px){ .steps{ grid-template-columns:1fr 1fr; } }
@media(max-width:480px){ .steps{ grid-template-columns:1fr; } }
.step { background:#fff; border:1px solid var(--gray-200); border-radius:var(--r-lg); padding:1.4rem; box-shadow:var(--shadow-xs); position:relative; transition:transform var(--t-fast), box-shadow var(--t-fast); }
.step:hover { transform:translateY(-3px); box-shadow:var(--shadow-md); }
.step__n { width:34px; height:34px; border-radius:50%; background:var(--teal-50); color:var(--teal-dark); font-weight:800; display:flex; align-items:center; justify-content:center; margin-bottom:.8rem; }
.step h3 { font-size:1.0625rem; margin-bottom:.35rem; color:var(--gray-900); }
.step p { font-size:.9rem; color:var(--gray-500); line-height:1.6; margin:0; }

/* ---------- INDUSTRY GRID ---------- */
.ind-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:.9rem; }
.ind-card { display:flex; align-items:center; gap:.7rem; padding:1rem 1.1rem; border:1px solid var(--gray-200); border-radius:var(--r-lg); background:#fff; box-shadow:var(--shadow-xs); cursor:pointer; transition:transform var(--t-fast), box-shadow var(--t-fast), border-color var(--t-fast); text-decoration:none; }
.ind-card:hover { transform:translateY(-3px); box-shadow:var(--shadow-md); border-color:var(--teal); }
.ind-card__ico { font-size:1.5rem; line-height:1; flex-shrink:0; }
.ind-card > span:nth-child(2) { flex:1 1 auto; min-width:0; }
/* Klick-Affordance: sichtbarer Pfeil (auch ohne Hover, wichtig fuer Mobile);
   beim Hover kraeftiger + Slide nach rechts — Muster wie im Branchen-Menue. */
.ind-card__go { flex-shrink:0; color:var(--teal); font-weight:800; font-size:1.05rem; opacity:.55; transition:transform var(--t-fast), opacity var(--t-fast); }
.ind-card:hover .ind-card__go { opacity:1; transform:translateX(3px); }
.ind-card__name { font-weight:700; color:var(--gray-800); font-size:.95rem; line-height:1.2; overflow-wrap:anywhere; hyphens:auto; }
.ind-card__cat { font-size:.72rem; color:var(--gray-400); overflow-wrap:anywhere; }

/* ---------- MAGNETIC CTA ---------- */
.btn--magnetic { will-change: transform; }

/* ---------- MOBILE ---------- */
@media(max-width:560px){ .home-hero__actions .btn { width:100%; justify-content:center; } }

/* Preismodell 2.0 — Trust-Strip im Hero: linksbuendig wie der Rest der
   Textspalte (der Strip selbst zentriert per Default fuer die Branchen-Heros). */
.home-hero__text .trust-strip { justify-content: flex-start; margin: 1rem 0 1.5rem; }