/* =========================================================================
   wahlarzt.css – Innere Medizin · Wahlarzt
   Baut auf styles.css auf (gleiche Teal-Sprache) + dezenter Blau-Akzent.
   ========================================================================= */
:root { --wa-blue: #2563eb; --wa-blue-700: #1d4ed8; --wa-blue-50: #eff4ff; --wa-blue-200: #cfe0fb; }

/* --- Blau-Akzente ------------------------------------------------------ */
.wa-eyebrow { background: var(--wa-blue-50); border-color: var(--wa-blue-200); color: var(--wa-blue-700); }
.hero-points .hp-ic.wa-ic { background: var(--wa-blue-50); border-color: var(--wa-blue-200); color: var(--wa-blue-700); }
.wa-grad { background: linear-gradient(135deg, var(--teal-500) 0%, var(--wa-blue) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent; }
.wa-btn { background: linear-gradient(135deg, var(--teal-500) 0%, var(--wa-blue) 100%) !important; }

/* --- Hero-Visual: Herzultraschall / Echokardiographie ------------------ */
.wa-visual { background: linear-gradient(160deg, #0e2a32 0%, #123a63 55%, #1e4a86 100%); }
.us-stage { position: absolute; inset: 0; }
.us-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.us-fan { opacity: .96; }

.us-heart { transform-box: fill-box; transform-origin: center;
  filter: drop-shadow(0 0 10px rgba(125,211,252,.6)); animation: usBeat 1.4s ease-in-out infinite; }
@keyframes usBeat { 0%,100% { transform: scale(1); } 14% { transform: scale(1.12); } 28% { transform: scale(1); } 42% { transform: scale(1.07); } 56% { transform: scale(1); } }

.us-beam { transform-box: view-box; transform-origin: 200px 50px; animation: usSweep 3.6s ease-in-out infinite; }
@keyframes usSweep { 0% { transform: rotate(-17deg); } 50% { transform: rotate(17deg); } 100% { transform: rotate(-17deg); } }

.us-arcs { animation: usArc 3s ease-in-out infinite; }
@keyframes usArc { 0%,100% { opacity: .55; } 50% { opacity: 1; } }

.ping { opacity: 0; animation: usPing 2.4s ease-in-out infinite; }
.ping.p2 { animation-delay: .5s; } .ping.p3 { animation-delay: 1s; } .ping.p4 { animation-delay: 1.6s; }
@keyframes usPing { 0%,100% { opacity: 0; } 20% { opacity: 1; } 50% { opacity: 0; } }

.us-tag { position: absolute; z-index: 3; bottom: 16px; left: 16px;
  display: flex; align-items: center; gap: 9px; background: rgba(255,255,255,.14);
  backdrop-filter: blur(6px); border: 1px solid rgba(255,255,255,.25); color: #fff;
  padding: 9px 13px; border-radius: 13px; font-weight: 700; font-size: .85rem; }
.us-tag .dot { width: 9px; height: 9px; border-radius: 50%; background: #7dd3fc;
  box-shadow: 0 0 0 0 rgba(125,211,252,.7); animation: blip 1.25s infinite; }

@media (prefers-reduced-motion: reduce) {
  .us-heart, .us-beam, .us-arcs, .ping, .us-tag .dot { animation: none; }
}

/* --- Leistungen: Feature-Karten (klickbar, mit Mini-Animation) --------- */
.wa-features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; align-items: stretch; }
.wa-feature { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 18px; box-shadow: var(--shadow-sm); text-align: left;
  font: inherit; color: inherit; cursor: pointer; transition: transform .18s, box-shadow .18s, border-color .18s; }
.wa-feature:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--teal-200); }
.wa-feature:focus-visible { outline: 2px solid var(--wa-blue); outline-offset: 2px; }
.wa-feature-vis { position: relative; height: 150px; border-radius: 13px; overflow: hidden; margin-bottom: 16px;
  background: linear-gradient(160deg, #0e2a32 0%, #123a63 55%, #1e4a86 100%); }
.wa-vis-svg { width: 100%; height: 100%; display: block; }
.wa-feature h3 { font-size: 1.18rem; letter-spacing: -.01em; }
.wa-feature-sub { color: var(--teal-700); font-weight: 700; font-size: .85rem; margin-top: 2px; }
.wa-feature-txt { color: var(--muted); margin-top: 10px; line-height: 1.5; font-size: .93rem; }
.wa-feature-foot { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 16px; }
.wa-feature-preis { color: var(--teal-700); font-weight: 800; font-size: 1.08rem; }
.wa-feature:hover .leist-more { background: var(--grad-teal); color: #fff; border-color: transparent; }

/* Herz-Karte: dezente, schlagende Herzanimation mit Ultraschall-Ringen */
.vis-heart { transform-box: fill-box; transform-origin: center;
  filter: drop-shadow(0 0 7px rgba(125,211,252,.55)); animation: usBeat 1.5s ease-in-out infinite; }
.vpr { transform-box: view-box; transform-origin: 140px 60px; opacity: 0; animation: visRing 3.3s ease-out infinite; }
.vpr2 { animation-delay: 1.1s; }
.vpr3 { animation-delay: 2.2s; }
@keyframes visRing { 0% { transform: scale(.5); opacity: 0; } 16% { opacity: .55; } 100% { transform: scale(2.5); opacity: 0; } }

/* Carotis- & Bauch-Karte: Foto mit dezentem Ken-Burns-Zoom + Teal-Tönung */
.wa-vis-img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block;
  animation: visZoom 16s ease-in-out infinite alternate; }
.wa-vis-img--abdomen { object-position: center 40%; }
@keyframes visZoom { from { transform: scale(1); } to { transform: scale(1.07); } }
.wa-vis-photo::after { content: ""; position: absolute; inset: 0; pointer-events: none; mix-blend-mode: multiply;
  background: linear-gradient(155deg, rgba(13,148,136,.22) 0%, rgba(37,99,235,.16) 55%, rgba(14,42,50,.30) 100%); }

@media (prefers-reduced-motion: reduce) { .vis-heart, .vpr, .wa-vis-img { animation: none; } }

/* --- Weitere Leistungen: Kacheln (3 pro Zeile, gleiche Höhe) ----------- */
.wa-more { margin-top: 34px; }
.wa-more-title { font-size: 1.05rem; margin-bottom: 14px; }
.wa-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.wa-tile { display: flex; align-items: center; gap: 14px; background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius); padding: 16px 18px; box-shadow: var(--shadow-sm); width: 100%; text-align: left;
  font: inherit; color: inherit; cursor: pointer; transition: transform .18s, box-shadow .18s, border-color .18s; }
.wa-tile:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--teal-200); }
.wa-tile:focus-visible { outline: 2px solid var(--wa-blue); outline-offset: 2px; }
.wa-tile:hover .leist-more { background: var(--grad-teal); color: #fff; border-color: transparent; }
.wa-tile-ic { flex: none; width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center;
  background: var(--teal-50); color: var(--teal-700); border: 1px solid var(--teal-100); }
.wa-tile-ic svg { width: 21px; height: 21px; }
.wa-tile-main { flex: 1; min-width: 0; }
.wa-tile-main b { display: block; font-weight: 650; font-size: .96rem; line-height: 1.25; }
.wa-tile-preis { display: block; color: var(--teal-700); font-weight: 800; font-size: .9rem; margin-top: 2px; }

/* --- Leistungs-Popup: Preiszeile -------------------------------------- */
.wa-modal-price { display: flex; align-items: center; gap: 12px; margin-top: 16px; }
.wa-modal-price b { font-size: 1.35rem; color: var(--teal-700); }
.wa-modal-price .wa-dauer { color: var(--muted); }

/* --- Preisliste -------------------------------------------------------- */
.wa-price-stack { display: flex; flex-direction: column; gap: 40px; }
.wa-einzel-block { width: 100%; max-width: 760px; margin: 0 auto; }
.wa-col-title { font-size: 1.05rem; margin-bottom: 14px; }
.wa-col-title.center { text-align: center; }
.wa-price-list { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); }
.wa-price-row { display: flex; justify-content: space-between; gap: 16px; align-items: center; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.wa-price-row:last-child { border-bottom: none; }
.wa-pr-main b { display: block; font-weight: 650; }
.wa-pr-main small { display: block; color: var(--muted); font-size: .84rem; margin-top: 3px; line-height: 1.4; }
.wa-pr-meta { display: flex; align-items: center; gap: 12px; flex: none; }
.wa-dauer { color: var(--muted); font-size: .82rem; white-space: nowrap; }
.wa-preis { font-weight: 800; color: var(--teal-700); white-space: nowrap; }

.wa-pakete { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; align-items: stretch; }
.wa-paket { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 20px 22px; box-shadow: var(--shadow-sm); }
.wa-paket-badge { align-self: flex-start; }
.wa-paket ul { flex: 1; }
.wa-paket-preis { margin-top: 14px; }
.wa-paket-badge { display: inline-block; font-size: .72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: var(--wa-blue-700); background: var(--wa-blue-50); border: 1px solid var(--wa-blue-200); padding: 4px 10px; border-radius: 999px; }
.wa-paket h4 { font-size: 1.05rem; margin-top: 10px; }
.wa-paket ul { list-style: none; margin-top: 10px; display: grid; gap: 6px; padding: 0; }
.wa-paket li { position: relative; padding-left: 18px; color: var(--ink-soft); font-size: .92rem; }
.wa-paket li::before { content: ""; position: absolute; left: 3px; top: .5em; width: 6px; height: 6px; border-radius: 50%; background: var(--teal-500); }
.wa-paket-preis { margin-top: 12px; font-weight: 800; font-size: 1.15rem; color: var(--teal-700); }

/* --- Termin ------------------------------------------------------------ */
.wa-termin-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
.wa-termin-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 24px; box-shadow: var(--shadow-sm); }
.wa-termin-card h3 { font-size: 1.1rem; margin-bottom: 14px; }
.wa-termine { display: grid; gap: 8px; }
.wa-termin-row { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.wt-date { font-weight: 700; }
.wt-time { color: var(--muted); }
.wt-tag { margin-left: auto; font-size: .72rem; font-weight: 800; color: var(--wa-blue-700); background: var(--wa-blue-50); border: 1px solid var(--wa-blue-200); padding: 3px 9px; border-radius: 999px; }
.hint-line { color: var(--muted); font-size: .86rem; margin-top: 12px; }
.wa-termin-cta p { color: var(--muted); margin-bottom: 4px; }
.wa-termin-cta .btn { margin-top: 12px; }

/* --- Responsive -------------------------------------------------------- */
@media (max-width: 900px) {
  .wa-features { grid-template-columns: 1fr; }
  .wa-tiles { grid-template-columns: repeat(2, 1fr); }
  .wa-pakete { grid-template-columns: 1fr; }
  .wa-termin-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .wa-tiles { grid-template-columns: 1fr; }
}