.text-block { 
  display:flex; 
  flex-direction:column; 
}

.headline { 
  font-size:1.5em; 
  letter-spacing:0.5em; 
  font-weight:300; 
  color:#81162b; 
  line-height:1; 
}

#about-flow { 
  font-size:1em; 
  font-weight:300; 
  color:#616161; 
  line-height:1.4; 
  margin-top:1rem; 
  max-width:180ch; 
  text-align:left; 
}

.fett{ 
  font-weight:bold; 
  color:#81162b; 

}
p.blocksatz {
    text-align: justify;
    hyphens: auto;
    text-justify: inter-word;
    margin-bottom: 1em; 
}

.bottomline {
  font-size: 0.7em;
  text-align: right;
  color: #888888;           
  margin: 20px auto;        
  max-width: 550px;       
  width: 100%;  
  
}

a[href^="tel"] {
  color: inherit;         
  text-decoration: none;  
}

.address-line{
  margin:0;
  line-height:1.2;
  color:#616161;
}

.interactive-container{
  max-width:900px;
  margin:10px auto;  
  border-radius:12px;
  overflow:hidden;
  position:relative;
  box-shadow:0 4px 12px rgba(0,0,0,0.25);
  display:flex;
}

.image {
  flex: 1;
  height: 400px;
  background-size: cover;
  background-position: center;
  transition: flex .6s ease, filter 0.5s ease; 
}


.top-bar{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:50px;
  background:rgba(0,0,0,0.55);
  z-index:5;              
}

/* Standorttexte */
.loc-btn {
  color: white;
  font-size: 18px;
  cursor: pointer;
  padding: 4px 6px;
  transition: color 0.4s ease; 
  position: relative;
}

#btn1{
  position:absolute;
  left:10px;   
}

#btn2{
  position:absolute;
  right:10px;   
}


.active-line{
  position:absolute;
  bottom:6px;
  height:3px;
  background:#ffffff;
  border-radius:2px;
  transition:left .45s ease, width .45s ease, opacity .45s ease;
  opacity:0;      
}

.active-line.visible{
  opacity:1;      
}


.active-line.visible{
  opacity:1;
  transform:scaleX(1);
}


.divider{
  position:absolute;
  top:0;
  bottom:0;
  width:10px;
  background-color:rgba(255,255,255,0.7);
  left:50%;
  cursor:pointer;
  transition:left 0.6s ease;
}


.contact{
  position:absolute;
  bottom:10px;
  padding:16px;
  background:rgba(0,0,0,.8);
  color:white;
  border-radius:6px;
  max-width:420px;
  opacity:0;
  transition:opacity 0.5s ease, left 0.5s ease, right 0.5s ease; 
  font-size:0.9rem;
  line-height:1.3;
}


.contact.left {
  left:10px;
  right:auto;
}

.contact.right {
  right:10px;
  left:auto;
}

.location-label{
  position:absolute;
  top:50px;              
  font-weight: normal;    
  font-size:1.2rem;
  color:#999999;          
  transition: color 0.4s ease, opacity 0.5s ease;
  opacity:0;               
  z-index:4;              
}

.location-label.left{
  left:10px;
  right:auto;
}

.location-label.right{
  right:10px;
  left:auto;
}


#destinationText,
#belowText {
  
  font-size: 1em;
  font-weight: 300;
  color: #616161;
  line-height: 1.4;
  margin-top: 3rem;
  max-width: 180ch;
  text-align: left;

 
  opacity: 0;
  transition: opacity 0.5s ease;
}


.click-hint {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 40px;      
  height: 40px;
  transform: translate(-50%, -50%);
  pointer-events: none;
}


.click-hint::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, 0.5);
  background: transparent;
  animation: pulse-ring 2.5s linear infinite; 
}


#btn1 .click-hint::after { animation-delay: 0.3s; }

#btn2 .click-hint::after { animation-delay: 0.5s; }

@keyframes pulse-ring {
  0% {
    transform: scale(0.8);
    opacity: 0.6;
  }
  50% {
    transform: scale(1.6);
    opacity: 0.4;
  }
  100% {
    transform: scale(2.2);
    opacity: 0;
  }
}