/* ============================================================
   VICARI – polish.css
   Feinschliff: Tastbarkeit, Fokus, Motion-Timing, Schattenton.
   Wird als LETZTES Stylesheet geladen und überschreibt gezielt.
   Layout, Farben, Schriften und Struktur bleiben unangetastet.
   Diese Datei kann jederzeit ersatzlos entfernt werden.
   ============================================================ */

/* ---------- 1. Easing-Tokens ------------------------------------
   Die eingebauten CSS-Kurven (ease, ease-out) sind zu schwach –
   Bewegung startet träge, genau im Moment höchster Aufmerksamkeit.
   Diese Kurven starten schnell und laufen weich aus.              */
:root {
  --ease-out:    cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);

  /* Schatten warm eingefärbt statt neutralem Schwarz.
     Auf dem warmen Untergrund (#F9F6F1) wirkt reines Schwarz grau
     und schmutzig; ein Braunton der Grundfarbe wirkt weich. */
  --shadow: rgba(64, 54, 40, 0.085);
}

/* ---------- 2. Tastbarkeit ---------------------------------------
   Bisher hatte kein einziges Element einen :active-Zustand.
   Auf dem Handy gibt es kein Hover – ohne :active bekommt ein
   Nutzer beim Antippen keinerlei Rückmeldung.                     */
.btn-primary,
.btn-secondary,
.btn-doctolib,
.btn-ghost,
.btn-nav,
.card,
.leistung-card,
.team-card,
.finder-tile,
.faq-q,
.nav-toggle,
.nav-burger,
#fab-termin {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.btn-primary:active,
.btn-secondary:active,
.btn-doctolib:active,
.btn-ghost:active,
.btn-nav:active,
#fab-termin:active {
  transform: scale(0.972);
  transition-duration: 90ms;
}

.card:active,
.leistung-card:active,
.team-card:active,
.finder-tile:active {
  transform: scale(0.988);
  transition-duration: 90ms;
}

.faq-q:active {
  opacity: 0.62;
  transition-duration: 80ms;
}

/* ---------- 3. Motion-Timing --------------------------------------
   Hover-Übergänge liefen mit 0,4–0,55 s und ohne definierte Kurve.
   Alles, was der Nutzer dutzendfach auslöst, gehört unter 250 ms.  */
.btn-primary,
.btn-secondary,
.btn-doctolib,
.btn-ghost,
.btn-nav {
  transition: background-color 180ms var(--ease-out),
              border-color 180ms var(--ease-out),
              color 180ms var(--ease-out),
              box-shadow 220ms var(--ease-out),
              transform 160ms var(--ease-out);
}

.card,
.leistung-card,
.team-card {
  transition: box-shadow 240ms var(--ease-out),
              border-top-color 240ms var(--ease-out),
              transform 220ms var(--ease-out);
}

.finder-tile {
  transition: background-color 200ms var(--ease-out),
              border-color 200ms var(--ease-out),
              color 200ms var(--ease-out),
              box-shadow 200ms var(--ease-out),
              transform 170ms var(--ease-out);
}

/* Akkordeon: bewegt sich auf dem Bildschirm → ease-in-out */
.faq-a { transition: max-height 320ms var(--ease-in-out); }
.faq-arrow { transition: transform 260ms var(--ease-out); }

/* ---------- 4. Hover nur dort, wo es Hover gibt --------------------
   Auf Touchgeräten bleibt ein :hover nach dem Antippen hängen –
   die Karte sieht dann dauerhaft „angefasst" aus.                  */
@media (hover: none) {
  .card:hover,
  .leistung-card:hover,
  .team-card:hover,
  .finder-tile:hover {
    transform: none;
  }
}

/* ---------- 5. Sichtbarer Tastaturfokus ----------------------------
   Bislang gab es praktisch keinen Fokusstil. Wer mit der Tastatur
   navigiert, sah nicht, wo er sich befindet. Für Mausnutzer ändert
   sich nichts, da :focus-visible nur bei Tastatur greift.          */
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 3px;
}

.btn-primary:focus-visible,
.btn-doctolib:focus-visible {
  outline-color: var(--accent-dark);
  outline-offset: 4px;
}

/* Auf dunklen Flächen heller Ring */
.finder-tile:focus-visible,
footer a:focus-visible {
  outline-color: rgba(255, 255, 255, 0.85);
}

/* ---------- 6. Optische Feinheiten ---------------------------------
   Grosse Grade in Cormorant Garamond brauchen etwas engere Laufweite;
   bei kleinen Graden gilt das Gegenteil. Reine Optik, kein Umbruch. */
h1 { letter-spacing: -0.018em; }
/* h2 bewusst unveraendert: engere Laufweite verschob Zeilenumbrueche */

/* Ziffern in Kennzahlen und Öffnungszeiten tabellarisch ausrichten */
.stat-num,
.stat-number,
.oeffnungszeiten,
time {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* Einzelner Absatz lief über 149 Zeichen Zeilenlänge – ermüdend. */
.highlight-box p { max-width: 68ch; }

/* ---------- 7. Bewegung respektieren ------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .btn-primary:active,
  .btn-secondary:active,
  .btn-doctolib:active,
  .btn-ghost:active,
  .btn-nav:active,
  .card:active,
  .leistung-card:active,
  .team-card:active,
  .finder-tile:active,
  #fab-termin:active {
    transform: none;
  }
}

/* ---------- 8. Praxis-Hinweis in der Topbar -------------------------
   Die Topbar ist immer da und immer gleich grün – das Auge überliest
   sie nach dem zweiten Besuch. Ein Hinweis muss sich deshalb in der
   FARBE unterscheiden, nicht nur im Text. Warmer Lehmton statt Grün,
   etwas größer, mit ruhig pulsierendem Punkt. Kein Popup: wer mit
   Zahnschmerzen die Nummer sucht, soll nicht erst wegklicken müssen. */
.topbar--hinweis {
  background: #8A5A3B;
  font-size: 0.86rem;
  padding: 0.72rem 1rem;
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.18);
}

.topbar--hinweis strong { font-weight: 600; }

.hinweis-punkt {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #FFD9A0;
  margin-right: 0.6rem;
  vertical-align: 1px;
  animation: hinweis-puls 2.6s var(--ease-in-out) infinite;
}

@keyframes hinweis-puls {
  0%, 100% { opacity: 1;   transform: scale(1);    }
  50%      { opacity: 0.45; transform: scale(0.82); }
}

@media (max-width: 600px) {
  .topbar--hinweis { font-size: 0.76rem; line-height: 1.45; }
  .topbar--hinweis .sep { display: block; height: 0; margin: 0; overflow: hidden; }
}

@media (prefers-reduced-motion: reduce) {
  .hinweis-punkt { animation: none; }
}

/* ---------- 9. Topbar-Höhe dynamisch --------------------------------
   nav, Hero und Mobilmenü rechneten fest mit 38px Topbar bzw. 108px
   Gesamthöhe. Sobald der Hinweis zwei- oder dreizeilig umbricht (Handy),
   schob sich die Topbar über das Logo. Die Höhe wird jetzt gemessen und
   als Variable gesetzt; die 38/108px bleiben als Rückfallwert stehen. */
nav { top: var(--topbar-h, 38px); }
.hero { padding-top: calc(var(--topbar-h, 38px) + 70px); }
.nav-links.open { top: calc(var(--topbar-h, 38px) + 70px); }
#navLinks.open { top: calc(var(--topbar-h, 38px) + 70px) !important; }

/* ---------- 10. Leistungen – Foto-Kacheln statt Icon-Grid -----------
   Grosszuegiges 3-Spalten-Grid, echte Praxis-/Produktfotografie als
   Kachelhintergrund, Titel als Overlay unten. Fuer Kategorien ohne
   Foto (noch in Arbeit) eine ruhige Platzhalter-Variante, damit das
   Raster nicht auseinanderfaellt, bevor alle Bilder da sind. */
.leistungen-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.1rem;
}

.leistung-tile {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: 14px;
  overflow: hidden;
  text-decoration: none;
  display: block;
  background: var(--accent-xlight);
}

.leistung-tile img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 500ms var(--ease-out, ease-out);
}

.leistung-tile:hover img { transform: scale(1.045); }

.leistung-tile-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(20,16,10,.82) 100%);
}

.leistung-tile-content {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 1.4rem 1.5rem;
}

.leistung-tile-titel {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.4rem;
  font-weight: 500;
  color: #fff;
  margin: 0 0 .3rem;
  transition: color 200ms var(--ease-out, ease-out);
}

.leistung-tile-text {
  font-family: 'Inter', sans-serif;
  font-size: .78rem;
  line-height: 1.45;
  color: rgba(255,255,255,.82);
  max-width: 26ch;
  margin: 0;
}

/* Platzhalter: helle Flaeche, Titel dunkel, dezente gestrichelte Kontur
   statt Foto -- sichtbar "kommt noch", nicht wie ein Fehler. */
.leistung-tile-platzhalter {
  background: var(--bg);
  border: 1.5px dashed var(--border);
}
.leistung-tile-platzhalter .leistung-tile-content {
  position: static;
  padding: 1.6rem 1.5rem;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.leistung-tile-platzhalter .leistung-tile-titel { color: var(--text); }
.leistung-tile-platzhalter .leistung-tile-text { color: var(--text-mid); }
.leistung-tile-platzhalter:hover { border-color: var(--accent); }
.leistung-tile-platzhalter:hover .leistung-tile-titel { color: var(--accent-dark); }

.leistung-tile:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -3px;
}

@media (max-width: 1024px) {
  .leistungen-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  .leistungen-grid { grid-template-columns: 1fr; gap: .9rem; }
  .leistung-tile { aspect-ratio: 5 / 4; }
  .leistung-tile-titel { font-size: 1.6rem; }
}

@media (prefers-reduced-motion: reduce) {
  .leistung-tile img { transition: none; }
}

/* ---------- 11. Platzhalter-Icon (KFO/Laser/CMD, bis Fotos da sind) --- */
.leistung-tile-icon {
  position: absolute;
  top: 1.5rem;
  left: 1.5rem;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--accent-light);
  color: var(--accent-dark);
  display: flex;
  align-items: center;
  justify-content: center;
}
.leistung-tile-icon svg { width: 22px; height: 22px; }

/* ---------- 12. Warum-wir-Kacheln (Foto-Variante) --------------------- */
@media (max-width: 640px) {
  .warum-grid { grid-template-columns: 1fr !important; }
}

/* ---------- 13. Ärzte-Karten – kompakt, Foto+Text nebeneinander ----
   Vorherige Version zeigte die Fotos ueber halbe Viewportbreite an,
   obwohl die Quelldateien nur 800px breit sind - das gab sichtbare
   Unschaerfe auf groesseren/Retina-Bildschirmen. Jetzt ein kompaktes
   2x2-Grid, Fotogroesse an die tatsaechliche Aufloesung angepasst,
   Foto und Text nebeneinander in jeder Karte, alternierend. */
.arzt-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
}

.arzt-karte {
  display: flex;
  align-items: center;
  gap: 1rem;
  text-decoration: none;
  color: inherit;
  background: var(--accent-xlight);
  border-radius: 14px;
  padding: .9rem;
  transition: background 220ms var(--ease-out, ease-out);
}
.arzt-karte:hover { background: var(--accent-light); }

.arzt-karte:nth-child(even) { flex-direction: row-reverse; }

.arzt-karte-foto {
  flex: 0 0 108px;
  width: 108px;
  border-radius: 10px;
  overflow: hidden;
  aspect-ratio: 4 / 5;
}
.arzt-karte-foto img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 400ms var(--ease-out, ease-out);
}
.arzt-karte:hover .arzt-karte-foto img { transform: scale(1.04); }

.arzt-karte-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}
.arzt-karte-text h3 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.35rem;
  font-weight: 500;
  margin: 0 0 .25rem;
  color: var(--text);
  line-height: 1.15;
}
.arzt-karte-text .role {
  font-size: .68rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--accent-dark);
  font-weight: 600;
  margin-bottom: .5rem;
}
.arzt-karte-text p {
  font-size: .8rem;
  color: var(--text-mid);
  line-height: 1.45;
  margin: 0;
}

@media (max-width: 640px) {
  .arzt-grid { grid-template-columns: 1fr; }
  .arzt-karte, .arzt-karte:nth-child(even) { flex-direction: row; }
  .arzt-karte-foto { flex-basis: 34vw; }
}

/* ---------- 14. Warum-wir-Kacheln: Bild unbeschnitten zeigen -------- */
.leistung-tile-unbeschnitten img { object-fit: contain !important; background: #e9e4da; }

/* ---------- 15. Ärzte-Grid: 2 Spalten statt 3 (Pauline neben Nicolas) */
.aerzte-grid { grid-template-columns: 1fr 1fr; }

/* ---------- 16. Ärzte-Grid Startseite: etwas kleiner (schmalerer Container) */
.aerzte-grid { max-width: 780px; margin: 0 auto; }

/* ---------- 17. Bild-Reveal: Foto zoomt beim Erscheinen sanft heraus --- */
.leistung-tile img { transform: scale(1.06); transition: transform 1100ms cubic-bezier(.22,1,.36,1); }
.leistung-tile.visible img { transform: scale(1); }
.leistung-tile.visible:hover img { transform: scale(1.04); transition-duration: 500ms; }

@media (prefers-reduced-motion: reduce) {
  .leistung-tile img, .leistung-tile.visible img { transform: none !important; transition: none !important; }
}

/* ---------- 18. Hero-Video (Vollbild, hinter dem Text) ----------------- */
.hero { background-image: none !important; }
.hero-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: 100% 45%;
  z-index: 0;
  pointer-events: none;
}
.hero::before { z-index: 1; }
.hero-inner { position: relative; z-index: 2; }
/* Fallback: reduzierte Bewegung -> nur Poster zeigen */
@media (prefers-reduced-motion: reduce) {
  .hero-video { display: none; }
  .hero { background-image: url('images/hero-poster.jpg') !important; background-size: cover; background-position: center 45%; }
}

/* Text-Seite etwas staerker abdunkeln, damit das Wand-Logo nicht mit der Headline konkurriert */
.hero::before { background: linear-gradient(120deg, rgba(10,20,12,0.80) 0%, rgba(10,20,12,0.55) 45%, rgba(10,20,12,0.18) 100%) !important; }

/* ---------- 19. Statement-Sektion: grosse ruhige Aussage ---------------- */
.statement {
  padding: 9rem 0;
  background: var(--bg-white);
}
.statement-inner { max-width: 1100px; }
.statement-kicker {
  font-size: .8rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--accent); margin: 0 0 2rem;
}
.statement-text {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 400;
  font-size: clamp(2.4rem, 5vw, 4.6rem);
  line-height: 1.12;
  letter-spacing: -0.01em;
  color: var(--text);
  margin: 0;
}
.statement-text span { display: block; }
.statement-text em { font-style: italic; color: var(--accent-dark); }
/* gestaffelt einblenden */
.statement-text span:nth-child(2) { transition-delay: 120ms; }
.statement-text span:nth-child(3) { transition-delay: 240ms; }

@media (max-width: 640px) { .statement { padding: 5rem 0; } }

/* ---------- 20. Symptom-Finder: hell, ruhig, im Stil der Kacheln ------- */
.finder-section {
  background: var(--bg) !important;
  padding: 7rem 0 !important;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.finder-intro .section-tag { color: var(--accent) !important; }
.finder-intro h2 { color: var(--text) !important; }
.finder-intro p { color: var(--text-mid) !important; }

.finder-grid { gap: 1rem !important; }

.finder-tile {
  background: var(--bg-white) !important;
  border: 1px solid var(--border) !important;
  border-radius: 14px !important;
  padding: 2rem 1.25rem 1.75rem !important;
  color: var(--text) !important;
  box-shadow: none !important;
}
.finder-tile:hover {
  background: var(--bg-white) !important;
  border-color: var(--accent) !important;
  transform: translateY(-4px) !important;
  box-shadow: 0 14px 34px rgba(74,89,64,.14) !important;
}
.finder-tile.active {
  background: var(--accent-dark) !important;
  border-color: var(--accent-dark) !important;
  color: #fff !important;
}
.finder-tile svg {
  width: 40px !important; height: 40px !important;
  margin: 0 auto 1rem !important;
  color: var(--accent);
  stroke-width: 1.5;
  transition: transform .3s ease;
}
.finder-tile:hover svg { transform: scale(1.08); }
.finder-tile.active svg { color: #fff; }
.finder-tile span {
  font-family: 'Cormorant Garamond', serif !important;
  font-size: 1.05rem !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  line-height: 1.3 !important;
}

.finder-result {
  background: var(--bg-white) !important;
  border: 1px solid var(--border);
  border-radius: 16px !important;
  padding: 2.5rem 3rem !important;
  box-shadow: 0 18px 50px rgba(74,89,64,.10);
}

/* ---------- 21. Footer: Sprechzeiten ------------------------------------ */
.footer-hours { border-collapse: collapse; font-size: .82rem; color: #aaa; }
.footer-hours td { padding: .2rem 0; vertical-align: top; }
.footer-hours td:first-child { color: #ccc; padding-right: 1.25rem; white-space: nowrap; }

/* ---------- 22. Hero: Neue-Patienten-Hinweis ---------------------------- */
.hero-note {
  display: inline-flex; align-items: center; gap: .6rem;
  margin: 1.5rem 0 0;
  font-size: .85rem; color: rgba(255,255,255,.82);
  letter-spacing: .01em;
}
.hero-note-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #8fd0a0;
  box-shadow: 0 0 0 0 rgba(143,208,160,.6);
  animation: heroDot 2.2s ease-out infinite;
}
@keyframes heroDot {
  0%   { box-shadow: 0 0 0 0 rgba(143,208,160,.6); }
  70%  { box-shadow: 0 0 0 8px rgba(143,208,160,0); }
  100% { box-shadow: 0 0 0 0 rgba(143,208,160,0); }
}
@media (prefers-reduced-motion: reduce) { .hero-note-dot { animation: none; } }

/* ---------- 23. Topbar: Notfall-Hinweis --------------------------------- */
.topbar-notfall {
  color: #fff !important; font-weight: 600;
  text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.45);
  padding-bottom: 1px;
}
.topbar-notfall:hover { border-bottom-color: #fff; }
@media (max-width: 640px) {
  /* Auf Mobile Adresse ausblenden, Notfall behalten */
  .topbar-notfall-sep { display: none; }
  .topbar-notfall { display: block; margin-top: .15rem; }
}

/* ---------- 24. Reveal: weicheres Timing, Kacheln etwas langsamer ------- */
.leistung-tile.reveal { transition-duration: .7s; }
.reveal-d1 { transition-delay: .08s; }
.reveal-d2 { transition-delay: .16s; }
.reveal-d3 { transition-delay: .24s; }
.reveal-d4 { transition-delay: .32s; }

/* ---------- 25. Mobile: Ärzte-Grid einspaltig, Kachel-Texte kompakter --- */
@media (max-width: 640px) {
  .aerzte-grid { grid-template-columns: 1fr; max-width: none; }
  /* Personen-Kacheln: Portrait beibehalten, Text klein, Bild bleibt sichtbar */
  .aerzte-grid .leistung-tile,
  #section-team .leistungen-grid .leistung-tile { aspect-ratio: 4 / 5; }
  .aerzte-grid .leistung-tile-titel,
  #section-team .leistungen-grid .leistung-tile-titel { font-size: 1.35rem; line-height: 1.15; }
  .leistung-tile-content { padding: 1.1rem 1.1rem 1.1rem; }
  .leistung-tile-text { font-size: .82rem; }
}