@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/_woff/v2/Montserrat_wght__1/Montserrat_wght__1-english.woff2') format('woff2');
  unicode-range: U+0020-007F;
}

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/_woff/v2/Montserrat_wght__1/Montserrat_wght__1-rest-latin.woff2') format('woff2');
  unicode-range: U+0080-024F;
}

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/_woff/v2/Montserrat_wght__1/Montserrat_wght__1-english.woff2') format('woff2');
  unicode-range: U+0020-007F;
}

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/_woff/v2/Montserrat_wght__1/Montserrat_wght__1-rest-latin.woff2') format('woff2');
  unicode-range: U+0080-024F;
}

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/_woff/v2/Montserrat_wght__1/Montserrat_wght__1-english.woff2') format('woff2');
  unicode-range: U+0020-007F;
}

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/_woff/v2/Montserrat_wght__1/Montserrat_wght__1-rest-latin.woff2') format('woff2');
  unicode-range: U+0080-024F;
}

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/_woff/v2/Montserrat_wght__1/Montserrat_wght__1-english.woff2') format('woff2');
  unicode-range: U+0020-007F;
}

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/_woff/v2/Montserrat_wght__1/Montserrat_wght__1-rest-latin.woff2') format('woff2');
  unicode-range: U+0080-024F;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/_woff/v2/Inter_1/Inter_1-english.woff2') format('woff2');
  unicode-range: U+0020-007F;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/_woff/v2/Inter_1/Inter_1-rest-latin.woff2') format('woff2');
  unicode-range: U+0080-024F;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/_woff/v2/Inter_1/Inter_1-english.woff2') format('woff2');
  unicode-range: U+0020-007F;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/_woff/v2/Inter_1/Inter_1-rest-latin.woff2') format('woff2');
  unicode-range: U+0080-024F;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/_woff/v2/Inter_1/Inter_1-english.woff2') format('woff2');
  unicode-range: U+0020-007F;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/_woff/v2/Inter_1/Inter_1-rest-latin.woff2') format('woff2');
  unicode-range: U+0080-024F;
}

@layer base {
  html {
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  body {
    @apply font-montserrat text-base bg-white text-gray-900;
  }

  h1, h2, h3, h4, h5, h6 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600; /* SemiBold */
  }

  h2 {
    font-size: 35px !important;
  }
}



@layer components {
  .nav-blur {
    backdrop-filter: blur(27.1px);
    -webkit-backdrop-filter: blur(27.1px);
  }
  .btn-primary {
    @apply inline-flex items-center justify-center px-6 py-3 bg-medivise-primary text-white font-medium rounded-lg hover:bg-medivise-primary-dark transition-colors duration-200;
  }

  .btn-outline {
    @apply inline-flex items-center justify-center px-6 py-3 border-2 border-medivise-primary text-medivise-primary font-medium rounded-lg hover:bg-medivise-primary hover:text-white transition-colors duration-200;
  }

  .card {
    @apply bg-white rounded-xl shadow-lg overflow-hidden transition-transform duration-300 hover:scale-105;
  }

  .card-product {
    @apply bg-medivise-bg-light/50 backdrop-blur-sm rounded-xl p-6;
  }

  .feature-icon {
    @apply w-12 h-12 text-medivise-accent;
  }
}

@layer utilities {
  .text-gradient-medivise {
    @apply bg-gradient-to-r from-medivise-primary to-medivise-accent bg-clip-text text-transparent;
  }

  section,
  .card {
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 1.2s ease-out, transform 1.2s ease-out;
  }

  section.animate-fade-in,
  .card.animate-fade-in {
    opacity: 1 !important;
    transform: translateY(0) !important;
  }

  .animate-slide-in-left {
    animation: slideInLeft 0.6s ease-out;
  }

  @keyframes slideInLeft {
    from {
      opacity: 0;
      transform: translateX(-30px);
    }
    to {
      opacity: 1;
      transform: translateX(0);
    }
  }

  .animate-slide-in-right {
    animation: slideInRight 0.6s ease-out;
    }

  @keyframes slideInRight {
    from {
      opacity: 0;
      transform: translateX(30px);
    }
    to {
      opacity: 1;
      transform: translateX(0);
    }
  }
}

/* ===================================================================
   Custom Scrollbar
   =================================================================== */

::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
  background: #00B2BB;
  border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
  background: #015C6F;
}

/* ===================================================================
   Custom Media Queries
   =================================================================== */

@media (min-width: 1025px) {
  .md\:mb-6 {
    margin-bottom: 1.0rem;
  }
  
  .md\:w-12 {
    width: 4rem;
  }
  
  .md\:h-12 {
    height: 3.7rem;
  }
}

#news-slider {
  width: calc(100% * 7);
  overflow-x: auto;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  scrollbar-color: #00B2BB #dcf5f7;
  margin-top: 10px;
}

#news-slider::-webkit-scrollbar {
  height: 8px;
}

#news-slider::-webkit-scrollbar-track {
  background: #dcf5f7;
  border-radius: 4px;
}

#news-slider::-webkit-scrollbar-thumb {
  background: #00B2BB;
  border-radius: 4px;
}

#news-slider::-webkit-scrollbar-thumb:hover {
  background: #015C6F;
}

@media (max-width: 1024px) {
  #news-slider > article.w-full {
    width: 14.29%;
  }
}

@media (min-width: 1025px) {
  #news-slider {
    width: calc(100% * 7 / 3);
  }
  
  #news-slider > article.md\:w-1\/3 {
    width: 14.29%;
  }
}

.text-2xl {
  font-size: 1.3rem;
  line-height: 2rem;
}

@media (min-width: 375px) {
  #logo-image.sm\:h-9,
  img.sm\:h-9 {
    height: auto !important;
  }
}

#mobile-menu {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  z-index: 9999 !important;
  overflow: hidden;
}

body.menu-open nav {
  z-index: 40 !important;
}

@media (max-width: 1024px) {
  header#home {
    min-height: 100vh;
    padding-bottom: 0;
    display: flex;
    align-items: flex-end;
    justify-content: center;
  }
  
  .hero-content-mobile {
    position: relative;
    bottom: auto;
    left: auto;
    right: auto;
    width: 100%;
    padding: 1rem;
    margin-top: auto;
    margin-bottom: 2rem;
  }
  
  .hero-content-mobile .hero-text-box-wrapper {
    width: 100%;
  }
  
  .hero-content-mobile .hero-text-box {
    margin-top: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  
  /* Desktop: Box links am Rand positioniert, linker Bereich bis zum Rand */
  @media (min-width: 1025px) {
    header#home {
      padding-left: 0 !important;
      padding-right: 0 !important;
      min-height: 100vh;
      display: flex;
      align-items: center;
    }
    .hero-content-mobile {
      max-width: 100% !important;
      padding-left: 0 !important;
      padding-right: 0 !important;
      position: relative;
      margin-top: 0 !important;
      margin-bottom: 0 !important;
      padding-top: 5rem;
      padding-bottom: 5rem;
    }
    .hero-text-box-wrapper {
      position: relative;
    }
    .hero-text-box {
      margin-left: 0 !important;
      margin-right: auto !important;
      max-width: 600px;
      border-top-left-radius: 0 !important;
      border-bottom-left-radius: 0 !important;
      position: relative;
    }
    /* Linker Bereich bis zum Rand durchziehen */
    .hero-text-box-wrapper::before {
      content: '';
      position: absolute;
      left: -100vw;
      top: 0;
      width: 100vw;
      height: 100%;
      background-color: rgba(255, 255, 255, 0.9);
      z-index: -1;
    }
  }

  @media (min-width: 1280px) {
    .lg\:mt-96 {
      margin-top: 8rem !important;
      margin-bottom: 10rem !important;
    }
  }

  .hero-content-mobile h1 {
    font-size: 1.25rem !important;
    line-height: 1.3;
  }
  
  .hero-content-mobile h1 span.text-medivise-primary-dark {
    display: inline !important;
    white-space: nowrap;
  }
  
  .hero-content-mobile h1 span.text-medivise-primary {
    display: inline !important;
    white-space: nowrap;
    margin-top: 0 !important;
  }
  
  #pulse-animation-container {
    display: none !important;
  }
  
  section#einsatzorte {
    padding-top: 2rem !important;
    padding-bottom: 2rem !important;
  }
}

/* --- Hero Container - Mobile (Standard) --- */
.hero-container {
  position: relative;
  width: 100%;
  overflow: hidden;
  min-height: 100vh;
  padding-top: 80px;
}

.hero-container .hero-image-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100%;
  width: 100%;
}

.hero-image-wrapper {
  width: 100%;
  height: 100%;
  position: relative;
}

.hero-img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.hero-img.md\:hidden {
  object-position: center center;
}

.hero-content-box {
  background-color: rgba(255, 255, 255, 0.9);
  padding: 2rem;
  margin: 0 1rem;
  border-radius: 15px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.1);
  z-index: 2;
  position: absolute;
  bottom: 2rem;
  left: 0;
  right: 0;
  width: calc(100% - 2rem);
}

.hero-content-box h1 {
  font-size: 1.25rem !important;
  line-height: 1.3;
  margin-bottom: 1rem;
}

.hero-content-box h1 span {
  display: inline !important;
  white-space: nowrap;
}

.hero-content-box h1 span:last-child {
  margin-top: 0 !important;
}

/* --- Desktop (ab 1025px) --- */
@media (min-width: 1025px) {
  .hero-container {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    align-items: center;
    min-height: 100vh;
    padding-top: 0;
  }

  .hero-image-wrapper {
    grid-column: 1 / -1;
    grid-row: 1 / -1;
    height: 100vh;
    width: 100%;
    order: 0;
  }

  .hero-img.hidden.md\:block {
    height: 100%;
    width: 100%;
    object-fit: cover;
    object-position: top center;
  }

  .hero-content-box {
    grid-column: 1 / -1;
    grid-row: 1 / -1;
    width: auto;
    max-width: 830px;
    margin-left: 0;
    margin-top: 0;
    margin-bottom: 0;
    margin-right: auto;
    padding: 3rem;
    padding-left: 220px;
    z-index: 10;
    position: relative;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-top-right-radius: 15px;
    border-bottom-right-radius: 15px;
    order: 0;
  }

  /* Linker Bereich bis zum Rand durchziehen */
  .hero-content-box::before {
    content: '';
    position: absolute;
    left: -100vw;
    top: 0;
    width: 100vw;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.9);
    z-index: -1;
  }

  .hero-content-box h1 {
    font-size: 2.6rem !important;
    margin-bottom: 1.5rem;
  }

  .hero-content-box h1 span {
    display: block;
    white-space: normal;
  }
}

@media (max-width: 1024px) {
  section#einsatzorte {
    padding-top: 2rem !important;
    padding-bottom: 2rem !important;
  }
}

/* --- Container Setup --- */
.pulse-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  width: 100%;
  position: relative;
  overflow: visible; /* Sichtbar machen, damit nichts abgeschnitten wird */
  min-height: 500px;
  padding: 100px; /* Padding für die expandierenden Ringe */
}

/* --- Das Zentrum (Icon) --- */
.pulse-icon {
  width: 120px;
  height: 120px;
  background-color: #00A9B4; /* Medivise Teal */
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  z-index: 10;
  
  /* DER PERMANENTE RING (STATISCH)
     Größerer Ring, der die Spalte besser ausfüllt
  */
  box-shadow: 0 0 0 100px rgba(0, 169, 180, 0.15); 
}

.pulse-icon img {
  width: 45%;
  height: auto;
  display: block;
  /* logo-icon.svg ist bereits weiß, daher kein Filter nötig */
}

/* --- Die Animation (Wellen) --- */
.pulse-icon::before,
.pulse-icon::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 169, 180, 0.15); /* Gleiche Farbe wie der statische Ring */
  border-radius: 50%;
  z-index: -1; /* Hinter dem Icon */
  opacity: 0;  /* Startet unsichtbar */
  
  /* 5 Sekunden Gesamtzyklus */
  animation: clean-pulse 5s infinite ease-out;
}

/* Der zweite Ring (After) startet leicht verzögert für den "Echo"-Effekt */
.pulse-icon::after {
  animation-delay: 0.6s;
}

/* --- Keyframes --- */
@keyframes clean-pulse {
  0% {
    /* START: Deckungsgleich mit dem statischen Ring */
    /* scale(1) = 120px (Icon) */
    /* Der Schatten macht das Element visuell 320px breit (120 + 100 + 100).
       Scale 2.67 entspricht genau der Kante des statischen Rings (320/120 = 2.67). */
    transform: scale(2.67); 
    opacity: 1; /* Voll sichtbar */
  }
  40% {
    /* ENDE DER BEWEGUNG (nach ca. 2 Sekunden) */
    /* Wächst auf scale 4.5 - angepasst damit nichts abgeschnitten wird */
    transform: scale(4.5); 
    opacity: 0; /* Verblasst komplett */
  }
  100% {
    /* PAUSE: Bleibt unsichtbar bis Sekunde 5 */
    transform: scale(4.5);
    opacity: 0;
  }
}

/* Custom max-width für bessere Platznutzung */
.max-w-7xl {
  max-width: 94rem !important;
}

.max-w-6xl {
  max-width: 90rem !important;
}

/* Besonderheiten-Karten: UL LI Aufzählungszeichen in hellblau */
#besonderheiten ul {
  list-style: none;
  padding-left: 0;
}

#besonderheiten ul li {
  position: relative;
  padding-left: 1.5em;
  margin-bottom: 0.5em;
}

#besonderheiten ul li::before {
  content: "\2022";
  color: #00A9B4;
  font-size: 1.4em;
  position: absolute;
  left: 0;
  top: -0.1em;
  line-height: 1;
}

/* Einsatzorte Toggle Überschriften */
.einsatzort-title {
  font-size: 25px;
  font-weight: 500;
}