:root {
  --tierklinik-blue: #1c3650;
  --tierklinik-lightGrey: #f5f3f3;
  --tierklinik-mediumGrey: #e7e7e7;
  --tierklinik-boxShadow: 3px 3px 3px 0 hsla(0,0%,76%,.4);
  --tierklinik-boxShadowDeep: 2px 2px 2px 0 hsla(0,0%,0%,.15);
  --tierklinik-logoSize: 150px;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body, html {
  height: 100%;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

body {
  font-family: "Open Sans", sans-serif;
  font-weight: 300;
  background: var(--tierklinik-lightGrey);
}

.footer {
  font-size: 14px;
  margin-top: auto;      
  text-align: center;    
  padding: 0.3rem 0;
  background: var(--tierklinik-mediumGrey); 
  width: 100%;
  box-sizing: border-box;
}

.web .footer {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 15px;
}

.footer p {
  padding: 0.5vmax;
}

.web .footer p {
  padding: 0;
}

a, h1, h2, h3, h4, h5, h6 {
  color: var(--tierklink-blue);
}

h1 {
  font-weight: 700;
  font-size: 50px;
  color: var(--tierklinik-blue);
  text-align: center;
  margin: 0;
  /* padding-bottom: 50px; */
  letter-spacing: -0.015em;
}

.web h1 {
  display: none;
}

h2 {
  font-weight: 300;
  font-size: clamp(1.09em, 1.5em, 1.5em);
  color: black;
}

h3 {
  color: var(--tierklinik-blue);
}

.text p {
  margin-top: 15px;
}

.web .text p {
  margin-top: 9px;
}

.text {
  padding: 2.4vmax;
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex-grow: 1; /* Let it fill available space */
}

.web .text {
  padding: 1.9vmax;
}

.info-text .half-line {
  display: block;
  height: 0.5em; /* controls the gap height */
}

.highlight {
  font-weight: 700;
  color: var(--tierklinik-blue);
}

.tierklinik-container {
  display: flex;
  flex-direction: column;
  justify-content: center;  
  height: 100vh; 
  overflow-x: hidden;          
}

.tierklinik-box-container {
  display: flex;
  padding: 0 5vmax;
}

/* .tierklinik-box-container.web-shift { 
  padding-left: 14.5vw;
  padding-right: 1.5vw;
} */

.web .tierklinik-box-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  padding-top: 30px;
  padding-bottom: 30px;
}

/* Box 1: top-left */
.web .tierklinik-box-container .tierklinik-box:nth-child(1) {
  grid-area: 1 / 1 / 2 / 2;
}

/* Box 2: bottom-left */
.web .tierklinik-box-container .tierklinik-box:nth-child(2) {
  grid-area: 2 / 1 / 3 / 2;
}

/* Box 3: top-right */
.web .tierklinik-box-container .tierklinik-box:nth-child(3) {
  grid-area: 1 / 2 / 2 / 3;
}

/* Box 4: bottom-right */
.web .tierklinik-box-container .tierklinik-box:nth-child(4) {
  grid-area: 2 / 2 / 3 / 3;
}

.tierklinik-box {
  background-color: white;
  font-size: 1.18vw;
  width: 30vw;
  margin: 0.9vw;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: stretch;
  text-align: left;
  position: relative;
  min-height: 21vmax; 
  box-shadow: var(--tierklinik-boxShadow);
  opacity: 0;
  transform: translateY(60px);
  animation: fadeInUp .5s ease-out forwards;
  cursor: pointer;
  text-shadow: 0px 0px 5px white;
}

.web .tierklinik-box {
  margin: 0.6vw;
  min-height: 0;
  overflow: hidden;
}

.tierklinik-box#ambulance {
  font-size: 1.3vw;
}

.web .tierklinik-box#ambulance {
  font-size: 1.18vw;
}

.tierklinik-box.night {
  background-color: var(--tierklinik-blue);
  color: white;
  text-shadow: 0px 0px 5px var(--tierklinik-blue);
}

.tierklinik-box.night h2 {
  color: white;
}

.tierklinik-box.night h3,
.tierklinik-box.night .highlight {
  color: rgba(255, 255, 255, 0.77);
}

.web .tierklinik-box-container .tierklinik-box {
  width: auto;
}

.tierklinik-box:nth-child(1) {
  animation-delay: 0.15s;
}

.tierklinik-box:nth-child(2) {
  animation-delay: 0.3s;
}

.tierklinik-box:nth-child(3) {
  animation-delay: 0.45s;
}

.tierklinik-box:nth-child(4) {
  animation-delay: 0.6s;
}

@keyframes fadeInUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.ampel {
  background: var(--tierklinik-blue);
  width: 15%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0.9vw;
  padding: 1.05vmax;
  margin: auto 0;
  flex-shrink: 0;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.33)
;}

.light {
  width: 100%;
  padding-top: 100%; 
  border-radius: 50%;
  position: relative;
  background-color: currentColor; 
  opacity: 0.15;
  transition: opacity 0.3s, box-shadow 0.3s;
}

.light::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: inherit;
}

.red {
  background-color: #E74C3C;
}

.yellow {
  background-color: #F39C12;
}

.green {
  background-color: #2ECC71;
}

.light.active {
  opacity: 1;
}


/* HEADER */
.top-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1rem;
  background-color: var(--tierklinik-blue);
  color: white;
  height: 50px;
  position: relative;
  z-index: 100;
}
/* Logo container */
.logo-container {
  display: flex;
  align-items: center;
  height: var(--tierklinik-logoSize);          
  margin: 5px;
  width: var(--tierklinik-logoSize);
}

.web .logo-container {        
  margin: 0;
}

.logo-wrapper {
  height: var(--tierklinik-logoSize);           
  width: var(--tierklinik-logoSize);
  margin-top: 150px;
  user-select: none;
  -webkit-user-select: none; /* Safari */
  -moz-user-select: none;    /* Firefox */
  -ms-user-select: none;
  cursor: pointer;  
}

.web .logo-wrapper {
  margin-top: 140px;
}

.logo {
  background-color: white;
  height: 150px;
  width: 150px;
  box-shadow: var(--tierklinik-boxShadowDeep);
  padding: 7px; 
}
.web .top-header {
  border-bottom: 0.5px solid rgba(245, 242, 242, 0.3);
}
.web .logo {
  height: 4.5vw;
  width: 4.5vw;
  padding: 0.09vw;
}
/* Contact details on the right */
.header-contact-details-list {
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: right;
}
.header-contact-details-list-item-link-icon {
  font-size: 14px;
  font-weight: 700;
  height: 14px;
  letter-spacing: 0.2px;
}
.header-contact-details-list-item-link-icon svg {
  fill: white;
  height: 14px;
  transform: translateY(2px);
}
.label {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.2px;
}
.web .label {
  font-size: 13px;
  letter-spacing: 0.3px;
}

@media (max-width: 991px) {
  .web .logo-wrapper {
    margin-top: 145px;
  }
  .web .logo {
    height: 75px;
    width: 75px;
    padding: 4px;
  }
  h1 {
    font-size: 36px;
    padding: 30px;
    padding-bottom: 0;
    padding-top: 145px;
    margin-bottom: -15px;
  }

  h2, h3 {
    font-size: 21px;
  }

  .text p {
    font-size: 14px;
  }

  .footer p {
    font-size: 14px;
    line-height: 1.5;
  }

  .tierklinik-container {
    height: auto;
    justify-content: flex-start;           
  }
  .tierklinik-box-container {
    flex-direction: column;    
    align-items: center;
    gap: 1.5rem;
    margin-top: 0;
  }
  .web .tierklinik-box-container {
    display: block;
    padding: 0 2.5vmax;
    margin-top: 50px;
  }

  .tierklinik-box {
    width: 90vw;            
    height: auto;
    margin: 1.5vw;
    flex-direction: row;      
    align-items: center;
    justify-content: space-between;
    background-position: right !important;
  }

  .ampel {
    width: 7.5vmax;              
    height: 100%;
    flex-direction: column;       
    justify-content: center;
    align-items: center;
    padding: 1rem 0;
    gap: .5rem;
    padding: 1.5vmax;
  }

  .light {
    width: 100%;
    padding-top: 100%;         
  }
}

@media (max-width: 499px) {
  .label {
    display: none;
  }
}

/* FONTS */
/* open-sans-300 */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300;
  src: url('fonts/open-sans-v43-latin-300.woff2') format('woff2');
}
/* open-sans-300italic */
@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 300;
  src: url('fonts/open-sans-v43-latin-300italic.woff2') format('woff2');
}
/* open-sans-regular */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/open-sans-v43-latin-regular.woff2') format('woff2');
}
/* open-sans-italic */
@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 400;
  src: url('fonts/open-sans-v43-latin-italic.woff2') format('woff2');
}
/* open-sans-500 */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 500;
  src: url('fonts/open-sans-v43-latin-500.woff2') format('woff2');
}
/* open-sans-500italic */
@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 500;
  src: url('fonts/open-sans-v43-latin-500italic.woff2') format('woff2');
}
/* open-sans-600 */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 600;
  src: url('fonts/open-sans-v43-latin-600.woff2') format('woff2');
}
/* open-sans-600italic */
@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 600;
  src: url('fonts/open-sans-v43-latin-600italic.woff2') format('woff2');
}
/* open-sans-700 */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 700;
  src: url('fonts/open-sans-v43-latin-700.woff2') format('woff2');
}
/* open-sans-700italic */
@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 700;
  src: url('fonts/open-sans-v43-latin-700italic.woff2') format('woff2');
}
/* open-sans-800 */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 800;
  src: url('fonts/open-sans-v43-latin-800.woff2') format('woff2');
}
/* open-sans-800italic */
@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 800;
  src: url('fonts/open-sans-v43-latin-800italic.woff2') format('woff2');
}