/* Typography / icons */
.material-symbols-outlined{font-variation-settings:'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24}

/* Layout helpers */
html{scroll-behavior:smooth}
#sidebar{transition:transform .4s cubic-bezier(.25,.1,.25,1)}
#sidebar.translate-x-full{transform:translateX(100%)}

/* Reveal-on-scroll */
.fade-in-element{opacity:0;transition:opacity 700ms cubic-bezier(.25,.1,.25,1),transform 700ms cubic-bezier(.25,.1,.25,1);transform:translateY(20px)}
.fade-in-element.is-visible{opacity:1;transform:translateY(0)}

/* Service tiles overlay */
.service-tile{background-size:cover;background-position:center;position:relative;overflow:hidden}
.service-tile::before{content:'';position:absolute;inset:0;background-color:rgba(246,251,249,.8);transition:background-color .3s ease}
.dark .service-tile::before{background-color:rgba(10,20,18,.8)}
.service-tile:hover::before{background-color:rgba(246,251,249,.6)}
.dark .service-tile:hover::before{background-color:rgba(10,20,18,.6)}
.service-tile>*{z-index:1}

/* Background pan animation */
@keyframes pan{from{background-position:0% 50%} to{background-position:100% 50%}}
.animate-pan{animation:pan 15s linear infinite alternate}

/* Hero pan animation - responsive */
@keyframes hero-pan-mobile {
  0% { background-position: 0% center; }
  100% { background-position: 100% center; }
}
@keyframes hero-pan-mobile-md {
  0% { background-position: 0% center; }
  100% { background-position: 75% center; }
}
@keyframes hero-pan-mobile-lg {
  0% { background-position: 0% center; }
  100% { background-position: 60% center; }
}
@keyframes hero-pan-tablet {
  0% { background-position: 0% center; }
  100% { background-position: 60% center; }
}
@keyframes hero-pan-tablet-lg {
  0% { background-position: 0% center; }
  100% { background-position: 40% center; }
}
@keyframes hero-pan-desktop {
  0% { background-position: 0% center; }
  100% { background-position: 25% center; }
}

.animate-hero-pan {
  animation: hero-pan-mobile 30s linear infinite alternate;
}

@media (min-width: 480px) {
  .animate-hero-pan {
    animation: hero-pan-mobile-md 28s linear infinite alternate;
  }
}

@media (min-width: 640px) {
  .animate-hero-pan {
    animation: hero-pan-mobile-lg 26s linear infinite alternate;
  }
}

@media (min-width: 820px) {
  .animate-hero-pan {
    animation: hero-pan-tablet 24s linear infinite alternate;
  }
}

@media (min-width: 1024px) {
  .animate-hero-pan {
    animation: hero-pan-tablet-lg 20s linear infinite alternate;
  }
}

@media (min-width: 1280px) {
  .animate-hero-pan {
    animation: hero-pan-desktop 15s linear infinite alternate;
  }
}

/* Desktop grid offsets on #leistungen */
@media (min-width:768px){
  #leistungen .grid > a:nth-child(1){--tw-translate-y:-20px;transform:translate(var(--tw-translate-x),var(--tw-translate-y))}
  #leistungen .grid > a:nth-child(2){--tw-translate-y:20px;transform:translate(var(--tw-translate-x),var(--tw-translate-y))}
  #leistungen .grid > a:nth-child(3){--tw-translate-y:-20px;transform:translate(var(--tw-translate-x),var(--tw-translate-y))}
  #leistungen .grid > a:hover{--tw-translate-y:0px!important}
}

.w-6 { width: 1.5rem; } .h-6 { height: 1.5rem; }
.w-8 { width: 2rem; } .h-8 { height: 2rem; }

:root {
  --primary: #0E7A6F;          
  --primary-600: #0C695F;
  --primary-700: #0A5A52;
  --on-surface: #111827;      
  --on-surface-variant: #374151; 

  --surface: #ffffff;
  --background: #fafafa;
}
:root.dark {
  --on-surface: #F3F4F6;               
  --on-surface-variant: #E5E7EB;      
  --surface: #111827;
  --background: #0B1220;
}

.text-on-surface-variant-light { color: var(--on-surface-variant) !important; }
.dark .text-on-surface-variant-dark { color: var(--on-surface-variant) !important; }

.text-on-surface-light { color: var(--on-surface) !important; }
.dark .text-on-surface-dark { color: var(--on-surface) !important; }

footer a,
footer .text-on-surface-variant-light,
footer .text-on-surface-variant-dark {
  color: var(--on-surface) !important;
}

a.btn-primary,
a[href="#"].btn-primary,
a[role="button"].btn-primary,
button.btn-primary {
  background-color: var(--primary-700) !important;
  color: #fff !important;
}
a.btn-primary:hover { filter: brightness(0.95); }

/* 5) Mobile-Sidebar-Links (bg-primary/10 + text-primary) – Text dunkler */

#sidebar a:hover { 
  background: rgba(14,122,111,0.10) !important;  
}

/* 6) Dark/Light-Toggle Buttons */
#light-mode-toggle, #dark-mode-toggle {
  color: var(--on-surface) !important;
}



body.bg-background-light { color: var(--on-surface) !important; }

.max-w-80p { max-width: 80% !important; }
.max-h-80p { max-height: 80% !important; }

.text-glow-outline {
  text-shadow:
    0 0 4px rgba(0, 0, 0, 0.8),
    -1px -1px 2px rgba(0, 0, 0, 0.6),
     1px -1px 2px rgba(0, 0, 0, 0.6),
    -1px  1px 2px rgba(0, 0, 0, 0.6),
     1px  1px 2px rgba(0, 0, 0, 0.6);
}