/* Main Styles for Pflegewunder.de */

:root {
    --primary-color: #4e73df;
    --secondary-color: #6c757d;
    --success-color: #1cc88a;
    --info-color: #36b9cc;
    --warning-color: #f6c23e;
    --danger-color: #e74a3b;
    --light-color: #f8f9fc;
    --dark-color: #5a5c69;
    --lavender-color: #e6e6fa;
    --light-blue-color: #add8e6;
    --express-red:#b20000;
}

body {
    font-family: 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    color: #333;
    line-height: 1.6;
}

/* Navbar Styles */
.navbar {
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  padding-top: 20px;      
   padding-bottom: 20px; /* match JS’s PADDING_TOP */
   
}

.navbar-brand img {
  height: 50px;          /* match JS’s LOGO_TOP */
  width: auto;
  transition: height 0.3s ease;
}

@media (min-width: 1200px) {
    .ms-lg-8{
        margin-left:150px;
    }
}

@media (max-width:451px) {
    .hero-actions{
       justify-content: center;
    }
}

@media (max-width:451px) {
    .btn-primary{
      width:95%;
    }
}






/* Full-width dropdown mega menu */
.position-static {
    position: static;
}

.full-width-dropdown {
    width: 100%;
    margin-top: 0;
    left: 0;
    right: 0;
    animation: fadeIn 0.3s ease;
       scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none;
}
.full-width-dropdown::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera */
}
.mega-menu {
    min-width: 600px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    animation: fadeIn 0.3s ease;
    border-radius: 8px;
}

/* Make the navbar dropdowns scrollable on mobile */
@media (max-width: 991.98px) {
    .navbar-collapse {
        max-height: 80vh;
        overflow-y: auto;
    }
    
    .dropdown-menu {
        max-height: 60vh;
        overflow-y: auto;
    }
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}


  
/* Hero Section */
.hero-section {
    background-color: var(--light-color);
    position: relative;
    overflow: hidden;
    background-image: url('https://source.unsplash.com/random/1920x1080/?elderly,care');
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
#myBtn {
  display: none; /* Hidden by default */
  position: fixed; /* Fixed/sticky position */
  bottom: 20px; /* Place the button at the bottom of the page */
  right: 30px; /* Place the button 30px from the right */
  z-index: 99; /* Make sure it does not overlap */
  border: none; /* Remove borders */
  outline: none; /* Remove outline */
  background-color: #5a5c69; /* Set a background color */
  color: white; /* Text color */
  cursor: pointer; /* Add a mouse pointer on hover */
  padding: 8px 8px 4px 8px;
   /* Some padding */
  border-radius: 10px; /* Rounded corners */
  font-size: 18px; /* Increase font size */
}

#myBtn:hover {
  background-color: #555; /* Add a dark-grey background on hover */
}
.breadcrumb {
    padding: 10px 0;
}
.text-express{
    color:#b20000;
}
.breadcrumb-item a {
    color: var(--primary-color);
    text-decoration: none;
}

.breadcrumb-item.active {
    color: #6c757d;
}

.hero-section::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(230, 230, 250, 0.85), rgba(173, 216, 230, 0.85));
    z-index: 0;
}

.hero-section .container {
    position: relative;
    z-index: 1;
}

/* Form Styles */
.form-check-custom {
    position: relative;
    padding: 0;
}

.form-check-custom .form-check-input {
    position: absolute;
    opacity: 0;
    z-index: -1;
}

.form-check-custom .form-check-label {
    display: block;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
    border-radius: 5px;
}

.form-check-custom .form-check-input:checked + .form-check-label {
    border-color: var(--primary-color);
    background-color: rgba(78, 115, 223, 0.1);
}

.range-slider {
    position: relative;
    margin-bottom: 30px;
}

.range-value {
    position: absolute;
    width: 100%;
    text-align: center;
    margin-top: 5px;
    font-weight: 500;
}

/* Steps for availability checker */
.step-container {
    display: none;
}

.step-container.active {
    display: block;
}


.carousel-item.active{
  
}
/* Services */
.icon-box {
    height: 80px;
    width: 80px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(78, 115, 223, 0.1);
    border-radius: 50%;
}

/* Testimonials */
.carousel-control-prev,
.carousel-control-next {
    width: 40px;
    height: 40px;
    background-color: var(--primary-color);
    border-radius: 50%;
    top: 50%;
    transform: translateY(-50%);
    opacity: 0.7;
}

.carousel-control-prev {
    left: -20px;
}

.carousel-control-next {
    right: -20px;
}

.carousel-control-prev:hover,
.carousel-control-next:hover {
    opacity: 1;
}

/* CTA Section */
.cta {
    background: linear-gradient(135deg, var(--primary-color), #3a5fd7);
}

/* Parallax Section */
.parallax-section {
    background-image: url('https://source.unsplash.com/random/1920x1080/?eldercare');
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
}

.parallax-overlay {
    background-color: rgba(0, 0, 0, 0.7);
    width: 100%;
    height: 100%;
}

.counter-box {
    padding: 20px;
    border-radius: 5px;
    color: white;
}

.counter {
    font-size: 2.5rem;
    font-weight: bold;
    margin-bottom: 10px;
}

/* Footer */
.footer {
    background-color: #343a40;
}

.social-link {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.3s ease;
}

.social-link:hover {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

/* Sticky Contact Button */
.sticky-contact {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 1000;
}
.height-100{
    height:100%;
}
.sticky-contact .btn {
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
}

@media (max-width: 1200px) {
    .mega-menu123{
        justify-content: space-around;
    }
}
/* Responsive Adjustments */
@media (max-width: 991.98px) {
    .mega-menu {
        min-width: auto;
        width: 100%;
    }
    .carousel-control-next {
    right: 30px;
    top: 200px;
}
.carousel-control-prev{
  left: 30px;
   top: 200px;
} 


    .full-width-dropdown {
        margin-top: 0;
        padding: 10px;
    }
}

@media (max-width: 767.98px) {
    h1.display-4 {
        font-size: 2.5rem;
    }
    
    .sticky-contact .btn {
        width: 50px;
        height: 50px;
        font-size: 20px;
    }

    .counter {
        font-size: 2rem;
    }
}

/* Accessibility */
.btn:focus, 
.form-control:focus, 
.form-check-input:focus {
    box-shadow: 0 0 0 0.25rem rgba(78, 115, 223, 0.25);
}

/* Parallax Background */
.parallax-bg {
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
/* CSS */
.btn-enhanced {
  position: relative;
  display: inline-block;
  padding: 0.75rem 1.5rem;           /* angenehme Klickfläche */
  background-color: transparent;    
  color: #b20000;                   /* roter Text im Normalzustand */
  border: 2px solid #b20000;        /* roter Rahmen im Normalzustand */
  border-radius: 0.5rem;            /* weiche, abgerundete Ecken */
  font-weight: 600;                 /* leicht fettere Schrift */
  font-size: 1rem;                  /* Schriftgröße anpassen */
  text-transform: uppercase;        /* alles groß */
  text-align: center;
  text-decoration: none;            /* kein Unterstrich */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* leichter Schatten */
  transition: 
    background-color 0.3s ease, 
    color 0.3s ease, 
    border-color 0.3s ease,
    transform 0.2s ease,
    box-shadow 0.3s ease;
  box-sizing: border-box;           /* Rahmen gehört zur Gesamtgröße */
}

/* Damit der Text immer über dem Hintergrund liegt */
.btn-enhanced > span {
  position: relative;
  z-index: 1;
  display: inline-block; /* nötig, damit <br> korrekt arbeitet */
}

/* Hover-Zustand */
.btn-enhanced:hover {
  background-color: #6699CC;        /* sanft getöntes Blau */
  color: #ffffff;                   /* weißer Text */
  border-color: #6699CC;            /* Rahmen in derselben Blautonfarbe */
  box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15); /* etwas stärkerer Schatten */
  transform: translateY(-2px);      /* leichte „Lift“-Bewegung */
}

/* Aktiv-/Fokus-Zustand (wenn du draufklickst) */
.btn-enhanced:active {
  transform: translateY(0);         /* zurück in Ausgangsposition */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}




/* ===========================
   Grund‐Styles für .btn-kosten
   =========================== */

/* -----------------------------------------------
   1. Basis-Styles für alle .btn-senior-Buttons
   ----------------------------------------------- */
.btn-senior {
  /* POSITION & BOX-SIZING */
  position: relative;             
  display: inline-block;
  box-sizing: border-box;         /* Padding + Border zählen zur Gesamtausdehnung */

  /* TYPOGRAFIE */
  font-weight: 600;               /* leicht fetter */
  font-size: 1rem;                /* gleiche Schriftgröße wie der andere Button */
  text-transform: uppercase;      /* alles groß */
  text-align: center;
  text-decoration: none;          /* kein Unterstrich */

  /* FARBE & HINTERGRUND (Normalzustand) */
  background-color: #0d6efd;      /* sanft getöntes Blau (wie in deinem Bild) */
  color: #ffffff;                 /* weißer Text */
  border: 2px solid #0d6efd;      /* Rahmen in derselben Blauton-Farbe */

  /* GRÖSSE & ABSTAND */
  padding: 0.75rem 1.5rem;         /* dieselben Innenabstände wie beim anderen Button */

  /* ABGERUNDETE ECKEN & SCHATTEN */
  border-radius: 0.5rem;          /* weiche, abgerundete Ecken */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);

  /* TRANSITION für sanfte Effekte */
  transition: 
    background-color 0.3s ease,
    border-color     0.3s ease,
    color            0.3s ease,
    box-shadow       0.3s ease,
    transform        0.2s ease;
}

/* -----------------------------------------------
   2. Text-Layering (damit das <span> über dem Hover-Hintergrund liegt)
   ----------------------------------------------- */
.btn-senior > span {
  position: relative;
  z-index: 1;                      /* stellt sicher, dass der Text über dem Pseudo-Hintergrund liegt */
  display: inline-block;           /* damit Zeilenumbrüche (<br>) korrekt funktionieren */
}

/* -----------------------------------------------
   3. Hover-Zustand (Mouse-Over)
   ----------------------------------------------- */
.btn-senior:hover {
  background-color: #6699CC;        /* das klassische Bootstrap-Blau beim Hover */
  border-color: #6699CC;           /* auch der Rahmen wird zum stärkeren Blau */
  color: #ffffff;                  /* Text bleibt weiß */
  box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15); /* Schatten wird etwas kräftiger */
  transform: translateY(-2px);     /* leichter „Lift“-Effekt beim Hover */
}

/* -----------------------------------------------
   4. Aktiver Zustand (Klick / Fokus)
   ----------------------------------------------- */
.btn-senior:active,
.btn-senior:focus {
  transform: translateY(0);         /* Button geht zurück in die Ausgangsposition */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Schatten wird wieder schwächer */

}

.btn-senior1 {
  /* POSITION & BOX-SIZING */
  position: relative;             
  display: inline-block;
  box-sizing: border-box;         /* Padding + Border zählen zur Gesamtausdehnung */

  /* TYPOGRAFIE */
  font-weight: 600;               /* leicht fetter */
  font-size: 1rem;                /* gleiche Schriftgröße wie der andere Button */
  text-transform: uppercase;      /* alles groß */
  text-align: center;
  text-decoration: none;          /* kein Unterstrich */

  /* FARBE & HINTERGRUND (Normalzustand) */
  background-color: #fff;      /* sanft getöntes Blau (wie in deinem Bild) */
  color: #0d6efd;                 /* weißer Text */
  border: 2px solid #0d6efd;      /* Rahmen in derselben Blauton-Farbe */

  /* GRÖSSE & ABSTAND */
  padding: 0.75rem 1.5rem;         /* dieselben Innenabstände wie beim anderen Button */

  /* ABGERUNDETE ECKEN & SCHATTEN */
  border-radius: 0.5rem;          /* weiche, abgerundete Ecken */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);

  /* TRANSITION für sanfte Effekte */
  transition: 
    background-color 0.3s ease,
    border-color     0.3s ease,
    color            0.3s ease,
    box-shadow       0.3s ease,
    transform        0.2s ease;
}

/* -----------------------------------------------
   2. Text-Layering (damit das <span> über dem Hover-Hintergrund liegt)
   ----------------------------------------------- */
.btn-senior1 > span {
  position: relative;
  z-index: 1;                      /* stellt sicher, dass der Text über dem Pseudo-Hintergrund liegt */
  display: inline-block;           /* damit Zeilenumbrüche (<br>) korrekt funktionieren */
}

/* -----------------------------------------------
   3. Hover-Zustand (Mouse-Over)
   ----------------------------------------------- */
.btn-senior1:hover {
  background-color: #6699CC;        /* das klassische Bootstrap-Blau beim Hover */
  border-color: #6699CC;           /* auch der Rahmen wird zum stärkeren Blau */
  color: #ffffff;                  /* Text bleibt weiß */
  box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15); /* Schatten wird etwas kräftiger */
  transform: translateY(-2px);     /* leichter „Lift“-Effekt beim Hover */
}

/* -----------------------------------------------
   4. Aktiver Zustand (Klick / Fokus)
   ----------------------------------------------- */
.btn-senior1:active,
.btn-senior1:focus {
  transform: translateY(0);         /* Button geht zurück in die Ausgangsposition */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Schatten wird wieder schwächer */
}

.logo-dihp{
    background-image:url(../images/logo_dihp.jpg);
    height:37px;
    width: 37px;
    background-size: cover;
}

.btn-outline-danger:hover{
    color:white !important;
}

.anfrage-1{
    font-size:16px;
}

.btn-outline-info{
    color:rgba(0, 51, 102, 1.0);
    border-color:rgba(0, 51, 102, 1.0);
}
.btn-outline-info:hover{
background-color: rgba(0, 51, 102, 1.0);
    color:white;
    border-color:rgba(0, 51, 102, 1.0);
}



/* ================================
   PflegeWunder "Pro" polish layer
   Unifies buttons, cards, spacing
   ================================ */

/* Brand primary alignment (match Bootstrap blue) */
:root {
  --primary-color: #0d6efd;
}

/* Standard CTAs */
.btn-senior { /* already defined above; ensure priority */ }
.btn-senior1 { /* already defined above; ensure priority */ }

/* Small helper for red express label inside outline button (keeps outline but red text) */
.text-express { color:#b20000 !important; }

/* Card polishing */
.pw-card {
  border: 0 !important;
  border-radius: 1rem !important;
  box-shadow: 0 6px 18px rgba(0,0,0,.08) !important;
}
.pw-card .card-body { padding: 1.5rem !important; }
.pw-card .card-title { font-weight: 700; letter-spacing: .2px; }
.pw-card p { color:#495057; }

/* Section headers */
.section-title {
  font-weight: 800;
  letter-spacing: .3px;
}
.section-lead {
  color:#6c757d;
  max-width: 56rem;
}

/* Feature list with icons */
.feature-list { list-style: none; padding-left:0; margin:0; }
.feature-list li { display:flex; align-items:center; gap:.65rem; margin-bottom:.5rem; }
.feature-list i { min-width: 1.25rem; }

/* Better hero overlay */
.hero-section::before {
  background: linear-gradient(135deg, rgba(13,110,253,.10), rgba(13,110,253,.10));
}

/* Utilities */
.rounded-3xl { border-radius: 1.25rem !important; }
.shadow-soft { box-shadow: 0 8px 24px rgba(0,0,0,.08)!important; }


/* Counters strip */
.counter-box { 
  text-align:center; 
  color:#fff; 
}
.counters-section {
  background: rgb(13, 110, 253);
  padding: 3rem 0;
}
.counter-box .counter { font-size: 2.25rem; font-weight: 800; margin: .25rem 0; }
.counter-box p { margin: 0; opacity: .9; }


.border-none{
    border: none !important;
}
.card-title{
    margin-bottom: 1rem;
}

.btn-express{
  position: relative;
  display: inline-block;
  font-weight: 700;
  text-transform: uppercase;
  padding: 0.9rem 1.2rem;
  border-radius: 0.5rem;
  background-color: #b20000;      /* normal */
  border: 2px solid #b20000;
  color: #fff;
  box-shadow: 0 6px 12px rgba(178,0,0,.18);
  transition: background-color .3s, border-color .3s, transform .2s, box-shadow .3s;
}
.btn-express:hover{
  background-color: #970000;      /* dunkler beim Hover */
  border-color: #970000;

  transform: translateY(-2px);
  box-shadow: 0 10px 16px rgba(178,0,0,.25);
}
.btn-express:active{
  transform: translateY(0);
  box-shadow: 0 4px 8px rgba(178,0,0,.2);
}
/* ——— red express (base, if you don't already have it) ——— */
.btn-express{
  background:#b20000; border:2px solid #b20000; color:#fff;
  font-weight:700; text-transform:uppercase; border-radius:.5rem;
  padding:.9rem 1.2rem;
  transition: background-color .25s, border-color .25s, color .25s,
              transform .15s ease-out, box-shadow .25s;
}

/* === HOVERS (similar vibe, different feel) === */

/* 1) Blue filled (btn-senior): classic lift + blue glow */
.btn-senior:hover{
  background:#0b5ed7;            /* a bit darker */
  border-color:#0b5ed7;
  transform:translateY(-2px);    /* medium lift */
  box-shadow:0 10px 14px rgba(13,110,253,.22),
             0 0 0 4px rgba(13,110,253,.10); /* soft blue halo */
}

/* 2) Red filled (btn-express): lighter lift + tiny scale, stronger red shadow */
.btn-express:hover{
  background:#970000;            /* darker red */
  border-color:#970000;
  transform:translateY(-1px) scale(1.01); /* smaller lift, subtle scale */
  box-shadow:0 8px 12px rgba(178,0,0,.28);
}

/* 3) Blue outline (btn-senior1): converts to filled + biggest lift */

.btn-express{
  background: var(--express-red);
  border: 2px solid var(--express-red);
  color: #fff;
  font-weight:700;
  text-transform: uppercase;
  border-radius: .5rem;
  padding: .9rem 1.2rem;
  transition: background-color .25s, border-color .25s, color .25s,
              transform .15s ease-out, box-shadow .25s;
}

/* Hover: invert to white with red text & border */
.btn-express:hover{
  background: #fff;
  color: var(--express-red);
  border-color: var(--express-red);
  transform: translateY(-2px);
  box-shadow: 0 10px 16px rgba(178,0,0,.18);
}

/* Keyboard focus ring + active */
.btn-express:focus-visible{ outline:0; box-shadow:0 0 0 3px rgba(178,0,0,.25); }
.btn-express:active{ transform: translateY(0); box-shadow: 0 6px 12px rgba(178,0,0,.15); }


/* ===== Pflegewunder UI polish pack ===== */

/* Typography & rhythm */
body{ color:#1f2937; }
h1,h2,h3{ letter-spacing:.2px; }
.section{ padding: clamp(2.5rem, 4vw, 4.5rem) 0; }
.section-tight{ padding: 2rem 0; }

/* Cards */
.card, .pw-card{
  border:0 !important;
  border-radius: 16px !important;
  box-shadow: 0 10px 28px rgba(17,24,39,.08) !important;
}
.card-body{ padding:1.5rem; }
.card-title{ font-weight:800; margin-bottom:.75rem; }

/* Unified buttons (keeps your red express + blue senior) */
.btn{ border-radius: .65rem; font-weight:700; letter-spacing:.3px; }
.btn-express{ /* your red – keep logic but crisper focus ring */
  box-shadow: 0 8px 18px rgba(178,0,0,.22);
}
.btn-express:focus-visible{
  outline:0; box-shadow:0 0 0 4px rgba(178,0,0,.18);
}

/* Info strip with counters */
.counters{
  background: linear-gradient(135deg, #0d6efd, #3a5fd7);
  color:#fff;
  padding: 2.75rem 0;
  border-radius: 18px;
}
.counter{ font-size: clamp(1.8rem, 4.5vw, 2.5rem); font-weight:800; }

/* Trust badges row */
.trust-logos img{ height: 36px; opacity:.85; filter: grayscale(100%); transition: opacity .2s ease; }
.trust-logos img:hover{ opacity:1; filter:none; }

/* Hero */
.hero{
  position: relative;
  background: radial-gradient(1200px 600px at 10% -10%, rgba(13,110,253,.12), transparent),
              radial-gradient(1200px 600px at 110% 10%, rgba(178,0,0,.08), transparent),
              #f8fafc;
}
.hero .lead{ color:#475569; max-width: 46rem; }

/* Sticky quick-call */
.quick-call{
  position:fixed; right:18px; bottom:18px; z-index:1050;
}
.quick-call .btn{ width:58px; height:58px; border-radius:50%; box-shadow:0 10px 22px rgba(13,110,253,.25); }

/* Footer */
.footer{ background:#0b1220; color:#cbd5e1; }
.footer a{ color:#93c5fd; }
.footer .divider{ border-top:1px solid rgba(148,163,184,.18); }
/* --- Compact, low-glare hero --- */
.hero-compact{
  background:#fff;          /* softer than white */
  padding: 105px 0;
  padding-bottom: 100px;
  /* border-bottom:1px solid rgba(15,23,42,.06); */
}
.hero-title{
  font-weight:800;
  font-size:clamp(1.7rem,3.4vw,2.35rem);
  letter-spacing:.2px;
  margin-bottom:.5rem;
  color:#0f172a;
}
.hero-lead{
  color:#475569;
  font-size:clamp(.98rem,1.6vw,1.08rem);
  max-width:46rem; margin-bottom:1rem;
}
@media (max-width: 768px) {
  .hero-image img {
    min-height: 300px; /* kannst du anpassen, z.B. 350px oder 400px */
  }
}

.hero-actions{ display:flex; gap:.9rem; align-items:center; flex-wrap:wrap;  margin-bottom: 45px;}



.btn-lg{ padding:.68rem 1.1rem; border-radius:.65rem; } /* keeps impact, less noise */
.hero-link{ font-weight:600; text-underline-offset:3px; }
.hero-link:hover{ text-decoration:underline; }
.hero-subnote{ margin-top:.75rem; color:#64748b; font-size:.95rem; }
 .swiper {
    width: 100%;
    max-width: 900px;
    height: 320px;
    margin: 40px auto;
  }
  .swiper-slide {
    background: linear-gradient(135deg, #6ba8ff, #c6e2ff);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-weight: bold;
    border-radius: 12px;
    color: #fff;
  }

  .btn-light{
    border-color: white;
    background-color: #0d6efd;
    color: white !important;
  }

  .btn-light:hover{
    border-color: white;
    background-color: white;
    color: #0d6efd !important;
  }