/* ===============================================================
   CUSTOM.CSS – Baseline-Styles für „Bandscheibenvorfall beim Hund“-Seite
   ============================================================== */

/* ===========================
   Allgemeine Body- und Seitenstyles
   =========================== */
body {
  font-family: arial, helvetica, sans-serif;
  font-size: 100%;
  margin: 0;
  padding: 0;
}

.landing_page {
  overflow-x: hidden;
  width: 100%;
}

.landing_page a {
  color: #00809D;
  font-weight: 500;
}

.landing_page a:hover {
  color: #212121;
}

/* ===========================
   Container-Grundregeln (einheitliche Breite & Abstand)
   =========================== */
/* Entfernt das Bootstrap-Padding aller .container */
.container {
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-top: 20px;    /* 20px Abstand zum vorherigen Container */
  margin-bottom: 20px; /* 20px Abstand zum nächsten Container */
}

/* Header-Container: Abstand nur unten, nicht oben */
.container.header_image {
  background-image: url('../images/header_image.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  margin-top: 0 !important;
  margin-bottom: 20px !important;
}

/* ===========================
   Header-Bereich (Desktop & Tablet bis 992px)
   =========================== */
/* Wrapper, der das Header-Hintergrundbild enthält */
.header_image {
  background-image: url('../images/header_image.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  border-radius: 0 0 20px 20px;
  position: relative; /* damit Logo & Box absolut positioniert werden können */
  overflow: hidden;
  height: 370px;      /* Desktop-Höhe */
}

/* Logo oben links (Desktop & Tablet) */
.header_logo {
  bottom: auto;
  max-height: 60px;
  position: absolute;
  top: 20px;
  left: 20px;
  width: 120px;
  height: auto;
  z-index: 2; /* unter der Überschriften-Box, aber über dem Hintergrund */
}

/* Überschrift-Box (Desktop & Tablet) */
.header_heading {
  background-color: rgba(196, 80, 28, 0.5);
  margin-top: 90px;  /* von 70px auf 90px erhöht, damit 10px Abstand zum unteren Rand des Logos entsteht */
  padding: 40px;
  width: 100%;
  max-width: 550px;
  border-radius: 0 20px 20px 0;
  color: #fff;
  position: relative;
  z-index: 3; /* über dem Logo, damit keine Überschneidung entsteht */
}

/* Überschriften im Header (Desktop & Tablet) */
.landing_page h1 {
  font-size: 30px;
  color: #fff;
	font-weight: 500;
  text-transform: uppercase;
}

.landing_page h2 {
  font-size: 22px;
  color: #fff;
	font-weight: 500;
  text-transform: uppercase;
}

/* ===========================
   Hellgrüne Content-Container (.light_green)
   =========================== */
/* Hellblauer Hintergrund, 20px Padding rundum, 20px Abstand vertikal */
.light_green {
  background-color: #E9F5F8;
  border-radius: 20px;
  padding: 20px;          /* 20px innen (oben, rechts, unten, links) */
  box-sizing: border-box; /* Padding in Breite einkalkulieren */
}

/* Innerhalb von .light_green: .row darf keine negativen Margins mehr haben */
.light_green .row {
  margin-left: 0;
  margin-right: 0;
}

/* ===========================
   Hintergrundbild-Container (.section4_bg_image)
   =========================== */
.section4_bg_image {
  background-image: url(../images/section4.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  padding: 50px 20px; /* 50px oben/unten, 20px links/rechts */
  border-radius: 20px;
}

/* ===========================
   Bild-Stile (z.B. .dog_img)
   =========================== */
.dog_img {
  width: 100%;
  border-radius: 20px;
  display: block;
  margin: 15px auto;
}

/* ===========================
   Überschriften & Fließtext
   =========================== */
.landing_page h3 {
  font-size: 24px;
  color: #00809D;
	font-weight: 500;
  margin-bottom: 12px;
}

.landing_page h4 {
  font-size: 20px;
  color: #fff;
  text-align: center;
  margin-bottom: 0;
}

.landing_page p {
  color: #212121;
  line-height: 1.6;
  margin-bottom: 30px;
}

.landing_page p:last-child {
  margin-bottom: 0 !important;
}

/* ===========================
   Pawlist (Aufzählung mit Pfoten-Bullet)
   =========================== */
.pawlist {
  list-style: none;
  padding: 0;
  margin: 0 0 30px 0; /* Abstand nach unten */
}

.pawlist li {
  margin-left: 20px;
  position: relative;
  line-height: 1.5;
  padding-left: 25px;
  margin-bottom: 10px;
}

.pawlist li::before {
  content: '';
  display: inline-block;
  height: 10px;
  width: 11px;
  background-image: url('https://www.dog-fit.com/shop/media/vector/paw-bullet.svg');
  background-size: contain;
  background-repeat: no-repeat;
  position: absolute;
  left: -5px;     /* angepasst */
  top: 0.45em;    /* angepasst */
}

/* ===========================
   Produkthinweis (Product Hint)
   =========================== */
.produkthinweis {
  background-color: #f8f8f8;
  border-left: 4px solid #00809D;
  padding: 1.5em;
  margin: 2em 0;
  line-height: 1.6;
  color: #333;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
}

.produkthinweis strong {
  font-size: 22px;
  display: block;
  margin-bottom: 0.5em;
  color: #c94d0c;
}

/* ===========================
   Discount Wrapper & Button-Styles
   =========================== */
.discount_wrapper {
  display: block;
  font-size: 18px;
  color: #000;
  font-weight: 500;
  text-align: center;
  margin: 10px 0;
}

.btn_1 {
  font-size: 28px;
  background: linear-gradient(180deg, #D82E2E 0%, #EC5555 100%);
  border-radius: 10px;
  color: #fff !important;
  padding: 12px 28px;
  display: block;
  width: 100%;
  margin: 0 auto 5px auto;
}

.btn_1:hover {
  background: linear-gradient(180deg, #D82E2E 0%, #D82E2E 100%);
  text-decoration: none;
}

/* ===========================
   Review Card-Stile (Testimonials)
   =========================== */
.card_inner_wrapper p {
  margin-bottom: 4px;
  font-size: 15px;
}

.card_inner_wrapper p strong {
  color: #00809D;
  font-weight: 400;
  padding: 0 7px;
}

.card_body p img {
  width: 38px;
  margin-top: -10px;
}

/* ===========================
   Full-Width CTA (Erhalten • Pflegen • Begleiten)
   – Border-Radius 5px
   =========================== */
.section17_bg_image {
  background-image: url(../images/section17_bg.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  padding: 50px 20px;      /* 50px oben/unten, 20px links/rechts */
  border-radius: 5px;      /* nur 5px */
  margin-bottom: 20px;
}

.section4_heading {
  text-align: center;
  padding: 60px 20px;
  margin: 0 auto;
  width: 100%;
  max-width: 600px;
 }

.section4_heading h3 {
  font-size: 34px;
  margin-bottom: 5px;
  color: #ffff;
	font-weight: 500;
}

.section4_heading p {
  font-size: 26px;
  font-weight: 500;
  line-height: 24px;
  color: #fff;
  margin: 0;
}

/* ===========================
   Trenner: hr.ratgeber
   =========================== */
hr.ratgeber {
  border: none !important;
  height: 2px !important;
  background-color: #00809D !important;
  width: 100% !important;
  margin: 1em 0 !important;
  position: relative !important;
  display: block !important;
  clear: both !important;
  overflow: visible !important;
  opacity: 1 !important;
  filter: none !important;
  box-sizing: content-box !important;
}

hr.ratgeber::before {
  content: '' !important;
  position: absolute !important;
  border-left: 8px solid transparent !important;
  border-right: 8px solid transparent !important;
  border-top: 8px solid #00809D !important;
  left: 25px !important;
  top: 50% !important;
  transform: translate(-50%, -3px) !important;
  margin-left: -8px !important;
  z-index: 2 !important;
}

/* ===========================
   Footer-Bereich: Impressum & Datenschutz
   =========================== */
.section18 {
  margin-bottom: 20px;
}

.section18 small {
  display: block;
  margin-top: 10px;
  color: #000;
}