/* ============================================================
   PERSOX - UNTERSEITE KONTAKT
   Nur neue Selektoren fuer kontakt.html. Keine bestehende Regel
   aus persox.css, bestof.css oder shadcn.css wird veraendert.
   Farben, Fonts und Radien kommen ausschliesslich aus den
   vorhandenen Custom Properties.
   ============================================================ */

/* ------------------------------------------------------------
   A) HERO - zweispaltig, rechte Spalte traegt die Terminkarte
   ------------------------------------------------------------ */
.px-hero-kontakt{padding-bottom:clamp(28px,3.4vw,48px)}
.px-hero-kontakt .hero-grid{align-items:center}

/* Kontaktzeile unter dem Lead: Telefon und E-Mail als flache Chips */
.px-hkzeile{
  display:flex;flex-wrap:wrap;gap:10px;
  margin-top:26px;
}
.px-hk{
  display:inline-flex;align-items:center;gap:11px;
  padding:11px 16px;border-radius:16px;
  background:var(--paper);border:1px solid var(--hairline);
  box-shadow:var(--sh-card);text-decoration:none;color:inherit;
  transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s,border-color .25s;
}
.px-hk:hover{
  transform:translateY(-2px);
  border-color:rgba(0,174,181,.35);
  box-shadow:0 0 0 1px rgba(23,23,23,.04),0 14px 28px -16px rgba(10,10,10,.28);
}
.px-hk-ic{
  width:32px;height:32px;border-radius:10px;flex:none;display:grid;place-items:center;
  background:var(--brand-wash);color:var(--brand-deep);
}
.px-hk-ic svg{width:16px;height:16px}
.px-hk-tx{display:flex;flex-direction:column;gap:2px;min-width:0}
.px-hk-tx b{
  font-family:var(--mono);font-size:10px;font-weight:500;
  letter-spacing:.6px;text-transform:uppercase;color:var(--mid);
}
.px-hk-tx span{font-size:14px;font-weight:500;letter-spacing:-.01em;color:var(--ink)}
.px-hk:hover .px-hk-tx span{color:var(--brand-deep)}
@media(max-width:420px){
  .px-hkzeile{flex-direction:column;align-items:stretch}
}

/* ------------------------------------------------------------
   B) TERMINKARTE - Ansprechpartner, Kalender-Mock, grosser CTA
   ------------------------------------------------------------ */
.px-terminkarte{
  margin-bottom:0;padding:20px;
  display:flex;flex-direction:column;gap:16px;
  position:relative;z-index:1;
}
/* Die Karte ist keine Hover-Kachel, sondern das Ziel der Seite */
.px-terminkarte:hover{transform:none;box-shadow:var(--sh-card)}

.px-tk-person{display:flex;align-items:center;gap:13px}
.px-tk-person img{
  width:50px;height:50px;border-radius:50%;object-fit:cover;flex:none;
  box-shadow:0 0 0 1px var(--hairline);
}
.px-tk-tx{display:flex;flex-direction:column;min-width:0;flex:1 1 auto}
.px-tk-name{font-size:14.5px;font-weight:600;letter-spacing:-.02em;color:var(--ink)}
.px-tk-rolle{font-size:11.5px;color:var(--mid);margin-top:2px}
.px-tk-frei{
  display:inline-flex;align-items:center;gap:6px;flex:none;
  padding:4px 10px;border-radius:var(--r-pill);
  font-family:var(--mono);font-size:9.5px;letter-spacing:.4px;
  background:var(--gruen-wash);color:var(--gruen);white-space:nowrap;
}
.px-tk-frei i{width:6px;height:6px;border-radius:50%;background:var(--gruen);flex:none}

/* Kalender-Mock aus der Startseiten-Ablauf-Kachel 01.
   Dort startet die Animation ueber .pz-grid.pz-on aus persox.js.
   Hier gibt es kein #ablauf, deshalb laeuft sie direkt beim Laden. */
.px-tk-mock{gap:11px;margin:0;padding:15px}
.px-tk-mock .pz-week i{height:22px;font-size:9.5px}
.px-tk-mock .pz-slot{height:30px;font-size:11px}
.px-terminkarte .pz-slot{
  opacity:1;transform:none;
  animation:pxTkSlot .45s cubic-bezier(.2,.8,.2,1) backwards;
}
.px-terminkarte .pz-slot:nth-child(1){animation-delay:.45s}
.px-terminkarte .pz-slot:nth-child(2){animation-delay:.59s}
.px-terminkarte .pz-slot:nth-child(3){animation-delay:.73s}
@keyframes pxTkSlot{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
.px-terminkarte .pz-slot.ok{
  background:var(--brand);color:#fff;box-shadow:none;
  transition:none;
}
.px-terminkarte .pz-slot.ok svg{
  opacity:1;transform:none;
  animation:pxTkPop .5s 1.05s cubic-bezier(.34,1.56,.64,1) backwards;
}
@keyframes pxTkPop{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){
  .px-terminkarte .pz-slot,
  .px-terminkarte .pz-slot.ok svg{animation:none;opacity:1;transform:none}
}

.px-tk-btn{
  width:100%;justify-content:center;
  height:50px;padding:0 22px;font-size:15px;
}
.px-tk-fuss{
  margin:0;text-align:center;
  font-family:var(--mono);font-size:10px;letter-spacing:.4px;
  text-transform:uppercase;color:var(--mid);
}

@media(max-width:980px){
  .px-terminkarte{max-width:460px}
}

/* ------------------------------------------------------------
   C) WAS SIE ERWARTET - nummerierte Liste (px-liste aus persox.css)
   ------------------------------------------------------------ */
#erwartet .px-liste-tx h3{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
#erwartet .px-liste-tx h3 .badge{flex:none;transform:translateY(1px)}

/* ------------------------------------------------------------
   D) DIREKT ERREICHEN - drei Kontaktwege in po-bcard-Optik
   ------------------------------------------------------------ */
.px-wege{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;align-items:stretch;
}
.px-weg{
  padding:20px 20px 22px;text-decoration:none;color:inherit;
}
.px-weg .po-bic{width:36px;height:36px;border-radius:11px;margin-bottom:14px}
.px-weg .po-bic svg{width:18px;height:18px}
.px-weg .po-bt{font-size:15.5px;letter-spacing:-.02em;margin:0 0 8px}
.px-weg-wert{
  margin:0 0 10px;font-family:var(--mono);font-size:14px;line-height:1.55;
  font-style:normal;letter-spacing:-.01em;color:var(--ink);
}
.px-weg .po-bp{margin-top:auto}
a.px-weg:hover .px-weg-wert{color:var(--brand-deep)}
a.px-weg:hover .po-bic{background:var(--brand);color:#fff}
.px-weg .po-bic{transition:background .25s,color .25s}

.px-wege-note{
  display:flex;align-items:center;justify-content:center;gap:8px;
  margin:22px 0 0;
  font-family:var(--mono);font-size:11px;letter-spacing:.5px;
  text-transform:uppercase;color:var(--mid);
}
.px-wege-note svg{flex:none;color:var(--brand-deep)}

@media(max-width:900px){
  .px-wege{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:560px){
  .px-wege{grid-template-columns:1fr}
}

/* ------------------------------------------------------------
   E) FAQ - Eyebrow ueber der zentrierten Ueberschrift
   ------------------------------------------------------------ */
#faq .px-faq .px-eyebrow{margin-bottom:14px}

/* ------------------------------------------------------------
   F) VERTRAUENSZEILE statt CTA-Block am Seitenende
   ------------------------------------------------------------ */
.px-vertrauen{padding:0 0 clamp(56px,6vw,84px)}
.px-vertrauen .px-kpi-wert{font-size:clamp(26px,2.8vw,38px)}

/* Calendly inline */
.cal-wrap{
  position:relative;height:720px;border-radius:22px;overflow:hidden;
  background:#fff;border:1px solid var(--hairline);
}
.cal-wrap iframe{width:100%;height:100%;border:0;display:block;opacity:0;transition:opacity .45s ease}
.cal-wrap.cal-fertig iframe{opacity:1}
.cal-wrap.cal-fertig .cal-lade{display:none}
.cal-lade{
  position:absolute;inset:0;display:grid;place-items:center;gap:10px;align-content:center;
  color:var(--mid);font-size:14.5px;
}
.cal-spin{
  width:26px;height:26px;border-radius:50%;justify-self:center;
  border:3px solid rgba(0,174,181,.2);border-top-color:var(--brand);
  animation:calspin .8s linear infinite;
}
@keyframes calspin{to{transform:rotate(360deg)}}
@media(max-width:700px){.cal-wrap{height:860px;border-radius:16px}}

/* Calendly im Hero */
.cal-hero{height:660px;border:0;background:transparent;border-radius:16px}
@media(max-width:900px){.cal-hero{height:640px}}

/* Kontakt-Hero: Widget links, Text rechts (nur Desktop; mobil stapelt es) */
@media(min-width:981px){
  .px-hero-kontakt .hero-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.34fr)}
}

/* Auf der Kontaktseite ist man schon am Ziel - CTA im Header mobil ausblenden */
@media(max-width:900px){
  body[data-seite="kontakt"] #nav .nav-cta{display:none}
}

/* Calendly mobil: mehr Breite und Hoehe */
@media(max-width:640px){
  .px-terminkarte{padding:14px 10px 10px}
  .cal-hero{height:700px}
}