/* =============================================================================
   Libitina Bestattungen – Basislayout
   ============================================================================= */

/* ============================================================================
   1. Variablen
   ========================================================================== */

:root {
  --libitina-bg: #f6f4ee;
  --libitina-bg-alt: #f6f4ee;
  --libitina-gold: #8b6e33;
  --libitina-gold-light: #e1c58a;
  --libitina-text: #111111;
  --libitina-text-muted: #c0c0c0;
  --lb-gold-header: #caa568; /* exakt Startseiten-Gold */

  --libitina-font-base: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;
  --libitina-max-width: 1200px;

  --libitina-radius: 8px;
  --libitina-transition-fast: 150ms ease-out;
} 
  .lb-hero h1 {
  line-height: 1.1;
  margin-bottom: 0.4em;
}

  .lb-hero h2 {
  line-height: 1.1;
  margin-bottom: 0.4em;
}

h1 {
  line-height: 1.15;
}

h2 {
  line-height: 1.1;
}


  /* geschätzte Header-Höhe mobil für Abstand zum Menü */
  --libitina-header-mobile: 72px;
}

/* ============================================================================
   2. Reset & Basis
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  padding: 0;
  font-family: var(--libitina-font-base);
  color: var(--libitina-text);
  background-color: var(--libitina-bg);
  line-height: 1.6;
}

/* Links */
a {
  color: var(--libitina-gold);
  text-decoration: none;
  transition: color var(--libitina-transition-fast);
}

a:hover,
a:focus-visible {
  color: var(--libitina-gold-light);
}

/* Container */
.container {
  width: 100%;
  max-width: var(--libitina-max-width);
  margin: 0 auto;
  padding: 0 16px;
}

/* Screenreader-Only-Text */
.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ============================================================================
   3. HEADER – Libitina (schwarz / gold, responsiv)
   ========================================================================== */

/* Header-Grundfläche (sticky) */
.lb-site-header {
  background-color: #000;
  color: #fff;
  position: sticky;
  top: 0;
  z-index: 1000;
}

/* Innenbereich */
.lb-header-inner {
  max-width: var(--libitina-max-width);
  margin: 0 auto;
  padding: 0.75rem 1.2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.lb-header-left,
.lb-header-center,
.lb-header-right {
  display: flex;
  align-items: center;
}

/* Logo Desktop */
.lb-header-left .custom-logo,
.lb-header-left img {
  display: block;
  height: 56px;
  max-height: 56px;
  width: auto;
}

/* Header-Navigation – überall identisch */
.lb-header,
.lb-header a,
.lb-header nav a,
.lb-header .menu a,
.lb-header .wp-block-navigation-item__content{
  color: var(--lb-gold-header) !important;
  opacity: 1 !important;
}

/* verhindert Abdunklung durch Seiten-Wrapper */
.lb-header{
  opacity: 1 !important;
  filter: none !important;
}


/* ===== Navigation Grundzustand (Desktop-Default) ===== */

.lb-main-nav {
  display: block;
}

.lb-main-menu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 1.5rem;
}

.lb-main-menu > li {
  position: relative; /* für Desktop-Dropdowns */
}

.lb-main-menu > li > a {
  text-decoration: none;
  color: var(--libitina-gold);
  font-weight: 500;
}

/* Aktiver/aktueller Menüpunkt (oder Vorfahre) oben: weiß */
.lb-main-menu > li.current-menu-item > a,
.lb-main-menu > li.current_page_item > a,
.lb-main-menu > li.current-menu-ancestor > a,
.lb-main-menu > li.current_page_ancestor > a {
  color: #ffffff !important;
}

/* Hover Desktop: weiß */
.lb-main-menu > li > a:hover {
  color: #ffffff !important;
}

/* Untermenü-Links default: gold */
.lb-main-menu .sub-menu a {
  color: var(--libitina-gold);
}

/* aktiver Untermenüpunkt weiß */
.lb-main-menu .sub-menu li.current-menu-item > a,
.lb-main-menu .sub-menu li.current_page_item > a {
  color: #ffffff !important;
}

/* Top-Level: wenn aktiv oder Vorfahre -> Pfeil weiß */
.lb-main-menu > li.current-menu-item.menu-item-has-children > a::after,
.lb-main-menu > li.current_page_item.menu-item-has-children > a::after,
.lb-main-menu > li.current-menu-ancestor.menu-item-has-children > a::after,
.lb-main-menu > li.current_page_ancestor.menu-item-has-children > a::after {
  color: #ffffff;
}

/* Untermenü: Pfeil nur bei direkt aktiver Seite weiß */
.lb-main-menu .sub-menu li.current-menu-item.menu-item-has-children > a::after,
.lb-main-menu .sub-menu li.current_page_item.menu-item-has-children > a::after {
  color: #ffffff;
}

/* ===== Notfallnummer rechts (Desktop) ===== */

.lb-header-phone-desktop {
  text-align: right;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  line-height: 1.2;
}

.lb-header-phone-label {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--libitina-gold);
}

.lb-header-phone-number {
  font-size: 1rem;
  text-decoration: none;
  color: #fff;
  font-weight: 700;
}

/* ===== Burger & Telefonhörer – Basis ===== */

.lb-header-burger,
.lb-header-phone-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: transparent;
  border: none;
  padding: 0.4rem;
  cursor: pointer;
  color: #fff;
  box-shadow: none;
}

/* Burger-Icon */
.lb-header-burger {
  width: 32px;
  height: 24px;
  flex-direction: column;
  justify-content: space-between;
  padding: 4px 0;
}

.lb-burger-line {
  width: 100%;
  height: 3px;
  background-color: var(--libitina-gold);
  border-radius: 2px;
  display: block;
}

/* Telefonhörer-Bild */
.lb-phone-img {
  width: 26px;
  height: auto;
  aspect-ratio: 1 / 1;
  display: block;
}

/* (falls irgendwo noch das alte Icon benutzt wird) */
.lb-phone-icon {
  font-size: 1.3rem;
}

/* Toggle-Button für Mobil-Untermenüs (Plus/Pfeil) – Default: sichtbar */
.lb-submenu-toggle {
  background: none;
  border: none;
  color: var(--libitina-gold);
  cursor: pointer;
  font-size: 1rem;
  padding: 0;
  margin-left: 0.4rem;
  line-height: 1;
  display: inline-block;
  vertical-align: middle;
}

/* Wenn offen -> Pfeil gedreht & weiß */
.lb-main-menu li.submenu-open > .lb-submenu-toggle {
  transform: rotate(180deg);
  color: #ffffff;
}

/* ===== Streifen unter dem Header ===== */

.lb-header-strip {
  background: linear-gradient(to right, #111, var(--libitina-gold), #111);
  padding: 0.35rem 1rem;
  text-align: center;
}

.lb-header-strip-text {
  color: #fff;
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ============================================================================
   4. Filial-Auswahl Overlay (Telefonhörer mobil)
   ========================================================================== */

.lb-branch-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.lb-branch-overlay.is-open {
  display: flex;
}

.lb-branch-dialog {
  background: #000;
  border: 1px solid var(--libitina-gold);
  border-radius: 8px;
  padding: 1.5rem;
  max-width: 360px;
  width: 90%;
  position: relative;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8);
}

.lb-branch-close {
  position: absolute;
  top: 0.3rem;
  right: 0.5rem;
  background: none;
  border: none;
  font-size: 1.6rem;
  line-height: 1;
  color: #fff;
  cursor: pointer;
}

.lb-branch-title {
  margin: 0 0 1rem;
  text-align: center;
  font-size: 1.1rem;
  color: var(--libitina-gold);
}

.lb-branch-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.lb-branch-btn {
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  padding: 0.9rem 1rem;
  border-radius: 999px;
  border: 1px solid var(--libitina-gold);
  text-decoration: none;
  color: #fff;
  font-weight: 600;
  transition: background 0.2s ease, color 0.2s ease, transform 0.1s ease;
}

.lb-branch-btn:hover,
.lb-branch-btn:focus {
  background: var(--libitina-gold);
  color: #000;
  transform: translateY(-1px);
}

/* ============================================================================
   5. Content-Bereich
   ========================================================================== */

.site-content {
  padding: 32px 0 48px;
}

.libitina-article {
  background: var(--libitina-bg-alt);
  padding: 24px;
  margin-bottom: 24px;
  border-radius: var(--libitina-radius);
  border: 1px solid rgba(255, 255, 255, 0.05);
}

/* ============================================================================
   FOOTER (Libitina) – Links + Bezirke-Grid + Full-Width Trenner
   ========================================================================== */

.lb-footer{
  background:#050505;
  color: rgba(247,247,247,.85);
  position: relative;
  padding: 18px 0 24px;
}

/* obere Full-Width Linie (Übergang Content -> Footer) */
.lb-footer::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:1px;
  background: rgba(202,165,104,.85);
  pointer-events:none;
}

/* "container" im Footer auf volle Breite öffnen (Linien werden dann durchgehend) */
.lb-footer .container.lb-footer-inner{
  max-width: none;
  width: 100%;
  margin: 0;
  padding: 0;
}

/* zentrierte Inhaltsbreite für die Footer-Inhalte */
.lb-footer-links,
.lb-footer-bezirke,
.lb-footer-copy{
  max-width: var(--libitina-max-width, 1200px);
  margin-left: auto;
  margin-right: auto;
  padding-left: 24px;
  padding-right: 24px;
}

/* Footer-Rechtsmenü (Impressum/Datenschutz/AGB) sauber mittig */
.lb-footer-links{
  width: 100%;
  display: flex;
  justify-content: center;
}

.lb-footer-links .lb-footer-menu{
  width: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 22px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.lb-footer-links .lb-footer-menu li{
  margin: 0;
  padding: 0;
}

.lb-footer-links .lb-footer-menu a,
.lb-footer-link{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}


.lb-footer-links a:hover,
.lb-footer-links a:focus-visible{
  color:#caa568;
  outline:none;
}

/* Rechtliches Footer-Menü: weiß, Hover = Gold (wie Bezirke) */
.lb-footer-links .lb-footer-menu > li > a{
  color: #ffffff;
  transition: color .15s ease;
}

.lb-footer-links .lb-footer-menu > li > a:hover,
.lb-footer-links .lb-footer-menu > li > a:focus-visible{
  color: #caa568; /* exakt gleiche Goldfarbe wie Bezirke */
}


/* Full-Width Trenner zwischen Linkzeile und Bezirken */
.lb-footer-sep--full{
  width:100%;
  height:1px;
  background: rgba(202,165,104,.65);
  margin: 8px 0 18px;
}

/* --- Bezirke Bereich --- */
.lb-footer-bezirke{
  padding-top: 6px;
  padding-bottom: 14px;
}

.lb-footer-bezirke-title{
  text-align:center;
  color:#f7f7f7;
  font-weight:700;
  letter-spacing:.3px;
  font-size: 20px;
  margin: 0 auto 18px;
  max-width: 760px; /* wirkt mittiger über den 3 Spalten */
  position: relative;
}

/* Linie unter der Überschrift (nur optisch, nicht full width) */
.lb-footer-bezirke-title::after{
  content:"";
  display:block;
  width: 260px;
  height: 1px;
  background: rgba(202,165,104,.55);
  margin: 12px auto 0;
}

/* Reset */
.lb-footer-bezirke-menu,
.lb-footer-bezirke-menu ul{
  list-style:none;
  margin:0;
  padding:0;
}

/* 3 Spalten Desktop */
.lb-footer-bezirke-menu{
  display:grid;
  grid-template-columns: repeat(3, minmax(220px, 1fr));
  gap: 18px 56px; /* mehr horizontal, weniger vertikal */
  align-items:start;
}

/* Spalten-Head (Bestattungszentrum Nord/Ost/Süd) */
.lb-footer-bezirke-menu > li > a{
  display:inline-block;
  margin: 0 0 10px;
  color:#caa568;
  font-weight:800;
  text-decoration:none;
  letter-spacing:.2px;
}

/* Bezirkslinks */
.lb-footer-bezirke-menu > li > ul > li > a{
  display:block;
  padding: 4px 0;
  color: rgba(247,247,247,.88);
  text-decoration:none;
  font-size: 14px;
  line-height: 1.25;
}

.lb-footer-bezirke-menu a:hover,
.lb-footer-bezirke-menu a:focus-visible{
  color:#caa568;
  outline:none;
}

/* untere Full-Width Linie vor Copyright */
.lb-footer-sep{
  width:100%;
  height:1px;
  background: rgba(202,165,104,.65);
  margin: 12px 0 14px;
}

/* Copyright */
.lb-footer-copy{
  text-align:center;
  color: rgba(247,247,247,.75);
  font-size: 14px;
  line-height: 1.3;
  padding-bottom: 6px;
}

/* Mobil */
@media (max-width: 780px){
  .lb-footer{
    padding-bottom: 34px; /* mehr Luft, damit Rückrufbitte nicht “klebt” */
  }

  .lb-footer-links,
  .lb-footer-bezirke,
  .lb-footer-copy{
    padding-left: 18px;
    padding-right: 18px;
  }

  .lb-footer-links{
    column-gap: 18px;
    row-gap: 6px; /* Zeilenabstand klein */
  }

  .lb-footer-links a,
  .lb-footer-link{
    padding: 4px 2px;
    line-height: 1.1;
  }

  .lb-footer-bezirke-title{
    font-size: 18px;
    max-width: 100%;
  }

  .lb-footer-bezirke-menu{
    grid-template-columns: 1fr;
    gap: 14px;
  }
}

/* ============================================================
   Footer Bezirke – Mobil/Tablet: Block zentriert, Text links
   (zwingend wirksam mit inline-grid + !important)
   ============================================================ */

@media (max-width: 1024px){

  /* Der Bereich darf zentrieren */
  .lb-footer .lb-footer-bezirke{
    text-align: center !important;
  }

  /* Die eigentliche Liste wird "inline", damit sie als Block zentrierbar ist */
  .lb-footer .lb-footer-bezirke .lb-footer-bezirke-menu{
    display: inline-grid !important;     /* statt grid über volle Breite */
    width: auto !important;
    justify-items: start !important;     /* Inhalt links in der Grid-Zelle */
    text-align: left !important;         /* Text bleibt linksbündig */
  }

  /* Sicherheit: Links und Überschriften ebenfalls links */
  .lb-footer .lb-footer-bezirke .lb-footer-bezirke-menu a,
  .lb-footer .lb-footer-bezirke .lb-footer-bezirke-menu > li > a{
    text-align: left !important;
  }

  /* Optional: angenehme max Breite, damit es "mittig" wirkt */
  .lb-footer .lb-footer-bezirke .lb-footer-bezirke-menu{
    max-width: 420px !important;
  }
}

/* ============================================================
   Footer – Rechtliches Menü (lb_footer) auf Mobil/Tablet zentrieren
   (fix für width + negativen margin am nav)
   ============================================================ */

@media (max-width: 1024px){

  /* Footer-Inhalt untereinander + mittig ausrichten */
  footer#colophon.lb-footer .lb-footer-inner{
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 12px !important;
  }

  /* Nav MUSS volle Breite haben und darf keinen negativen Margin haben */
  footer#colophon.lb-footer nav.lb-footer-links{
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;              /* killt 0 -36px 0 0 */
    padding: 0 18px !important;        /* dein mobiler Innenabstand */
    display: flex !important;
    justify-content: center !important; /* Menüblock zentrieren */
  }

  /* UL als Zeile, aber nicht "full width" erzwingen */
  footer#colophon.lb-footer nav.lb-footer-links > ul.lb-footer-menu{
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    justify-content: center !important;
    gap: 22px !important;
    flex-wrap: wrap !important;
  }
}

/* ============================================================
   Footer – vertikale Position des rechtlichen Menüs korrigieren
   (nur Mobil & Tablet)
   ============================================================ */

@media (max-width: 1024px){

  footer#colophon.lb-footer nav.lb-footer-links{
    margin-top: 8px !important;   /* Menü etwas nach unten schieben */
    margin-bottom: 4px !important; /* Abstand zur Trennlinie */
  }

}

/* ============================================================
   Footer Bezirke – Desktop: Spalten enger, Block optisch zentriert
   ============================================================ */

@media (min-width: 1025px){

  /* Container etwas schmaler => Spalten rücken zusammen */
  .lb-footer .lb-footer-bezirke{
    max-width: 710px !important;   /* vorher zu breit (z.B. 1100/1200) */
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Grid-Gap reduzieren */
  .lb-footer .lb-footer-bezirke .lb-footer-bezirke-menu{
    grid-template-columns: repeat(3, minmax(220px, 1fr)) !important;
    column-gap: 34px !important;   /* vorher zu groß (z.B. 80+) */
    row-gap: 22px !important;
    justify-content: center !important;
  }

  /* Optional: Überschrift exakt über dem Block wirken lassen */
  .lb-footer .lb-footer-bezirke-title{
    max-width: 980px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}



/* ============================================================================
   7. Medien / Videos – responsive Wrapper
   ========================================================================== */

.libitina-media-responsive {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;
  overflow: hidden;
  border-radius: var(--libitina-radius);
}

.libitina-media-responsive iframe,
.libitina-media-responsive video,
.libitina-media-responsive img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ============================================================================
   8. Responsiv – Breakpoints
   ========================================================================== */

/* ---- Mobile (bis 960px) ---- */
@media (max-width: 960px) {

  .lb-header-inner {
    padding: 1rem 1rem;
  }

  /* Logo mobil etwas kleiner */
  .lb-header-left .custom-logo,
  .lb-header-left img {
    height: 48px;
    max-height: 48px;
  }

  .lb-header-left {
    flex: 0 0 auto;
  }

  .lb-header-center {
    flex: 1 1 auto;
    justify-content: center;
    position: relative;
    z-index: 1000;
  }

  .lb-header-right {
    flex: 0 0 auto;
  }

  /* Burger & Telefonhörer sichtbar */
  .lb-header-burger,
  .lb-header-phone-toggle {
    display: inline-flex;
  }

  .lb-header-phone-toggle {
    margin-right: 10px;
  }

  /* Mobile Menü-Box als Overlay unter dem Header */
  .lb-main-nav {
    display: none;
    position: fixed;
    top: 72px;              /* ca. Header-Höhe; bei Bedarf anpassen */
    left: 50%;
    transform: translateX(-50%);
    background: #000;
    padding: 4px 0;
    border-radius: 6px;
    width: 90vw;
    max-width: 420px;
    z-index: 1100;
    border: 1px solid rgba(255, 255, 255, 0.15);
  }

  .lb-main-nav.is-open {
    display: block;
  }

  /* Menüeinträge vertikal */
  .lb-main-menu {
    flex-direction: column;
    align-items: stretch;
    padding: 5px 10px;
    gap: 0.5rem;
  }

  /* Top-Level einspaltig */
  .lb-main-menu > li {
    list-style: none;
  }

  /* Untermenüs: nach unten, nicht zur Seite */
  .lb-main-menu .sub-menu {
    list-style: none;
    margin: 0.25rem 0 0;
    padding-left: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    display: none;
    position: static !important;
    left: auto !important;
    top: auto !important;
    width: 100%;
  }

  /* sichtbar, wenn JS .submenu-open gesetzt hat */
  .lb-main-menu li.submenu-open > .sub-menu {
    display: block;
  }

  /* 3. Ebene etwas weiter eingerückt */
  .lb-main-menu .sub-menu .sub-menu {
    padding-left: 1rem;
    border-top: none;
  }

  /* Auf Mobil: keine ::after-Pfeile, nur die echten Buttons */
  .lb-main-menu > li.menu-item-has-children > a::after,
  .lb-main-menu .sub-menu > li.menu-item-has-children > a::after {
    content: none !important;
  }

  /* Link & Pfeil direkt nebeneinander */
  .lb-main-menu > li > a,
  .lb-main-menu .sub-menu > li > a {
    display: inline;
  }

  /* Pfeil-Button direkt hinter dem Text */
  .lb-submenu-toggle{
    position: static;
    display: inline-flex;
    align-items: center;
    justify-content: center;

    /* Pfeil visuell größer */
    font-size: 1.35rem;
    line-height: 1;

    /* Touchfläche größer */
    padding: 10px;

    /* WICHTIG: Padding soll NICHT sichtbar „Breite“ erzeugen */
    margin-left: -6px;     /* zieht die Touchfläche wieder an den Text ran */
    margin-right: -10px;   /* verhindert, dass rechts Platz entsteht */

    background: transparent;
    border: 0;
    border-radius: 8px;
    cursor: pointer;
  }

  .lb-main-menu li.submenu-open > .lb-submenu-toggle {
    transform: rotate(180deg);
    color: #ffffff;
  }

  /* Desktop-Notfallnummer verstecken */
  .lb-header-phone-desktop {
    display: none;
  }

  .footer-inner {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* Mobil: Pfeil-Toggle gut klickbar, bleibt direkt hinter dem Text */
.lb-submenu-toggle{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  font-size: 1.2rem;     /* größerer Pfeil */
  line-height: 1;

  padding: 10px 12px;    /* größere Touch-Fläche */
  margin-left: 2px;      /* nur kleiner Abstand zum Text */
  vertical-align: middle;

  background: transparent;
  border: 0;
  color: var(--libitina-gold);
  cursor: pointer;
}

/* Mobil: gleiche Abstände für alle Menüpunkte */
@media (max-width: 960px) {

  /* wichtig: kein "gap" im Menü, sonst wirkt alles weiter auseinander */
  .lb-main-menu{
    gap: 0 !important;
  }

  /* jeder Menüpunkt gleiche vertikale Höhe */
  .lb-main-menu > li{
    margin: 0 !important;
    padding: 10px 10px !important; /* einheitlich für ALLE (mit/ohne Pfeil) */
  }

  /* Link darf keine eigene Extra-Höhe erzeugen */
  .lb-main-menu > li > a{
    display: inline !important;
    line-height: 1.2 !important;
  }

  /* Pfeil: direkt neben Text, ohne Layout zu vergrößern */
  .lb-submenu-toggle{
    display: inline-block !important;
    padding: 0 !important;          /* KEIN padding -> verhindert Lücken */
    margin-left: 6px !important;
    line-height: 1 !important;
    font-size: 18px !important;     /* Pfeil optisch größer */
    background: transparent !important;
    border: 0 !important;
    color: var(--libitina-gold) !important;
    cursor: pointer;
    position: relative;             /* Basis für Touch-Overlay */
  }

  /* große Touch-Fläche OHNE Einfluss auf Abstände */
  .lb-submenu-toggle::after{
    content: "";
    position: absolute;
    inset: -10px -12px;             /* echte Finger-Fläche */
  }

  /* Submenu-Abstand kompakt */
  .lb-main-menu .sub-menu{
    margin-top: 6px !important;
  }
}

@media (max-width: 960px) {

  /* Gesamt-Menü innen enger */
  .lb-main-nav .lb-main-menu{
    padding: 4px 8px !important;   /* vorher 5px 10px */
    gap: 0 !important;
  }

  /* Jeder Menüpunkt enger (Hauptpunkte) */
  .lb-main-nav .lb-main-menu > li{
    padding: 6px 6px !important;   /* vorher 10px 10px */
    margin: 0 !important;
  }

  /* Optional: wenn es NOCH enger sein soll:
     statt 8px -> 7px oder 6px */
  /* .lb-main-nav .lb-main-menu > li{ padding: 7px 8px !important; } */

  /* Touchfläche Pfeil bleibt groß, aber ohne Zeilenhöhe aufzublähen */
  .lb-main-nav .lb-submenu-toggle::after{
    inset: -10px -12px;            /* kannst du so lassen */
  }
}

@media (max-width: 960px) {

  /* Goldene Trennlinie zwischen mobilen Menüpunkten */
  .lb-main-nav .lb-main-menu > li{
    border-bottom: 1px solid rgba(202, 165, 104, 0.22); /* Gold, dezent */
  }

  /* Letzter Menüpunkt ohne Trennlinie */
  .lb-main-nav .lb-main-menu > li:last-child{
    border-bottom: none;
  }

}


/* ---- Desktop ab 961px ---- */
@media (min-width: 961px) {

  .lb-header-burger,
  .lb-header-phone-toggle {
    display: none !important;
  }

  .lb-main-nav {
    display: block;
    position: static;
  }

  .lb-main-menu {
    flex-direction: row;
    padding: 0;
    gap: 1.5rem;
  }

  .lb-header-phone-desktop {
    display: flex;
  }

  /* Pfeil an Top-Level-Punkten mit Untermenü (Desktop) */
  .lb-main-menu > li.menu-item-has-children > a::after {
    content: "▾";
    margin-left: 0.4rem;
    font-size: 0.95em;
    color: var(--libitina-gold);
    vertical-align: middle;
  }

  /* Pfeil auch bei 2. Ebene mit Untermenü */
  .lb-main-menu .sub-menu > li.menu-item-has-children > a::after {
    content: "▾";
    margin-left: 0.35rem;
    font-size: 0.9em;
    color: var(--libitina-gold);
  }

  /* 2. Ebene als klassisches Dropdown */
  .lb-main-menu > li > .sub-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: #000;
    padding: 0.5rem 1rem;
    border-radius: 6px;
    min-width: 220px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    z-index: 1001;
  }

  .lb-main-menu > li:hover > .sub-menu {
    display: block;
  }

  /* Gemeinsame Submenü-Styles (Ebene 2+3) */
  .lb-main-menu .sub-menu {
    list-style: none;
    margin: 0;
    padding: 0.25rem 0;
  }

  .lb-main-menu .sub-menu li {
    width: 100%;
  }

  .lb-main-menu .sub-menu a {
    display: block;
    padding: 0.25rem 0;
    white-space: normal;
    text-align: left;
  }

  /* 3. Ebene – bei Hover der 2. Ebene sichtbar */
  .lb-main-menu .sub-menu .sub-menu {
    display: none;
    padding-left: 1rem;
  }

  .lb-main-menu .sub-menu > li:hover > .sub-menu {
    display: block;
  }

  /* Hover in Ebene 2/3: Text + Pfeil weiß */
  .lb-main-menu .sub-menu > li > a:hover {
    color: #ffffff !important;
  }

  .lb-main-menu .sub-menu > li.menu-item-has-children > a:hover::after {
    color: #ffffff !important;
  }

  /* WICHTIG: Pfeil-Buttons nur auf Mobil */
  .lb-submenu-toggle {
    display: none !important;
  }
}

/* =========================================================
   MOBILE: Nur "Mehr Informationen" auf Button-Standard schrumpfen
   ========================================================= */
@media (max-width: 480px) {

  /* Referenz: "Anrufen" / "Kontakt" sind die gewünschte Größe */
  /* Wir greifen nur den Info-Button an */
  .lb-contact-row .lb-contact-info-btn.lb-contact-btn {
    /* nimmt dieselbe Breitenlogik wie die anderen an */
    display: flex;
    align-items: center;
    justify-content: center;

    /* Entfernt das "Aufblasen" */
    flex: 0 0 auto;

    /* WICHTIG: Höhe NICHT fest setzen, sondern wie die anderen */
    height: auto;

    /* Falls der Info-Button mehr Padding hat -> auf Standard setzen */
    padding-top: 0;
    padding-bottom: 0;
  }

  /* Wenn der Info-Button durch line-height größer wird */
  .lb-contact-row .lb-contact-info-btn.lb-contact-btn {
    line-height: normal;
  }

}

/* =========================================================
   MOBILE: "Mehr Informationen" wie die anderen Buttons (Größe/Höhe/Breite)
   ========================================================= */
@media (max-width: 480px) {

  .lb-contact-row .lb-contact-info-btn.lb-contact-btn{
    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    box-sizing: border-box;

    /* gleiche Höhe wie deine anderen Buttons (laut DevTools ~52px) */
    height: 52px;
    padding: 0 22px;

    /* verhindert "Aufblasen" oder Schrumpfen durch Flex-Regeln */
    flex: 0 0 auto;
  }

}



/* ============================================================================
   9. Sprachumschalter
   ========================================================================== */

.lb-header-phone-desktop {
  margin-right: 15px;
}

.lb-lang-switcher {
  position: relative;
  margin-left: 1rem;
  font-size: 0.8rem;
}

.lb-lang-switcher__button {
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
}

.lb-lang-switcher__current-circle {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid var(--libitina-gold);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 600;
  color: var(--libitina-gold);
  text-transform: uppercase;
}

.lb-lang-switcher__menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  padding: 6px 8px;
  margin: 0;
  list-style: none;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.96);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.12);
  z-index: 50;
}

.lb-lang-switcher__item {
  margin: 0;
}

.lb-lang-switcher__link {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2px;
  text-decoration: none;
}

.lb-lang-switcher__circle {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid var(--libitina-gold);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 600;
  color: var(--libitina-gold);
  text-transform: uppercase;
  opacity: 0.9;
}

.lb-lang-switcher__link:hover .lb-lang-switcher__circle,
.lb-lang-switcher__link:focus-visible .lb-lang-switcher__circle {
  opacity: 1;
}

.lb-lang-switcher__menu[hidden] {
  display: none;
}

.lb-lang-switcher.is-open .lb-lang-switcher__menu {
  display: block;
}

/* ============================================================================
   10. Globaler Hintergrund
   ========================================================================== */

html,
body {
  background-color: var(--libitina-bg) !important;
}

/* alle Wrapper durchsichtig machen */
.wp-site-blocks,
.site,
.site-content,
.entry-content,
.wp-block-post-content,
.wp-block-group,
.wp-block-cover,
.wp-block-cover__inner-container,
.wp-block-template-part,
#page,
#content {
  background-color: transparent !important;
}

/* Inline-Hintergründe überschreiben */
*[style*="background-color"] {
  background-color: transparent !important;
}

/* ============================================================================
   11. USP / Haken (global)
   - Haken wird ausschließlich über .lb-usp::before erzeugt
   ========================================================================== */

/* USP Text + Haken sauber in einer Linie */
p.lb-usp{
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;              /* Abstand Haken → Text */
  line-height: 1.2;
}

p.lb-usp::before{
  content: "✔";
  color: #009c20;
  font-size: 1.1em;
  font-weight: 700;
  line-height: 1;
  display: inline-block;
  transform: translateY(-0.5px);
}



/* ============================================================================
   12. USP-Layout (global, neutral)
   - .lb-4cols ist ein Flex-Container
   - KEIN Column-::before, damit keine doppelten Haken entstehen
   ========================================================================== */

.lb-4cols{
  display: flex;
  align-items: center;
  gap: 3rem;
}

/* Columns selbst nicht mit Haken/Gap “missbrauchen” (nur Layout) */
.lb-4cols > .wp-block-column{
  display: flex;
  align-items: center;
}

/* Sicherheitsgurt: falls irgendwo noch alte Column-Haken existieren */
.lb-4cols > .wp-block-column::before{
  content: none !important;
}

/* ============================================================================
   13. Hero-spezifisch (Startseiten-Optik)
   - USPs einzeilig und Spaltenbreite nach Inhalt
   ========================================================================== */

.lb-hero .lb-4cols{
  justify-content: space-between;
  gap: 20px;             /* enger als global */
}

.lb-hero .lb-4cols > .wp-block-column{
  flex: 0 1 auto;        /* nicht gleich breit, nach Inhalt */
  width: auto;
}

/* Einzeilig wie Startseite */
.lb-hero p.lb-usp{
  white-space: nowrap;
}

/* ============================================================================
   14. Hero Buttons (nur Gutenberg Buttons)
   - Falls du auf der Startseite Custom-HTML .lb-contact-btn nutzt, greift das hier nicht.
   ========================================================================== */

.lb-hero .wp-block-buttons{
  gap: 16px;
}

.lb-hero .wp-block-button__link{
  background: transparent !important;
  border: 2px solid var(--libitina-gold, #caa568) !important;
  color: #111 !important;
  border-radius: 999px !important;
  padding: 10px 22px !important;
  font-weight: 600;
  box-shadow: none !important;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.lb-hero .wp-block-button__link:hover,
.lb-hero .wp-block-button__link:focus-visible{
  background: var(--libitina-gold, #caa568) !important;
  color: #111 !important;
}

.lb-hero .wp-block-button__link:active{
  transform: translateY(1px);
}

/* Optional: Icons für Gutenberg-Buttons, falls du lb-btn-call / lb-btn-mail nutzt */
.lb-hero .lb-btn-call .wp-block-button__link::before,
.lb-hero .lb-btn-mail .wp-block-button__link::before{
  content: "";
  width: 18px;
  height: 18px;
  display: inline-block;
  background: currentColor;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
}

.lb-hero .lb-btn-call .wp-block-button__link::before{
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.62 10.79a15.05 15.05 0 006.59 6.59l2.2-2.2a1 1 0 011.01-.24 11.36 11.36 0 003.56.57 1 1 0 011 1v3.5a1 1 0 01-1 1C10.07 21.01 2.99 13.93 2.99 5a1 1 0 011-1h3.5a1 1 0 011 1 11.36 11.36 0 00.57 3.56 1 1 0 01-.25 1.01l-2.19 2.22z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.62 10.79a15.05 15.05 0 006.59 6.59l2.2-2.2a1 1 0 011.01-.24 11.36 11.36 0 003.56.57 1 1 0 011 1v3.5a1 1 0 01-1 1C10.07 21.01 2.99 13.93 2.99 5a1 1 0 011-1h3.5a1 1 0 011 1 11.36 11.36 0 00.57 3.56 1 1 0 01-.25 1.01l-2.19 2.22z'/%3E%3C/svg%3E");
}

.lb-hero .lb-btn-mail .wp-block-button__link::before{
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 4H4a2 2 0 00-2 2v12a2 2 0 002 2h16a2 2 0 002-2V6a2 2 0 00-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 4H4a2 2 0 00-2 2v12a2 2 0 002 2h16a2 2 0 002-2V6a2 2 0 00-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z'/%3E%3C/svg%3E");
}

/* ============================================================================
   15. Mobile
   ========================================================================== */

/* ============================================================================
   Mobile – NUR Hero (USPs linksbündig wie Startseite)
   ========================================================================== */
@media (max-width: 600px){

  /* Falls irgendwo text-align:center auf dem Hero/Content liegt */
  .lb-hero{
    text-align: left !important;
  }

  /* USP-Container im Hero: links stapeln */
  .lb-hero .lb-4cols{
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 12px !important;
  }

  /* Jede “Spalte” soll volle Breite haben und links beginnen */
  .lb-hero .lb-4cols > .wp-block-column{
    width: 100% !important;
    flex: 0 0 auto !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;
    text-align: left !important;
    margin: 0 !important;
  }

  /* USP-Zeile darf umbrechen, bleibt aber links */
  .lb-hero p.lb-usp{
    white-space: normal !important;
    justify-content: flex-start !important;
  }

  /* Optionales Feintuning: falls der Haken “schief” wirkt */
  .lb-hero p.lb-usp::before{
    transform: none !important;
  }
}


/* Karte um das Video herum */
.lb-video-card {
    max-width: 900px;
    margin: 1.5rem 0;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 12px 30px rgba(0,0,0,0.15);
    background: #f6f4ee;
}

/* Wrapper mit festem Seitenverhältnis */
.lb-video-lazy {
    position: relative;
    aspect-ratio: 16 / 9;
    cursor: pointer;
}

/* Vorschaubild */
.lb-video-thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Play-Button */
.lb-video-play{
  position: absolute;
  inset: 0;
  margin: auto;
  width: 72px;        /* exakt wie bisher */
  height: 72px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: none;    /* WICHTIG */
}


.lb-video-play::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 56%;
    transform: translate(-50%, -50%);
    border-style: solid;
    border-width: 15px 0 15px 25px;
    border-color: transparent transparent transparent #ffffff;
}

/* Das eingebettete Video füllt den Rahmen komplett */
.lb-video-lazy iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}


/* ==============================
   GOOGLE REVIEWS – Grundlayout
   ============================== */

.lb-google-reviews {
  background: #ffffff;
  border-radius: 12px;
  padding: 24px;
  margin: 32px 0;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.06);
  border: 1px solid rgba(0, 0, 0, 0.03);
}

.lb-google-reviews__header {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
  margin-bottom: 24px;
}

.lb-google-reviews__score {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.lb-google-reviews__rating {
  font-size: 2.2rem;
  font-weight: 600;
  line-height: 1;
}

.lb-google-reviews__stars {
  font-size: 1.4rem;
  letter-spacing: 1px;
}

.lb-star {
  display: inline-block;
}

.lb-star--full {
  color: #f4b400; /* Gold */
}

.lb-star--empty {
  color: #ddd;
}

.lb-google-reviews__count {
  font-size: 0.95rem;
  color: #666;
}

.lb-google-reviews__logo {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  font-size: 0.9rem;
}

.lb-google-badge {
  background: #4285f4;
  color: #fff;
  font-weight: 600;
  border-radius: 999px;
  padding: 4px 10px;
  margin-bottom: 2px;
}

.lb-google-text {
  color: #555;
}

/* Karten / Grid */
.lb-google-reviews__list {
  display: grid;
  gap: 16px;
  margin-bottom: 20px;
}

.lb-google-review {
  background: #faf7f2;
  border-radius: 10px;
  padding: 16px 18px;
  border: 1px solid rgba(0, 0, 0, 0.03);
}

.lb-google-review__header {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.lb-google-review__author {
  display: flex;
  gap: 10px;
  align-items: center;
}

.lb-google-review__avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #caa568;
  color: #fff;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
}

.lb-google-review__meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.lb-google-review__name {
  font-weight: 600;
  font-size: 0.98rem;
}

.lb-google-review__time {
  font-size: 0.82rem;
  color: #777;
}

.lb-google-review__rating {
  white-space: nowrap;
  font-size: 1.1rem;
}

.lb-google-review__text {
  font-size: 0.95rem;
  line-height: 1.6;
  color: #333;
  margin: 0;
}

.lb-google-reviews__footer {
  text-align: right;
}

.lb-google-reviews__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.9rem;
  text-decoration: none;
  color: #111;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid #ddd;
  transition: background 150ms ease-out, transform 150ms ease-out, box-shadow 150ms ease-out;
}

.lb-google-reviews__cta:hover {
  background: #f6f4ee;
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}

/* =====================================
   RESPONSIVE – Unterschied Desktop / Mobil
   ===================================== */

/* Mobiles Layout – eine Spalte, kompakt */
@media (max-width: 767px) {
  .lb-google-reviews {
    padding: 18px 16px;
    margin: 24px 0;
  }

  .lb-google-reviews__header {
    flex-direction: column;
    align-items: flex-start;
  }

  .lb-google-reviews__logo {
    align-items: flex-start;
  }

  .lb-google-reviews__list {
    grid-template-columns: 1fr;
  }

  .lb-google-review {
    padding: 12px 14px;
  }

  .lb-google-review__header {
    flex-direction: column;
    align-items: flex-start;
  }

  .lb-google-review__rating {
    font-size: 1rem;
  }

  .lb-google-reviews__footer {
    text-align: left;
  }

  .lb-google-reviews__cta {
    width: 100%;
    justify-content: center;
  }
}

/* Desktop Layout – 2 oder 3 Spalten, „Kacheln“ */
@media (min-width: 768px) {
  .lb-google-reviews__list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .lb-google-review:nth-child(1),
  .lb-google-review:nth-child(2) {
    grid-column: span 2; /* die ersten 2 Bewertungen breiter anzeigen */
  }

  .lb-google-review__text {
    max-height: 6.5em;
    overflow: hidden;
  }
}

/* Richtig großes Desktop-Layout (z. B. > 1200px) */
@media (min-width: 1200px) {
  .lb-google-reviews {
    padding: 32px;
  }

  .lb-google-reviews__list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .lb-google-review:nth-child(1),
  .lb-google-review:nth-child(2) {
    grid-column: span 2;
  }
}


/* ============================================================
   Libitina Google Badge – Desktop (flach & breit)
   ============================================================ */

.lb-google-rating-badge {
  --lb-gold: var(--libitina-gold, #caa568);

  width: 100%;
  max-width: 720px;        /* Breite wie Video-Bereich */
  margin: 0 auto;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  padding: 10px 22px;      /* deutlich weniger Höhe */
  gap: 6px;                /* kleine vertikale Abstände */

  background: #ffffff;
  border-radius: 20px;
  border: 2px solid var(--lb-gold);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.08);

  text-align: center;
  color: #111111;
  font-size: 0.95rem;
}

/* Zeile 1: G + GOOGLE BEWERTUNGEN */
.lb-google-rating-badge__top {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.lb-google-rating-badge__g {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.1);
  font-weight: 700;
  font-size: 0.8rem;
  color: #4285f4;
}

.lb-google-rating-badge__label {
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Zeile 2: abgesetzter Bereich mit Score + Sternen – jetzt schmaler */
.lb-google-rating-badge__middle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  padding: 4px 16px;       /* weniger Innenabstand → weniger Höhe */

  border-radius: 999px;
  background: #f6f4ee;

  box-shadow:
    inset 0 0 6px rgba(0,0,0,0.03),
    0 2px 6px rgba(0,0,0,0.04);
}

.lb-google-rating-badge__score {
  font-weight: 700;
  font-size: 1.4rem;       /* kleiner als vorher */
  letter-spacing: -0.02em;
}

.lb-google-rating-badge__stars {
  font-size: 1.15rem;      /* Sterne kleiner */
  letter-spacing: 2px;
  white-space: nowrap;
}

.lb-star.lb-star--full {
  color: var(--lb-gold);
  text-shadow:
    0 0 3px rgba(202,165,104,0.35),
    0 0 1px rgba(0,0,0,0.1);
}

.lb-star.lb-star--empty {
  color: #d8d8d8;
}

/* Zeile 3: Rezensionen + Standorte – bleibt, rutscht automatisch höher */
.lb-google-rating-badge__bottom {
  display: flex;
  align-items: center;
  justify-content: center;
}

.lb-google-rating-badge__count {
  font-size: 0.9rem;
  color: #5a5a5a;
}


/* ============================================================
   Mobile-Version des Google Badge
   ============================================================ */
@media (max-width: 640px) {
  .lb-google-rating-badge {
    max-width: none;        /* volle Breite innerhalb des Containers */
    width: 100%;
    padding: 10px 12px;     /* weniger Höhe */
    gap: 4px;
    border-radius: 16px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08);
  }

  .lb-google-rating-badge__top {
    gap: 6px;
  }

  .lb-google-rating-badge__g {
    width: 20px;
    height: 20px;
    font-size: 0.75rem;
  }

  .lb-google-rating-badge__label {
    font-size: 0.8rem;
    letter-spacing: 0.05em;
  }

  .lb-google-rating-badge__middle {
    padding: 3px 10px;      /* schmalere Pille */
    gap: 6px;
  }

  .lb-google-rating-badge__score {
    font-size: 1.2rem;      /* kleiner → kein „5 / 0“ mehr */
  }

  .lb-google-rating-badge__stars {
    font-size: 1.0rem;
    letter-spacing: 1px;
  }

  .lb-google-rating-badge__count {
    font-size: 0.8rem;
  }
}


/* ============================================================
   Layout: Google-Badge + HIPE-Award (Desktop)
   ============================================================ */

/* Spalten-Block als Flex-Container, 50/50-Aufteilung */
.lb-rating-row.wp-block-columns {
  display: flex !important;
  flex-wrap: nowrap;
  gap: 20px;
  align-items: stretch;      /* gleiche Höhe für beide Spalten */
  width: 100%;
  max-width: 720px;          /* gleiche Gesamtbreite wie Video darüber */
  margin: 0 auto;
}

/* Jede Spalte bekommt 50 % und wird selbst zum Flex-Container */
.lb-rating-row.wp-block-columns .wp-block-column {
  flex: 1 1 0;
  display: flex;
}

/* Inhalt in der Spalte immer auf volle Breite strecken */
.lb-rating-row.wp-block-columns .wp-block-column > * {
  width: 100%;
}

/* Badge soll die gesamte Spaltenhöhe nutzen */
.lb-rating-row .lb-google-rating-badge {
  height: 100%;
  box-sizing: border-box;
}

/* Award-Container: KEIN zusätzlicher Rahmen, nur Bild selbst */
.lb-award-image {
  margin: 0;
  padding: 0;
  border: none;
  box-shadow: none;

  display: flex;
  align-items: center;
  justify-content: center;
}

/* Bild füllt die Spalte proportional aus */
.lb-award-image img {
  width: 100%;
  height: auto;
  object-fit: contain;
}


/* ============================================================
   MOBILE FINAL – Badge + HIPE-Award untereinander, kompakt
   ============================================================ */
@media (max-width: 640px) {

  /* Spalten-Block: einfach untereinander, kein Flex-Trick mehr */
  .lb-rating-row.wp-block-columns {
    display: block !important;
    max-width: 100%;
  }

  .lb-rating-row.wp-block-columns .wp-block-column {
    display: block;
    margin-bottom: 8px;            /* enger Abstand zwischen den beiden Boxen */
  }

  /* Beide Kacheln: volle Breite, Höhe nur durch Inhalt */
  .lb-rating-row .lb-google-rating-badge,
  .lb-rating-row .lb-award-image {
    width: 100%;
    min-height: 0 !important;      /* evtl. alte min-height überschreiben */
    box-sizing: border-box;
  }

  /* Google-Badge deutlich kompakter machen */
  .lb-rating-row .lb-google-rating-badge {
    padding: 8px 10px 10px;        /* weniger Innenabstand → weniger Höhe */
    gap: 4px;                      /* weniger Abstand zwischen den Reihen */
  }

  .lb-rating-row .lb-google-rating-badge__top {
    gap: 4px;
  }

  .lb-rating-row .lb-google-rating-badge__g {
    width: 18px;
    height: 18px;
    font-size: 0.7rem;
  }

  .lb-rating-row .lb-google-rating-badge__label {
    font-size: 0.8rem;
  }

  .lb-rating-row .lb-google-rating-badge__middle {
    padding: 3px 10px;
  }

  .lb-rating-row .lb-google-rating-badge__score {
    font-size: 1.15rem;
  }

  .lb-rating-row .lb-google-rating-badge__stars {
    font-size: 0.95rem;
    letter-spacing: 1px;
  }

  .lb-rating-row .lb-google-rating-badge__count {
    font-size: 0.8rem;
  }

  /* Award-Bild: KEIN zusätzlicher Rahmen, nur Bild + bisschen Luft */
  .lb-rating-row .lb-award-image {
    padding: 0 !important;
    border: none !important;
    box-shadow: none !important;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
  }

  .lb-rating-row .lb-award-image img {
    width: 100%;
    height: auto;
    object-fit: contain;
    display: block;
  }
}


/* =========================================================
   Kontaktzeile (Hero) – Layout & Buttons
   ========================================================= */

/* Row: auf Desktop zentriert, auf Mobile umbruchfähig */
.lb-contact-row{
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: center;

  /* WICHTIG: wenn Parent (Grid/Block) links sitzt, zentrieren wir die Row selbst */
  width: fit-content;
  margin-inline: auto;

  /* Desktop: alles in einer Zeile */
  flex-wrap: nowrap;
}

/* Falls der Parent ein Grid ist (häufig bei Gutenberg/Group/Cover), hilft das zusätzlich */
.lb-contact-row{
  justify-self: center;
}

/* Buttons */
.lb-contact-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  height: 48px;
  padding: 0 22px;
  gap: 5px;

  border: 2px solid var(--libitina-gold, #caa568);
  border-radius: 999px;
  background-color: transparent;

  color: #000;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;

  transition:
    background-color 0.2s ease,
    color 0.2s ease,
    border-color 0.2s ease;
}

/* Icon exakt normieren */
.lb-contact-icon{
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Default-SVGs (Telefon / Mail etc.) */
.lb-contact-icon svg{
  width: 20px;
  height: 20px;
  display: block;
  fill: var(--libitina-gold, #caa568);
}

/* Hover für Buttons */
.lb-contact-btn:hover{
  background-color: var(--libitina-gold, #caa568);
  color: #000;
}

.lb-contact-btn:hover .lb-contact-icon svg{
  fill: #000;
}

/* Fokus (Accessibility) */
.lb-contact-btn:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px rgba(202, 165, 104, 0.35);
}

/* =========================================================
   Mobile: 2 Buttons oben (50/50), Info darunter (100%)
   ========================================================= */
@media (max-width: 600px){
  .lb-contact-row{
    width: 100%;
    margin-inline: 0;
    flex-wrap: wrap;
  }

  /* Anrufen + Kontakt teilen sich die erste Zeile */
  .lb-contact-row .lb-contact-btn{
    flex: 1 1 calc((100% - 16px) / 2); /* 2 Spalten + 1 Gap (16px!) */
  }

  /* Info-Button zweite Zeile, volle Breite */
  .lb-contact-row .lb-contact-info-btn{
    flex: 0 0 100%;
  }
}

/* =========================================================
   INFO Icon: Kreis innen transparent, "i" schwarz,
   Hover: Kreis-Füllung Gold (nur beim Info-Button)
   ========================================================= */

/* Info-SVG soll NICHT vom globalen fill überschrieben werden */
.lb-contact-info-btn .lb-contact-icon svg{
  fill: none !important;
}

/* Optional: etwas größer als die normalen 20px, wirkt hochwertiger */
.lb-contact-info-btn .lb-contact-icon{
  width: 22px;
  height: 22px;
}

.lb-contact-info-btn .lb-info-svg{
  width: 22px;
  height: 22px;
  display: block;
}

.lb-info-circle{
  fill: transparent;
  stroke: var(--libitina-gold, #caa568);
  stroke-width: 2;
}

.lb-info-stem{
  stroke: #000;
  stroke-width: 2;
  stroke-linecap: round;
}

.lb-info-dot{
  fill: #000;
}

/* Hover: nur Kreis füllen, "i" bleibt schwarz */
.lb-contact-info-btn:hover .lb-info-circle{
  fill: var(--libitina-gold, #caa568);
}

/* =========================================================
   Orthodox-Buttons – eigenes Layout (konfliktfrei)
   Desktop: 4 nebeneinander, zentriert
   Mobile: 2x2, zentriert
   ========================================================= */

.lb-orthodox-btn-row{
  display: grid;
  grid-template-columns: repeat(4, max-content);
  justify-content: center;
  align-items: center;
  gap: 16px;

  /* damit es in jedem Wrapper mittig sitzt */
  width: 100%;
}

/* Mobile/Tablet: 2 nebeneinander, zentriert */
@media (max-width: 700px){
  .lb-orthodox-btn-row{
    grid-template-columns: repeat(2, max-content);
    justify-content: center;
  }
}

/* Optional: falls Labels lang sind, auf kleinen Geräten etwas "kompakter" */
@media (max-width: 420px){
  .lb-orthodox-btn-row{
    gap: 12px;
  }
  .lb-orthodox-btn{
    padding: 0 16px; /* reduziert Breite leicht */
  }
}

/* =========================================================
   Orthodox-Info-Icon – unabhängig vom normalen Button-Icon
   Kreis innen transparent, "i" schwarz,
   Hover: Kreis-Füllung Gold
   ========================================================= */

/* verhindert, dass globale .lb-contact-icon svg { fill: gold } das Icon überschreibt */
.lb-orthodox-icon svg{
  fill: none !important;
}

/* eigenes Sizing */
.lb-orthodox-icon{
  width: 22px;
  height: 22px;
}

.lb-orthodox-info-svg{
  width: 22px;
  height: 22px;
  display: block;
}

.lb-orthodox-circle{
  fill: transparent;
  stroke: var(--libitina-gold, #caa568);
  stroke-width: 2;
}

.lb-orthodox-stem{
  stroke: #000;
  stroke-width: 2;
  stroke-linecap: round;
}

.lb-orthodox-dot{
  fill: #000;
}

.lb-orthodox-cross-svg{
  width: 22px;
  height: 22px;
  display: block;
}

.lb-orthodox-cross-svg line{
  stroke: #000;
  stroke-width: 2;
  stroke-linecap: round;
}

/* explizit: KEIN Hover-Farbwechsel */
.lb-orthodox-btn:hover .lb-orthodox-cross-svg line{
  stroke: #000;
}

/* Serbisches Kreuz: niemals vom globalen SVG-fill "kaputt" gemacht */
.lb-cross-srb{
  width: 20px;
  height: 20px;
  display: block;

  fill: none !important;
  stroke: #000 !important;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Kreise sollen als Kontur erscheinen (nicht gefüllt) */
.lb-cross-srb circle{
  fill: none !important;
  stroke: #000 !important;
}

/* Hover: bleibt schwarz */
.lb-orthodox-btn:hover .lb-cross-srb,
.lb-orthodox-btn:hover .lb-cross-srb circle{
  stroke: #000 !important;
  fill: none !important;
}

/* =========================================================
   Überführung Buttons – eigenes Layout (konfliktfrei)
   Desktop & Mobil: nebeneinander + zentriert
   ========================================================= */

.lb-ueberfuehrung-btn-row{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  flex-wrap: nowrap;
  width: 100%;
}

/* Optional: auf sehr kleinen Geräten etwas enger */
@media (max-width: 420px){
  .lb-ueberfuehrung-btn-row{
    gap: 12px;
  }
  .lb-ueberfuehrung-btn{
    padding: 0 16px; /* nur falls es zu breit wird */
  }
}

/* Überführungs-Icons: unabhängig von globalen fill/stroke Regeln */
.lb-ue-iconwrap svg{
  width: 22px;
  height: 22px;
  display: block;
}

/* solide Flächen */
.lb-ue-fill{
  fill: #000 !important;
}

/* weiße Linien/Outlines */
.lb-ue-line{
  fill: none;
  stroke: #fff !important;
  stroke-width: 3.2;
  stroke-linecap: round;
}

.lb-ue-stroke{
  fill: none;
  stroke: #fff !important;
  stroke-width: 3.2;
  stroke-linejoin: round;
}

/* Kreuz weiß */
.lb-ue-cross{
  fill: #fff !important;
}

/* Hover: Icons bleiben genauso (kein Umfärben durch Ihre globalen Hover-Regeln) */
.lb-ueberfuehrung-btn:hover .lb-ue-icon .lb-ue-fill{ fill:#000 !important; }
.lb-ueberfuehrung-btn:hover .lb-ue-icon .lb-ue-line{ stroke:#fff !important; }
.lb-ueberfuehrung-btn:hover .lb-ue-icon .lb-ue-stroke{ stroke:#fff !important; }
.lb-ueberfuehrung-btn:hover .lb-ue-icon .lb-ue-cross{ fill:#fff !important; }


/* =========================================================
   Überführung Buttons – Mobile kompakter & mittig
   ========================================================= */

/* Grundlayout bleibt */
.lb-ueberfuehrung-btn-row{
  display: flex;
  justify-content: center;
  gap: 16px;
  width: 100%;
}

/* ---------- MOBIL ---------- */
@media (max-width: 600px){

  /* Buttons dürfen schmaler werden */
  .lb-ueberfuehrung-btn{
    padding: 10px 14px;     /* weniger horizontaler Platz */
    height: auto;           /* Höhe durch Inhalt */
    max-width: 160px;       /* verhindert Rand-Ankleben */
    text-align: center;
  }

  /* Label zweizeilig & zentriert */
  .lb-ueberfuehrung-btn .lb-contact-label{
    display: block;
    line-height: 1.2;
    font-size: 14px;
  }

  /* Falls KEIN <br> im HTML ist → automatisch umbrechen */
  .lb-ueberfuehrung-btn .lb-contact-label{
    white-space: normal;
  }

  /* Icon etwas Abstand nach oben */
  .lb-ueberfuehrung-btn .lb-contact-icon{
    margin-bottom: 4px;
  }
}

/* =========================================================
   Überführung Buttons – Mobile: mehr Luft rechts
   ========================================================= */
@media (max-width: 600px){

  .lb-ueberfuehrung-btn{
    /* links normal, rechts mehr Platz */
    padding-left: 16px;
    padding-right: 24px;

    height: auto;
    max-width: 170px;   /* verhindert Randkleben */
  }

  /* Text darf zweizeilig, bleibt linksbündig sauber */
  .lb-ueberfuehrung-btn .lb-contact-label{
    white-space: normal;
    line-height: 1.2;
    font-size: 14px;
  }
}




/* ============================================================
   Google Reviews Slider (LB) – FINAL (ohne Horizontal-Overflow)
   ============================================================ */

.lb-gr{
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 16px;           /* normaler Seitenrand */
  box-sizing: border-box;
}

/* Grid: links Summary, rechts Slider */
.lb-gr__grid{
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 20px;
  align-items: stretch;      /* gleiche Höhe */
}

/* ---------- Summary (links) ---------- */
.lb-gr__summary-inner{
  background: #fff;
  border-radius: 18px;
  padding: 22px 18px;
  box-shadow: 0 12px 26px rgba(0,0,0,.07);
  text-align: left;

  height: 240px;             /* exakt wie Cards */
  box-sizing: border-box;

  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.lb-gr__summary-title{
  font-size: 18px;
  font-weight: 800;
  letter-spacing: .03em;
}

.lb-gr__summary-stars{
  margin: 10px 0 8px;
  font-size: 28px;
  line-height: 1;
  letter-spacing: 2px;
  color: var(--libitina-gold, #caa568) !important;
}

.lb-gr__summary-meta{
  color: #333;
  font-size: 0.95rem;
}

.lb-gr__summary-google{ margin-top: 14px; }

.lb-gr__google-word{
  font-weight: 800;
  font-size: 40px;
  letter-spacing: -0.02em;
  color: #111;
}

/* Sterne (falls Klassen vorhanden) */
.lb-gr__star--full{ color: var(--libitina-gold, #caa568); }
.lb-gr__star--empty{ color: #ddd; }

/* ---------- Slider (rechts) ---------- */

/* Wrapper reserviert links/rechts Platz für Pfeile
   -> Pfeile liegen NIE über dem Content */
.lb-gr__slider-wrap{
  position: relative;
  overflow: hidden;
  padding: 0 56px;           /* Pfeil-Zone */
  box-sizing: border-box;
}

/* Track MUSS grid + horizontal scroll haben */
.lb-gr__slider{
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 300px;
  gap: 14px;

  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;

  padding: 6px 0 10px;       /* kein Pfeil-Platz mehr im Track */
  box-sizing: border-box;
}

.lb-gr__slider::-webkit-scrollbar{ height: 8px; }
.lb-gr__slider::-webkit-scrollbar-thumb{
  background: rgba(0,0,0,.12);
  border-radius: 999px;
}

/* Pfeile: in der reservierten Zone */
.lb-gr__nav{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);

  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,.12);
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(2px);
  cursor: pointer;
  box-shadow: 0 10px 18px rgba(0,0,0,.10);
  z-index: 60;

  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.lb-gr__nav--prev{ left: 12px; }
.lb-gr__nav--next{ right: 12px; }

.lb-gr__nav::before{
  content: "‹";
  font-size: 18px;
  line-height: 1;
  color: #111;
}
.lb-gr__nav--next::before{ content: "›"; }

/* ---------- Cards ---------- */
.lb-gr__card{
  scroll-snap-align: start;
  background: #fff;
  border-radius: 16px;
  padding: 16px 16px 12px;
  box-shadow: 0 12px 24px rgba(0,0,0,.07);

  height: 240px;             /* exakt wie Summary */
  box-sizing: border-box;

  display: flex;
  flex-direction: column;
  gap: 10px;

  position: relative;
  z-index: 2;
}

/* Header oben */
.lb-gr__card-head{
  display: flex;
  align-items: center;
  gap: 12px;
}

.lb-gr__avatar{
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #111;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
}

.lb-gr__who{ flex: 1; }
.lb-gr__name{ font-weight: 700; }
.lb-gr__when{ font-size: .9rem; color: #666; }

.lb-gr__gmark{
  font-weight: 900;
  color: #4285f4;
  letter-spacing: -0.02em;
}

/* Sterne immer Gold */
.lb-gr__card-stars{
  font-size: 18px;
  line-height: 1;
  letter-spacing: 1px;
  color: var(--libitina-gold, #caa568) !important;
}

/* Text clamp */
.lb-gr__text{
  color: #111;
  line-height: 1.55;

  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;

  flex: 1 1 auto;
}

/* Weiterlesen Button */
.lb-gr__more{
  margin-top: auto;
  border: none;
  background: transparent;
  color: #666;
  font-weight: 600;
  cursor: pointer;
  padding: 0;

  position: relative;
  z-index: 5;
  pointer-events: auto !important;
}

/* Expanded: Card bleibt gleich hoch, Text scrollt innen */
.lb-gr__card.is-expanded{
  height: 240px;
}

.lb-gr__card.is-expanded .lb-gr__text{
  -webkit-line-clamp: initial;
  display: block;
  overflow: auto;
  max-height: 130px;
  padding-right: 6px;
}

/* ============================================================
   MOBILE – Summary oben, darunter 1 Card pro Swipe
   ============================================================ */
@media (max-width: 860px){

  .lb-gr{
    max-width: 100%;
    padding: 0 14px;
    overflow: hidden;
  }

  .lb-gr__grid{
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .lb-gr__summary-inner{
    padding: 18px 14px;
    border-radius: 16px;
    text-align: center;
    height: auto;            /* mobil darf wachsen */
  }

  .lb-gr__summary-stars{ font-size: 26px; }
  .lb-gr__google-word{ font-size: 34px; }

  /* Pfeil-Zone weg, Pfeile weg */
  .lb-gr__slider-wrap{
    padding: 0;
  }
  .lb-gr__nav{ display: none; }

  /* 1 Card pro View */
  .lb-gr__slider{
    grid-auto-columns: 100%;
    padding: 6px 6px 10px;
  }

  .lb-gr__card{
    height: 220px;
  }

  .lb-gr__card.is-expanded{
    height: 220px;
  }

  .lb-gr__card.is-expanded .lb-gr__text{
    max-height: 110px;
  }
}



/* ============================================================
   FINAL FIX – Exakte gleiche Höhe Summary & Cards
   ============================================================ */

.lb-gr__summary-inner,
.lb-gr__card{
  height: 240px !important;
  padding: 18px 18px !important; /* identisches Padding */
  box-sizing: border-box;
}

/* Summary: Inhalt sauber verteilen */
.lb-gr__summary-inner{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* Card: Text nimmt exakt den Mittelbereich ein */
.lb-gr__card{
  display: flex;
  flex-direction: column;
}

.lb-gr__card-head{
  flex: 0 0 auto;
}

.lb-gr__card-stars{
  flex: 0 0 auto;
}

.lb-gr__text{
  flex: 1 1 auto;
  line-height: 1.5;
}

.lb-gr__more{
  flex: 0 0 auto;
  margin-top: 6px;
}

/* ============================================================
   MOBILE FIX – Review Cards volle nutzbare Breite
   ============================================================ */
@media (max-width: 860px){

  /* Äußerer Rahmen minimal */
  .lb-gr{
    padding: 0 10px;
  }

  /* Slider kein Extra-Padding */
  .lb-gr__slider{
    padding: 0;
  }

  /* Cards dürfen atmen */
  .lb-gr__card{
    padding: 16px 14px !important;
  }

  /* Text wirkt dadurch deutlich breiter */
  .lb-gr__text{
    font-size: 0.95rem;
  }
}


/* =========================================
   FEATURE SECTION – NUR EINE BOX
   ========================================= */

.lb-feature-section{
  margin: 1.5rem auto 3.5rem;
  padding: 2.75rem 2rem;
  border-radius: 22px;

  background:
    radial-gradient(900px 220px at 20% 0%,
      rgba(202,165,104,.10),
      rgba(202,165,104,0) 60%),
    radial-gradient(900px 220px at 80% 0%,
      rgba(202,165,104,.08),
      rgba(202,165,104,0) 60%),
    linear-gradient(180deg,
      rgba(255,255,255,.82),
      rgba(248,246,241,.72));
	  
  box-shadow:
    /* Haupttiefe */
    0 28px 60px rgba(0,0,0,.18),

    /* sanfter Bodenkontakt */
    0 8px 18px rgba(0,0,0,.12),

    /* feine Lichtkante oben */
    inset 0 1px 0 rgba(255,255,255,.65);	

  border: 2px solid rgba(202,165,104,.25);	
}


/* 🔴 ALLE inneren Container neutralisieren */
.lb-feature-section .wp-block-group,
.lb-feature-section .wp-block-columns,
.lb-feature-section .wp-block-column{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
}

/* Überschrift ruhig, ohne Box */
.lb-feature-section > h2{
  margin: 0 0 2rem;
  text-align: center;
}

/* Spaltenabstand sauber */
.lb-feature-section .wp-block-columns{
  gap: 2rem;
}

/* ============================================================
   TABLET FIX – Loop Video darf NICHT "bleeden"
   (Surface & Tablets: 768px–991px)
   ============================================================ */
@media (min-width: 768px) and (max-width: 991px){

  /* Falls Columns nebeneinander bleiben: Video streng im Column halten */
  .lb-feature-section .lb-loop-video{
    width: 100% !important;
    transform: none !important;
    height: 240px;              /* optional: etwas kleiner als Desktop */
    border-radius: 16px;
    object-fit: cover;
    display: block;
  }

  /* Optional: etwas weniger Spaltengap, damit Text nicht gequetscht wirkt */
  .lb-feature-section .wp-block-columns{
    gap: 2rem !important;
    align-items: center;
  }
}


/* ============================
   Desktop – Video präsenter
   ============================ */
@media (min-width: 992px){

  .lb-feature-section .lb-loop-video{
    width: 100%;
    height: 280px;        /* deutlich präsenter */
    object-fit: cover;
	border-radius: 16px;
  }

  /* Spalten etwas luftiger */
  .lb-feature-section .wp-block-columns{
    gap: 2.75rem;
    align-items: center;
  }
}
@media (min-width: 992px){

  /* etwas mehr Luft zwischen Video und Text */
  .lb-feature-section .wp-block-columns{
    gap: 3rem;
    align-items: center;
  }

  /* Video darf optisch etwas über den Spaltenrand hinaus, wirkt breiter */
  .lb-feature-section .wp-block-column:first-child{
    position: relative;
  }

  .lb-feature-section .lb-loop-video{
    width: calc(100% + 60px);   /* +60px breiter */
    max-width: none;
    height: 280px;              /* deine Desktop-Höhe */
    object-fit: cover;
    border-radius: 16px;
    transform: translateX(-30px); /* zentriert den „Bleed“ */
  }
}



/* ============================
   Mobile Feinschliff – weniger gequetscht
   ============================ */
@media (max-width: 768px){

  /* Panel: weniger Innenabstand, mehr nutzbare Fläche */
  .lb-feature-section{
    padding: 1.5rem 1rem;
    border-radius: 16px;
    margin: 1rem auto 2.5rem;
  }

  /* H2: etwas kleiner, dafür mehr Luft */
  .lb-feature-section > h2{
    font-size: clamp(1.35rem, 5.2vw, 1.7rem);
    line-height: 1.2;
    margin-bottom: 1.25rem;
  }

  /* Spalten: sauberer Stack + mehr Abstand */
  .lb-feature-section .wp-block-columns{
    gap: 1.25rem;
  }

  /* Video: wirkt wie ein hochwertiges Header-Element */
  .lb-feature-section .lb-loop-video{
    width: 100%;
    height: 180px;            /* Key: macht es präsent */
    object-fit: cover;
    border-radius: 14px;
  }

  /* H3 und Text: mehr Rhythmus */
  .lb-feature-section h3{
    margin: .25rem 0 .75rem;
    font-size: 1.15rem;
    line-height: 1.25;
  }

  .lb-feature-section ul{
    margin: 0;
    padding-left: 1.15rem;
  }

  .lb-feature-section li{
    margin-bottom: .6rem;
    line-height: 1.5;
  }
}


/* Verhindert Zeilenumbruch bei Zahlen + Sonderzeichen (%, €, /) */
p, li {
    overflow-wrap: normal;
    word-break: normal;
}


/* ============================
   Libitina – Globale Trennlinie
   ============================ */

.lb-divider {
  border: none;
  height: 2px;                 /* etwas kräftiger */
  max-width: 980px;            /* insgesamt länger */
  margin: 3rem auto;
  background: linear-gradient(
    to right,
    transparent 4%,
    var(--libitina-gold) 50%,
    transparent 96%
  );
}

/* ===== Ratgeber Single: Hero im Content-Container (nicht Full-Width) ===== */
.lb-ratgeber-hero{
  background: transparent;
  padding: 26px 0 10px;
}

.lb-ratgeber-hero__img{
  height: min(34vh, 420px);     /* weiterhin ca. 1/3, aber im Container */
  min-height: 220px;
  width: 100%;
  overflow: hidden;

  border-radius: 18px;
  border: 1px solid rgba(155,122,47,.22);
  box-shadow: 0 18px 40px rgba(0,0,0,.12);
  background: rgba(0,0,0,.04);
}

.lb-ratgeber-hero__img img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.lb-ratgeber-hero__inner{
  padding-top: 18px;
}

.lb-ratgeber-hero__title{
  margin: 10px;
  font-size: clamp(26px, 3.2vw, 44px);
  line-height: 1.1;
}

/* Zentrierter Content-Container wie Startseite (auch wenn Template full width ist) */
.lb-content-wrap{
  max-width: var(--libitina-max-width, 1200px);
  margin-left: auto;
  margin-right: auto;
  padding-left: 16px;
  padding-right: 16px;
}


.lb-ratgeber-back{
  display:inline-block;
  margin-top: 10px;
  text-decoration: none;
  border-bottom: 1px solid rgba(155,122,47,.45);
  padding-bottom: 2px;
  color: inherit;
  opacity: .9;
}

.lb-ratgeber-back:hover{
  opacity: 1;
  border-bottom-color: rgba(155,122,47,.8);
}

.lb-ratgeber-backwrap{
  margin-top: 34px;
  padding-top: 18px;
  border-top: 1px solid rgba(155,122,47,.18);
}

/* Ratgeber Grid: früher auf 2 Spalten wechseln, damit Cards groß genug bleiben */
@media (max-width: 1180px){
  .lb-ratgeber-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 620px){
  .lb-ratgeber-grid{
    grid-template-columns: 1fr;
  }
}

/* Mobile Innenabstand für Beitragsinhalte */
@media (max-width: 780px){
  .single-post .wp-site-blocks,
  .single-post .wp-block-post-content,
  .single-post .entry-content,
  .single-post .site-content,
  .page .wp-site-blocks,
  .page .wp-block-post-content,
  .page .entry-content,
  .page .site-content{
    padding-left: 16px;
    padding-right: 16px;
  }
}

/* Button wie Galerie */
.lb-ratgeber-more{
  margin-top: 22px;
  text-align: center;
}

.lb-ratgeber-more__btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  height: 46px;
  padding: 0 18px;

  border-radius: 999px;
  border: 2px solid rgba(155,122,47,.55);
  background: transparent;

  color: #111;
  font-weight: 700;
  text-decoration: none;
  line-height: 1;
  white-space: nowrap;

  transition: background-color .18s ease, color .18s ease, transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.lb-ratgeber-more__icon{
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.lb-ratgeber-more__icon svg{
  width: 18px;
  height: 18px;
  display: block;
  color: #111; /* Icon = Textfarbe */
}

/* Hover wie Galerie: innen Gold, Text/Icon schwarz */
.lb-ratgeber-more__btn:hover{
  background-color: var(--libitina-gold);     /* Libitina Gold */
  border-color: rgba(202,165,104,1);
  color: #000;
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(0,0,0,.10);
}

.lb-ratgeber-more__btn:hover .lb-ratgeber-more__icon svg{
  color: #000;
}



/* ==============================
   Ratgeber Kopfbereich
   ============================== */

.lb-ratgeber-head {
  max-width: var(--libitina-max-width);
  margin: 0 auto 3rem;
  padding: 0 16px;
  text-align: center;
}

/* Ornament */
.lb-ratgeber-ornament {
  display: block;
  width: 100%;
  max-width: 640px;          /* WICHTIG: begrenzt die Wirkung */
  height: auto;
  margin: 0 auto 1.2rem;
}

/* Überschrift */
.lb-ratgeber-title {
  margin: 0;
  font-size: clamp(1.6rem, 3.2vw, 2.4rem);
  font-weight: 600;
  letter-spacing: 0.04em;
}

@media (max-width: 600px) {
  .lb-ratgeber-ornament {
    max-width: 420px;
    margin-bottom: 1rem;
  }
}


.lb-video-lazy{
  position:relative;
  aspect-ratio:16/9;
  border-radius:16px;
  overflow:hidden;
  background:#000;
  cursor:pointer;
}

/* Thumbnail */
.lb-video-lazy::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:var(--yt-thumb);
  background-size:cover;
  background-position:center;
  filter:brightness(.85);
  z-index:1;
}

/* Play Overlay */
.lb-video-lazy::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    url("data:image/svg+xml,%3Csvg viewBox='0 0 68 48' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M66.52 7.82a8 8 0 0 0-5.6-5.6C56.09 1.5 34 1.5 34 1.5s-22.09 0-26.92.72a8 8 0 0 0-5.6 5.6A83.6 83.6 0 0 0 0 24a83.6 83.6 0 0 0 1.48 16.18 8 8 0 0 0 5.6 5.6c4.83.72 26.92.72 26.92.72s22.09 0 26.92-.72a8 8 0 0 0 5.6-5.6A83.6 83.6 0 0 0 68 24a83.6 83.6 0 0 0-1.48-16.18z' fill='%23f00'/%3E%3Cpath d='M45 24 27 14v20' fill='%23fff'/%3E%3C/svg%3E")
    center / 68px 48px no-repeat;
  z-index:2;
}

.lb-video-lazy.is-loaded::before,
.lb-video-lazy.is-loaded::after{
  display:none;
}

.lb-video-lazy iframe{
  width:100%;
  height:100%;
  display:block;
  border:0;
}

/* Video-Breite auf Desktop begrenzen */
.lb-video-wrap{
  max-width: 820px;   /* anpassen: 720–900 ist meist ideal */
  margin: 1.5rem auto;
}

/* optional: etwas Abstand nach unten */
.lb-video-wrap + * { margin-top: 1.25rem; }

@media (max-width: 780px){
  .lb-video-wrap{
    margin: 1rem auto;
    max-width: 100%;
  }
}

.lb-hero .lb-hero-media img{
  width:100%;
  aspect-ratio: 16 / 9;
  height:auto;
  object-fit: cover;
  display:block;
  border-radius:22px;
}


.lb-hero-usps .lb-usp{
  gap:10px;
}

.lb-hero-usps p{
  margin:0;
}

.lb-hero-price h2,
.lb-hero-price h3{
  margin-bottom: .35rem;
}

.lb-hero-price p{
  margin-top: .35rem;
  margin-bottom: .35rem;
}

body.home .wp-block-list li{
  margin: 0.05rem 0 !important;   /* Abstand zwischen den Haken-Zeilen */
  padding: 0 !important;
  line-height: 1.35 !important;
}

/* Falls dein Theme irgendwo noch extra Abstände auf List-Items addiert */
body.home .wp-block-list li + li{
  margin-top: 0.05rem !important;
}


/* ---------------------------------------------------------------------------
   BEHALTENE FIXES (ohne Einfluss auf Seitenbreite)
   --------------------------------------------------------------------------- */
/* ============================================================
   FIX: Header-Gold auf der Startseite (Menü + Burger) zu hell
   -> Startseite überschreibt vermutlich Link-Farben/Variablen.
   ============================================================ */

body.libitina-front-page .lb-site-header{
  /* Optional: Variablen im Header auf Startseite fixieren */
  --libitina-gold: #caa568;
  --libitina-gold-light: #e1c58a;
}

/* Menü-Links (Top-Level + Submenu) */
body.libitina-front-page .lb-site-header .lb-main-menu > li > a,
body.libitina-front-page .lb-site-header .lb-main-menu .sub-menu a{
  color: #caa568 !important;
}

/* Hover bleibt weiß (wie bisher) */
body.libitina-front-page .lb-site-header .lb-main-menu > li > a:hover,
body.libitina-front-page .lb-site-header .lb-main-menu .sub-menu a:hover{
  color: #ffffff !important;
}

/* Burger-Linien (mobil) */
body.libitina-front-page .lb-site-header .lb-burger-line{
  background-color: #caa568 !important;
}

/* Mobile Submenu Toggle Pfeil */
body.libitina-front-page .lb-site-header .lb-submenu-toggle{
  color: #caa568 !important;
}

/* Sprachumschalter-Kreis (Border + Text) */
body.libitina-front-page .lb-site-header .lb-lang-switcher__current-circle,
body.libitina-front-page .lb-site-header .lb-lang-switcher__circle{
  border-color: #caa568 !important;
  color: #caa568 !important;
}


/* ============================================================================
   GLOBAL LAYOUT – EIN System für alle Seiten (Container + Gutter)
   -> BITTE GANZ ANS ENDE der main.css
   ========================================================================== */

body.wp-theme-libitina-bestattungen{
  --lb-container: 1200px;
  --lb-gutter: clamp(12px, 3vw, 24px);

  /* Gutenberg (constrained / wide) auf gleiche Breite zwingen */
  --wp--style--global--content-size: var(--lb-container);
  --wp--style--global--wide-size: var(--lb-container);
}

/* sehr kleine Geräte: etwas enger wie dein Console-Fix */
@media (max-width: 480px){
  body.wp-theme-libitina-bestattungen{
    --lb-gutter: 12px;
  }
}

/* 1) Der äußere WP-Wrapper bekommt den EINZIGEN Seitenabstand */
body.wp-theme-libitina-bestattungen main.wp-site-blocks{
  padding-left: var(--lb-gutter);
  padding-right: var(--lb-gutter);
  box-sizing: border-box;
}

/* 2) Dein eigener Wrapper darf NICHT nochmal paddings addieren (sonst doppelt) */
body.wp-theme-libitina-bestattungen .lb-content-wrap{
  width: 100%;
  max-width: var(--lb-container);
  margin-left: auto;
  margin-right: auto;
  padding-left: 0;
  padding-right: 0;
  box-sizing: border-box;
}

/* 3) Constrained-Inhalte: immer auf Containerbreite zentrieren */
body.wp-theme-libitina-bestattungen .is-layout-constrained
  > :where(:not(.alignleft):not(.alignright):not(.alignfull)){
  max-width: var(--lb-container) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* 4) Alignwide: genauso breit wie Container (du willst überall gleich breit) */
body.wp-theme-libitina-bestattungen .alignwide{
  max-width: var(--lb-container) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* 5) Alignfull: Full-Bleed innerhalb des gepaddeten Wrappers */
body.wp-theme-libitina-bestattungen .alignfull{
  width: calc(100% + (var(--lb-gutter) * 2));
  margin-left: calc(var(--lb-gutter) * -1) !important;
  margin-right: calc(var(--lb-gutter) * -1) !important;
}

/* 6) Startseite: falls ein Group-Block versehentlich “schmal” gespeichert wurde */
body.wp-theme-libitina-bestattungen.home .entry-content > .wp-block-group.is-layout-constrained{
  max-width: var(--lb-container) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* ============================================================================
   LB FINAL – Blog/Posts auf gleiche Containerbreite wie Seiten
   (GANZ ANS ENDE lassen)
   ========================================================================== */

body.wp-theme-libitina-bestattungen{
  --lb-container: 1200px;
  --lb-gutter: clamp(12px, 3vw, 24px);
}

/* Outer gutter gilt immer – das ist “der” Seitenrand */
body.wp-theme-libitina-bestattungen main.wp-site-blocks{
  padding-left: var(--lb-gutter);
  padding-right: var(--lb-gutter);
  box-sizing: border-box;
}

/* Page-Wrapper (dein eigener) bleibt der Container */
body.wp-theme-libitina-bestattungen .lb-content-wrap{
  width: 100%;
  max-width: var(--lb-container);
  margin-left: auto;
  margin-right: auto;
  padding-left: 0 !important;
  padding-right: 0 !important;
  box-sizing: border-box;
}

/* WICHTIG: Block-Templates (Blog/Archiv/Single Post) haben oft KEIN .lb-content-wrap.
   Darum: Post-Content & Query-Loop als Container begrenzen. */
body.wp-theme-libitina-bestattungen main.wp-site-blocks > .wp-block-post-content,
body.wp-theme-libitina-bestattungen main.wp-site-blocks > .wp-block-query,
body.wp-theme-libitina-bestattungen main.wp-site-blocks > .wp-block-group:where(.is-layout-constrained),
body.wp-theme-libitina-bestattungen main.wp-site-blocks > .wp-block-columns:where(.is-layout-constrained){
  width: 100%;
  max-width: var(--lb-container);
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box;
}

/* Alignwide soll bei dir NICHT breiter als der Container sein */
body.wp-theme-libitina-bestattungen .alignwide{
  max-width: var(--lb-container) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Alignfull darf “bleeden”, aber nur relativ zum gutter */
body.wp-theme-libitina-bestattungen .alignfull{
  width: calc(100% + (var(--lb-gutter) * 2));
  margin-left: calc(var(--lb-gutter) * -1) !important;
  margin-right: calc(var(--lb-gutter) * -1) !important;
}

/* ============================================================================
   LB FINAL – Hero USP (grüne Haken) Abstände fix (nur Startseiten-Hero)
   ========================================================================== */

/* Im Hero keine “Block-Default-Margins” dazwischen */
body.home .lb-hero .lb-4cols,
body.home .lb-hero .lb-4cols > .wp-block-column{
  gap: 10px !important;
}

body.home .lb-hero .lb-4cols > .wp-block-column{
  margin: 0 !important;
  padding: 0 !important;
}

body.home .lb-hero .lb-4cols > .wp-block-column > *{
  margin: 0 !important;
}

/* USP-Zeile selbst kompakt */
body.home .lb-hero p.lb-usp{
  margin: 0 !important;
  line-height: 1.25 !important;
}

/* ============================================================================
   LB FINAL – Listen auf Mobil weniger eingerückt (Feuerbestattung etc.)
   ========================================================================== */
@media (max-width: 780px){
  body.wp-theme-libitina-bestattungen .entry-content :where(ul,ol),
  body.wp-theme-libitina-bestattungen .wp-block-post-content :where(ul,ol){
    padding-left: 1.05rem;   /* Standard ist meist deutlich größer */
    margin-left: 0;
  }

  body.wp-theme-libitina-bestattungen .entry-content :where(li),
  body.wp-theme-libitina-bestattungen .wp-block-post-content :where(li){
    margin-bottom: .35rem;
  }
}

/* ============================================================================
   LB FINAL – Mobil breiter: weniger Seitenrand
   ========================================================================== */
@media (max-width: 780px){
  body.wp-theme-libitina-bestattungen{
    --lb-gutter: 10px;   /* 8–12px ist realistisch, 10px ist ein guter Standard */
  }
}

@media (max-width: 420px){
  body.wp-theme-libitina-bestattungen{
    --lb-gutter: 8px;
  }
}

/* ============================================================================
   LB FINAL – Startseite: USP-Haken enger (Columns-Margins killen)
   ========================================================================== */
body.home .lb-4cols{
  gap: 18px !important;          /* Abstand zwischen den 4 Spalten */
  align-items: flex-start;
}

/* Wichtig: keine vertikalen Default-Abstände in den Spalten */
body.home .lb-4cols > .wp-block-column{
  margin: 0 !important;
  padding: 0 !important;
}

/* ALLE Kinder in den Spalten auf “kompakt” */
body.home .lb-4cols > .wp-block-column > *{
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* USP-Zeilen selbst: kompakt */
body.home p.lb-usp{
  margin: 0 !important;
  line-height: 1.25 !important;
}

/* ============================================================================
   LB FINAL – Mobil: Doppel-Padding entfernen (nur Content)
   ========================================================================== */
@media (max-width: 780px){
  body.wp-theme-libitina-bestattungen .site-content,
  body.wp-theme-libitina-bestattungen .entry-content,
  body.wp-theme-libitina-bestattungen .wp-block-post-content{
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/* ============================================================================
   LB FIX – Alignfull-Hero darf KEIN eigenes Innenpadding haben
   Ursache: WP setzt inline padding über --wp--preset--spacing--40
   ========================================================================== */

/* Alle Hero-Alignfull-Blöcke: Padding neutralisieren */
body.wp-theme-libitina-bestattungen
.wp-block-group.alignfull.lb-hero{
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Sicherheit: auch verschachtelte Varianten */
body.wp-theme-libitina-bestattungen
.wp-block-group.alignfull.lb-hero[style]{
  padding-left: 0 !important;
  padding-right: 0 !important;
}


/* ============================================================================
   LB FINAL – Hero USP (grüne Haken) Abstände GLEICH auf allen Seiten
   (ans ENDE der main.css)
   ========================================================================== */

/* Im Hero keine “Block-Default-Margins” dazwischen */
body.wp-theme-libitina-bestattungen .lb-hero .lb-4cols,
body.wp-theme-libitina-bestattungen .lb-hero .lb-4cols > .wp-block-column{
  gap: 18px !important;
}

body.wp-theme-libitina-bestattungen .lb-hero .lb-4cols > .wp-block-column{
  margin: 0 !important;
  padding: 0 !important;
}

body.wp-theme-libitina-bestattungen .lb-hero .lb-4cols > .wp-block-column > *{
  margin: 0 !important;
}

/* USP-Zeile selbst kompakt */
body.wp-theme-libitina-bestattungen .lb-hero p.lb-usp{
  margin: 0 !important;
  line-height: 1.25 !important;
}

@media (min-width: 992px){
  .lb-feature-section .lb-loop-video{
    width: calc(100% - 40px);
    margin-left: 50px;
    margin-right: 0;
    display: block;
  }
}

/* ============================================================
   Blog / Archive / Single: gleiche Breite wie Hauptseiten
   Quelle: Theme-Wrapper .lb-content-wrap (max-width: var(--lb-container))
   ============================================================ */

/* A) Auf den betroffenen Templates den gleichen Wrapper erzwingen */
body.blog .lb-content-wrap,
body.home.blog .lb-content-wrap,
body.archive .lb-content-wrap,
body.search .lb-content-wrap,
body.single-post .lb-content-wrap,
body.single-lb_ratgeber .lb-content-wrap,
body.post-type-archive-lb_ratgeber .lb-content-wrap,
body.taxonomy-lb_ratgeber_kategorie .lb-content-wrap{
  width: 100% !important;
  max-width: var(--lb-container) !important;  /* bei dir 1200px */
  margin-left: auto !important;
  margin-right: auto !important;

  /* Wichtig: gleicher Seitenabstand wie überall */
  padding-left: var(--lb-gutter) !important;
  padding-right: var(--lb-gutter) !important;
  box-sizing: border-box;
}

/* B) Falls WordPress/Template zusätzlich innere Container setzt: neutralisieren */
body.blog .lb-content-wrap > .wp-site-blocks,
body.home.blog .lb-content-wrap > .wp-site-blocks,
body.archive .lb-content-wrap > .wp-site-blocks,
body.search .lb-content-wrap > .wp-site-blocks,
body.single-post .lb-content-wrap > .wp-site-blocks,
body.single-lb_ratgeber .lb-content-wrap > .wp-site-blocks{
  max-width: 100% !important;
  width: 100% !important;
}

/* C) Single-Artikel: falls ein innerer .entry-content/.wp-block-post-content extra schmal macht */
body.single-post :is(.entry-content, .wp-block-post-content),
body.single-lb_ratgeber :is(.entry-content, .wp-block-post-content){
  max-width: 100% !important;
}

/* ============================================================
   MOBIL: Ratgeber (CPT) + Blog-Übersichten korrekt einklemmen
   (dein Body hat z.B. .single-lb_ratgeber / .post-type-archive-lb_ratgeber)
   ============================================================ */


  /* 1) Mehr Seitenabstand (Gutter) erzwingen – wirkt direkt auf den Hauptwrapper */
@media (max-width: 900px){
  body.single-lb_ratgeber main.wp-site-blocks,
  body.post-type-archive-lb_ratgeber main.wp-site-blocks,
  body.taxonomy-lb_ratgeber_kategorie main.wp-site-blocks,
  body.blog main.wp-site-blocks,
  body.archive main.wp-site-blocks{
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
}


  /* 2) Alle direkten Inhaltsblöcke dürfen nicht breiter als der Viewport werden */
  body.single-lb_ratgeber main.wp-site-blocks > *,
  body.post-type-archive-lb_ratgeber main.wp-site-blocks > *,
  body.taxonomy-lb_ratgeber_kategorie main.wp-site-blocks > *,
  body.blog main.wp-site-blocks > *,
  body.archive main.wp-site-blocks > *{
    max-width: 100% !important;
    min-width: 0 !important;
  }

  /* 3) Typische Überlauf-Verursacher */
  body.single-lb_ratgeber img,
  body.single-lb_ratgeber iframe,
  body.single-lb_ratgeber video,
  body.post-type-archive-lb_ratgeber img,
  body.post-type-archive-lb_ratgeber iframe{
    max-width: 100% !important;
    height: auto !important;
  }

  /* 4) Airbag gegen horizontales Scrollen durch einzelne Blocks */
  html, body{
    overflow-x: hidden;
  }
}

/* ============================================================
   Ratgeber: Streifen unter Featured Image entfernen
   ============================================================ */

/* 1) Wrapper darf keine Extra-Höhe/Padding/Background erzeugen */
body.single-lb_ratgeber .wp-block-post-featured-image,
body.post-type-archive-lb_ratgeber .wp-block-post-featured-image,
body.taxonomy-lb_ratgeber_kategorie .wp-block-post-featured-image,
body.post-type-archive-lb_ratgeber .wp-block-post-featured-image__link,
body.taxonomy-lb_ratgeber_kategorie .wp-block-post-featured-image__link{
  background: transparent !important;
  padding: 0 !important;
  margin: 0 0 16px 0 !important;
  line-height: 0 !important;      /* killt Inline/Baseline-Gaps */
  height: auto !important;
  min-height: 0 !important;
  overflow: hidden;               /* falls Radius gesetzt ist */
  border-radius: 16px;            /* optional: deine Rundung */
}

/* 2) Bild füllt den Wrapper vollständig */
body.single-lb_ratgeber .wp-block-post-featured-image img,
body.post-type-archive-lb_ratgeber .wp-block-post-featured-image img,
body.taxonomy-lb_ratgeber_kategorie .wp-block-post-featured-image img,
body.post-type-archive-lb_ratgeber .wp-block-post-featured-image__link img,
body.taxonomy-lb_ratgeber_kategorie .wp-block-post-featured-image__link img{
  display: block !important;
  width: 100% !important;
  height: auto !important;
}

/* Notfall: wenn ein Fixed-Height/Aspect-Ratio aktiv ist */
body.single-lb_ratgeber .wp-block-post-featured-image,
body.post-type-archive-lb_ratgeber .wp-block-post-featured-image,
body.taxonomy-lb_ratgeber_kategorie .wp-block-post-featured-image{
  aspect-ratio: auto !important;
}

/* Ratgeber Single: Streifen unter Hero-Bild entfernen */
body.single-lb_ratgeber #lb-ratgeber-hero__img{
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  line-height: 0 !important;     /* killt den typischen Inline-Image-Gap */
  font-size: 0 !important;
  display: block !important;
  overflow: hidden;
}

body.single-lb_ratgeber #lb-ratgeber-hero__img img{
  display: block !important;
  width: 100% !important;
  height: auto !important;
  margin: 0 !important;
}

/* Ratgeber Single: Content-Breite an Container koppeln */
body.single-lb_ratgeber .lb-content-wrap{
  max-width: var(--lb-container, 1200px) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box;
}

/* Falls Gutenberg/Post-Content eigene Max-Widths setzt */
body.single-lb_ratgeber .lb-content-wrap :is(.entry-content, .wp-block-post-content){
  max-width: 100% !important;
  width: 100% !important;
}

/* =========================================
   FIX: Admin-Bar + Fixed Header (Variante B)
   ========================================= */

/* WP schiebt bei Login die Seite über html{margin-top:...} runter.
   Das killt Fixed-Header-Layouts -> wir übernehmen das sauber selbst. */
html { margin-top: 0 !important; }

/* Header ist fixed (Variante B) */
.lb-site-header{
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  z-index: 1200;
}

/* Wenn Admin-Bar sichtbar: Header soll darunter starten */
body.admin-bar .lb-site-header{
  top: var(--wp-admin--admin-bar--height, 32px);
}

/* Content nach unten schieben (Headerhöhe + Admin-Bar Höhe) */
:root{
  --lb-header-h: 92px; /* Fallback, wird per JS gleich sauber gesetzt */
}

body{
  padding-top: var(--lb-header-h);
}

body.admin-bar{
  padding-top: calc(var(--lb-header-h) + var(--wp-admin--admin-bar--height, 32px));
}

/* USP Grid – Desktop: Items nach Inhalt, dann über volle Breite verteilen */
.lb-usp-grid{
  display: grid;
  grid-template-columns: repeat(4, max-content);
  justify-content: space-between;
  align-items: center;
  column-gap: 24px; /* Sicherheitsabstand, falls wenig Platz */
  row-gap: 10px;
}

/* Tablet */
@media (max-width: 900px){
  .lb-usp-grid{
    grid-template-columns: repeat(2, max-content);
    justify-content: start;
    column-gap: 20px;
    row-gap: 10px;
  }
}

/* Mobil */
@media (max-width: 480px){
  .lb-usp-grid{
    grid-template-columns: 1fr;
    justify-content: start;   /* verhindert “Space-between”-Feeling */
    justify-items: start;     /* grid-items links ausrichten */
    text-align: left;         /* falls ein Parent text-align:center setzt */
  }

  .lb-usp-grid > *{
    justify-self: start;      /* jedes USP-Item links */
  }

  p.lb-usp{
    justify-content: flex-start; /* Inhalt im USP links */
  }
}

/* USP – Mobil immer linksbündig (Desktop bleibt unverändert) */
@media (max-width: 780px){
  .lb-usp-grid{
    text-align: left !important;      /* überschreibt evtl. zentrierte Gutenberg-Ausrichtung */
    justify-items: start !important;  /* Grid-Items links starten */
  }

  .lb-usp-grid > *{
    justify-self: start !important;   /* falls WP/Theme justify-self setzt */
  }

  p.lb-usp{
    justify-content: flex-start !important; /* Inhalt im Inline-Flex links */
    width: max-content;                     /* verhindert "zentriert wirkendes" Vollbreite-Verhalten */
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

/* USP – Mobil linksbündig (Desktop bleibt unverändert) */
@media (max-width: 900px){
  .lb-usp-grid{
    justify-content: start;
    justify-items: start;
    text-align: left;
  }

  .lb-usp-grid > *{
    justify-self: start;
    text-align: left;
  }

  /* Wichtigster Fix: nicht inline -> keine Zentrierung durch Parent text-align */
  .lb-usp-grid p.lb-usp{
    display: flex !important;          /* statt inline-flex */
    width: 100% !important;
    justify-content: flex-start !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}



/* USP Text + Haken */
p.lb-usp{
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  line-height: 1.2;
  white-space: nowrap; /* bleibt ok, weil Desktop jetzt sauber verteilt */
}

/* Einzug nur für Überschriften, die direkt auf eine Liste folgen */
@media (min-width: 901px){
  .lb-hero-text ul + h2.wp-block-heading,
  .lb-hero-text ul + h3.wp-block-heading,
  .lb-hero-text ol + h2.wp-block-heading,
  .lb-hero-text ol + h3.wp-block-heading{
    margin-left: 22px !important;
  }
}

/* FIX: Überschriften NICHT einrücken – nur Listen */
@media (min-width: 901px){

  /* Überschriften in .lb-hero-text immer bündig lassen */
  .lb-hero-text h2.wp-block-heading,
  .lb-hero-text h3.wp-block-heading{
    margin-left: 0 !important;
  }

  /* Stattdessen nur die Listen einrücken */
  .lb-hero-text ul.wp-block-list,
  .lb-hero-text ol.wp-block-list{
    padding-left: 22px !important; /* entspricht deinem bisherigen Einzug */
    margin-left: 0 !important;
  }
}


/* Ratgeber-Seite: Desktop-Breite wie die zentralen Startseiten-Sections */
@media (min-width: 781px){

  /* wenn /ratgeber/ eine normale Seite ist (Slug-Class) */
  body.page-ratgeber .lb-ratgeber-head,
  body.page-ratgeber .lb-ratgeber-filter,
  body.page-ratgeber .lb-ratgeber-grid,
  body.page-ratgeber .lb-ratgeber-wrap,
  body.page-ratgeber .lb-ratgeber-section,

  /* falls /ratgeber/ ein Archiv ist (CPT Archive) */
  body.post-type-archive-lb_ratgeber .lb-ratgeber-head,
  body.post-type-archive-lb_ratgeber .lb-ratgeber-filter,
  body.post-type-archive-lb_ratgeber .lb-ratgeber-grid,
  body.post-type-archive-lb_ratgeber .lb-ratgeber-wrap,
  body.post-type-archive-lb_ratgeber .lb-ratgeber-section{
    width: 100%;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 12px;
    padding-right: 12px;
    box-sizing: border-box;
  }
}



/* ============================================================
   Ratgeber: Überschrift + Filter + Inhalt gemeinsam verschieben
   ============================================================ */
:root{
  --lb-ratgeber-shift-y: -34px; /* negativ = höher, positiv = tiefer */
}

/* Titel */
.lb-ratgeber-heading__title{
  transform: translateY(var(--lb-ratgeber-shift-y));
}

/* Filter-Navigation (auch für zukünftige zusätzliche Filter) */
nav.lb-ratgeber-filter{
  transform: translateY(var(--lb-ratgeber-shift-y));
  margin-top: -34px !important;   /* wichtig: dein -24px sonst arbeitet dagegen */
}

/* Optional: falls noch weitere "Header-Elemente" dazukommen */
.lb-ratgeber-heading{
  transform: translateY(var(--lb-ratgeber-shift-y));
}

/* Globaler Regler */
:root{
  --lb-ratgeber-top-spacing: -34px; /* z.B. 0px, 16px, 24px */
}

/* Abstand OBERHALB des Ratgeber-Bereichs */
.lb-ratgeber-head,
.lb-ratgeber-filter,
.lb-ratgeber-grid{
  margin-top: var(--lb-ratgeber-top-spacing) !important;
}


/* Rechter Textbereich: garantiert kein Einzug */
.lb-feature-text,
.lb-feature-text.wp-block-column,
.lb-feature-text.wp-block-group,
.lb-feature-text .wp-block-group__inner-container,
.lb-feature-text > *{
  margin-left: 0 !important;
  padding-left: 0 !important;
}

/* Überschrift zusätzlich hart auf 0 (falls sie selbst eingerückt ist) */
.lb-feature-text h3{
  margin-left: 0 !important;
  padding-left: 0 !important;
}


/* ============================================================================
   Header-Menü: Gold-Farbe überall erzwingen (Startseite = Referenz)
   Ganz ans ENDE der main.css setzen
   ========================================================================== */

:root{
  --lb-header-gold: #caa568;
}

/* WP Navigation + normale Links im Header */
.lb-header a,
.lb-header .wp-block-navigation-item__content,
header a,
header .wp-block-navigation-item__content{
  color: var(--lb-header-gold) !important;
  opacity: 1 !important;
}

/* Falls Hover/Active dunkler/anders gefärbt wird */
.lb-header a:hover,
.lb-header a:focus,
.lb-header a:active,
.lb-header .wp-block-navigation-item__content:hover,
.lb-header .wp-block-navigation-item__content:focus,
.lb-header .wp-block-navigation-item__content:active,
header a:hover,
header a:focus,
header a:active,
header .wp-block-navigation-item__content:hover,
header .wp-block-navigation-item__content:focus,
header .wp-block-navigation-item__content:active{
  color: var(--lb-header-gold) !important;
  opacity: 1 !important;
}

/* ============================================================
   Lazy Video – Goldener Play Button (global)
   ============================================================ */

.lb-video-gold{
  position: relative;
  overflow: hidden;
  border-radius: 14px;
}

/* dunkles Overlay */
.lb-video-gold::after{
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.25);
  pointer-events: none;
}

/* Play Button */
.lb-video-gold .lb-video-play{
  position: absolute;
  inset: 0;
  margin: auto;
  width: 86px;
  height: 86px;
  border-radius: 50%;
  background: transparent;
  border: 2px solid var(--libitina-gold);
  cursor: pointer;
  z-index: 3;
  transition: transform .2s ease, background .2s ease;
}

/* Play-Dreieck */
.lb-video-gold .lb-video-play::before{
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-45%, -50%);
  width: 0;
  height: 0;
  border-left: 18px solid var(--libitina-gold);
  border-top: 12px solid transparent;
  border-bottom: 12px solid transparent;
}

.lb-video-gold:hover .lb-video-play{
  background: rgba(202,165,104,0.15);
  transform: translate(-50%, -50%) scale(1.05);
}


/* ============================================================
   LB Ratgeber Single: Content-Breite + Bild + Back-Link sauber
   ============================================================ */

/* 1) Seiten-Wrapper: volle Content-Fläche, aber zentriert */
body.single-lb_ratgeber .lb-content-wrap{
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 24px !important;
  padding-right: 24px !important;
}

/* 2) Lesebreite: alle typischen Content-Elemente auf 920px ziehen */
body.single-lb_ratgeber .lb-content-wrap :is(
  p, ul, ol, blockquote, pre, table,
  h1, h2, h3, h4, h5, h6,
  .wp-block-image, .wp-block-gallery, figure,
  .wp-block-post-featured-image,
  .wp-block-group, .wp-block-columns, .wp-block-column
){
  max-width: 1168px;
  margin-left: auto;
  margin-right: auto;
}

/* 3) Featured Image selbst: volle Breite innerhalb 920px */
body.single-lb_ratgeber .lb-content-wrap img.wp-post-image,
body.single-lb_ratgeber .lb-content-wrap .wp-block-post-featured-image img{
  display: block;
  width: 100%;
  height: auto;
  max-width: 920px;
  margin: 0 auto 18px auto;
  border-radius: 16px;
}

/* 4) Mobile "Kasten" entfernen:
      Wrapper/figure/featured-image dürfen KEIN Background/Padding/Border haben */
@media (max-width: 900px){
  body.single-lb_ratgeber .lb-content-wrap :is(
    figure,
    .wp-block-image,
    .wp-block-post-featured-image
  ){
    background: transparent !important;
    padding: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important; /* wichtig: sonst wirkt es wie eine Card */
  }

  /* falls ein innerer Wrapper den "Kasten" macht */
  body.single-lb_ratgeber .lb-content-wrap :is(
    figure > .wp-block-image,
    figure > a,
    .wp-block-post-featured-image > div
  ){
    background: transparent !important;
    padding: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  /* Bild-Radius auf Mobile etwas kleiner (optional) */
  body.single-lb_ratgeber .lb-content-wrap img.wp-post-image,
  body.single-lb_ratgeber .lb-content-wrap .wp-block-post-featured-image img{
    border-radius: 14px;
  }
}

/* 5) "Zurück"-Link (oben & unten) auf gleiche Lesebreite zentrieren */
body.single-lb_ratgeber a.lb-ratgeber-back{
  display: block;
  max-width: 1168px;
  margin-left: auto;
  margin-right: auto;
}

/* ============================================================
   LB Ratgeber Single – Mobile Bild-Kasten entfernen
   ============================================================ */
@media (max-width: 900px){

  /* Wrapper, der den "Kasten" erzeugt */
  body.single-lb_ratgeber .lb-content-wrap .lb-ratgeber-hero__img{
    background: transparent !important;
    padding: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
    min-height: 0 !important;
  }

  /* Sicherheit: falls Featured Image in figure / Block steckt */
  body.single-lb_ratgeber .lb-content-wrap figure,
  body.single-lb_ratgeber .lb-content-wrap .wp-block-post-featured-image{
    background: transparent !important;
    padding: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  /* Das eigentliche Bild */
  body.single-lb_ratgeber .lb-content-wrap img.wp-post-image{
    display: block;
    margin-bottom: 16px;
    border-radius: 14px;
  }
}

/* ============================================================
   LB Ratgeber Single – Mobile: Lücke unter dem Hero-Bild schließen
   ============================================================ */
@media (max-width: 900px){

  /* 1) Falls der Wrapper noch Höhe "reserviert" */
  body.single-lb_ratgeber .lb-content-wrap .lb-ratgeber-hero__img{
    min-height: 0 !important;
    height: auto !important;
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
  }

  /* 2) Das Featured Image selbst: Abstand nach unten steuern */
  body.single-lb_ratgeber .lb-content-wrap img.wp-post-image{
    margin-bottom: 10px !important; /* <- hier kannst du z.B. 0–16px testen */
  }

  /* 3) Erster Inhalt nach dem Bild: kein extra "Top"-Abstand */
  body.single-lb_ratgeber .lb-content-wrap :is(h1,h2,h3,p,ul,ol):first-of-type{
    margin-top: 0px !important;
  }
}

/* BaumFrieden-Logo wirklich mittig */
.wp-block-image.baumfrieden-logo{
  display: flex;
  justify-content: center;
  width: 100%;
}


.wp-block-image.baumfrieden-logo img{
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.page-id-8455 .wp-block-image {
  display: flex;
  justify-content: center;
}


/* ============================================================
   LB: Custom Poster für .lb-video-lazy mit GOLD Play Button
   - wirkt NUR bei .lb-video-lazy.lb-video-gold
   - verändert keine bestehenden Videos ohne diese Klasse
   ============================================================ */

/* rotes YouTube-Overlay (kommt aus .lb-video-lazy::after) deaktivieren */
.lb-video-lazy.lb-video-gold::after{
  content: none !important;
}

/* sicherstellen, dass der Button sichtbar über dem Poster liegt */
.lb-video-lazy.lb-video-gold .lb-video-play{
  position: absolute;
  inset: 0;
  z-index: 3;
}

/* optional: falls dein <img> nicht ohnehin vollflächig sitzt */
.lb-video-lazy.lb-video-gold > img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ============================================================
   LB FIX: Gold-Play darf beim Hover NICHT neu layouten
   ============================================================ */
.lb-video-lazy.lb-video-gold .lb-video-play{
  box-sizing: border-box;
  padding: 0 !important;
  transform-origin: 50% 50%;
  will-change: transform;
}

/* WICHTIG: Border/Outline dürfen beim Hover nicht dicker werden */
.lb-video-lazy.lb-video-gold:hover .lb-video-play{
  /* falls irgendwo border-width/padding/outline geändert wird, hier neutralisieren */
  border-width: 2px !important;     /* setze hier deinen Standardwert */
  outline-width: 0 !important;      /* oder: outline bleibt konstant */
  transform: scale(1.05) !important;
}



/* =========================================================
   Anker-Offset nur Seite 8453 – Bilder + Videos
   ========================================================= */

/* Container / Video (deine funktionierende Basis) */
.page-id-8453 .wp-block-group[id],
.page-id-8453 .wp-block-columns[id],
.page-id-8453 .wp-block-cover[id],
.page-id-8453 section[id],
.page-id-8453 div[id]{
  scroll-margin-top: 130px;
}

/* Bilder (Gutenberg Image Block) */
.page-id-8453 figure[id],
.page-id-8453 figure.wp-block-image[id],
.page-id-8453 .wp-block-image[id]{
  scroll-margin-top: 130px;
}

/* Sonderfall: Bild ist verlinkt und der Anker sitzt auf dem <a> */
.page-id-8453 a[id]{
  scroll-margin-top: 130px;
}

/* =========================================================
   Globaler Anker-Offset (−20px)
   GILT ÜBERALL – AUSSER Seite 8453
   ========================================================= */

/* Global: alle Ankerziele */
body:not(.page-id-8453) [id]{
  scroll-margin-top: 130px;
}


/* === Libitina Kostenrechner – Rahmenlayout wie gewünscht === */
.lb-kr-shell{
  --lb-gold: #caa568;

  position: relative;
  border-radius: 22px;
  overflow: hidden;                 /* hält Rundungen sauber */

  /* AUSSENRAHMEN: wirklich ganz außen */
  border: 3px solid var(--lb-gold);

  /* Hintergrund der Außenfläche */
  background: rgba(255,255,255,0.35);

  /* Optional: minimaler Schatten, damit Gold auf hellem Grund sichtbar bleibt */
  box-shadow: 0 14px 34px rgba(0,0,0,0.10);
}

/* Innenabstand zwischen Außenrahmen und Innenrahmen/Content */
.lb-kr-shell{
  padding: clamp(16px, 2.2vw, 24px);
}

/* Inhaltsebene */
.lb-kr-inner{
  position: relative;
  border-radius: 16px;

  /* INNENRAHMEN: um den Absatz innen (Content-Box) */
  border: 2px solid #caa568;

  padding: clamp(16px, 2vw, 22px);

  /* dezente Fläche */
  background: rgba(255,255,255,0.55);

  /* feiner „inset“-Touch für Wertigkeit */
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.70);
}

/* Mobile: Rundungen etwas kleiner */
@media (max-width: 781px){
  .lb-kr-shell{ border-radius: 18px; }
  .lb-kr-inner{ border-radius: 14px; }
}



:root{
  --libitina-gold:#8b6e33;
}

/* =========================================================
   A) BORLABS CONTENT BLOCKER (wenn nicht freigegeben)
   ========================================================= */

/* bewusst NICHT auf Preset-Name beschränkt, damit es bei dir greift */
.brlbs-cmpnt-content-blocker{
  position: relative;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  margin: 0;
}

/* Card Look */
.brlbs-cmpnt-content-blocker .brlbs-cmpnt-content-blocker__content,
.brlbs-cmpnt-content-blocker .brlbs-cmpnt-content-blocker__container,
.brlbs-cmpnt-content-blocker .brlbs-cmpnt-container{
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 18px 40px rgba(0,0,0,.18);
  background: #fff;
}

/* Innenlayout */
.brlbs-cmpnt-content-blocker .brlbs-cmpnt-content-blocker__content,
.brlbs-cmpnt-content-blocker .brlbs-cmpnt-container{
  padding: 18px 18px 16px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

/* Text */
.brlbs-cmpnt-content-blocker p{
  margin: 0;
  font-size: 14px;
  line-height: 1.45;
  color: #2b2b2b;
}
.brlbs-cmpnt-content-blocker a{
  color: var(--libitina-gold);
  text-decoration: underline;
}
.brlbs-cmpnt-content-blocker a:hover{ text-decoration:none; }

/* Buttons */
.brlbs-cmpnt-content-blocker .brlbs-cmpnt-cb-buttons,
.brlbs-cmpnt-content-blocker .brlbs-cmpnt-content-blocker__buttons,
.brlbs-cmpnt-content-blocker .brlbs-cmpnt-buttons{
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  margin-top: 16px !important;
}

.brlbs-cmpnt-content-blocker a.brlbs-cmpnt-cb-btn,
.brlbs-cmpnt-content-blocker button.brlbs-cmpnt-cb-btn,
.brlbs-cmpnt-content-blocker button,
.brlbs-cmpnt-content-blocker .brlbs-cmpnt-btn{
  border-radius: 999px !important;
  padding: 14px 22px !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  line-height: 1.1 !important;
  text-align: center !important;
  cursor: pointer !important;
  white-space: normal !important;

  border: 2px solid var(--libitina-gold) !important;
  background: transparent !important;
  color: var(--libitina-gold) !important;
  transition: all .25s ease !important;
  box-shadow: none !important;
}

.brlbs-cmpnt-content-blocker a.brlbs-cmpnt-cb-btn:hover,
.brlbs-cmpnt-content-blocker button:hover,
.brlbs-cmpnt-content-blocker .brlbs-cmpnt-btn:hover{
  background: var(--libitina-gold) !important;
  color: #fff !important;
}

/* Primär-Button */
.brlbs-cmpnt-content-blocker .brlbs-cmpnt-cb-btn[data-borlabs-cookie-accept-service],
.brlbs-cmpnt-content-blocker .brlbs-cmpnt-btn--primary{
  background: var(--libitina-gold) !important;
  color: #fff !important;
}

/* Preview 16:9 */
.brlbs-cmpnt-content-blocker .brlbs-cmpnt-content-blocker__preview,
.brlbs-cmpnt-content-blocker .brlbs-cmpnt-preview{
  aspect-ratio: 16/9;
  border-radius: 14px;
  background: #000;
  overflow: hidden;
}

/* Ganz wichtig: NICHT absolut positionieren */
.brlbs-cmpnt-content-blocker iframe{
  display:block !important;
  width:100% !important;
  height:auto !important;
  aspect-ratio:16/9;
  border:0 !important;
  position: static !important;
  inset: auto !important;
}

/* =========================================================
   B) NACH FREIGABE: NORMALER YOUTUBE-EMBED (sichtbar bei dir)
   ========================================================= */

/* WordPress YouTube Embed Wrapper (typisch) */
.wp-block-embed.is-type-video,
.wp-block-embed-youtube,
.wp-block-video{
  max-width: 100%;
}

/* Der iframe selbst – nur responsive, ohne Layout-Tricks */
.wp-block-embed.is-type-video iframe,
.wp-block-embed-youtube iframe{
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 16/9;
  border: 0 !important;
  display: block !important;
}

/* Optional: wenn du einen eigenen Wrapper nutzt (lb-yt-embed) */
.lb-yt-embed{
  position: relative;
  width: 100%;
  max-width: 100%;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 16px 36px rgba(0,0,0,.18);
  background: #000;
}
.lb-yt-embed::before{
  content:"";
  display:block;
  padding-top:56.25%;
}
.lb-yt-embed iframe{
  position:absolute;
  inset:0;
  width:100% !important;
  height:100% !important;
  border:0 !important;
  display:block !important;
}

/* Mobile */
@media (max-width:768px){
  .brlbs-cmpnt-content-blocker .brlbs-cmpnt-content-blocker__content,
  .brlbs-cmpnt-content-blocker .brlbs-cmpnt-container{
    padding: 16px 16px 14px;
  }
  .lb-yt-embed{
    border-radius: 16px;
    box-shadow: 0 10px 24px rgba(0,0,0,.16);
  }
}


/* =========================================================
   FIX: Gutenberg Bilder wirklich mittig zentrieren
   (auch bei object-fit + constrained layouts)
   ========================================================= */

.wp-block-image.aligncenter {
  display: flex !important;
  justify-content: center !important;
}

.wp-block-image.aligncenter img {
  display: block;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Wenn Bild in Group/Constrained Layout steckt */
.wp-block-group.is-layout-constrained
.wp-block-image.aligncenter {
  justify-content: center !important;
}

/* Sicherheitsnetz: falls feste Breite gesetzt ist */
.wp-block-image.aligncenter img[style*="width"] {
  margin-left: auto !important;
  margin-right: auto !important;
}


/* =========================================================
   Branch Overlay – Hover/Focus: Text muss lesbar bleiben
   ========================================================= */

.lb-branch-list .lb-branch-btn:hover,
.lb-branch-list .lb-branch-btn:focus,
.lb-branch-list .lb-branch-btn:focus-visible {
  /* Hintergrund darf gold sein – ok */
  /* background: var(--lb-gold);  <-- falls du es so hast */
}

/* Text im Hover/Focus zwingend dunkel setzen */
.lb-branch-list .lb-branch-btn:hover .lb-branch-zentrum,
.lb-branch-list .lb-branch-btn:hover .lb-branch-name,
.lb-branch-list .lb-branch-btn:hover .lb-branch-phone,
.lb-branch-list .lb-branch-btn:focus .lb-branch-zentrum,
.lb-branch-list .lb-branch-btn:focus .lb-branch-name,
.lb-branch-list .lb-branch-btn:focus .lb-branch-phone,
.lb-branch-list .lb-branch-btn:focus-visible .lb-branch-zentrum,
.lb-branch-list .lb-branch-btn:focus-visible .lb-branch-name,
.lb-branch-list .lb-branch-btn:focus-visible .lb-branch-phone {
  color: #111 !important;
  opacity: 1 !important;
}


.lb-float-image{
  float: left;
  width: 40%;            /* oder z.B. 420px */
  max-width: 420px;
  margin: 0 24px 16px 0; /* Abstand rechts & unten */
  border-radius: 16px;
}

/* Mobil: Bild oben, Text darunter */
@media (max-width: 768px){
  .lb-float-image{
    float: none;
    width: 100%;
    max-width: 100%;
    margin: 0 0 16px 0;
  }
}

/* Abstand NACH YouTube-Embed korrigieren */
.lb-yt-embed{
  margin-bottom: 0 !important;
}

.lb-yt-embed + *{
  margin-top: 0 !important;
}

/* Ratgeber: Start weiter nach oben (inline padding überschreiben) */
body.single-lb_ratgeber .lb-content-wrap{
  padding-top: 0 !important;
}

/* Ratgeber Übersicht: Excerpt auf 5 Zeilen begrenzen */
.lb-ratgeber-excerpt{
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 5 !important;
  overflow: hidden !important;
}

/* Ratgeber-Kacheln: Inhalt auf gleiche Höhe bringen */
.lb-ratgeber-card .lb-ratgeber-body{
  display: flex;
  flex-direction: column;
  height: 100%;
}

.lb-ratgeber-card,
.lb-ratgeber-card .lb-ratgeber-link{
  height: 100%;
  display: flex;
  flex-direction: column;
}

.lb-ratgeber-card .lb-ratgeber-body{
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* ============================================================
   HEADER – Desktop: breiter + Menü kompakter (kein Umbruch)
   Gilt für DE & RU, Mobil bleibt unverändert
   ============================================================ */
@media (min-width: 961px){

  /* 1) Header-Innencontainer breiter als Content */
  .lb-site-header .lb-header-inner{
    max-width: 1400px;         /* Zielbreite Header */
    padding-left: 32px;        /* etwas mehr Luft außen */
    padding-right: 32px;
  }

  /* 2) Wichtig: Flex-Items dürfen schrumpfen (sonst wird eher umgebrochen) */
  .lb-site-header .lb-header-center{
    min-width: 0;
    flex: 1 1 auto;
  }

  /* 3) Menü: nicht umbrechen, etwas enger */
  .lb-site-header .lb-main-menu{
    flex-wrap: nowrap;
    gap: 1.1rem;               /* vorher 1.5rem */
  }

  /* 4) Top-Level Links: Umbruch verhindern + minimal kleinere Schrift */
  .lb-site-header .lb-main-menu > li > a{
    white-space: nowrap;
    font-size: 16px;           /* vorher effektiv ~16px (Browser default/Theme) */
    line-height: 1.1;
    letter-spacing: -0.01em;   /* sehr subtil, spart Breite */
  }

  /* 5) Pfeil auch minimal kompakter (spart noch ein paar Pixel) */
  .lb-site-header .lb-main-menu > li.menu-item-has-children > a::after{
    margin-left: 0.28rem;      /* vorher 0.4rem */
  }

  /* 6) Rechtsblock: minimal dichter, damit Menü mehr Raum hat */
  .lb-site-header .lb-header-right{
    gap: 10px;
  }
  .lb-site-header .lb-header-phone-desktop{
    margin-right: 10px;        /* vorher 15px */
  }
}

/* ============================================================
   HEADER – Desktop: Menü wirklich mittig zentrieren
   ============================================================ */
@media (min-width: 961px){

  /* Center-Block als Flex-Container */
  .lb-site-header .lb-header-center{
    display: flex;
    justify-content: center;   /* horizontale Zentrierung */
    align-items: center;
  }

  /* Menü selbst nicht wachsen lassen */
  .lb-site-header .lb-main-menu{
    justify-content: center;
  }

}

/* ============================================================
   MOBILE: Submenu-Pfeil größer, bleibt direkt am Wort
   (deckt Text-Pfeil UND SVG/Icon ab)
   ============================================================ */
@media (max-width: 960px){

  /* Der echte Pfeil-Button im Mobil-Menü (nicht ::after am Link) */
  .lb-main-nav .lb-submenu-toggle{
    font-size: 26px !important;      /* falls Pfeil als Textzeichen drin ist */
    line-height: 1 !important;
    margin-left: 6px !important;     /* Abstand zum Wort bleibt gleich */
    padding: 0 !important;           /* bewegt sich nicht weg */
  }

  /* Falls im Button ein SVG/Icon steckt (häufig): Größe hier setzen */
  .lb-main-nav .lb-submenu-toggle svg,
  .lb-main-nav .lb-submenu-toggle img{
    width: 22px !important;
    height: 22px !important;
    display: block;
  }

  /* Falls das Icon als <span> o.ä. gerendert wird: ebenfalls skalieren */
  .lb-main-nav .lb-submenu-toggle > span{
    display: inline-block;
    transform: scale(1.35);
    transform-origin: center;
  }
}

/* ============================================================
   HEADER – Gold überall identisch (wie Startseite)
   -> Ganz ans ENDE der main.css
   ============================================================ */
:root{
  --lb-header-gold: #caa568;        /* Startseiten-Gold */
  --lb-header-gold-light: #e1c58a;
}

/* Header ist die Quelle: Variablen im Header-Scope fixieren */
.lb-site-header{
  --libitina-gold: var(--lb-header-gold);
  --libitina-gold-light: var(--lb-header-gold-light);

  opacity: 1 !important;
  filter: none !important;
}

/* Menü-Links + Dropdowns */
.lb-site-header .lb-main-menu > li > a,
.lb-site-header .lb-main-menu .sub-menu a{
  color: var(--lb-header-gold) !important;
  opacity: 1 !important;
}

/* Hover/Active bleibt weiß (wie bei dir gewünscht) */
.lb-site-header .lb-main-menu > li > a:hover,
.lb-site-header .lb-main-menu .sub-menu a:hover{
  color: #ffffff !important;
}

/* Notfallnummer-Label (24/7...) */
.lb-site-header .lb-header-phone-label{
  color: var(--lb-header-gold) !important;
}

/* Burger-Linien (mobil) */
.lb-site-header .lb-burger-line{
  background-color: var(--lb-header-gold) !important;
}

/* Mobile Submenu Toggle (Pfeil-Button) */
.lb-site-header .lb-submenu-toggle{
  color: var(--lb-header-gold) !important;
}

/* Sprachumschalter-Kreis (Border + Text) */
.lb-site-header .lb-lang-switcher__current-circle,
.lb-site-header .lb-lang-switcher__circle{
  border-color: var(--lb-header-gold) !important;
  color: var(--lb-header-gold) !important;
}

/* ============================================================
   Header-Strip: RU nicht in Uppercase + weniger Tracking
   ============================================================ */
html[lang="ru"] .lb-header-strip-text{
  text-transform: none !important;
  letter-spacing: 0.02em !important; /* vorher 0.08em -> wirkt in RU schnell "zerlegt" */
}

/* Optional: minimale Anpassung der Schriftgröße für RU (falls nötig) */
html[lang="ru"] .lb-header-strip-text{
  font-size: 0.88rem;
}


/* =========================================================
   Galerie-Kategorie (tax lb_gallery_cat) – exakt wie normale Seiten
   ========================================================= */

/* 1) Archive-Fullwidth-Regel für diesen Typ neutralisieren */
body.tax-lb_gallery_cat main.wp-site-blocks > .lb-content-wrap{
  max-width: 1200px !important;
  width: 1200px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  box-sizing: border-box;
}

/* 2) Für kleinere Viewports darf es natürlich schrumpfen */
@media (max-width: 1248px){
  body.tax-lb_gallery_cat main.wp-site-blocks > .lb-content-wrap{
    width: 100% !important;
  }
}

/* Galerie-Kategorie: entry-content wie normale Seiten */
body.tax-lb_gallery_cat .lb-content-wrap .entry-content{
  max-width: 1150px;
}


body.tax-lb_gallery_cat main.wp-site-blocks > .lb-content-wrap{
  max-width: 1200px !important;
  margin: 0 auto !important;
}

/* =========================================================
   FIX: Galerie-Kategorie NICHT wie "Archive fullwidth" behandeln
   ========================================================= */

/* 1) Archive-Fullwidth-Regel für diese Taxonomie aushebeln */
body.tax-lb_gallery_cat main.wp-site-blocks > *{
  max-width: none !important;   /* hebt die 100%-Klemme auf */
}

/* 2) Und den eigentlichen Content-Wrapper wie auf Seiten begrenzen */
body.tax-lb_gallery_cat main#primary.wp-site-blocks > .lb-content-wrap{
  max-width: 1200px !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* =========================================================
   Galerie-Kategorie: Mobil nicht zu schmal
   ========================================================= */
@media (max-width: 900px){

  /* Parent darf Padding haben, aber nicht doppelt mit Wrap wirken */
  body.tax-lb_gallery_cat main#primary.wp-site-blocks{
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Wrapper soll volle verfügbare Breite nutzen */
  body.tax-lb_gallery_cat main#primary.wp-site-blocks > .lb-content-wrap{
    max-width: 100% !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0px !important;
    padding-right: 0px !important;
  }

  /* Falls entry-content eine kleinere max-width bekommt: aufheben */
  body.tax-lb_gallery_cat .entry-content{
    max-width: none !important;
  }
}

/* =========================================================
   Borlabs YouTube Platzhalter korrekt im Embed platzieren
   ========================================================= */

/* Gutenberg YouTube Embed: Wrapper bekommt feste Fläche (16:9) */
.wp-block-embed.is-provider-youtube .wp-block-embed__wrapper{
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
}

/* Fallback für Browser ohne aspect-ratio */
@supports not (aspect-ratio: 16 / 9){
  .wp-block-embed.is-provider-youtube .wp-block-embed__wrapper{
    height: 0;
    padding-bottom: 56.25%;
  }
}

/* Borlabs Container füllt den Wrapper komplett */
.wp-block-embed.is-provider-youtube .wp-block-embed__wrapper .brlbs-cmpnt-container{
  position: absolute !important;
  inset: 0;
  margin: 0 !important;
  display: flex;
  align-items: center;     /* vertikal zentriert */
  justify-content: center; /* horizontal zentriert */
}

/* Optional: Wenn du ihn lieber "weiter oben" statt mittig willst */
.wp-block-embed.is-provider-youtube .wp-block-embed__wrapper .brlbs-cmpnt-container{
  align-items: flex-start;     /* statt center */
  padding-top: 16px;           /* Abstand von oben */
}

/* Borlabs: NUR den Einzelvideo-Button ausblenden ("Dieses Video freischalten") */
.brlbs-cmpnt-content-blocker a.brlbs-cmpnt-cb-btn[data-borlabs-cookie-unblock]{
  display: none !important;
}

/* Borlabs Cookie – CLS Fix für Logo */
.brlbs-dialog-logo,
.cookie-logo {
  width: 50px;
  height: auto;
  aspect-ratio: 1 / 1;
}

/* =========================================================
   Bild-Fixes (CLS + konsistente Darstellung)
   ========================================================= */

/* 1) Locator Pin / Libitina-Kopf (wird 52x52 dargestellt) */
.lb-pin-img{
  width: 52px;
  height: 52px;
  aspect-ratio: 1 / 1;
  display: block;
}

/* 2) Header Telefon-Icon (wird 26x26 dargestellt) */
.lb-phone-img{
  width: 26px;
  height: 26px;         /* wichtig: nicht nur auto */
  aspect-ratio: 1 / 1;
  display: block;
}

/* 3) Borlabs Dialog Logo (wird 50x50 dargestellt) */
img.cookie-logo.brlbs-dialog-logo{
  width: 50px;
  height: 50px;
  aspect-ratio: 1 / 1;
  display: block;
  object-fit: contain;
}

/* 4) Generell: WP Content Bilder stabil + responsive */
.wp-block-image img,
.entry-content img{
  max-width: 100%;
  height: auto;
}

/* Optional: falls irgendwo Bilder ohne Dimensionen sind */
img:not([width]):not([height]){
  height: auto;
}

.lb-video{
  width: 100%;
  aspect-ratio: 16 / 9;
  position: relative;
  margin: 0 auto;
}

.lb-video iframe{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}