/*
 Theme Name:   Bricks Child Theme
 Theme URI:    https://bricksbuilder.io/
 Description:  Use this child theme to extend Bricks.
 Author:       Bricks
 Author URI:   https://bricksbuilder.io/
 Template:     bricks
 Version:      1.1
 Text Domain:  bricks
*/

/* ==========================================================================
   Dr. Weltler — Website-Styles (Design: Claude-Design "Weltler Website")
   Breakpoints (mobile-first, Bricks RTM): Basis | ≥767px | ≥991px | ≥1279px
   ========================================================================== */

/* --- Grundlagen ------------------------------------------------------- */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 84px; /* Anker landen unter der sticky Navigationsleiste */
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}
/* Lenis (Bricksforge-Scrollsmoother) aktiv: natives Smooth-Scrolling deaktivieren,
   sonst animieren Browser und Lenis gegeneinander */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }

/* Anti-FOUC NUR fürs Hero-Intro (above the fold) — alles andere versteckt GSAP
   selbst. Ohne JS/mit reduced-motion fehlt html.pl-anim → alles sichtbar. */
html.pl-anim #start .brxe-container > .brxe-div,
html.pl-anim #start .brxe-image,
html.pl-anim #start .brxe-block,
html.pl-anim #start .brxe-svg { opacity: 0; }
body.brx-body {
  background-color: #f8f5ef;
  color: #191919;
  font-family: 'Raleway', sans-serif;
  overflow-x: clip; /* Sicherheitsnetz gegen horizontales Scrollen (Full-bleed-Flächen) */
}
::selection { background: #191919; color: #f8f5ef; }

/* Links: Farbe erben, Hover-Akzent wie im Design */
#brx-content a { color: inherit; text-decoration: none; transition: color .2s ease; }
#brx-content a:hover { color: #4d87a8; }
.wl-link-underline { border-bottom: 1px solid currentColor; }

/* --- Header: Banner scrollt weg, Leiste bleibt sticky ------------------ */
#brx-header {
  position: sticky;
  top: calc(-1 * var(--wl-banner-h, 0px));
  z-index: 100;
}
.wl-headerbar {
  background: rgba(247, 246, 243, 0.94);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
#brx-header a { transition: color .2s ease; }
#brx-header a:hover { color: #4d87a8; }

/* Banner-Zusatz (Adresse) erst ab Tablet zeigen */
.wl-banner-extra { display: none; }
@media (min-width: 767px) {
  .wl-banner-extra { display: inline; }
}

/* --- Navigation: Burger-Bars & Dropdown unterhalb der Leiste ----------- */
.wl-nav .brxe-toggle .brxa-inner,
.wl-nav .brxe-toggle .brxa-inner::before,
.wl-nav .brxe-toggle .brxa-inner::after {
  background-color: #191919;
  height: 2px;
  width: 24px;
}
@media (max-width: 767px) {
  /* Bricks' Fullscreen-Overlay in ein Dropdown unter dem Header umstylen */
  .brxe-nav-nested.wl-nav .brx-nav-nested-items {
    position: absolute;
    inset: auto 0 auto 0;
    top: 100%;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    background: rgba(247, 246, 243, 0.98);
    border-top: 1px solid #e3e0da;
    box-shadow: 0 16px 32px rgba(25, 25, 25, 0.12);
    overflow-y: visible;
    padding: 0;
  }
  .brxe-nav-nested.wl-nav .brx-nav-nested-items > li,
  .brxe-nav-nested.wl-nav .brx-nav-nested-items > a {
    width: 100%;
  }
}

/* --- Utilities --------------------------------------------------------- */
.wl-gray, .wl-gray img { filter: grayscale(1); }
.wl-op85 { opacity: 0.85; }
.wl-shadow-lg { box-shadow: 0 20px 50px rgba(25, 25, 25, 0.14); }
.wl-shadow-md { box-shadow: 0 16px 40px rgba(25, 25, 25, 0.12); }
.wl-shadow-sm { box-shadow: 0 6px 16px rgba(25, 25, 25, 0.10); }
.wl-shadow-card { box-shadow: 0 14px 36px rgba(25, 25, 25, 0.08); } /* Behandlungs-Karten */
.wl-noptr { pointer-events: none; }
.wl-noptr a { pointer-events: auto; }

/* Erfahrungs-Satz in der Hero-Karte: Kernaussage betont, Rest ruhig */
.wl-hero-claim strong { font-weight: 500; color: #191919; }

/* Pfeil-Links („Route planen ⟶" u. a.) */
.wl-cta a { display: inline-flex; align-items: center; gap: 16px; }
.wl-cta .wl-arrow { font-size: 20px; font-weight: 300; line-height: 1; }
@media (min-width: 1279px) {
  .wl-cta a { gap: 24px; }
  .wl-cta .wl-arrow { font-size: 22px; }
}

/* --- Info-Sektion: Desktop-Grid (Bild links, Text rechts) -------------- */
@media (min-width: 1279px) {
  .wl-info-grid { display: grid; grid-template-columns: 1.15fr 1fr; align-items: center; }
  .wl-info-media { grid-column: 1; grid-row: 1 / span 2; }
  .wl-info-head  { grid-column: 2; grid-row: 1; align-self: end; }
  .wl-info-body  { grid-column: 2; grid-row: 2; align-self: start; }
}

/* --- Leistungen: Desktop-Grid (Text links, grüne Fläche rechts) -------- */
@media (min-width: 1279px) {
  .wl-leist-grid { display: grid; grid-template-columns: 1fr 1.15fr; align-items: center; }
}

/* --- Lebenslauf-Liste --------------------------------------------------- */
.wl-cv ul { list-style: none; margin: 0; padding: 0; }
.wl-cv li {
  display: flex;
  gap: 14px;
  align-items: baseline;
  padding: 12px 0;
  border-bottom: 1px solid #e0ddd6;
  color: #33312d;
  line-height: 1.5;
}
.wl-cv li::before { content: "—"; color: #6b6862; font-size: 13px; min-width: 16px; }
@media (min-width: 1279px) {
  .wl-cv li { gap: 18px; padding: 13px 0; }
  .wl-cv li::before { min-width: 18px; }
}

/* --- Behandlungs-Accordion ---------------------------------------------
   Titelzeile: Mobil [Bild | Titel+Link], geöffnet + Kurztext in voller Breite.
   Ab 991px: [Bild | Titel+Kurztext | Link] — Kurztext immer sichtbar. */
.wl-acc .accordion-title-wrapper {
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 4px 16px;
  align-items: center;
  padding: 18px 0;
  cursor: pointer;
}
.wl-acc .wl-acc-media { grid-column: 1; grid-row: 1; }
.wl-acc .wl-acc-body { grid-column: 2; grid-row: 1; }
.wl-acc .wl-acc-teaser { display: none; grid-column: 1 / -1; grid-row: 2; margin-top: 8px; }
.wl-acc .brx-open .wl-acc-teaser { display: block; }

/* Label-Wechsel „weitere Informationen ↓" ⇄ „weniger anzeigen ↑" */
.wl-acc .wl-acc-less { display: none; }
.wl-acc .brx-open .wl-acc-more { display: none; }
.wl-acc .brx-open .wl-acc-less { display: inline; }
.wl-acc .wl-acc-toggle-label .wl-arr { font-size: 16px; font-weight: 300; margin-left: 6px; }

/* Karten-Layout: letzte Karte ohne Abstand nach unten */
.wl-acc .wl-acc-item:last-child { margin-bottom: 0; }

/* Inhalt (Detailtext) */
.wl-acc .wl-acc-content { overflow: hidden; }
.wl-acc .wl-acc-detail { border-top: 1px solid #e0ddd6; padding: 12px 0 22px; }
.wl-acc-detail p { margin: 0 0 1em; }
.wl-acc-detail p:last-child { margin-bottom: 0; }

@media (min-width: 991px) {
  .wl-acc .accordion-title-wrapper {
    grid-template-columns: 146px 1fr auto;
    grid-template-rows: auto auto;
    gap: 6px 32px;
    padding: 22px 0;
  }
  .wl-acc .wl-acc-media { grid-column: 1; grid-row: 1 / span 2; }
  .wl-acc .wl-acc-body { display: contents; }
  .wl-acc .wl-acc-title { grid-column: 2; grid-row: 1; align-self: end; }
  .wl-acc .wl-acc-teaser { display: block; grid-column: 2; grid-row: 2; align-self: start; margin-top: 0; max-width: 78ch; }
  .wl-acc .wl-acc-toggle-label { grid-column: 3; grid-row: 1 / span 2; align-self: center; white-space: nowrap; }
  .wl-acc .wl-acc-detail { border-top: 0; padding: 0 0 28px 178px; max-width: calc(82ch + 178px); }
}

/* --- Kontakt: Öffnungszeiten-Zeilen ------------------------------------- */
/* Tag und Zeit exakt mittig zwischen den Trennlinien (Browser-p-Margins neutralisieren) */
.wl-oz-row { align-items: center; }
.wl-oz-row > p { margin: 0; }
/* Arzt-Angabe: mobil als zweite Zeile unter Tag/Zeit, ab Tablet rechtsbündige dritte Spalte */
@media (max-width: 990px) {
  .wl-oz-row .wl-oz-arzt { grid-column: 1 / -1; margin-top: 2px; }
}
@media (min-width: 991px) {
  .wl-oz-arzt { text-align: right; }
}

/* --- Karte: Styling liegt beim Custom Element (elements/leaflet-map/) --- */

/* --- Footer ------------------------------------------------------------- */
.wl-footlink a { color: #8f8b84; text-decoration: none; transition: color .2s ease; }
.wl-footlink a:hover { color: #f8f5ef; }