/* Modern Fancy Theme for ETS Entrümpelung */
:root {
  --brand-dark: #0a192f;
  --brand-green: #00f5c3;
  --brand-cyan: #00c2f5;
  --brand-light: #f8fafc;
  --slate-light: #e2e8f0;
  --slate-dark: #475569;
  --glass: rgba(255, 255, 255, 0.7);
  --shadow-color: rgba(0, 245, 195, 0.2);
}

body {
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  background: #fff;
  color: var(--brand-dark);
}

/* Skip-Link (A11y) */
.skip-link {
  position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden;
}
.skip-link:focus {
  position: fixed; left: 1rem; top: 1rem; width: auto; height: clamp(14rem, 28vw, 24rem); padding: .5rem .75rem;
  background: #fff; border: 2px solid var(--brand-green); border-radius: .5rem; z-index: 10000;
}

/* Buttons */
.btn-gradient {
  display: inline-flex; align-items: center; gap: .7rem; padding: .8rem 1.6rem; border-radius: 9999px;
  background: linear-gradient(90deg, var(--brand-green), var(--brand-cyan)); /* Updated gradient */
  background-size: 200% 100%; /* For shimmer effect */
  color: #000; font-weight: 600; font-size: 1.2rem;
  box-shadow: 0 15px 45px var(--shadow-color); /* Enhanced shadow */
  transition: transform .3s cubic-bezier(.2,.9,.3,1), box-shadow .3s cubic-bezier(.2,.9,.3,1), background-position .6s ease; /* Smoother transition */
}
.btn-gradient:hover {
  transform: translateY(-7px) scale(1.07); /* More pronounced lift */
  box-shadow: 0 35px 80px var(--shadow-color); /* More pronounced shadow on hover */
  background-position: -100% 0; /* Shimmer effect */
}

.btn-ghost {
  padding: .7rem 1.2rem; border-radius: 14px; border: 1px solid rgba(11,37,69,0.09); background: transparent;
  color: #000; font-weight: 500; transition: border .18s, color .18s, transform .18s;
}
.btn-ghost:hover {
  border-color: var(--brand-green);
  color: var(--brand-green);
  transform: translateY(-2px); /* Subtle lift */
}

/* Cards & Deko */
.card-fancy {
  border-radius: 1.2rem; padding: 1.5rem;
  background: linear-gradient(180deg, var(--glass), var(--brand-light) 98%); /* Clearer glass effect */
  border: 1px solid rgba(11,37,69,0.05); /* Lighter border */
  box-shadow: 0 25px 60px var(--shadow-color); /* Enhanced shadow */
  transition: transform .3s cubic-bezier(.2,.9,.3,1), box-shadow .3s cubic-bezier(.2,.9,.3,1), border-color .3s ease;
  position: relative; overflow: hidden;
}
.card-fancy::before {
  content: ""; position: absolute; top: -50px; right: -50px; width: 100px; height: 100px;
  background: radial-gradient(circle, var(--brand-cyan) 0%, transparent 70%); opacity: .2; z-index: 0; /* More visible */
  transform: rotate(45deg); /* Initial rotation */
  transition: transform .5s ease-out;
}
.card-fancy:hover {
  transform: translateY(-15px) scale(1.04); /* More pronounced lift */
  box-shadow: 0 45px 100px var(--shadow-color); /* Enhanced shadow on hover */
  border-color: var(--brand-green); /* Border color change on hover */
}
.card-fancy:hover::before {
  transform: rotate(135deg); /* Rotate on hover */
}

.icon-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1rem; /* Adjust as needed */
}

.icon-wrapper img {
  background: linear-gradient(45deg, var(--brand-green), var(--brand-cyan));
  border-radius: 50%;
  padding: 0.85rem; /* Adjust padding to make the circle larger */
  box-shadow: 0 10px 25px var(--shadow-color);
  transition: transform 0.3s ease-in-out;
}

.card-fancy:hover .icon-wrapper img {
  transform: scale(1.15) rotate(5deg); /* More pronounced scale and subtle rotation */
}

.fancy-sep {
  height: 8px; border-radius: 10px; /* Taller */
  background: linear-gradient(90deg, var(--brand-green), var(--brand-cyan)); /* More vibrant gradient */
  width: 120px; margin-top: 0.8rem; margin-bottom: 2rem; /* Wider and more margin */
}

/* Reveal-Animation */
.reveal {
  opacity: 0; transform: translateY(30px) scale(.98); /* More pronounced initial state */
  transition: opacity .8s cubic-bezier(.2,.9,.3,1), transform .8s cubic-bezier(.2,.9,.3,1); /* Smoother transition */
  will-change: opacity, transform;
}
.reveal.show { opacity: 1; transform: translateY(0) scale(1); }

/* Form Controls */
input.border, textarea.border {
  border-radius: 12px; border: 1px solid rgba(11,37,69,0.10); padding: .85rem; font-size: 1rem;
  background: #fff;
  transition: border-color .3s, box-shadow .3s; /* Add transition */
}
input:focus, textarea:focus {
  outline: none; box-shadow: 0 0 0 4px rgba(0, 194, 245, 0.15); border-color: var(--brand-cyan); /* Enhanced focus style */
}

/* Feld-Fehler & Zustände */
.field-error { margin-top: .35rem; font-size: .875rem; color: #dc2626; min-height: 1.1em; }
.is-invalid { border-color: #dc2626 !important; box-shadow: 0 0 0 2px rgba(220,38,38,.12); }
.is-valid   { border-color: #22c55e !important; }

/* Hero Hintergrund-Blob (dezent – kann bleiben) */
.hero-gradient-bg {
  position: absolute; right: -8%; top: 8%; width: 60%; height: 60%;
  background:
    radial-gradient(closest-side, rgba(0, 245, 195, 0.18), transparent 30%), /* Adjusted opacity */
    radial-gradient(closest-side, rgba(0, 194, 245, 0.15), transparent 40%); /* Adjusted opacity */
  filter: blur(45px); pointer-events: none; z-index: 0; /* More blur */
}

/* Sticky CTA (mobil unten) */
.sticky-cta {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 50;
  display: grid; grid-template-columns: 1fr 1.4fr; gap: 8px;
  background: rgba(255,255,255,.95); backdrop-filter: blur(10px); /* More opaque and blur */
  padding: .65rem .85rem; border-top: 1px solid rgba(11,37,69,.1); /* Slightly more padding and border */
}
.sticky-cta a {
  display: inline-flex; align-items: center; justify-content: center;
  padding: .8rem 1rem; border-radius: 9999px; font-weight: 600; text-decoration: none;
}
.sticky-cta .cta-phone { background: #fff; color: var(--brand-dark); border: 1px solid rgba(11,37,69,.15); } /* Stronger border */
.sticky-cta .cta-offer { background: linear-gradient(90deg, var(--brand-green), var(--brand-cyan)); color: #000; } /* Updated gradient */

/* WhatsApp FAB */
.whatsapp-fab {
  position: fixed; right: 20px; bottom: 220px; width: 56px; height: 56px; border-radius: 50%; /* Slightly larger */
  display: flex; align-items: center; justify-content: center;
  background: #25D366; color: #000; box-shadow: 0 12px 35px var(--shadow-color); /* Enhanced shadow */
  text-decoration: none; z-index: 51;
  transition: transform .2s ease-in-out, box-shadow .2s ease-in-out; /* Add transition */
}
.whatsapp-fab:hover {
  transform: translateY(-3px) scale(1.05); /* Subtle lift and scale */
  box-shadow: 0 18px 45px var(--shadow-color); /* More pronounced shadow on hover */
}

/* Fokus-Sichtbarkeit */
.btn-gradient:focus-visible,
.btn-ghost:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px var(--shadow-color); /* Enhanced focus style */
  border-color: var(--brand-green);
}

/* Bewegung reduzieren */
@media (prefers-reduced-motion: reduce) {
  .reveal { transition: none !important; }
  .hero-slide { transition: none !important; }
}

/* Responsive Feinschliff */
@media (max-width: 768px) {
  .card-fancy { padding: 1.1rem; }
}

/* Add padding to body for sticky CTA on mobile */
@media (max-width: 767px) { /* Using 767px to match md:hidden breakpoint */
  body {
    padding-bottom: 90px; /* Adjust this value if the CTA height is different */
  }
}

/* === Hero-Slider (Owl Carousel) === */
.hero-slider .item {
  height: clamp(11rem, 19vw, 17rem);
  overflow: hidden;
}
.hero-slider .hero-slide {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.05);
  transition: transform 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
}

.hero-slider .item:hover .hero-slide {
  transform: scale(1);
}

/* leichte Abdunkelung für bessere Lesbarkeit des Overlays */
.hero-dim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0) 50%); /* Darker gradient from bottom */
  pointer-events: none;
}

@media (min-width: 768px) {
  .hero-slider .item { height: clamp(13rem, 17vw, 19rem); }
}

/* Hide Owl Carousel dots */
.owl-dots {
  display: none;
}

.nav-link {
  font-size: 1.2rem;
  position: relative;
  transition: color 0.3s ease-in-out;
}

.nav-link::after {
  content: '';
  position: absolute;
  width: 0;
  height: 3px; /* Slightly thicker underline */
  bottom: -7px; /* Lower the underline */
  left: 50%; /* Start from center */
  transform: translateX(-50%); /* Center the underline */
  background-color: var(--brand-green);
  transition: width 0.3s ease-in-out;
}

.nav-link:hover::after {
  width: 100%;
}

/* Custom styles for numbers in circles in "Ablauf - Schritt für Schritt" section */
/* This targets the specific span element within the ordered list in the "Ablauf" section */
section#ablauf ol li span {
  color: #000 !important; /* Set color to black and override Tailwind's text-white */
}

/* Navigation Styling - Schmaler Header */
header .flex.justify-between.items-center {
  padding-top: 0.25rem !important;  /* py-1 statt py-2 für schmaleren Header */
  padding-bottom: 0.25rem !important;
}

/* Logo etwas kleiner für schmaleren Header */
header img[alt*="ETS Entrümpelung"] {
  height: 4rem !important;  /* h-16 statt h-24 */
  width: 4rem !important;
}

/* Modern Fancy Theme for ETS Entrümpelung */
:root {
  --brand-dark: #0a192f;
  --brand-green: #00f5c3;
  --brand-cyan: #00c2f5;
  --brand-light: #f8fafc;
  --slate-light: #e2e8f0;
  --slate-dark: #475569;
  --glass: rgba(255, 255, 255, 0.7);
  --shadow-color: rgba(0, 245, 195, 0.2);
}

body {
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  background: #fff;
  color: var(--brand-dark);
}

/* Skip-Link (A11y) */
.skip-link {
  position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden;
}
.skip-link:focus {
  position: fixed; left: 1rem; top: 1rem; width: auto; height: clamp(14rem, 28vw, 24rem); padding: .5rem .75rem;
  background: #fff; border: 2px solid var(--brand-green); border-radius: .5rem; z-index: 10000;
}

/* Buttons */
.btn-gradient {
  display: inline-flex; align-items: center; gap: .7rem; padding: .8rem 1.6rem; border-radius: 9999px;
  background: linear-gradient(90deg, var(--brand-green), var(--brand-cyan)); /* Updated gradient */
  background-size: 200% 100%; /* For shimmer effect */
  color: #000; font-weight: 600; font-size: 1.2rem;
  box-shadow: 0 15px 45px var(--shadow-color); /* Enhanced shadow */
  transition: transform .3s cubic-bezier(.2,.9,.3,1), box-shadow .3s cubic-bezier(.2,.9,.3,1), background-position .6s ease; /* Smoother transition */
}
.btn-gradient:hover {
  transform: translateY(-7px) scale(1.07); /* More pronounced lift */
  box-shadow: 0 35px 80px var(--shadow-color); /* More pronounced shadow on hover */
  background-position: -100% 0; /* Shimmer effect */
}

.btn-ghost {
  padding: .7rem 1.2rem; border-radius: 14px; border: 1px solid rgba(11,37,69,0.09); background: transparent;
  color: #000; font-weight: 500; transition: border .18s, color .18s, transform .18s;
}
.btn-ghost:hover {
  border-color: var(--brand-green);
  color: var(--brand-green);
  transform: translateY(-2px); /* Subtle lift */
}

/* Cards & Deko */
.card-fancy {
  border-radius: 1.2rem; padding: 1.5rem;
  background: linear-gradient(180deg, var(--glass), var(--brand-light) 98%); /* Clearer glass effect */
  border: 1px solid rgba(11,37,69,0.05); /* Lighter border */
  box-shadow: 0 25px 60px var(--shadow-color); /* Enhanced shadow */
  transition: transform .3s cubic-bezier(.2,.9,.3,1), box-shadow .3s cubic-bezier(.2,.9,.3,1), border-color .3s ease;
  position: relative; overflow: hidden;
}
.card-fancy::before {
  content: ""; position: absolute; top: -50px; right: -50px; width: 100px; height: 100px;
  background: radial-gradient(circle, var(--brand-cyan) 0%, transparent 70%); opacity: .2; z-index: 0; /* More visible */
  transform: rotate(45deg); /* Initial rotation */
  transition: transform .5s ease-out;
}
.card-fancy:hover {
  transform: translateY(-15px) scale(1.04); /* More pronounced lift */
  box-shadow: 0 45px 100px var(--shadow-color); /* Enhanced shadow on hover */
  border-color: var(--brand-green); /* Border color change on hover */
}
.card-fancy:hover::before {
  transform: rotate(135deg); /* Rotate on hover */
}

.icon-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1rem; /* Adjust as needed */
}

.icon-wrapper img {
  background: linear-gradient(45deg, var(--brand-green), var(--brand-cyan));
  border-radius: 50%;
  padding: 0.85rem; /* Adjust padding to make the circle larger */
  box-shadow: 0 10px 25px var(--shadow-color);
  transition: transform 0.3s ease-in-out;
}

.card-fancy:hover .icon-wrapper img {
  transform: scale(1.15) rotate(5deg); /* More pronounced scale and subtle rotation */
}

.fancy-sep {
  height: 8px; border-radius: 10px; /* Taller */
  background: linear-gradient(90deg, var(--brand-green), var(--brand-cyan)); /* More vibrant gradient */
  width: 120px; margin-top: 0.8rem; margin-bottom: 2rem; /* Wider and more margin */
}

/* Reveal-Animation */
.reveal {
  opacity: 0; transform: translateY(30px) scale(.98); /* More pronounced initial state */
  transition: opacity .8s cubic-bezier(.2,.9,.3,1), transform .8s cubic-bezier(.2,.9,.3,1); /* Smoother transition */
  will-change: opacity, transform;
}
.reveal.show { opacity: 1; transform: translateY(0) scale(1); }

/* Form Controls */
input.border, textarea.border {
  border-radius: 12px; border: 1px solid rgba(11,37,69,0.10); padding: .85rem; font-size: 1rem;
  background: #fff;
  transition: border-color .3s, box-shadow .3s; /* Add transition */
}
input:focus, textarea:focus {
  outline: none; box-shadow: 0 0 0 4px rgba(0, 194, 245, 0.15); border-color: var(--brand-cyan); /* Enhanced focus style */
}

/* Feld-Fehler & Zustände */
.field-error { margin-top: .35rem; font-size: .875rem; color: #dc2626; min-height: 1.1em; }
.is-invalid { border-color: #dc2626 !important; box-shadow: 0 0 0 2px rgba(220,38,38,.12); }
.is-valid   { border-color: #22c55e !important; }

/* Hero Hintergrund-Blob (dezent – kann bleiben) */
.hero-gradient-bg {
  position: absolute; right: -8%; top: 8%; width: 60%; height: 60%;
  background:
    radial-gradient(closest-side, rgba(0, 245, 195, 0.18), transparent 30%), /* Adjusted opacity */
    radial-gradient(closest-side, rgba(0, 194, 245, 0.15), transparent 40%); /* Adjusted opacity */
  filter: blur(45px); pointer-events: none; z-index: 0; /* More blur */
}

/* Sticky CTA (mobil unten) */
.sticky-cta {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 50;
  display: grid; grid-template-columns: 1fr 1.4fr; gap: 8px;
  background: rgba(255,255,255,.95); backdrop-filter: blur(10px); /* More opaque and blur */
  padding: .65rem .85rem; border-top: 1px solid rgba(11,37,69,.1); /* Slightly more padding and border */
}
.sticky-cta a {
  display: inline-flex; align-items: center; justify-content: center;
  padding: .8rem 1rem; border-radius: 9999px; font-weight: 600; text-decoration: none;
}
.sticky-cta .cta-phone { background: #fff; color: var(--brand-dark); border: 1px solid rgba(11,37,69,.15); } /* Stronger border */
.sticky-cta .cta-offer { background: linear-gradient(90deg, var(--brand-green), var(--brand-cyan)); color: #000; } /* Updated gradient */

/* WhatsApp FAB */
.whatsapp-fab {
  position: fixed; right: 20px; bottom: 220px; width: 56px; height: 56px; border-radius: 50%; /* Slightly larger */
  display: flex; align-items: center; justify-content: center;
  background: #25D366; color: #000; box-shadow: 0 12px 35px var(--shadow-color); /* Enhanced shadow */
  text-decoration: none; z-index: 51;
  transition: transform .2s ease-in-out, box-shadow .2s ease-in-out; /* Add transition */
}
.whatsapp-fab:hover {
  transform: translateY(-3px) scale(1.05); /* Subtle lift and scale */
  box-shadow: 0 18px 45px var(--shadow-color); /* More pronounced shadow on hover */
}

/* Fokus-Sichtbarkeit */
.btn-gradient:focus-visible,
.btn-ghost:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px var(--shadow-color); /* Enhanced focus style */
  border-color: var(--brand-green);
}

/* Bewegung reduzieren */
@media (prefers-reduced-motion: reduce) {
  .reveal { transition: none !important; }
  .hero-slide { transition: none !important; }
}

/* Responsive Feinschliff */
@media (max-width: 768px) {
  .card-fancy { padding: 1.1rem; }
}

/* Add padding to body for sticky CTA on mobile */
@media (max-width: 767px) { /* Using 767px to match md:hidden breakpoint */
  body {
    padding-bottom: 90px; /* Adjust this value if the CTA height is different */
  }
}

/* === Hero-Slider (Owl Carousel) === */
.hero-slider .item {
  height: clamp(11rem, 19vw, 17rem);
  overflow: hidden;
}
.hero-slider .item:hover .hero-slide {
  transform: scale(1);
}

/* leichte Abdunkelung für bessere Lesbarkeit des Overlays */
.hero-dim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0) 50%); /* Darker gradient from bottom */
  pointer-events: none;
}

@media (min-width: 768px) {
  .hero-slider .item { height: clamp(13rem, 17vw, 19rem); }
}

/* Hide Owl Carousel dots */
.owl-dots {
  display: none;
}

.nav-link {
  font-size: 1.2rem;
  position: relative;
  transition: color 0.3s ease-in-out;
}

.nav-link::after {
  content: '';
  position: absolute;
  width: 0;
  height: 3px; /* Slightly thicker underline */
  bottom: -7px; /* Lower the underline */
  left: 50%; /* Start from center */
  transform: translateX(-50%); /* Center the underline */
  background-color: var(--brand-green);
  transition: width 0.3s ease-in-out;
}

.nav-link:hover::after {
  width: 100%;
}

/* Custom styles for numbers in circles in "Ablauf - Schritt für Schritt" section */
/* This targets the specific span element within the ordered list in the "Ablauf" section */
section#ablauf ol li span {
  color: #000 !important; /* Set color to black and override Tailwind's text-white */
}

/* Active navigation link styles */
.nav-link.nav-link-active {
  color: var(--brand-green); /* Change text color when active */
}

.nav-link.nav-link-active::after {
  width: 100%; /* Show underline when active */
}

/* Bewertungskarten - gleichmäßige Höhe und Ausrichtung der Namen */
#referenzen .grid {
  display: grid;
  align-items: stretch; /* Alle Karten haben die gleiche Höhe */
}

#referenzen blockquote {
  display: flex;
  flex-direction: column;
  height: 100%;
}

#referenzen blockquote p {
  flex-grow: 1; /* Der Text nimmt den verfügbaren Platz ein */
}

#referenzen blockquote footer {
  margin-top: auto; /* Das footer wird immer an das Ende der Karte gedrückt */
}

/* Mobile Button Styles - Buttons schmaler machen */
@media (max-width: 768px) {
  .btn-gradient {
    padding: .5rem 1rem !important; /* Noch schmaleres Padding für mobile Ansicht */
    font-size: 1rem !important; /* Kleinere Schrift */
    gap: .5rem !important; /* Reduzierter Abstand zwischen Text und Icon */
  }
  
  /* CTA Buttons und Sticky Container in mobiler Ansicht ausblenden */
  .cta-phone,
  .cta-offer,
  .sticky-cta {
    display: none !important;
  }
  
  /* Footer normal positionieren, aber Abstände reduzieren */
  footer {
    position: static !important;
    margin-top: 2rem !important; /* Reduzierter oberer Abstand */
    padding: 1rem !important; /* Reduziertes Padding */
  }
  
  /* Entferne unnötige Abstände am Ende der Seite */
  body {
    padding-bottom: 0 !important;
  }
  
  main {
    margin-bottom: 0 !important;
  }
}