/* Physiotherapie Langecker – eigene Anpassungen (mobil), 2026-07 */

/* Mobil-/Tablet-Layout unter 1275px (Kundenvorgabe). Oberhalb von
   800px zeigt das Theme sonst ein kaputtes Zwischenlayout (Nav-Balken
   liegt mitten im Sliderbild, „Ganzheitliche" verdeckt — iPad-Bug). */
@media (max-width: 1274px) {

  /* ---------- Header: kompakt, Logo + Burger in einer Zeile ---------- */
  /* fixiert (sticky scheitert an Theme-Overflow), Platzhalter via body-padding */
  html body .pl-header-wrapper {
    position: fixed !important;
    top: 0;
    left: 0;
    right: 0;
    height: auto !important;
    /* Theme schiebt den Header auf Tablet-Breiten per margin-top in
       die Seite (Header-unter-Slider-Layout) — neutralisieren */
    margin: 0 !important;
    z-index: 99990;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  }
  body {
    /* exakt Header-Höhe (4px + 44px Logo + 14px) — sonst blitzt
       ein grauer Streifen zwischen Header und Inhalt auf */
    padding-top: 62px !important;
  }
  .pl-header-wrapper .pl-header {
    /* asymmetrisch, weil die Logo-Grafik oben ~14px optisch leeren
       Raum trägt (weißer L-Schwung überm Bordeaux-Kasten): 4px oben
       + Logo-Luft ≈ 14px unten → wirkt ausgewogen */
    padding: 4px 20px 14px !important;
    background: #fff;
    height: auto !important;
    min-height: 0 !important;
  }
  .pl-header .pl-row {
    height: auto !important;
    min-height: 0 !important;
  }
  .pl-header .pl-row {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 12px;
  }
  .pl-header .pl-row > nav.pl-main-menu,
  .pl-header .pl-row > .pl-clearfix {
    display: none !important;
  }
  /* Aufgeklapptes Menü und Suche: volle Breite unterhalb der Kopfzeile,
     bis an die Ränder des Headers (kompensiert das Header-Padding) */
  .pl-header .pl-row > .pl-mobile-nav-holder,
  .pl-header .pl-row > .pl-mobile-menu-search {
    order: 10;
    flex: 1 1 auto;
    width: calc(100% + 40px) !important;
    margin: 0 -20px -14px !important;
    border-top: 1px solid #eee;
  }
  .pl-logo {
    order: 1;
    margin: 0 auto 0 0 !important;
    float: none !important;
    display: flex;
    align-items: center;
  }
  .pl-logo img {
    height: 44px !important;
    width: auto !important;
    max-width: 62vw;
  }
  /* Lupe ausblenden */
  .pl-mobile-menu-icons a.plb-icon-search {
    display: none !important;
  }
  /* Burger: rechts, rot, mittig, angenehme Tippfläche
     (Theme setzt position:absolute;left:0 → zurück in den Flex-Fluss) */
  .pl-mobile-menu-icons {
    order: 2;
    position: static !important;
    left: auto !important;
    right: auto !important;
    margin: 0 0 0 auto !important;
    float: none !important;
    display: flex !important;
    align-items: center;
    height: auto !important;
  }
  .pl-mobile-menu-icons a {
    display: inline-flex !important;
    align-items: center;
    margin: 0 !important;
    /* auf die Mitte des sichtbaren Logo-Kastens (nicht der Bilddatei) */
    transform: translateY(7px);
  }
  .pl-mobile-menu-icons a,
  .pl-mobile-menu-icons a:before {
    color: #852a2f !important;
  }
  .pl-mobile-menu-icons a {
    font-size: 26px;
    padding: 8px;
    line-height: 1;
  }
  /* Aufgeklapptes Menü: Teil des Sticky-Headers, scrollbar bei Platzmangel.
     Zu/Auf steuert das Theme-JS per Inline-display (slideToggle) — die
     Theme-CSS-Grundlagen dafür gelten aber nur ≤800px, deshalb hier
     nachgebildet: Holder initial zu (ohne !important, damit das
     JS-Inline-display gewinnt), Menüliste sichtbar */
  .pl-header-wrapper .pl-mobile-nav-holder {
    display: none;
    max-height: calc(100vh - 80px);
    overflow-y: auto;
    background: #fff;
  }
  .pl-header-wrapper .pl-mobile-nav-holder > ul {
    display: block !important;
  }

  /* ---------- Abstands-Rhythmus: ein System, drei Stufen ----------
     16px innerhalb eines Blocks, 18px zwischen Blöcken,
     28px zwischen Spalten, 36px zwischen Sektionen.
     Entscheidend: Restmargins am Ende von Blöcken/Spalten/Sektionen
     werden genullt, sonst summieren sich die Stufen unkontrolliert. */

  /* Sektionen */
  #main .fullwidth-box {
    margin-top: 36px !important;
    margin-bottom: 0 !important;
  }
  #main .fullwidth-box:first-of-type,
  #main .fullwidth-box[style*="--plb-background-image"] {
    margin-top: 0 !important;
  }
  /* Seiten OHNE Banner (Galerie, Impressum, Datenschutz): erste
     Sektion braucht Abstand zum Header */
  #main .fullwidth-box:first-of-type:not([style*="--plb-background-image"]) {
    margin-top: 28px !important;
  }
  /* Startseite: L-Icon unterm Slider mit gleichem Abstand wie zur
     folgenden Überschrift (18px) */
  body.home #main .fullwidth-box:first-of-type {
    margin-top: 18px !important;
  }
  /* Einzelbeitrag/Archiv: Inhalt nicht bündig unterm Header starten */
  body.single #main,
  body.archive #main {
    padding-top: 28px !important;
  }
  /* Video-Platzhalter (Consent): mobil ohne Riesen-Rand */
  .plc-cmpnt-cb-preset-c .plc-cmpnt-cb-main {
    margin: 0 !important;
  }
  /* Banner-Sektionen (Header-Bilder) etwas kompakter */
  #main .fullwidth-box[style*="--plb-background-image"] {
    padding-top: 48px !important;
    padding-bottom: 28px !important;
  }

  /* Spalten */
  #main .pl-layout-column {
    margin-bottom: 28px !important;
  }
  #main .pl-layout-column:last-child {
    margin-bottom: 0 !important;
  }

  /* Inhaltsblöcke innerhalb der Spalten: einheitlich 18px */
  #main .pl-column-wrapper > .pl-text,
  #main .pl-column-wrapper > .pl-title,
  #main .pl-column-wrapper > .pl-image-wrapper,
  #main .pl-column-wrapper > .pl-gallery,
  #main .pl-column-wrapper > .pl-reading-box-container {
    margin-top: 0 !important;
    margin-bottom: 18px !important;
  }
  /* Trennlinie: etwas Luft nach der Überschrift, klarer Absatz danach */
  #main .pl-separator {
    margin-top: 8px !important;
    margin-bottom: 24px !important;
  }
  /* Letzter Inhaltsblock einer Spalte: kein Eigenabstand mehr –
     Spalten-/Sektionsabstand übernimmt. Clearfix-Helfer zählen nicht;
     exakter Klassen-Match, denn auch echte Blöcke wie die Trennlinie
     tragen die Klasse pl-clearfix zusätzlich. */
  #main .pl-column-wrapper
    > :not([class="pl-clearfix"], .pl-sep-clear):not(
      :has(~ :not([class="pl-clearfix"], .pl-sep-clear))
    ) {
    margin-bottom: 0 !important;
  }

  /* Innerhalb der Blöcke: Absätze/Listen 16px, letztes Element ohne
     Restmargin; Bildabstände regeln die umgebenden Absätze/Blöcke
     (überschreibt auch Inline-Styles wie margin-bottom:0 der Originalseite) */
  #main .pl-text p,
  #main .pl-text ul,
  #main .pl-text ol {
    margin-top: 0 !important;
    margin-bottom: 16px !important;
  }
  #main .pl-text > :last-child {
    margin-bottom: 0 !important;
  }
  #main .pl-text img {
    margin-bottom: 0 !important;
  }
  #main p {
    margin-bottom: 16px;
  }
  /* Leere Vor/Zurück-Navigation über Beiträgen: keine Linien um nichts */
  #main .single-navigation:not(:has(a)) {
    display: none !important;
  }
  /* Lange Wörter in Überschriften: umbrechen statt rechts abschneiden;
     Trennung erst ab 10 Zeichen, min. 5 Zeichen vor/nach dem Strich */
  #main .pl-title-heading {
    overflow-wrap: break-word;
    hyphens: auto;
    -webkit-hyphenate-limit-before: 5;
    -webkit-hyphenate-limit-after: 5;
    hyphenate-limit-chars: 10 5 5;
  }
  /* Seitenränder einheitlich; unten fester Abstand zum Footer
     (die Seiten-Templates haben sonst gar keinen, das
     Beitrags-Template 50px über #content — beides vereinheitlicht) */
  #main {
    padding-left: 20px !important;
    padding-right: 20px !important;
    padding-bottom: 28px !important;
  }
  #main #content {
    margin-bottom: 0 !important;
  }
  /* Beitragsseite: gestapelte Sidebar ohne Desktop-Versatz —
     Abstand kommt von der Datumszeile (30px). body-Präfix: muss die
     spätere Desktop-Regel (35px) per Spezifität schlagen */
  body.single .sidebar.pl-blogsidebar {
    margin-top: 0 !important;
  }
  /* Blog-Übersicht: letzter Teaser ohne Eigenabstand vor dem Footer */
  #main .pl-posts-container article:last-of-type {
    margin-bottom: 0 !important;
  }

  /* ---------- Vollflächige Inhaltsbilder (bis zum Browserrand) ----------
     Kundenvorgabe: die großen Content-Fotos mobil randlos. Gegenstück
     zum 20px-Seitenrand von #main; das L-Icon (b1/b2/b7, 37px) bleibt
     ausgenommen. Selektoren je Seite über die CMS-Bildmarker. */
  body.home #main img[data-cms-img="b8"],
  body.home #main img[data-cms-img="b9"],
  body.page-id-10 #main img[data-cms-img="b1"],
  body.page-id-16 #main img[data-cms-img="b2"],
  body.page-id-14 #main img[data-cms-img="b2"],
  body.page-id-14 #main img[data-cms-img="b3"],
  body[class*="parent-pageid-14"] #main img[data-cms-img="b1"] {
    display: block;
    width: calc(100% + 40px);
    max-width: none !important;
    margin: 0 -20px !important;
  }

  /* Blog-Einzelbeitrag: Titelbild randlos und ohne Abstand nach oben */
  body.single #main {
    padding-top: 0 !important;
  }
  body.single .pl-post-slideshow {
    width: calc(100% + 40px) !important;
    max-width: none !important;
    margin: 0 -20px 28px !important;
  }
  body.single .pl-post-slideshow img {
    width: 100%;
  }

  /* Philosophie & Kontakt: Bild erst NACH dem Fließtext (Spaltentausch);
     die Row wird dafür zur Flex-Spalte (Theme: display:block), die
     Textspalte übernimmt den Standard-Spaltenabstand, die Bildspalte
     (visuell letzte) keinen */
  body.page-id-10 #main .pl-builder-row:has(> .pl-layout-column img[data-cms-img="b1"]),
  body.page-id-16 #main .pl-builder-row:has(> .pl-layout-column img[data-cms-img="b2"]) {
    display: flex;
    flex-direction: column;
  }
  body.page-id-10 #main .pl-layout-column:has(img[data-cms-img="b1"]),
  body.page-id-16 #main .pl-layout-column:has(img[data-cms-img="b2"]) {
    order: 2;
    margin-bottom: 0 !important;
  }
  body.page-id-10 #main .pl-layout-column:has(~ .pl-layout-column img[data-cms-img="b1"]),
  body.page-id-10 #main .pl-layout-column:has(img[data-cms-img="b1"]) ~ .pl-layout-column,
  body.page-id-16 #main .pl-layout-column:has(img[data-cms-img="b2"]) ~ .pl-layout-column {
    margin-bottom: 28px !important;
  }

  /* Philosophie: Bild schließt bündig mit dem Footer ab */
  body.page-id-10 #main {
    padding-bottom: 0 !important;
  }

  /* Kontakt: Google-Maps-Karte randlos und bündig zum Footer
     (gilt für den Consent-Platzhalter wie für die echte Karte) */
  body.page-id-16 #main {
    padding-bottom: 0 !important;
  }
  body.page-id-16 #main [data-plc-cookie-content-blocker-id="google-maps"],
  body.page-id-16 #main iframe[src*="google.com/maps"] {
    display: block;
    width: calc(100% + 40px) !important;
    max-width: none !important;
    margin: 0 -20px !important;
  }

  /* Startseite: zweites Bild (b9) ans Seitenende, bündig vor den Footer */
  body.home #main .pl-builder-row:has(> .pl-layout-column img[data-cms-img="b9"]) {
    display: flex;
    flex-direction: column;
  }
  body.home #main .pl-layout-column:has(img[data-cms-img="b9"]) {
    order: 2;
    margin-bottom: 0 !important;
  }
  body.home #main .pl-layout-column:has(img[data-cms-img="b9"]) ~ .pl-layout-column {
    margin-bottom: 28px !important;
  }
  body.home #main {
    padding-bottom: 0 !important;
  }

  /* Behandlungen: Bilder ans Ende ihrer Spalte (nach Titel/Text),
     letztes Bild bündig vor dem Footer */
  body.page-id-14 #main .pl-column-wrapper:has(> .pl-text img[data-cms-img="b2"]),
  body.page-id-14 #main .pl-column-wrapper:has(> .pl-text img[data-cms-img="b3"]) {
    display: flex;
    flex-direction: column;
  }
  body.page-id-14 #main .pl-column-wrapper > .pl-text:has(img[data-cms-img="b2"]),
  body.page-id-14 #main .pl-column-wrapper > .pl-text:has(img[data-cms-img="b3"]) {
    order: 99;
    margin-top: 18px !important;
    margin-bottom: 0 !important;
  }
  body.page-id-14 #main {
    padding-bottom: 0 !important;
  }

  /* Kontakt: Karte (samt Überschrift) vor dem Foto — das Foto wandert
     mobil als Duplikat ans Seitenende (Original ausgeblendet) */
  body.page-id-16 #main img[data-cms-img="b2"] {
    display: none !important;
  }
  body.page-id-16 #main .pl-kontakt-bild-mobil {
    display: block !important;
    width: calc(100% + 40px);
    max-width: none !important;
    margin: 28px -20px 0 !important;
  }

  /* ---------- Footer ---------- */
  .pl-footer .pl-copyright-content {
    padding: 24px 20px;
  }
  /* Datenschutzerklärung | Impressum in eigener Zeile */
  .pl-copyright-notice .pl-footer-legal {
    display: block;
    margin-top: 6px;
  }
  .pl-copyright-notice .pl-footer-legal .pl-footer-sep {
    display: none;
  }
}

/* ---------- Barrierefreiheit (alle Viewports) ---------- */

/* Slider-Punkte: 24px-Tippfläche (Lighthouse target-size), Optik
   unverändert – der sichtbare 12px-Ring wird als Pseudo-Element
   in der größeren Fläche zentriert. html-Präfix nötig, um die
   !important-Regeln der zur Laufzeit geladenen Skin-CSS zu schlagen. */
html .ls-v6 .ls-bottom-slidebuttons a,
html .ls-v6 .ls-bottom-slidebuttons a:hover,
html .ls-v6 .ls-bottom-slidebuttons a.ls-nav-active,
html .ls-v6 .ls-bottom-slidebuttons a.ls-nav-active:hover {
  width: 24px !important;
  height: 24px !important;
  border: 0 !important;
  background: transparent !important;
  position: relative !important;
}
html .ls-v6 .ls-bottom-slidebuttons a::before {
  content: "";
  position: absolute;
  inset: 6px;
  box-sizing: border-box;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.75);
}
html .ls-v6 .ls-bottom-slidebuttons a:hover::before {
  border-color: rgba(255, 255, 255, 1);
}
html .ls-v6 .ls-bottom-slidebuttons a.ls-nav-active::before {
  background: rgba(255, 255, 255, 0.75);
}
html .ls-v6 .ls-bottom-slidebuttons a.ls-nav-active:hover::before {
  background: rgba(255, 255, 255, 1);
}

/* Footer-Links: unterstrichen (nicht nur per Farbe erkennbar) und
   mit ausreichend großer Tippfläche; das negative Margin gleicht das
   Padding im Layout aus, die Klickfläche bleibt vergrößert */
.pl-copyright-notice a {
  text-decoration: underline !important;
  display: inline-block;
  padding: 5px 4px;
  margin: -5px -4px;
}

/* Links im Fließtext: unterstrichen, nicht nur per Farbe erkennbar
   (Bild-Links ausgenommen) */
#main p a:not(:has(img)),
#main li a:not(:has(img)) {
  text-decoration: underline;
}

/* Video-Platzhalter (Consent): nicht im 16:9-Rahmen abschneiden —
   solange der Blocker aktiv ist, wächst der Container mit dem Inhalt;
   nach Zustimmung ist der Blocker weg und das eingebettete Video
   nutzt wieder den Original-Seitenverhältnis-Container */
#main .video-container:has(.plc-cmpnt-content-blocker) {
  height: auto !important;
  padding-bottom: 0 !important;
  overflow: visible;
}

/* Blog-Einzelbeitrag: Luft unter der Datumszeile,
   Sidebar 15px höher (Theme-Standard: 50px) */
.single .pl-meta-info-wrapper {
  margin-bottom: 30px;
}
.single .sidebar.pl-blogsidebar {
  margin-top: 35px !important;
}
/* Leeres HTML-Widget (Überbleibsel) schob die Sidebar zusätzlich
   45px nach unten — ausblenden, solange es leer ist */
.sidebar .widget_custom_html:has(.textwidget:empty) {
  display: none;
}

/* Quote-Avatar (Startseite): nur mobil sichtbar */
.pl-quote-avatar {
  display: none;
}

/* Kontakt-Duplikatbild: nur mobil sichtbar */
.pl-kontakt-bild-mobil {
  display: none;
}

/* Beitragsinhalt: Zwischenüberschriften in Leseproportion statt
   39px-Theme-Hero (wirkte gesperrt-riesig neben 15px-Fließtext) */
.single .post-content h2,
.single .post-content h3,
.single .post-content h4 {
  font-size: 19px;
  line-height: 1.4;
  letter-spacing: 0;
  font-weight: 700;
  color: #333333;
  margin: 26px 0 12px;
}

/* Startseite Desktop: Abstand unter der Zitatbox = Abstand darüber
   (war 75px vs. 68px — 7px Asymmetrie) */
@media (min-width: 1275px) {
  body.home #main .pl-builder-row-3.fullwidth-box {
    margin-top: 48px !important;
  }
}