.oeffnungszeiten-block .oeffnungszeiten-title{
    font-size: 1.1em;
  margin-bottom: 1rem;
  font-weight: 500;

}

.oeffnungszeiten-block .oeffnungszeiten-text p{
  text-decoration: ;
  margin: 0 0 .35rem 0;
}

.oeffnungszeiten-hinweis{
   margin-top: .75rem;
  padding: 0;
  border-left: 0px solid var(--waldhorn-red);
  background: rgba(239,232,234,0);
}



/* Hero Version */
.hero-hours{
  position:absolute;
  right:0%;
bottom:20px;
  padding:20px;
  z-index:11;
  min-height: 350px;
  min-width: 500px;

  isolation:isolate; /* verhindert z-index Konflikte */

  text-align:center;
  font-size:1.1rem;
  line-height:1.4;
  color:#534741;

  filter: drop-shadow(4px 7px 5px rgba(0,0,0,.18)) brightness(1);
}

/* Hintergrundbild */
.hero-hours::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-2;

  background:url("../../../assets/img/hero/papierBG.png") center/cover no-repeat;
 background-size: 100% 100%;
 border: solid 10px var(--waldhorn-grey);
}

/* Verlauf darüber */
.hero-hours::after{
  display: ;
  content:"";
  position:absolute;
  inset:0;
  z-index:2;
  opacity: .96;

  background: linear-gradient(
    45deg,
    rgba(255,255,255,.8) 0%,
    rgba(255,255,255,.5) 12%,
    rgba(255,255,255,.3) 43%,
    rgba(255,255,255,.4) 75%,
    rgba(255,255,255, .7) 90%,
    rgba(255,255,255,.4) 100%
  );

  pointer-events:none;
}
.hours-header{
  position:relative;
  z-index:1;
  margin:20px;
  width:250px;
}

.trenner svg path{
  fill: var(--waldhorn-grey);
}

.trenner{
  margin-top: 10px;
  height:50px;      /* hier steuerst du die Größe */
  width:auto;        /* optional */
}

.trenner svg{
  width:100%;
  height:100%;
  display:block;     /* verhindert Inline-Gap */
}

.hero-hours .oeffnungszeiten-block{
  position: relative;
  z-index: 1;
}
.oeffnungszeiten-block.container{
  position: relative;
    height: 100%;

}
.cls-home-hero-wrapper .hero-content{
  height: 100%;
}
.cls-home-hero-wrapper .hero-content .container{
  height: 100%;
}

.hero-hours .oeffnungszeiten-title{
 
}

.hero-hours .oeffnungszeiten-text p{
  margin: 0;
}

.hero-hours .oeffnungszeiten-hinweis{
  border-top:0px solid var(--waldhorn-light-grey);
  margin-top: 10px;
  padding: 10px 14px;
  font-size: .95rem;
  border-left: 0px solid var(--waldhorn-red);
  background: rgba(239,232,234,.0);
}


/* Utility classes for opening hours text */
.oeffz--small{ font-size: .95em; }
.oeffz--large{ font-size: 1.15em; }

.oeffz--muted{ opacity: .85; }
.oeffz--green{ color: var(--waldhorn-green); }
.oeffz--red{ color: var(--waldhorn-red); }
.oeffz--dark{ color: var(--waldhorn-dark-grey); }

.oeffz--tight{ line-height: 1.2; }







/* =========================================================
   MOBILE OPENING HOURS CARD
   ========================================================= */
@media (max-width: 991.98px) {

  .cls-home-hero-wrapper .hero-hours {
    position: absolute;

    right: auto;
    bottom: var(--mobile-card-bottom, 28px);
    left: 50%;

    width: min(calc(100% - 32px), 430px);
    min-width: 0;
    min-height: 0;

    margin: 0;
    padding: 22px 20px 24px;

    transform: translateX(-50%);

    z-index: 40;
    isolation: isolate;

    text-align: center;
    font-size: clamp(.84rem, 3.5vw, .98rem);
    line-height: 1.45;
    color: #534741;

    filter: drop-shadow(0 9px 12px rgba(0, 0, 0, .22));
  }

  .cls-home-hero-wrapper .hero-hours::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;

    background:
      url("../../../assets/img/hero/papierBG.png")
      center / 100% 100%
      no-repeat;

    border: 7px solid var(--waldhorn-grey);
  }

  /*
   * Der Verlauf darf nicht über Text und Logo liegen.
   * In deinem aktuellen CSS besitzt ::after z-index: 2,
   * während die Inhalte nur z-index: 1 haben.
   */
  .cls-home-hero-wrapper .hero-hours::after {
    content: "";
    display: block;

    position: absolute;
    inset: 7px;
    z-index: -1;

    opacity: .72;

    background: linear-gradient(
      135deg,
      rgba(255, 255, 255, .9) 0%,
      rgba(255, 255, 255, .48) 42%,
      rgba(255, 255, 255, .75) 100%
    );

    pointer-events: none;
  }

  .cls-home-hero-wrapper .hours-header {
    position: relative;
    z-index: 1;

    display: block;
    width: min(58%, 220px);
    height: auto;

    margin: 2px auto 18px;
  }

  .cls-home-hero-wrapper .hero-hours .oeffnungszeiten-block {
    position: relative;
    z-index: 1;
  }

  .cls-home-hero-wrapper
  .hero-hours
  .oeffnungszeiten-title {
    margin-bottom: 12px;

    font-size: 1rem;
    font-weight: 400;
    line-height: 1.3;
  }

  .cls-home-hero-wrapper
  .hero-hours
  .oeffnungszeiten-text p {
    margin: 0 0 4px;
  }

  .cls-home-hero-wrapper
  .hero-hours
  .oeffnungszeiten-hinweis {
    margin-top: 10px;
    padding: 8px 4px 0;

    font-size: .92em;
  }

  .cls-home-hero-wrapper .hero-hours .trenner {
    height: 36px;
    margin-top: 8px;
  }
}




footer .oeffnungszeiten-block .oeffnungszeiten-title{
    font-size: 2rem;
  margin-bottom: 1rem;
  font-weight: 100;
  text-transform: uppercase;
}

footer .oeffnungszeiten-block .oeffnungszeiten-text p{
  font-size: 1.2rem;
  text-decoration: ;
  margin: 0 0 .35rem 0;
}

footer .oeffnungszeiten-hinweis{
  font-size: 1.1rem;
   margin-top: .75rem;
  padding: 0;
  border-left: 0px solid var(--waldhorn-red);
  background: rgba(239,232,234,0);
}



@media (max-width: 1200px) {

footer .oeffnungszeiten-block .oeffnungszeiten-title{
    font-size: 1.8rem;
 
}

footer .oeffnungszeiten-block .oeffnungszeiten-text p{
  font-size: 1rem;
 
}

footer .oeffnungszeiten-hinweis{
  font-size: 1.1rem;
   
}
}