/*
Theme Name: egpromotion Child
Description: Responsive Wordpress Theme
Template: woostify
Version: 1.0
Author: You
Author URI: https://egpromotion.com
License URI: https://egpromotion.com
Text Domain: egpromotion
*/

body {
      background-color: #efeee4 !important;
}

.footerlogo {
      width: 70%;
}

.content-area {
      background-color: #efeee3 !important;
}

.site-footer {
      box-shadow: 0 -10px 20px rgba(0, 0, 0, 0.08);
}

.site-header {
      box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08);
}

#content {
      min-height: 50vh;
}

#secondary {
      display: none;
}

#primary {
      width: 100% !important;
      max-width: 100% !important;
}

.product-category img {
      width: 100% !important;
}

.site-content {
      background-color: #efeee3 !important;
}

.woostify-container {
      background-color: #efeee3 !important;
}

.page-description h1 {
      margin: 0 !important;
      padding-top: 50px !important;
}

.tns-controls [data-controls] {
      top: 40% !important;
}

.wc-block-cart .wc-block-cart__submit-container {
      background-color: #0D341E !important;
}

.wc-block-cart .wc-block-cart__submit-container:hover {
      background-color: #174c2d !important;
}

.wc-block-components-button:not(.is-link) {
      background-color: #174c2d !important;
}

.wc-block-components-button:not(.is-link):hover {
      background-color: #0D341E !important;
}

.wc-block-components-button__text {
      color: #ffffff !important;
}

.prev-product-navigation .product-nav-item-text span::before {
      content: "← Zurück";
      display: inline-block;
}

.next-product-navigation .product-nav-item-text span::before {
      content: "Weiter →";
      display: inline-block;
}

.product-nav-item-text span {
      display: none;
}

#custom_html-4 .widget-title {
      color: transparent;
}

#order_data {
      width: 100% !important;
}

.woocommerce-info {
      display: none !important;
}

@media (max-width: 768px) {
      .site-content {
            margin-left: 30px !important;
            margin-right: 30px !important;
      }
}

/* =========================
   HERO – GLOBAL
   ========================= */
.hero {
      position: relative;
      width: 100vw;
      margin-left: calc(-50vw + 50%);
      margin-top: -30px;
      height: 85svh;
      background-image: url('/wp-content/uploads/2025/06/hochlandrind-hero-1.jpg');
      background-size: cover;
      background-position: bottom center;
      /* Basis; in MQs überschrieben */
      color: #fff;
      overflow: visible;
      /* verhindert Abschneiden */
      z-index: 0;
}

.overlay {
      position: absolute;
      inset: 0;
      background: rgba(0, 0, 0, .30);
      z-index: 1;
}

.hero-text {
      position: absolute;
      top: 10%;
      left: 8.5%;
      z-index: 2;
      max-width: 700px;
}

.hero-text h1 {
      font-size: clamp(26px, 3.2vw + 12px, 56px);
      font-weight: 700;
      line-height: 1.1;
      margin: 0 0 .5rem 0;
      color: #fff;
}

.hero-text p {
      font-size: clamp(16px, 1.1vw + 10px, 21px);
      line-height: 1.45;
}

.hero-logo {
      position: absolute;
      right: 40px;
      bottom: 40px;
      z-index: 2;
      max-width: 400px;
      transform: rotate(20deg);
}

.hero-logo img {
      width: 100%;
      height: auto;
      display: block;
}

/* ---------- SCHLACHTTERMINE FLEX ---------- */
.slaughter-dates {
      margin-top: 2rem;
      color: #fff;
      font-weight: 500;
      letter-spacing: .4px;
}

.slaughter-dates>h2 {
      color: #fff;
      font-size: clamp(16px, .7vw + 12px, 20px);
      margin: 0 0 1rem 0;
}

.slaughter-flex {
      display: flex;
      flex-wrap: wrap;
      gap: 2rem;
}

.slaughter-line {
      flex: 1;
      min-width: 200px;
      font-size: clamp(15px, 1vw + 10px, 20px);
      line-height: 1.4;
}

.slaughter-line h3 {
      margin: 0 0 .25rem 0;
      font-size: 16px;
      font-weight: 700;
      color: #fff;
}

/* ---------- DESKTOP (>=1201px) ---------- */
@media (min-width:1201px) {
      .hero {
            min-height: 85svh;
            height: auto;
            background-position: center 40%;
            /* Kuh leicht nach unten */
            padding-bottom: 6rem;
      }

      .hero-text {
            position: absolute;
            top: 10%;
            left: 8.5%;
            max-width: 700px;
      }
}

/* ---------- TABLET (601–1200px) ---------- */
@media (min-width:601px) and (max-width:1200px) {
      .hero {
            background-position: 78% center;
            /* Kuh nach rechts */
            min-height: auto;
            height: auto;
            padding: clamp(18px, 4vw, 36px) 6% clamp(140px, 16vw, 220px);
            overflow: visible;
      }

      .hero-text {
            position: relative;
            top: auto;
            left: auto;
            margin: 0;
            max-width: 600px;
      }

      .hero-text h1 {
            font-weight: 800;
            line-height: 1.12;
      }

      .hero-logo {
            display: none;
      }
}

/* ---------- MOBILE (<=600px) ---------- */
@media (max-width:600px) {
      .hero {
            background-position: 80% center;
            /* Kuh deutlich rechts sichtbar */
            min-height: 64svh;
            height: auto;
            padding: clamp(16px, 5vw, 28px) 5% clamp(96px, 14vw, 160px);
      }

      .overlay {
            background: linear-gradient(to bottom,
                        rgba(0, 0, 0, .42) 0%,
                        rgba(0, 0, 0, .38) 40%,
                        rgba(0, 0, 0, .30) 100%);
      }

      .hero-text {
            position: relative;
            top: auto;
            left: auto;
            max-width: 88vw;
      }

      .hero-text h1 {
            font-size: clamp(24px, 7.2vw, 32px);
            line-height: 1.08;
            font-weight: 800;
            letter-spacing: -.2px;
            margin-bottom: .65rem;
      }

      .slaughter-flex {
            flex-direction: column;
            gap: 1rem;
      }

      /* mobil untereinander */
      .hero-logo {
            display: none;
      }
}

/* =========================
   HERO – QUALITÄT
   ========================= */
.hero-quality {
      background-image: url('/wp-content/uploads/2025/06/hero-kontakt.jpg');
      background-position: center bottom;
}

.hero-quality .hero-text {
      position: absolute;
      top: 30%;
      left: 8.5%;
      z-index: 2;
      max-width: 700px;
}

/* ---------- DESKTOP ---------- */
@media (min-width:1201px) {
      .hero-quality {
            min-height: 85svh;
            height: auto;
            padding-bottom: 6rem;
            background-position: center 40%;
      }

      .hero-quality .hero-text {
            position: absolute;
            top: 30%;
            left: 8.5%;
            max-width: 700px;
      }
}

/* ---------- TABLET ---------- */
@media (min-width:601px) and (max-width:1200px) {
      .hero-quality {
            background-position: 74% center bottom;
            min-height: auto;
            height: auto;
            padding: clamp(40px, 7vw, 80px) 6% clamp(150px, 16vw, 220px);
      }

      .hero-quality .hero-text {
            position: relative;
            top: auto;
            left: auto;
            max-width: 560px;
            margin-top: clamp(12px, 2vw, 24px);
      }
}

/* ---------- MOBILE ---------- */
@media (max-width:600px) {
      .hero-quality {
            background-position: 70% center;
            min-height: 70svh;
            /* höher für mehr Platz */
            height: auto;
            padding: 0 5% clamp(140px, 28vw, 200px);
            /* viel mehr Abstand nach oben */
            display: flex;
            align-items: flex-end;
            /* Text ans untere Ende des Hero-Bereichs */
      }

      .hero-quality .overlay {
            background: linear-gradient(to bottom,
                        rgba(0, 0, 0, .44) 0%,
                        rgba(0, 0, 0, .38) 40%,
                        rgba(0, 0, 0, .30) 100%);
      }

      .hero-quality .hero-text {
            position: relative;
            top: auto;
            left: auto;
            max-width: 92vw;
            margin-bottom: clamp(20px, 8vw, 50px);
            /* mehr Abstand zum unteren Rand */
      }

      .hero-quality .hero-text h1 {
            font-size: clamp(22px, 6.4vw, 30px);
            line-height: 1.1;
            font-weight: 800;
            margin-bottom: .6rem;
            letter-spacing: -.2px;
      }

      .hero-quality .hero-text p {
            font-size: 15px;
            line-height: 1.45;
            margin-bottom: .9rem;
      }

      .custom-mobile-logo {
            width: 40% !important;
      }
}

/* ---------- EXTRA ---------- */
/* Seite "Qualität" ohne extra Top-Margin */
body.page-id-295 .site-content {
      margin-top: 0 !important;
}

/* Contact Form */

.cf7-grid {
      display: flex;
      flex-direction: column;
      gap: 1.5rem;
      background-color: #efeee4;
}

.cf7-row {
      display: flex;
      flex-wrap: wrap;
      gap: 1rem;
}

.cf7-col {
      flex: 1 1 45%;
}

.cf7-col-100 {
      flex: 1 1 100%;
}

.input-wrapper {
      margin-bottom: 2rem;
}

.input-wrapper input,
.input-wrapper textarea {
      width: 100% !important;
      font-size: 16px !important;
      background: #efeee4 !important;
      color: #000000 !important;
      border: none !important;
      border-bottom: 1px solid #000000 !important;
      padding: 8px 0 !important;
      box-sizing: border-box !important;
      appearance: none !important;
      -webkit-appearance: none !important;
      -moz-appearance: none !important;
      outline: none !important;
      box-shadow: none !important;
      caret-color: #000000 !important;
}

.input-wrapper input:focus,
.input-wrapper textarea:focus {
      border-bottom: 1px solid #000000 !important;
      outline: none !important;
      box-shadow: none !important;
      background: #efeee4 !important;
}

input:-webkit-autofill,
textarea:-webkit-autofill {
      border-bottom: 1px solid #000000 !important;
      -webkit-box-shadow: 0 0 0 1000px #ffffff inset !important;
      box-shadow: 0 0 0 1000px #ffffff inset !important;
      transition: background-color 9999s ease-out !important;
      color: #000000 !important;
      caret-color: #000000 !important;
}

.form-submit {
      width: 300px;
      text-align: center;
}

.form-submit input[type="submit"] {
      background: #174c2d !important;
      color: #ffffff !important;
      padding: 14px 40px !important;
      border: none !important;
      border-radius: 8px !important;
      font-size: 16px !important;
      cursor: pointer !important;
      transition: background 0.3s ease !important;
}

.form-submit input[type="submit"]:hover {
      background: #0D341E !important;
}

.cf7-grid ::placeholder {
      color: #333333 !important;
      opacity: 1 !important;
}

input:focus+.input_label,
textarea:focus+.input_label {
      width: 0 !important;
}

#page-nav .next-hero-title-wrapper {
      margin-left: 0 !important;
}

.hero-title-wrapper {
      margin-left: 0 !important;
}

.form-submit p {
      width: none !important;
      text-align: left;
}

.input-wrapper textarea {
      height: 100px !important;
      resize: vertical;
}

.hidden-fields-container {
      display: none !important;
}

.contact-layout {
      flex-direction: row-reverse;
}

/* Rechte box */

.contact-layout {
      display: flex;
      flex-wrap: wrap;
      gap: 3rem;
      padding: 6vw 0;
}

.contact-left {
      flex: 1 1 60%;
}

.contact-right {
      flex: 1 1 25%;
      background-color: #f9f7f1;
      padding: 2rem;
      border-radius: 8px;
      box-shadow: 0 5px 25px rgba(0, 0, 0, 0.08);
      font-size: 16px;
      line-height: 1.7;
}

.contact-right p {
      margin-bottom: 1.2rem;
}

.contact-right a {
      color: #174c2d;
      text-decoration: none;
}

.contact-right a:hover {
      text-decoration: underline;
}

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

      .contact-left,
      .contact-right {
            flex: 1 1 100%;
      }
}

/* Checkout: WhatsApp/Mail-Checkboxen nebeneinander */
.notify-wrap .form-row-first,
.notify-wrap .form-row-last {
      width: 100%;
      float: none;
      margin-right: 0;
}

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

      .notify-wrap .form-row-first,
      .notify-wrap .form-row-last {
            width: 100%;
            float: none;
            margin-right: 0;
      }
}

/* =========================
   QUALITÄT – GRID (gleiche Höhe)
   ========================= */
.eg-quality-grid {
      box-sizing: border-box;
      max-width: 1600px;
      margin: 0 auto;
      padding: 24px 24px 48px;
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 32px;
      align-items: stretch;
      /* alle Spalten gleich hoch */
}

.eg-quality-box {
      background: #f3efe5;
      border-radius: 16px;
      box-shadow: 0 8px 24px rgba(0, 0, 0, .06);
      padding: 24px;

      display: flex;
      flex-direction: column;
      /* Inhalt flexibel anpassen */
      justify-content: flex-start;
}

.eg-quality-box h3 {
      margin: 0 0 .5rem 0;
      font-weight: 700;
}

.eg-quality-box p {
      margin: .35rem 0;
      line-height: 1.5;
      flex-grow: 1;
      /* sorgt dafür, dass Text den Platz füllt */
}

/* Tablet: 2 Spalten */
@media (max-width:1024px) {
      .eg-quality-grid {
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 28px;
            padding: 20px 20px 40px;
      }

      .quality-heading {
            font-size: 30px;
      }
}

/* Mobile: 1 Spalte */
@media (max-width:600px) {
      .eg-quality-grid {
            grid-template-columns: 1fr;
            gap: 18px;
            padding: 16px 16px 36px;
      }

      .quality-heading {
            font-size: 20px;
      }
}