/*
Theme Name: Sanitätshaus 2022
Version: 2.0
Theme URI: xxx.de
Description: Theme für die Firma Sanitätshaus Hetke & Segewitz
Author: Tempus Webdesign
Author URI: https://tempus-webdesign.de
*/
body {
  background: #eeefef;
  color: #000;
  font-family: "Abel";
  font-size: 21px;
}
p,
li {
  line-height: 1.25em;
}
h2,
h3,
h4,
h5 {
  font-size: 1em;
}
.ls-3 {
  letter-spacing: 0.1rem;
}

.button {
  padding: 1em;
}
.entered,
.size-full img {
  width: 100%;
}
.bg-grey {
  background: #eeefef;
}
.bg-darkgrey {
  background: #646363;
}
.bg-red {
  background: #cd171a;
}
.bg-rezept {
  background: url(assets/img/rezeptportal.png) no-repeat center center;
  background-size: cover;
}
.txt-white,
.font-white {
  color: #fff;
}
.txt-red {
  color: #cd171a;
}

a:link,
a:visited {
  color: #002e48;
}
.bg-red a:link,
.bg-red a:visited {
  color: #eeefef;
}

.link-box {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
}
.bg-darkgrey a:link,
.bg-darkgrey a:visited {
  color: #ffffff;
}

.wrapper.xsmall {
  max-width: 840px;
}
.wrapper.small {
  max-width: 1125px;
}
.wrapper.big {
  max-width: 1900px;
}
.txt-call-to-aktion {
  font-size: 1.5em;
  font-weight: bold;
}
.icon-ubersicht img,
.icon-leistungen {
  max-width: 90px;
}
.item:hover .icon-ubersicht img {
  transform: scale(1.1);
  transition: transform 0.5s; /* Animation */
}
.icon-leistungen {
  position: absolute;
  top: -45px;
  left: 2em;
  z-index: 10;
}
.blockquote {
  position: relative;
}
.blockquote::before,
.blockquote::after {
  position: absolute;
  font-size: 2.5em;
  color: rgb(255, 255, 255);
  top: -0.6em;
}
a:hover .blockquote,
a:hover .blockquote::before,
a:hover .blockquote::after {
  color: #000;
  transition: transform 0.5s; /* Animation */
}
.blockquote::before {
  content: "\00BB";
  left: -1em;
}
.blockquote::after {
  content: "\00AB";
  right: -1em;
}
.pic-full img {
  float: left;
  width: 100%;
}
/*---Button----*/ /* Basis-Button */
a.wp-block-button__link,
a.wp-block-button__link:link,
a.wp-block-button__link:visited {
  background: #cd171a;
  color: #fff;
  border-radius: 5px;
  border: 1px solid #cd171a;
  padding: 0.35em 1.5em;
  min-width: 200px;
  margin-bottom: 0.5em;
  display: inline-block;
  transition: all 0.3s ease;
}

/* Hover-Effekt für Standard (rot) */
a.wp-block-button__link:hover,
a.wp-block-button__link:focus {
  background: #b01416;
  border-color: #b01416;
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

a.wp-block-button__link:active {
  transform: translateY(0);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

/* Darkgrey-Variante */
a.wp-block-button__link.bg-darkgrey,
a.wp-block-button__link.bg-darkgrey:link,
a.wp-block-button__link.bg-darkgrey:visited {
  background: #646363;
  border: 1px solid #646363;
  color: #fff;
}

a.wp-block-button__link.bg-darkgrey:hover,
a.wp-block-button__link.bg-darkgrey:focus {
  background: #4a4a4a;
  border-color: #4a4a4a;
  color: #fff;
}

/* White-Variante */
a.wp-block-button__link.bg-white,
a.wp-block-button__link.bg-white:link,
a.wp-block-button__link.bg-white:visited {
  background: #fff;
  border: 1px solid #fff;
  color: #000;
}

a.wp-block-button__link.bg-white:hover,
a.wp-block-button__link.bg-white:focus {
  background: #f5f5f5;
  border-color: #f5f5f5;
  color: #000;
}

/* Green-Variante */
.bg-green a.wp-block-button__link,
.bg-green a.wp-block-button__link:link,
.bg-green a.wp-block-button__link:visited {
  background: #fff;
  color: #cd171a;
  border: 1px solid #fff;
}

.bg-green a.wp-block-button__link:hover,
.bg-green a.wp-block-button__link:focus {
  background: transparent;
  border: 1px solid #fff;
  color: #fff;
}

input[type="submit"] {
  border: 1px solid #ccc9c9;
}
input[type="submit"]:hover {
  color: #4e4e4e;
  background: transparent;
  border: 1px solid #4e4e4e;
  transition: transform 0.5s; /* Animation */
  cursor: pointer;
}

.ul-check {
  padding: 0;
}
.ul-check li {
  list-style-type: none;
  width: 100%;
  line-height: 2em;
}

.ul-check li:before {
  content: "";
  background: url(assets/img/check.png) no-repeat left center;
  width: 34px;
  height: 24px;
  float: left;
  margin-right: 1em;
}
.box-kontakt {
  min-height: 265px;
}
.wpcf7-acceptance label {
  width: 100%;
}
/*------Header----*/
.topbar-content {
  font-size: 0.8em;
}
.topbar-content span {
  float: left;
  width: 100%;
}
.logo {
  max-width: 280px;
  float: left;
  text-indent: -999999em;
  display: block;
}

.slider-text-content {
  color: #000;
}
.slider-container img {
  float: left;
  width: 100%;
}
/*------Main----*/
.service-container .item,
.leistungen-container .item {
  border-radius: 1em;
  border: 2px solid #eeefef;
}
.leistungen-container .col:last-child .item {
  background: #cd171a !important;
  color: #fff;
}
.leistungen-container .item:hover {
  border: 2px solid #fff;
  background: #eeefef;
  color: #000;
  transition: transform 0.5s; /* Animation */
}
.leistungen-container .icon {
  max-width: 75px;
  float: right;
  margin: 1em 1em -1em 0;
}
.produkte-content .item {
  width: 100%;
  height: 400px;
  display: flex;
}

.produkte-content .fitness {
  background: #79c6b6 url(assets/img/produkte/1.png) no-repeat center top;
}
.produkte-content .mobilitaet {
  background: #c6c52c url(assets/img/produkte/2.png) no-repeat left bottom;
  justify-content: flex-end;
}
.produkte-content .haushalt {
  background: #812927 url(assets/img/produkte/3.png) no-repeat right bottom;
}
.produkte-content .koerper {
  background: #40a7be url(assets/img/produkte/4.png) no-repeat center bottom;
}
.produkte-content .wohlbefinden {
  background: #40a7be url(assets/img/produkte/5.png) no-repeat right center;
}
.produkte-content .sicherheit {
  background: #004372 url(assets/img/produkte/6.png) no-repeat right center;
}
.produkte-content .text {
  display: flex;
  color: #fff;
  padding: 1em;
  font-size: 1.5em;
}
.produkte-content .unten {
  align-items: flex-end;
}
.produkte-content .center {
  align-items: center;
}
.produkte-content .right {
  align-items: flex-end;
}
.news-teaser {
  display: grid;
  grid-template-rows: 1fr 46px;
}
.logo-footer {
  max-width: 280px;
}
@media only screen and (min-width: 800px) {
  .topbar-content span {
    width: auto;
    float: none;
  }
  .main-nav {
    padding: 0;
  }
  .main-nav ul li:not(:first-child):hover a:before {
    border-bottom: 1px solid #cd171a;
  }
  .main-nav li.current-menu-item a {
    color: #cd171a;
  }
  h2 {
    font-size: 1.8em;
  }
  .font-50,
  h3 {
    font-size: 1.3em;
  }
  .ul-check li {
    width: 48%;
  }
  .ul-check li:nth-child(2n-1) {
    width: 58%;
  }
  .ul-check li:nth-child(2n) {
    width: 38%;
  }

  .item.image {
    max-width: 350px;
  }
  .home-sanihaus .item {
    flex-basis: 100%;
  }
  span[data-name="your-name"],
  span[data-name="your-vorname"],
  span[data-name="your-mail"],
  span[data-name="your-telefon"],
  span[data-name="plz"],
  span[data-name="ort"] {
    max-width: 50%;
  }
  span[data-name="your-name"],
  span[data-name="your-mail"],
  span[data-name="plz"] {
    padding-right: 0.5%;
  }
  span[data-name="your-vorname"],
  span[data-name="your-telefon"],
  span[data-name="ort"] {
    padding-left: 0.5 %;
  }
  .oeffnungszeiten-content {
    margin-top: 2em;
  }
  .oeffnungszeiten-content .content-second,
  .oeffnungszeiten-content .content-third {
    max-width: 50%;
  }
  .slider-content picture {
    order: 5;
  }
  .kontakt-content .item {
    display: grid;
    grid-template-rows: 1fr 245px;
  }
}
@media only screen and (min-width: 1024px) {
  .slider-container img {
    z-index: 5;
    position: relative;
  }
}
@media only screen and (min-width: 1200px) {
  .logo {
    max-width: 350px;
  }

  .slider-text-container h2 {
    font-size: 1.6em;
  }
  .slider-text-container p {
    font-size: 1.3em;
  }
  .slider-content .flex-content {
    justify-content: end;
  }
  .slider-content .slider-text {
    max-width: 550px;
  }

  .home-sanihaus .item {
    flex-basis: 48%;
  }
  .slider-text-container:after {
    height: 1em;
  }
}

@media only screen and (min-width: 1600px) {
  .oeffnungszeiten-content .content-second,
  .oeffnungszeiten-content .content-third {
    max-width: 100%;
  }
}
@media only screen and (min-width: 1200px) {
  .oeffnungszeiten-content .content-second {
    border-right: 1px dashed #000;
    margin-bottom: 1em;
  }
}
@media only screen and (min-width: 2400px) {
  /*Home Öffnungszeiten*/
  .oeffnungszeiten-container {
    position: absolute;
    top: 5%;
    left: 0;
    z-index: 5;
  }
  .oeffnungszeiten-content {
    max-width: 350px;
    border-radius: 1em;
    margin: 0;
  }
  .oeffnungszeiten-content .content-second {
    border-right: none;
    border-bottom: 1px dashed #000;
    margin-bottom: 1em;
  }
  .oeffnungszeiten-content .row .col-xl-4 {
    width: 100%;
  }
}
.wp-block-gallery {
  gap: 15px;
}

.wp-block-gallery .wp-block-image {
  border-radius: 8px;
  overflow: hidden;
}

.wp-block-gallery .wp-block-image img {
  border-radius: 6px;
  transition: transform 0.2s ease-in-out;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.wp-block-gallery .wp-block-image img:hover {
  transform: scale(1.03);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}

.topbar-mobile span {
  width: 100%;
  float: left;
  clear: left;
  padding: 0;
}

/* Card Karte */
.card {
  display: flex;
  flex-direction: column;
}

.card-img-top iframe {
  width: 100%;
  height: 250px; /* feste Höhe für alle Maps */
  object-fit: cover;
}

/*---Leistungen Startseite --*/
.produkte-content .item,
.leistungen-container .teaser-content .item {
  position: relative;
  overflow: hidden;
  border-radius: 8px; /* abgerundete Ecken */
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  cursor: pointer;
}
.produkte-content .item:hover,
.leistungen-container .teaser-content .item:hover {
  transform: translateY(-6px); /* leicht nach oben */
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15); /* weicher Schatten */
}

/* Bild-Effekt */
.leistungen-container .teaser-content img {
  transition: transform 0.5s ease;
}

.leistungen-container .teaser-content:hover img {
  transform: scale(1.05); /* sanftes Zoomen */
}

/* Overlay für angenehme Abdunklung */

.leistungen-container .teaser-content:hover::after {
  opacity: 1; /* leichte Abdunklung beim Hover */
}

/*News*/
.teaser-content {
  display: flex;
  flex-direction: column;
}

.teaser-content .wp-block-button {
  margin-top: auto; /* drückt Button nach unten */
  align-self: flex-start; /* optional: linksbündig, statt zu dehnen */
}

/* Parent – falls nicht schon Flexbox */
.one.flex-content.flex-two {
    display: flex;
    flex-wrap: wrap; /* damit es auf Mobile untereinander läuft */
    
}

/* Standard: Höhe frei (Mobile) */
.equal-height-box {
    display: flex;
    flex-direction: column;
}

/* Desktop: gleiche Höhe */
@media (min-width: 992px) {
    .one.flex-content.flex-two {
        align-items: stretch; /* Kinder auf gleiche Höhe */
    }

    .one.flex-content.flex-two .equal-height-box {
        /* flex: 1 1 0; */
    }
}