/* =====================================================================
   DL Lindenthal – Brand-Layer (Logo, Navigation, WhatsApp, Praxisfotos)
   Wird als letztes Stylesheet geladen und überschreibt daher gezielt
   einzelne Regeln der bestehenden Seiten-Styles.
   ===================================================================== */

/* ---------------------------------------------------------------
   1) Logo in der Kopfnavigation
   Das vollständige DL-Lindenthal-Logo ersetzt das frühere
   Text-/Grafik-Branding („Dr." bzw. „DL" + Wortmarke).
   Seitenverhältnis der Bilddatei: 2178 x 512 (4.254 : 1)
   --------------------------------------------------------------- */
.dl-logo {
  display: inline-flex;
  align-items: center;
  flex: none;
  line-height: 0;
}
.dl-logo img {
  display: block;
  width: auto;
  height: 34px;             /* Proportionen bleiben erhalten */
  max-width: 100%;
}
@media (max-width: 520px) {
  .dl-logo img { height: 29px; }
}
@media (max-width: 360px) {
  .dl-logo img { height: 25px; }
}

/* Footer-Logo: Wortmarke in Weiß, freigestellt – ohne helle Box.
   Die Datei logo-dl-voll-weiss.png wird von _build/tools/logo_footer.py
   aus der Originaldatei erzeugt: Hintergrund entfernt, Wortmarke weiß,
   die lila DL-Kachel bleibt unverändert. */
.dl-logo-footer {
  display: inline-flex;
  align-items: center;
  background: none;
  padding: 0;
  line-height: 0;
}
.dl-logo-footer img {
  display: block;
  width: auto;
  height: 30px;
  max-width: 100%;
}

/* Ehemalige Textmarke sicherheitshalber vollständig ausblenden */
.logo-mark { display: none !important; }

/* ---------------------------------------------------------------
   2) Navigation – Hamburger nur auf Touch-/Mobilgeräten
   Grundzustand (alle Geräte, auch ohne Media-Query-Unterstützung):
   Desktop-Navigation sichtbar, Burger versteckt.
   Erst bei grobem Zeiger OHNE Hover (= Touchgerät) wird umgeschaltet.
   --------------------------------------------------------------- */
header .nav-links { display: flex !important; }
header .burger    { display: none  !important; }
header .nav-mobil { display: none  !important; }

/* Schmaler Desktop-Browser: Navigation wird kompakter, nicht ersetzt. */
@media (max-width: 1120px) {
  header .nav        { gap: 10px; }
  header .nav-links  { gap: 15px; font-size: 13.5px; }
  header .nav-btns   { gap: 8px; }
  header .nav-btns .btn { padding: 10px 14px; font-size: 13px; }
}
@media (max-width: 900px) {
  header .nav-links { gap: 12px; font-size: 13px; }
  header .nav-btns .btn { padding: 9px 12px; font-size: 12.5px; }
  .dl-logo img { height: 30px; }
}
@media (max-width: 780px) {
  /* Letzte Ausbaustufe für sehr schmale Desktopfenster:
     Die Navigationslinks bleiben erhalten, dürfen aber schrumpfen und
     innerhalb der Kopfzeile horizontal scrollen. Die Seite selbst
     bekommt dadurch keinen horizontalen Überlauf. */
  header .nav { min-width: 0; }
  header .nav-links {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    -ms-overflow-style: none;
    max-width: 100%;
  }
  header .nav-links::-webkit-scrollbar { display: none; }
  header .nav-links a { flex: none; }
  header .nav-btns { flex: none; min-width: 0; }
  header .nav-btns .btn-akut { display: none; }
  header .dl-logo { min-width: 0; }
  header .dl-logo img { height: 27px; }
}
@media (max-width: 520px) {
  header .nav-btns .btn { padding: 8px 10px; font-size: 12px; }
  header .nav-links { gap: 10px; font-size: 12.5px; }
}

/* Touchgeräte (grober Zeiger, kein echtes Hover): Hamburger-Menü */
@media (pointer: coarse) and (hover: none) {
  header .nav-links { display: none !important; }
  header .burger    { display: inline-flex !important; }
  header .nav-mobil { display: none !important; }
  header .nav-mobil.offen { display: flex !important; }
  header .nav-btns .btn-akut { display: none; }
}
/* Geräte ohne jeglichen Feinzeiger (reine Touch-Tablets) */
@media (any-pointer: coarse) and (any-hover: none) and (max-width: 1120px) {
  header .nav-links { display: none !important; }
  header .burger    { display: inline-flex !important; }
  header .nav-mobil.offen { display: flex !important; }
}
/* Vom JavaScript gesetzter Zustand hat immer Vorrang
   (deckt Geräte ab, die die Media-Features falsch melden). */
html.dl-touch header .nav-links { display: none !important; }
html.dl-touch header .burger    { display: inline-flex !important; }
html.dl-touch header .nav-mobil.offen { display: flex !important; }
html.dl-touch header .nav-btns .btn-akut { display: none; }

html.dl-no-touch header .nav-links { display: flex !important; }
html.dl-no-touch header .burger    { display: none !important; }
html.dl-no-touch header .nav-mobil { display: none !important; }

/* Burger-Optik (drei Striche werden zum X) */
header .burger {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5.5px;
  width: 44px;
  height: 42px;
  padding: 0;
  margin-right: -4px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--ink, #232150);
  border-radius: 10px;
}
header .burger:focus-visible {
  outline: 3px solid var(--lila-tief, #6D5BD0);
  outline-offset: 2px;
}
header .burger .b-linie {
  display: block;
  width: 26px;
  height: 2.6px;
  border-radius: 2px;
  background: currentColor;
  transition: transform .3s var(--ease, ease), opacity .22s;
}
header .burger[aria-expanded="true"] .b-linie:nth-child(1) { transform: translateY(8.1px) rotate(45deg); }
header .burger[aria-expanded="true"] .b-linie:nth-child(2) { opacity: 0; transform: scaleX(.3); }
header .burger[aria-expanded="true"] .b-linie:nth-child(3) { transform: translateY(-8.1px) rotate(-45deg); }
@media (prefers-reduced-motion: reduce) {
  header .burger .b-linie { transition: none; }
}

header .nav-mobil a:focus-visible,
header .nav-links a:focus-visible {
  outline: 3px solid var(--lila-tief, #6D5BD0);
  outline-offset: 3px;
  border-radius: 6px;
}

/* ---------------------------------------------------------------
   3) WhatsApp – Banner „Am liebsten WhatsApp?" und Sticky-Button
   --------------------------------------------------------------- */
.msg-links { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.msg-links .wa-banner { margin: 0; }
.msg-links .info-panel { flex: 1; }

.wa-banner {
  background: linear-gradient(135deg, var(--lila-tief, #6D5BD0), #5A48C0);
  border-radius: 16px;
  padding: 17px 19px;
  margin: 14px 0 20px;
  color: #fff;
  position: relative;
  overflow: hidden;
}
.wa-banner::before {
  content: ""; position: absolute; top: -40px; right: -40px;
  width: 130px; height: 130px; border-radius: 50%;
  border: 2.5px solid rgba(216,242,110,.25); pointer-events: none;
}
.wa-banner b { display: flex; align-items: center; gap: 9px; font-size: 15px; }
.wa-banner b svg { width: 21px; height: 21px; flex: none; color: var(--lime, #D8F26E); }
.wa-banner p { font-size: 13px; opacity: .9; margin: 6px 0 13px; color: #EDEAF7; }
.wa-banner a {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--lime, #D8F26E); color: var(--ink, #232150);
  font-weight: 700; font-size: 13.5px; padding: 11px 17px; border-radius: 11px;
  position: relative; overflow: hidden;
  transition: transform .2s var(--ease, ease), box-shadow .2s;
  animation: wa-anstupsen 4.5s ease-in-out 1.8s infinite;
}
.wa-banner a svg { width: 17px; height: 17px; color: var(--ink, #232150); }
.wa-banner a::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 46px;
  background: linear-gradient(105deg, transparent, rgba(255,255,255,.65), transparent);
  left: -60px; animation: wa-glanz 4.5s ease-in-out 1.8s infinite; pointer-events: none;
}
@keyframes wa-anstupsen {
  0%,14%,100% { transform: scale(1); }
  4%  { transform: scale(1.05) rotate(-1.2deg); }
  8%  { transform: scale(1.03) rotate(1deg); }
  12% { transform: scale(1.04); }
}
@keyframes wa-glanz { 0%,10% { left: -60px; } 22%,100% { left: calc(100% + 20px); } }
.wa-banner a:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(216,242,110,.5); animation-play-state: paused; }
.wa-banner a:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .wa-banner a, .wa-banner a::after { animation: none !important; } }
@media (max-width: 640px) { .wa-banner a { width: 100%; justify-content: center; } }

.wa-fab {
  position: fixed; right: 18px; bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  z-index: 60; width: 58px; height: 58px; border-radius: 50%;
  background: #25D366; color: #fff; display: grid; place-items: center;
  box-shadow: 0 10px 26px rgba(37,211,102,.42);
  transition: transform .25s var(--ease, ease), box-shadow .25s;
}
.wa-fab svg { width: 31px; height: 31px; }
.wa-fab:hover { transform: translateY(-3px) scale(1.05); box-shadow: 0 14px 32px rgba(37,211,102,.5); }
.wa-fab:focus-visible { outline: 3px solid var(--ink, #232150); outline-offset: 3px; }
.wa-fab::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid rgba(37,211,102,.55);
  animation: wa-puls 2.6s ease-out infinite; pointer-events: none;
}
@keyframes wa-puls { 0% { transform: scale(1); opacity: .8; } 70% { transform: scale(1.55); opacity: 0; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .wa-fab::after { animation: none; display: none; } }
@media (max-width: 640px) {
  .wa-fab { width: 52px; height: 52px; right: 14px; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); }
  .wa-fab svg { width: 28px; height: 28px; }
}

/* Footer: Öffnungszeiten-Spalte */
.f-zeiten span { display: block; padding: 4px 0; opacity: .85; font-size: 14.5px; }
.f-zeiten .f-akuthin { font-size: 12.5px; opacity: .6; margin-top: 4px; }

/* Footer: Social-Media-Icons */
.f-social { display: flex; gap: 10px; margin-top: 16px; }
.f-social a {
  width: 38px; height: 38px; border-radius: 12px;
  border: 1.5px solid rgba(255,255,255,.22);
  display: grid; place-items: center; color: #CFCCE8; padding: 0;
  transition: .2s; opacity: 1;
}
.f-social a:hover { color: var(--ink, #232150); background: var(--lime, #D8F26E); border-color: var(--lime, #D8F26E); opacity: 1; }
.f-social svg { width: 18px; height: 18px; }

/* ---------------------------------------------------------------
   4) Praxisfoto-Platzhalter (genau vier Plätze)
   Es werden weder alte Bilder noch defekte Bildsymbole geladen.
   --------------------------------------------------------------- */
.dl-foto {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 18px;
  overflow: hidden;
  background:
    repeating-linear-gradient(135deg,
      rgba(109,91,208,.07) 0 12px,
      rgba(109,91,208,.02) 12px 24px),
    var(--lila, #DCD3F5);
  border: 1.5px dashed rgba(109,91,208,.45);
  display: grid;
  place-items: center;
  text-align: center;
  padding: 20px;
}
.dl-foto picture { display: contents; }
.dl-foto img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: 18px;
}
.dl-foto-inner {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  color: var(--lila-tief, #6D5BD0);
}
.dl-foto-inner svg { width: 34px; height: 34px; opacity: .8; }
.dl-foto-label {
  font-family: 'Schibsted Grotesk', 'Inter', sans-serif;
  font-weight: 800; font-size: 15px; letter-spacing: -.01em;
}
.dl-foto-sub { font-size: 12.5px; opacity: .75; max-width: 22ch; line-height: 1.45; }
.dl-foto.hat-bild { border-style: solid; border-color: transparent; background: var(--lila, #DCD3F5); }
.dl-foto.hat-bild .dl-foto-inner { display: none; }

/* Die vorhandene Galerie behält ihr Layout: .p-bild gibt die Höhe vor,
   der Platzhalter füllt den Rahmen exakt aus. */
.p-bild > .dl-foto {
  height: 100%;
  aspect-ratio: auto;
  border: none;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1.5px rgba(109, 91, 208, .45);
}
.p-bild > .dl-foto img { border-radius: inherit; }
.p-bild > .dl-foto.hat-bild { box-shadow: none; }

/* ---------------------------------------------------------------
   5) Kleinigkeiten
   --------------------------------------------------------------- */
.dl-visually-hidden {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.dl-skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--ink, #232150); color: #fff;
  padding: 12px 18px; border-radius: 0 0 12px 0; font-weight: 700;
}
.dl-skip:focus { left: 0; }