/*
Theme Name:   Responsive Child
Theme URI:    https://example.com
Description:  Child-Theme für "Responsive" (CyberChimps) – Farbpalette "Lichtbildwerk".
Author:       Dein Name
Author URI:   https://example.com
Template:     responsive
Version:      1.0.0
Text Domain:  responsive-child
*/

/* ==========================================================================
   FARBPALETTE "LICHTBILDWERK"
   Quelle: Moodboards der Fotografin (weibliche Zielgruppe, warm & harmonisch)
   60% Hintergrund & Fläche | 30% Typografie & Struktur | 10% Akzent & Buttons
   Hier änderst du EINMAL den Wert – und es wirkt sich überall dort aus,
   wo du weiter unten (oder in Beaver Builder Custom CSS) var(--…) benutzt.
   ========================================================================== */
:root {
  /* 60% – Hintergrund & Flächen */
  --color-background:   #FFFDF9; /* Haupt-Hintergrund, Soft Cream */
  --color-surface:       #F4F7F9; /* Kacheln / Flächen mit dezentem Kontrast, Soft Grey-Blue */

  /* 30% – Typografie & Struktur */
  --color-heading:        #0D2B45; /* Überschriften, tiefes Nachtblau */
  --color-text:            #0D2B45; /* Fließtext, gleiche Basis wie Headings laut Vorgabe */
  --color-text-muted:  #5A7D9A; /* Menüs, Linien, Icons – Taubenblau (Logo-Farbe) */
  --color-accent-soft: #8DBFB7; /* sanfter Akzent, z. B. Badges/Tags auf hellem Grund */

  /* 10% – Akzent & Buttons */
  --color-primary:          #E89B7A; /* Primary CTA / Button, warmes Pfirsich-Terrakotta */
  --color-primary-hover:  #C1530A; /* Hover-Zustand Primary Button, dunkles Terrakotta */
  --color-secondary:         #FCA26E; /* Sekundär-Button, heller Terrakotta-Ton */
  --color-secondary-hover: #F5751D; /* Hover-Zustand Sekundär-Button, kräftiges Orange */

  --color-white: #ffffff;
  --color-border: #E2E6E4; /* aus --color-surface abgeleiteter dezenter Rahmenton */
  --color-error: #C94B36; /* warmes Rot-Terrakotta für Fehlermeldungen, passend zur Palette */

  --font-display: "Fraunces", Georgia, serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* ==========================================================================
   ANWENDUNG
   Passe die Selektoren bei Bedarf an dein Theme / deine Beaver-Builder-
   Module an (per Inspect-Element im Browser herausfinden, welche Klasse
   ein Element tatsächlich hat).
   ========================================================================== */

body {
  background-color: var(--color-background);
  color: var(--color-text);
}

h1, h2, h3, h4, h5, h6,
.fl-heading {
  color: var(--color-heading);
}

a {
  color: var(--color-heading);
}

a:hover {
  color: var(--color-primary-hover);
}

/* ==========================================================================
   BUTTONS
   .lbw-btn-* sind die expliziten Klassen für HTML-Module / Beaver-Builder-
   Buttons (unter "Erweitert → Klasse" eintragen). .fl-button und
   .wp-block-button__link erhalten dieselbe Optik automatisch, damit auch
   direkt im Builder erstellte Standard-Buttons einheitlich aussehen.
   ========================================================================== */

.lbw-btn,
.fl-button,
.wp-block-button__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 600;
  padding: 14px 32px;
  border-radius: 999px !important;
  text-decoration: none;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: background-color 0.25s ease, color 0.25s ease, transform 0.15s ease, border-color 0.25s ease;
}

.lbw-btn:hover,
.fl-button:hover,
.wp-block-button__link:hover {
  transform: translateY(-1px);
}

/* Primär – Haupt-CTA, z. B. "Termin anfragen" */
.lbw-btn-primary,
.fl-button,
.wp-block-button__link {
  background-color: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
  color: var(--color-white) !important;
}

.lbw-btn-primary:hover,
.fl-button:hover,
.wp-block-button__link:hover {
  background-color: var(--color-primary-hover) !important;
  border-color: var(--color-primary-hover) !important;
  color: var(--color-white) !important;
}

.fl-button .fl-button-text {
  color: inherit !important;
}

/* Sekundär (Outline) – z. B. "Infos anfordern"
   Klasse in Beaver Builder unter Button-Einstellungen → "Class" eintragen: lbw-btn-secondary */
.lbw-btn-secondary {
  background-color: transparent !important;
  color: var(--color-primary-hover) !important;
  border-color: var(--color-primary) !important;
}

.lbw-btn-secondary:hover {
  background-color: var(--color-primary) !important;
  color: var(--color-white) !important;
}

/* Text-Link – z. B. "Mehr erfahren" */
.lbw-btn-text {
  display: inline-flex;
  padding: 4px 0;
  border-radius: 0 !important;
  border: none;
  background: none !important;
  color: var(--color-heading) !important;
  position: relative;
  font-weight: 600;
  text-decoration: none;
}

.lbw-btn-text::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1.5px;
  background: var(--color-primary);
  transform: scaleX(0.3);
  transform-origin: left;
  transition: transform 0.25s ease, background-color 0.25s ease;
}

.lbw-btn-text:hover::after {
  transform: scaleX(1);
  background: var(--color-primary-hover);
}

.lbw-btn-text:hover {
  transform: none;
}

/* Flächen mit dezentem Kontrast, z. B. Kacheln/Cards */
.fl-module,
.fl-col-content {
  background-color: var(--color-surface);
}

/* Navigation, Icons, Trennlinien */
.fl-page-nav a,
.menu-item a,
hr {
  color: var(--color-text-muted);
  border-color: var(--color-border);
}

/* Gedämpfter Text, z. B. Datum/Autor bei Beiträgen */
.entry-meta,
.fl-post-meta {
  color: var(--color-text-muted);
}

/* Sanfter Akzent, z. B. Badges, Tags, kleine Info-Boxen */
.badge,
.fl-tag {
  background-color: var(--color-accent-soft);
  color: var(--color-heading);
}

/* Footer – dunkles Nachtblau als Fläche, heller Text */
.site-footer,
footer.fl-row {
  background-color: var(--color-heading);
  color: var(--color-white);
}

/* ==========================================================================
   PREISTABELLE / PAKETE
   Container-Klasse .lbw-preise um den gesamten Preisbereich legen,
   damit Breite, Abstände und Schriftart greifen.
   ========================================================================== */

.lbw-preise {
  font-family: var(--font-body);
  color: var(--color-text);
  padding: 48px 20px 64px;
  max-width: 920px;
  margin: 0 auto;
  line-height: 1.55;
}

.lbw-preise section {
  margin-bottom: 64px;
}

.lbw-preise section:last-child {
  margin-bottom: 0;
}

/* Headline-Klasse für Bereichstitel, z. B. "Die Shooting-Pakete" – ohne Hintergrund */
.lbw-titel {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(24px, 3.2vw, 32px);
  color: var(--color-heading);
  background: none;
  margin: 0 0 8px;
  letter-spacing: 0.2px;
}

.lbw-section-intro {
  color: var(--color-text-muted);
  font-size: 15px;
  margin: 0 0 28px;
  max-width: 58ch;
}

/* ---------- Shooting-Pakete ---------- */

.lbw-pakete {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.lbw-paket-karte {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
}

.lbw-paket-karte.ist-mittel {
  background: var(--color-surface);
  border-color: var(--color-surface);
}

.lbw-paket-name {
  font-family: var(--font-display);
  font-size: 22px;
  color: var(--color-heading);
  margin: 0 0 4px;
}

.lbw-paket-dauer {
  color: var(--color-primary-hover);
  font-size: 13px;
  font-weight: 600;
  margin: 0 0 16px;
}

.lbw-paket-beschreibung {
  font-size: 14.5px;
  color: var(--color-text);
  margin: 0 0 20px;
  flex-grow: 1;
}

.lbw-paket-bilder {
  font-size: 14px;
  color: var(--color-text-muted);
  border-top: 1px solid var(--color-border);
  padding-top: 16px;
  margin: 0 0 16px;
}

.lbw-paket-preis {
  font-family: var(--font-display);
  font-size: 28px;
  color: var(--color-heading);
}

/* Hinweistext, z. B. "In allen Paketen enthalten" – ohne Hintergrund, nur Rahmen */
.lbw-notiz {
  margin-top: 24px;
  padding: 18px 22px;
  background: none;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  font-size: 14px;
  color: var(--color-heading);
}

/* ---------- Kennenlernen & Mini-Aktionen ---------- */

.lbw-mini-aktionen {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.lbw-mini-karte {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  padding: 24px;
}

.lbw-mini-titel {
  font-family: var(--font-display);
  font-size: 19px;
  color: var(--color-heading);
  margin: 0 0 4px;
}

.lbw-mini-preis {
  color: var(--color-primary-hover);
  font-weight: 600;
  font-size: 14px;
  margin: 0 0 14px;
}

.lbw-mini-text {
  font-size: 14.5px;
  color: var(--color-text);
  margin: 0;
}

.lbw-mini-liste {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
}

.lbw-mini-liste li {
  font-size: 14.5px;
  color: var(--color-text);
  padding: 8px 0;
  border-top: 1px solid var(--color-border);
}

.lbw-mini-liste li:first-child {
  border-top: none;
}

.lbw-mini-liste .lbw-monat {
  color: var(--color-text-muted);
  font-weight: 500;
  margin-right: 6px;
}

/* ---------- Zusätzliche Bildpakete ---------- */

.lbw-downloads {
  border: 1px solid var(--color-border);
  border-radius: 4px;
  overflow: hidden;
}

.lbw-download-zeile {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 22px;
  background: var(--color-white);
}

.lbw-download-zeile:nth-child(even) {
  background: var(--color-surface);
}

.lbw-download-zeile.ist-hervorgehoben {
  background: var(--color-primary);
}

.lbw-download-zeile.ist-hervorgehoben .lbw-download-name,
.lbw-download-zeile.ist-hervorgehoben .lbw-download-preis,
.lbw-download-zeile.ist-hervorgehoben .lbw-download-zusatz {
  color: var(--color-white);
}

.lbw-download-name {
  font-size: 15px;
  color: var(--color-heading);
}

.lbw-download-zusatz {
  display: block;
  font-size: 12.5px;
  color: var(--color-text-muted);
  margin-top: 2px;
}

.lbw-download-preis {
  font-family: var(--font-display);
  font-size: 18px;
  color: var(--color-heading);
  white-space: nowrap;
  padding-left: 20px;
}

/* ---------- Randloser weißer Container (Einzelfall-Klasse) ---------- */

.lbw-ohne-rahmen {
  background: var(--color-white);
  border: none;
}

@media (max-width: 720px) {
  .lbw-pakete {
    grid-template-columns: 1fr;
  }
  .lbw-mini-aktionen {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   KONTAKTFORMULAR (WPForms)
   Gilt automatisch für jedes WPForms-Formular auf der Seite, damit alle
   Formulare einheitlich zum restlichen Look passen.
   ========================================================================== */

.wpforms-container {
  font-family: var(--font-body);
  max-width: 560px;
}

.wpforms-container .wpforms-field {
  margin-bottom: 20px;
  padding: 0;
}

.wpforms-container .wpforms-field-label {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14px;
  color: var(--color-heading);
  margin-bottom: 6px;
  text-align: left;
  display: block;
}

.wpforms-container .wpforms-required-label {
  color: var(--color-primary-hover);
}

.wpforms-container input[type=text],
.wpforms-container input[type=email],
.wpforms-container input[type=tel],
.wpforms-container textarea,
.wpforms-container select {
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--color-text);
  background-color: var(--color-white);
  border: 1.5px solid var(--color-border);
  border-radius: 8px;
  padding: 12px 14px;
  width: 100%;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.wpforms-container textarea {
  min-height: 120px;
  resize: vertical;
}

.wpforms-container input[type=text]:focus,
.wpforms-container input[type=email]:focus,
.wpforms-container input[type=tel]:focus,
.wpforms-container textarea:focus,
.wpforms-container select:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(232, 155, 122, 0.25);
}

.wpforms-container .wpforms-submit-container {
  margin-top: 8px;
}

.wpforms-container button[type=submit],
.wpforms-container .wpforms-submit {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  color: var(--color-white);
  background-color: var(--color-primary);
  border: 1.5px solid var(--color-primary);
  border-radius: 999px;
  padding: 14px 36px;
  cursor: pointer;
  transition: background-color 0.25s ease, border-color 0.25s ease, transform 0.15s ease;
}

.wpforms-container button[type=submit]:hover,
.wpforms-container .wpforms-submit:hover {
  background-color: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
  transform: translateY(-1px);
}

.wpforms-confirmation-container-full {
  font-family: var(--font-body);
  background-color: var(--color-accent-soft);
  border: none;
  border-radius: 8px;
  padding: 20px 24px;
  color: var(--color-heading);
  text-align: center;
  margin-top: 20px;
}

.wpforms-container .wpforms-error {
  font-family: var(--font-body);
  color: var(--color-error);
  font-size: 13px;
  margin-top: 6px;
}

.wpforms-container input.wpforms-error,
.wpforms-container textarea.wpforms-error,
.wpforms-container select.wpforms-error {
  border-color: var(--color-error);
}

.wpforms-container input.wpforms-error:focus,
.wpforms-container textarea.wpforms-error:focus,
.wpforms-container select.wpforms-error:focus {
  box-shadow: 0 0 0 3px rgba(201, 75, 54, 0.2);
}

.wpforms-error-container {
  font-family: var(--font-body);
  background-color: var(--color-error);
  color: var(--color-white);
  border-radius: 8px;
  padding: 16px 20px;
}

/* Platzhaltertext in Feldern */
.wpforms-container input::placeholder,
.wpforms-container textarea::placeholder {
  color: var(--color-text-muted);
  opacity: 1;
}

/* Auswahlfeld (Select) mit eigenem Pfeil statt Browser-Standard */
.wpforms-container select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='%235A7D9A' d='M5.5 7.5l4.5 4.5 4.5-4.5' stroke='%235A7D9A' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 16px;
  padding-right: 40px;
}

/* Checkboxen & Radio-Buttons (z. B. Interessen-Auswahl, Zustimmungen) */
.wpforms-container .wpforms-field-checkbox ul,
.wpforms-container .wpforms-field-radio ul,
.wpforms-container .wpforms-field-gdpr-checkbox ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.wpforms-container .wpforms-field-checkbox ul li,
.wpforms-container .wpforms-field-radio ul li,
.wpforms-container .wpforms-field-gdpr-checkbox ul li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 10px;
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--color-text);
}

.wpforms-container input[type=checkbox],
.wpforms-container input[type=radio] {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: var(--color-primary);
  cursor: pointer;
  flex-shrink: 0;
}

/* Datumsfeld */
.wpforms-container input[type=date] {
  font-family: var(--font-body);
  color: var(--color-text);
}

/* Datei-Upload */
.wpforms-container .wpforms-file-upload-builder-in-fileupload,
.wpforms-container .wpforms-uploader .dz-clickable {
  font-family: var(--font-body);
  border: 1.5px dashed var(--color-border);
  border-radius: 8px;
  padding: 20px;
  background-color: var(--color-surface);
  color: var(--color-text-muted);
  text-align: center;
}

.wpforms-container .wpforms-uploader .dz-clickable:hover {
  border-color: var(--color-primary);
}

/* Mehrseiten-Formulare: Zurück/Weiter-Buttons */
.wpforms-container .wpforms-page-button {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  border-radius: 999px;
  padding: 14px 36px;
  cursor: pointer;
  transition: background-color 0.25s ease, border-color 0.25s ease, transform 0.15s ease;
}

.wpforms-container .wpforms-page-next {
  color: var(--color-white);
  background-color: var(--color-primary);
  border: 1.5px solid var(--color-primary);
}

.wpforms-container .wpforms-page-next:hover {
  background-color: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
  transform: translateY(-1px);
}

.wpforms-container .wpforms-page-prev {
  color: var(--color-primary-hover);
  background-color: transparent;
  border: 1.5px solid var(--color-primary);
}

.wpforms-container .wpforms-page-prev:hover {
  background-color: var(--color-primary);
  color: var(--color-white);
}

.wpforms-container .wpforms-page-indicator {
  font-family: var(--font-body);
  color: var(--color-text-muted);
  font-size: 13px;
}

/* ==========================================================================
   FOOTER FARBANPASSUNG
   Ersetzt die generischen Grautöne des Theme-Footers durch die
   Markenpalette "Lichtbildwerk", um den Footer optisch an den Rest
   der Seite anzubinden.
   ========================================================================== */

/* Oberer Bereich: Kontaktdaten (bleibt Soft Grey-Blue, Überschrift wird dunkler) */
.rspv-site-above-footer-wrap {
  background-color: var(--color-surface) !important;
}

.footer-widget-area[data-section='responsive-footer-widget-1'] h1,
.footer-widget-area[data-section='responsive-footer-widget-1'] h2,
.footer-widget-area[data-section='responsive-footer-widget-1'] h3,
.footer-widget-area[data-section='responsive-footer-widget-1'] h4,
.footer-widget-area[data-section='responsive-footer-widget-1'] h5,
.footer-widget-area[data-section='responsive-footer-widget-1'] h6,
.footer-widget-area[data-section='responsive-footer-widget-1'] .responsive-block-editor-addons-icon-list__label strong {
  color: var(--color-heading) !important;
}

/* Mittlerer Balken: Datenschutz/Impressum – jetzt im Marken-Nachtblau statt generischem Dunkelgrau */
.rspv-site-primary-footer-wrap {
  background-color: var(--color-heading) !important;
}

.footer-navigation {
  background-color: var(--color-heading) !important;
}

.footer-navigation:hover {
  background-color: var(--color-heading) !important;
}

/* Unterer Bereich: Copyright – Soft Cream statt reinem Weiß */
.rspv-site-below-footer-wrap {
  background-color: var(--color-background) !important;
}

.footer-layouts.copyright {
  color: var(--color-text-muted) !important;
}

.footer-layouts.copyright a {
  color: var(--color-primary-hover) !important;
}

.footer-layouts.copyright a:hover {
  color: var(--color-secondary-hover) !important;
}

/* ==========================================================================
   DREI MÖGLICHKEITEN (z. B. Familien-Shooting Landingpage)
   ========================================================================== */

.lbw-optionen {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.lbw-option-karte {
  background: var(--color-white);
  border-radius: 4px;
  padding: 32px 28px;
  text-align: center;
}

.lbw-option-karte.ist-mittel {
  background: var(--color-surface);
}

.lbw-option-titel {
  font-family: var(--font-display);
  font-size: 21px;
  color: var(--color-heading);
  margin: 0 0 10px;
}

.lbw-option-text {
  font-size: 14.5px;
  color: var(--color-text);
  line-height: 1.6;
  margin: 0;
}

@media (max-width: 720px) {
  .lbw-optionen {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   HEADER – komplett in Soft Cream statt reinem Weiß
   Deckt Desktop-, Mobile-, Sticky-Zustand, Dropdown-Untermenüs und das
   mobile Off-Canvas-Menü ab.
   ========================================================================== */

/* Desktop-Header, alle drei Zeilen (oben/primär/unten) */
.responsive-site-above-header-wrap,
.responsive-site-above-header-wrap:hover,
.responsive-site-primary-header-wrap,
.responsive-site-primary-header-wrap:hover,
.responsive-site-below-header-wrap,
.responsive-site-below-header-wrap:hover {
  background-color: var(--color-background) !important;
}

/* Mobile-Header, alle drei Zeilen */
.responsive-site-above-mobile-header-wrap,
.responsive-site-above-mobile-header-wrap:hover,
.responsive-site-primary-mobile-header-wrap,
.responsive-site-primary-mobile-header-wrap:hover,
.responsive-site-below-mobile-header-wrap,
.responsive-site-below-mobile-header-wrap:hover {
  background-color: var(--color-background) !important;
}

/* Sticky-Header-Zustand (beim Scrollen) */
#masthead.sticky-header,
#masthead-mobile.sticky-header {
  background-color: var(--color-background) !important;
}

/* Hauptnavigation-Wrapper, auch im aufgeklappten (toggled) Zustand */
.site-header-row .main-navigation .main-navigation-wrapper,
.site-header-row .main-navigation.toggled,
.site-header-row .main-navigation.toggled .main-navigation-wrapper {
  background-color: var(--color-background) !important;
}

/* Desktop-Untermenüs (Dropdowns) */
.main-navigation .children,
.main-navigation .sub-menu {
  background-color: var(--color-background) !important;
}

/* Mobiles Off-Canvas-Menü (Hamburger-Aufklapp-Panel) */
.responsive-off-canvas-panel {
  background-color: var(--color-background) !important;
}

.off-canvas-widget-area #off-canvas-menu li,
#off-canvas-site-navigation .menu li,
.off-canvas-widget-area #off-canvas-menu li a,
#off-canvas-site-navigation .menu li a {
  background-color: var(--color-background) !important;
}

/* Hamburger-Button und Schließen-Button */
.menu-toggle,
.responsive-off-canvas-panel-close {
  background-color: var(--color-background) !important;
}

/* Mobiles Off-Canvas-Menü: Schriftfarbe korrigieren (war weiß auf weiß/cream) */
.off-canvas-widget-area #off-canvas-menu li a,
#off-canvas-site-navigation .menu li a {
  color: var(--color-heading) !important;
}

/* Off-Canvas-Untermenüs (Sub-Menu / Children) – Hintergrund & Text angleichen */
.responsive-off-canvas-panel .sub-menu,
.responsive-off-canvas-panel .children,
#off-canvas-menu .sub-menu,
#off-canvas-menu .children,
.off-canvas-widget-area #off-canvas-menu .sub-menu,
.off-canvas-widget-area #off-canvas-menu .children,
#off-canvas-site-navigation .menu .sub-menu,
#off-canvas-site-navigation .menu .children {
  background-color: var(--color-background) !important;
}

.responsive-off-canvas-panel .sub-menu li a,
.responsive-off-canvas-panel .children li a,
#off-canvas-menu .sub-menu li a,
#off-canvas-menu .children li a,
.off-canvas-widget-area #off-canvas-menu .sub-menu li a,
.off-canvas-widget-area #off-canvas-menu .children li a,
#off-canvas-site-navigation .menu .sub-menu li a,
#off-canvas-site-navigation .menu .children li a {
  color: var(--color-heading) !important;
}

/* ==========================================================================
   RUNDES BILD (z. B. für SmartSlider-Portraits)
   ========================================================================== */

.lbw-rundes-bild,
.lbw-rundes-bild img {
  display: block;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center;
}

/* Falls die Klasse auf einem Wrapper-<div> statt direkt auf <img> sitzt */
.lbw-rundes-bild {
  overflow: hidden;
}

.lbw-rundes-bild img {
  width: 100%;
  height: 100%;
}

/* Falls SmartSlider den Layer stattdessen als Hintergrundbild rendert */
.lbw-rundes-bild {
  background-size: cover;
  background-position: center;
}

@media (max-width: 720px) {
  .lbw-rundes-bild,
  .lbw-rundes-bild img {
    width: 180px;
    height: 180px;
  }
}