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

/* Auf Smartphones & Tablets das Video zentriert darstellen */
@media (max-width: 1024px) {
  .video-responsive {
    margin-left: 0;
    margin-right: 0;
    width: 100%;
  }
}

/* Responsive 16:9 Video Wrapper */
.video-wrapper-16x9 {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; /* 16:9 Verhältnis */
  height: 0;
  overflow: hidden;
}

/* iframe im Wrapper korrekt positionieren */
.video-wrapper-16x9 iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Beim Klappelement auf der Leistungsseite, die Texte in der Aufzählung optimal positionieren. Der gesamte Aufzählungsblock ist auch nach rechts gerückt. */
/* Desktop-Optimierung */
.brxe-text.FAQsV05WF__faqs-content ul {
  list-style: none;
  padding-left: 0;
  margin-left: 0;
}

.brxe-text.FAQsV05WF__faqs-content ul li {
  position: relative;
  padding-left: 1.5em;
  line-height: 1.6;
}

.brxe-text.FAQsV05WF__faqs-content ul li::before {
  content: "•";
  position: absolute;
  left: 0;
  top: 0;
  color: #000; /* oder eine Akzentfarbe */
}

/* Schriftdatei Roboto-Regular korrekt einbinden */
@font-face {
  font-family: 'Roboto-Regular';
  src: url('/wp-content/uploads/2025/04/Roboto-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

/* Farbsteuerung der Buttons auf der gesamten Website */
.sanas-button {
  background-color: #76b82a !important;
  color: #fff !important;
  border: none !important;
  padding: 0.75em 1.5em !important;
  font-size: 1.188em !important;
  font-family: Roboto-Regular !important;
  font-weight: 600;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.2s ease;
  display: inline-block;
  text-decoration: none;
}

.sanas-button:hover {
  background-color: #53811D !important;
  transform: translateY(-2px);
}

/* Slider mobil auf die optimale Größe der vorhandenen Bilder einstellen */
@media (max-width: 768px) {
  .bricks-slider {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    aspect-ratio: 3 / 1.7; /* modernes Verhältnis, kann angepasst werden */
    overflow: hidden;
  }

  .bricks-slider img,
  .bricks-slider .bricks-slider-slide {
    width: 100% !important;
    height: auto !important;
    object-fit: cover;
  }
}

/* Den Logo-Slider ausrichten und aktivieren */
.logo-slider {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: 150px; /* Feste Höhe */
  background: transparent;
}

.logo-slider:hover .logo-track {
  animation-play-state: paused;
}

.logo-track {
  display: flex;
  gap: 3rem;
  animation: scroll 70s linear infinite;
  will-change: transform;
  width: max-content;
  align-items: center;
  height: 100%;
}

/* Geschwindigkeit für Smartphone erhöhen */
@media (max-width: 768px) {
  .logo-track {
    animation: scroll 20s linear infinite;
    gap: 2rem;
  }
}

.logo-item {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 200px;
  height: 100%;
  flex-shrink: 0;
  padding: 0 1.5rem;
}

.logo-item img {
  max-height: 60px;
  max-width: 180px;
  height: auto;
  width: auto;
  object-fit: contain;
  transition: transform 0.3s ease;
  display: block;
}

.logo-item img:hover {
  transform: scale(1.05);
}

/* Weiche Kanten mit transparentem Verlauf */
.logo-slider::before,
.logo-slider::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 80px;
  z-index: 2;
  pointer-events: none;
}

.logo-slider::before {
  left: 0;
  background: linear-gradient(to right, rgba(243, 243, 237, 1), rgba(243, 243, 237, 0));
}

.logo-slider::after {
  right: 0;
  background: linear-gradient(to left, rgba(243, 243, 237, 1), rgba(243, 243, 237, 0));
}

/* Animation */
@keyframes scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-820%);
  }
}

/* Header sticky - Ursprüngliche Headerhöhe */
.header-sticky {
  position: sticky;
  top: 0;
  width: 100%;
  z-index: 9999;
  background-color: #fff;
}

.bricks-site-wrapper {
  overflow: initial !important;
}

/* Kein horizontales Scrollen im Hauptinhalt */
.bricks-site-wrapper,
.page-wrapper,
.main-content {
  overflow-x: hidden;
  width: 100%;
}

* {
  box-sizing: border-box;
}

img, iframe {
  max-width: 100%;
  height: auto;
  display: block;
}

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

display: flex;
flex-wrap: wrap; /* wichtig */

html, body {
  max-width: 100%;
  overflow-x: hidden;
}

/* Trennlinie im Header Template begrenzen, weil sonst die CSS-Begrenzung oben im CSS das Verschieben nach links auf dem Smartphone nicht verhindert. */
.trennlinie {
  width: 100%;          /* nicht 100vw! */
  max-width: 100%;
  overflow: hidden;
  box-sizing: border-box;
}

/* Vermeidung von horizontalem Scrollen auf Mobilgeräten */
body {
  overflow-x: hidden;
}

* {
  box-sizing: border-box;
  max-width: 100%;
}

/* Roboto Bold einbinden und generell für H3 verwenden. Ab und zu funktioniert die Schriftangabe in Bricks nicht richtig. */
@font-face {
  font-family: 'Roboto Bold';
  src: url('/wp-content/uploads/2025/04/Roboto-Bold.ttf') format('truetype');
  font-weight: bold;
  font-style: normal;
}

h3 {
  font-size: 1.57em;                  /* Schriftgröße */
  font-family: 'Roboto Bold', sans-serif !important;  /* Schriftart nur für h3 */
  margin-top: 1.875em;                /* Abstand zur vorherigen Zeile */
}

/* Traumhaus "Check-in" Formular die HTML-Aufzählung optimal ausrichten und grünen Haken setzen */
.brxe-form-list ul {
  list-style: none;
  padding-left: 0;
  margin-left: 0;
}

.brxe-form-list ul li {
  position: relative;
  padding-left: 1.8em; /* Platz für Icon */
  line-height: 1.6;
  margin-bottom: 0.6em;
}

.brxe-form-list ul li::before {
  content: "✔";
  position: absolute;
  left: 0;
  top: 0.05em;
  color: #76b82a; /* Grün wie im Screenshot */
  font-weight: bold;
  font-size: 1.1em;
}

/* Google Maps Karte auf dem Desktop größer darstellen */
.custom-map-wrapper iframe {
    height: 100% !important;
    width: 100% !important;
    display: block;
    border: 0;
}
.custom-map-wrapper {
    height: 400px; /* Hier gewünschte Höhe einstellen */
    max-width: 100%;
}

/* Google Maps Karte Mobil größer darstellen */
.custom-map-mobil-wrapper iframe {
    height: 100% !important;
    width: 100% !important;
    display: block;
    border: 0;
}
.custom-map-mobil-wrapper {
    height: 220px; /* Hier gewünschte Höhe einstellen */
    max-width: 100%;
}

/* Slider für Tablet quer ausblenden */
@media (max-width: 1280px) {
  #brxe-wxvpgh {
    display: none !important;
  }
}

/* Content Container über dem Slider im Tablet-Querformat ausblenden */
@media (max-width: 1280px) {
  #brxe-wwikjr {
    display: none !important;
  }
}

/* Content Container über dem Slider im Tablet-Querformat ausblenden */
@media (max-width: 1280px) {
  #brxe-d96f0f {
    display: none !important;
  }
}

/* Content Header Tablet quer ausblenden und nur auf dem Desktop sichtbar */
@media (min-width: 1280.1px) {
  #brxe-ozthmc {
    display: none !important;
  }
}

/* Content Beweis für Tablet quer ausblenden und nur auf dem Desktop sichtbar */
@media (min-width: 1280.1px) {
  #brxe-ohwwzh {
    display: none !important;
  }
}

/* TABLET QUER FIX - Für Home/Startseite oder Seite 1754645989 */
@media screen and (min-width: 768px) and (max-width: 1280px) and (orientation: landscape) {
  
  /* Für Home ODER die spezifische Page-ID */
  body.home #brx-content,
  body.page-id-1754645989 #brx-content,
  body.home .brxe-section,
  body.page-id-1754645989 .brxe-section,
  body.home .brxe-container,
  body.page-id-1754645989 .brxe-container,
  body.home .brxe-div,
  body.page-id-1754645989 .brxe-div {
    max-width: 100% !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
  }
  
  /* Hero-Bereich */
  body.home [id*="hero"],
  body.page-id-1754645989 [id*="hero"],
  body.home [class*="hero"],
  body.page-id-1754645989 [class*="hero"] {
    margin-left: 0 !important;
    padding-left: 0px !important;
    transform: none !important;
    left: 0 !important;
  }
  
  /* Content-Boxen */
  body.home #brxe-ozthmc,
  body.page-id-1754645989 #brxe-ozthmc,
  body.home #brxe-ohwwzh,
  body.page-id-1754645989 #brxe-ohwwzh {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
  }
}

/* xyz */
.video-square {
  aspect-ratio: 1 / 1 !important;
  width: 100%;
  height: auto;
  object-fit: cover; /* optional, damit es sauber gefüllt wird */
}


/* xyz */
/* Nur auf Einzelansichten von Beiträgen */
.single-post .brxe-post-meta,
.single-post .brxe-post-author,
.single-post .brxe-comments,
.single-post #comments,
.single-post .comment-respond,
.single-post .brxe-social-icons,
.single-post .brxe-share-buttons {
  display: none !important;
}

/* Social-Sharing + untere Linie auf ALLEN Beiträgen ausblenden */
.single-post .bricks-post-meta-wrapper,
.single-post .brxe-post-sharing {
  display: none !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* +30px Abstand ÜBER "Ähnliche Beiträge" */
.single-post .bricks-post-meta-wrapper + h2 {
  margin-top: 40px !important;
}

/* Fallback, falls die Meta-Wrapper-Struktur mal weg ist */
.single-post article.brxe-container > h2:first-of-type {
  margin-top: 40px !important;
}

/* Datum in "Ähnliche Beiträge" (unten im Single-Post) ausblenden */
.single-post .brxe-related-posts .dynamic[data-field-id="1"]{
  display: none !important;
}

/* Datum in der Blog-Übersicht (Beiträge-Element) ausblenden */
.blog .brxe-posts .dynamic[data-field-id="1"],
.archive .brxe-posts .dynamic[data-field-id="1"],
.blog .brxe-posts time,
.archive .brxe-posts time{
  display: none !important;
}

.textcontent a {
  color: #e20000 !important;
}

.textcontent h3 {
  margin-bottom: 1em;
}

h1, h2, h3, .entry-title {
  hyphens: auto;
  overflow-wrap: break-word;
  word-break: break-word;
}

.content-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: flex-start;
}

.text-column {
  flex: 0 0 70%;
}

.image-column {
  flex: 0 0 25%;
}

.image-column img {
  width: 100%;
  height: auto;
  border-radius: 6px;
  cursor: pointer;
  transition: transform 0.3s ease;
}

.image-column img:hover {
  transform: scale(1.02);
}

@media (max-width: 768px) {
  .content-wrapper {
    flex-direction: column;
  }

  .text-column,
  .image-column {
    flex: 0 0 100%;
  }
}

/* Reduziert den Abstand zwischen Überschrift und Teasertext im Blog */
.brxe-swwssx .content-wrapper h3.dynamic {
    margin-bottom: 0px !important;
    padding-bottom: 0 !important;
}

.darlehen-cta-section .darlehen-cta-button,
.darlehen-cta-section .darlehen-cta-button:link,
.darlehen-cta-section .darlehen-cta-button:visited {
    display: inline-block;
    padding: 15px 30px;
    background: #76b82a !important;
    color: #ffffff !important;
    text-decoration: none !important;
    border-radius: 5px;
    font-size: 16px;
    font-weight: 600;
    transition: all 0.3s ease;
    box-shadow: 0 5px 15px rgba(118, 184, 42, 0.3);
    border: 2px solid #76b82a;
}

.darlehen-cta-section .darlehen-cta-button:hover,
.darlehen-cta-section .darlehen-cta-button:focus,
.darlehen-cta-section .darlehen-cta-button:active {
    background: #5fa020 !important;
    border-color: #5fa020 !important;
    box-shadow: 0 5px 20px rgba(118, 184, 42, 0.4);
    transform: translateY(-1px);
    color: #ffffff !important;
}

.darlehen-btn {
    width: 100%;
    padding: 14px;
    background: #76b82a;  /* Helles Grün */
    color: white;
    border: none;
    border-radius: 5px;  /* Auch hier 5px Ecken wenn gewünscht */
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: 10px;
}

.darlehen-btn:hover {
    background: #5fa020;  /* Dunkleres Grün beim Hover */
    transform: translateY(-1px);  /* Leichtes Anheben wie beim anderen Button */
}