@charset "UTF-8";
/**
* Table of Contents
*
* 1.0 Variables
* 2.0 Mixins & Functions
* 3.0 General
* 4.0 WooCommerce
* 5.0 Plugin Styling
**/
/************ 1.0 Variables *********** */
/************ 2.0 Mixins & Functions *********** */
/************ 3.0 General *********** */
html {
  scroll-padding-top: 150px;
}

a {
  text-underline-offset: 2px;
  text-decoration-color: #a7aaad;
  text-decoration-thickness: 1px;
  text-decoration-style: dotted;
}

/* Responsive centering: Calc logic keeps content at max 1580px width, enforcing min-padding of 28px */
.add-padding-left {
  padding-left: max(28px, (100vw - 1420px) / 2);
}

div.add-padding-right {
  padding-right: max(28px, (100vw - 1420px) / 2) !important;
}

/* --- START Hero Section Overlap --- */
.container-center {
  display: flex;
  justify-content: center;
}

/* Wir aktivieren den Effekt nur auf Desktop/Tablet (ab 900px Breite) */
@media (min-width: 900px) {
  /* 1. Der rote Kasten (Text) */
  .hero-red-box {
    position: relative; /* Notwendig für z-index */
    z-index: 10; /* Bringt den Kasten in den Vordergrund */
    /* margin-right: -120px !important;  Zieht den Kasten 120px nach rechts über das Bild */
    width: 55%; /* Der Textteil bekommt etwas mehr Platz */
    background-color: #991b23; /* Sicherheitsfarbe, falls Theme-Farbe nicht greift */
  }
  /* 2. Der Bild-Kasten (Rechts) */
  .hero-image-box {
    position: relative;
    z-index: 1; /* Bleibt im Hintergrund */
    width: 60%; /* Bildteil */
    display: flex;
    align-items: center; /* Vertikal mittig ausrichten */
  }
  /* 3. Den übergeordneten Container stabilisieren */
  /* Da du bereits Flexbox nutzt, sorgen wir hier für vertikale Zentrierung */
  .hero-red-box,
  .hero-image-box {
    align-self: center;
  }
}
/* Auf kleinen Bildschirmen (Handy) räumen wir auf */
@media (max-width: 899px) {
  .hero-red-box {
    margin-right: 0 !important;
    width: 100%;
    margin-bottom: 0; /* Kein Abstand nach unten, damit Bild direkt anschließt */
  }
  .hero-image-box {
    width: 100%;
    margin-top: -20px; /* Zieht das Bild auf dem Handy leicht hoch (optional) */
  }
}
/* --- ENDE Hero Section Overlap --- */
/* --- START Hero Section REVERSED (Bild links, Text rechts) --- */
@media (min-width: 900px) {
  .hero-normal .hero-image-box {
    margin-left: -50px;
  }
  /* Der rote Kasten in der "Reversed"-Variante */
  .hero-reversed .hero-red-box {
    /* Wir überschreiben die Werte der normalen Version: */
    margin-right: 0 !important; /* Nicht mehr nach rechts schieben */
    /*margin-left: -120px !important;  SONDERN: Nach links über das Bild ziehen */
    width: 115% !important; /* Breite bleibt, damit Platz da ist */
    z-index: 10; /* Bleibt im Vordergrund */
  }
  /* Das Bild in der "Reversed"-Variante */
  .hero-reversed .hero-image-box {
    position: relative;
    z-index: 1; /* Bleibt im Hintergrund */
    width: 100%; /* Sicherstellen, dass Bild volle Breite hat */
    margin-right: -50px;
  }
}
/* Mobile Korrektur für Reversed */
@media (max-width: 899px) {
  .hero-reversed .hero-red-box {
    margin-left: 0 !important; /* Auf dem Handy kein Überlappen */
    width: 100% !important;
  }
}
@media (max-width: 1282px) {
  .hero-reversed .hero-red-box .container-center {
    flex-direction: column !important;
  }
  .hero-reversed .hero-red-box .container-center .image {
    order: 2;
  }
  .hero-reversed {
    /* Der direkte Flex-Container darin */
  }
  .hero-reversed .container-center {
    flex-direction: column !important;
    /* Optional: Abstände korrigieren, falls nötig */
    gap: 0;
  }
  .hero-reversed {
    /* Die rote Text-Box nach oben ziehen */
  }
  .hero-reversed .hero-red-box {
    order: -1 !important;
    width: 100% !important; /* Sicherheitshalber volle Breite mobil */
  }
  .hero-reversed {
    /* Das Bild-Element (explizit angesprochen) */
  }
  .hero-reversed .hero-image-box {
    order: 1 !important; /* Sicherstellen, dass es danach kommt */
    width: 100% !important;
  }
}
/* --- ENDE Hero Section REVERSED --- */
@media (max-width: 767px) {
  .mobil-left {
    text-align: start !important;
  }
}
img.custom-logo {
  height: 80px;
  -o-object-fit: contain;
     object-fit: contain;
}

/* Das alternative, sichere CSS */
.sticky-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000; /* Hält den Header über allen Bildern und Texten */
  background-color: #ffffff; /* Eure Fitzinger-Hintergrundfarbe */
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05); /* Minimaler Premium-Schatten */
}/*# sourceMappingURL=main.css.map */