/* ——— Live-Look: Header-Optik wie physiotherapie-rado.de + Feinschliff für injizierte Sektionen ——— */

/* Header: höher, großes Emblem-Logo, eckiger Termin-Button (wie Live-Seite) */
header .h-20.w-full { height: 7rem; }
header img[alt="Physiotherapie Rado"] { height: 5rem !important; width: auto; }
header .btn-primary { border-radius: 0.5rem; }
header nav { gap: 1.25rem !important; } /* wie Live-Seite (gap-5), damit alle 9 Punkte in eine Zeile passen */
header nav a { white-space: nowrap; }

/* Hero-Überlappung: die 5 weißen Info-Karten ragen zur Hälfte in die nächste Sektion */
#hero.live-hero { margin-bottom: 78px; }
@media (max-width: 767px) { #hero.live-hero { margin-bottom: 60px; } }

/* Reveal-Verhalten der injizierten Live-Sektionen */
.live-inject [data-rv] { opacity: 0; transform: translateY(28px); transition: opacity .9s cubic-bezier(.16,1,.3,1), transform .9s cubic-bezier(.16,1,.3,1); will-change: opacity, transform; }
@media (prefers-reduced-motion: reduce) { .live-inject [data-rv] { opacity: 1; transform: none; transition: none; } }
.live-inject [data-rv="x"] { transform: translateX(-36px); }
.live-inject [data-rv].rv-in { opacity: 1; transform: none; }
.no-js .live-inject [data-rv] { opacity: 1; transform: none; }

/* Anruf-Ausklappmenü im Hero */
.live-callmenu { position: absolute; top: calc(100% + .5rem); left: 50%; transform: translateX(-50%); background: #fff; border-radius: .9rem; box-shadow: 0 18px 50px rgba(0,0,0,.25); padding: .5rem; min-width: 240px; z-index: 40; text-align: left; }
.live-callmenu a { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .65rem .9rem; border-radius: .6rem; font-size: .85rem; color: #1f2937; }
.live-callmenu a:hover { background: #f0fdfa; }
.live-callmenu a b { color: #0f766e; white-space: nowrap; }
/* Auswahl liegt über den Google-Sternen darunter (data-rv-Transform bildet eigene Ebenen) */
#hero [data-rv]:has(#live-call-btn) { position: relative; z-index: 30; }

/* Karten-Platzhalter (Google Maps erst nach Einwilligung, siehe consent.js) */
.map-ph { position: relative; height: 16rem; width: 100%; background: #f3f4f6; display: flex; align-items: center; justify-content: center; text-align: center; padding: 1rem 1.5rem; }
.map-ph__in { display: flex; flex-direction: column; align-items: center; gap: .55rem; max-width: 23rem; }
.map-ph__ic { width: 2.5rem; height: 2.5rem; display: flex; align-items: center; justify-content: center; border-radius: .75rem; background: #ccfbf1; color: #0d9488; font-size: 1.25rem; }
.map-ph__t { margin: 0; font-size: .875rem; font-weight: 700; color: #1f2937; }
.map-ph__p { margin: 0; font-size: .75rem; line-height: 1.55; color: #6b7280; }
.map-ph__p a { text-decoration: underline; }
.map-ph__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .5rem 1.25rem; margin-top: .3rem; }
.map-ph__btn { display: inline-flex; align-items: center; gap: .4rem; border: 0; border-radius: .5rem; background: #0d9488; color: #fff; padding: .5rem 1rem; font: inherit; font-size: .875rem; font-weight: 600; cursor: pointer; transition: background-color .2s; }
.map-ph__btn:hover { background: #0f766e; }
.map-ph__btn:focus-visible, .map-ph__link:focus-visible { outline: 3px solid #99f6e4; outline-offset: 2px; }
.map-ph__link { font-size: .875rem; font-weight: 600; color: #0d9488; }
.map-ph__link:hover { text-decoration: underline; }

/* Header-Breite (04.10.2026):
   1) Zwischen 1024 und 1279 px zeigte die App weder Menüpunkte (nav erst ab xl) noch den Menü-Knopf (nur bis lg)
      → dort jetzt der Handy-Kopf mit Menü-Knopf, wie unter 1024 px.
   2) Zwischen 1280 und 1535 px ragten die Telefonnummern rechts aus dem Bild (Scrollbalken auf 1280–1440er Laptops)
      → Abstände kompakter. Keine Inhalte entfernt. (Nachtmodus-Schalter gibt es seit 06.10.2026 nicht mehr.) */
@media (min-width: 1024px) and (max-width: 1279px) {
  header > div.max-w-\[1480px\] > div.hidden.lg\:flex { display: none; }
  header > div.max-w-\[1480px\] > div.ml-auto.lg\:hidden { display: flex; }
  header > div.border-t.lg\:hidden { display: block; }
}
@media (min-width: 1280px) and (max-width: 1535px) {
  header > div.max-w-\[1480px\] { gap: 1rem; padding-left: 1.5rem; padding-right: 1.5rem; }
  header > div.max-w-\[1480px\] > div.lg\:flex { gap: 1rem; }
  header > div.max-w-\[1480px\] .border-l { gap: .75rem; padding-left: 1rem; }
  header nav { gap: .9rem !important; }
}

/* Handy-Kopf (04.10.2026): Nach dem Scrollen blendet die App „Termin anfragen“ ein – dann rutschte der Menü-Knopf
   rechts aus dem Bild (373–417 px bei 390 px Breite). Unter 480 px: Termin-Knopf kompakter. */
@media (max-width: 479px) {
  header > div.max-w-\[1480px\] { gap: .75rem; }
  header div.ml-auto.lg\:hidden { gap: .375rem; }
  header div.ml-auto.lg\:hidden > a.btn-primary { padding: .5rem .7rem; font-size: .8125rem; white-space: nowrap; }
}
@media (max-width: 359px) {
  header > div.max-w-\[1480px\] { padding-left: .75rem; padding-right: .75rem; }
  header img[alt="Physiotherapie Rado"] { height: 3.25rem !important; }
}

/* Lange Wörter/Adressen (z. B. in der Datenschutzerklärung) dürfen auf schmalen Handys umbrechen statt seitlich zu überlaufen (06.10.2026) */
main p, main li { overflow-wrap: break-word; }

/* Kein Sprung beim Laden (08.10.2026):
   1) Elemente, die beim Ersetzen des vorgerenderten Roh-HTML schon im Bild sind, stehen sofort (ergaenzungen.js setzt kurz rv-sofort).
   2) Icons (remixicon) sind im Endzustand genau 1em breit. Solange die Icon-Schrift (190 KB) noch lädt, hatte das
      Ersatzzeichen eine andere Breite – Buttons wie „Jetzt anrufen“ wuchsen danach um 8 px und rutschten nach links.
      Jetzt ist die Breite von Anfang an fest, und das Ersatzzeichen wird in der Ladezeit nicht gezeigt (font-display: block). */
.rv-sofort, .rv-sofort > * { transition: none !important; }
[class^="ri-"]::before, [class*=" ri-"]::before { display: inline-block; width: 1em; }
.tracking-tight > [class^="ri-"]::before, .tracking-tight > [class*=" ri-"]::before { width: .9755em; } /* Sterne: Laufweite -0.025em wie im Endzustand */
/* 3) Solange die Icon-Schrift lädt, rechnet der Browser mit den Maßen einer Ersatzschrift – die war höher (Zeilen +1–2 px,
      z. B. Sterne-Zeile im Hero, alles darunter rutschte). Die Ersatzschrift bekommt die Maße von remixicon (Ober-/Unterlänge
      1020/180 von 1200, Zeilenabstand 108) – im Endzustand wird sie nie benutzt, weil remixicon alle Icons enthält. */
@font-face { font-family: ri-ersatz; src: local("Arial"), local("Helvetica"), local("Roboto"), local("DejaVu Sans"), local("Noto Sans"); ascent-override: 85%; descent-override: 15%; line-gap-override: 9%; }
[class^="ri-"], [class*=" ri-"] { font-family: remixicon, ri-ersatz !important; }
@font-face { font-family: remixicon; src: url(/assets/remixicon-CZw4FkzQ.woff2?t=1769685282643) format("woff2"), url(/assets/remixicon-S6an_USy.woff?t=1769685282643) format("woff"); font-display: block; }