: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;
}
#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 */
}
  a {
            color: #4e73df;
            text-decoration: none;
        }
        
        a:hover {
            color: #b20000 !important;
        }
        
        a:hover .link-arrow {
            transform: translateX(5px);
            transition: transform 0.3s ease;
        }
        
        .link-arrow {
            transition: transform 0.3s ease;
            margin-left: 10px;
        }
        .text-kosten{
            color: #4e73df;
            margin-bottom: 20px; 
            font-size: 1.6em; 
            font-weight: 600;
        }
   

        .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;
}
.breadcrumb-item a {
    color: var(--primary-color);
    text-decoration: none;
}

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


 .content-wrapper {
            background: white;
            border-radius: 20px;
            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
            padding: 40px;
            margin-right: 20px;
            position: relative;
            overflow: hidden;
        }

        .content-wrapper::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 4px;
            background: linear-gradient(90deg, var(--primary-color), #6c5ce7, var(--primary-color));
            background-size: 200% 100%;
            animation: shimmer 3s ease-in-out infinite;
        }


         
        .main-content {
            margin: 0 auto;
            padding-top: 120px;
            max-width: calc(95vw - 400px);
            margin-bottom: 50px;
        }

        .content-wrapper {
            background: white;
            border-radius: 20px;
            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
            padding: 40px;
            margin-right: 20px;
            position: relative;
            overflow: hidden;
        }

        .content-wrapper::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 4px;
            background: linear-gradient(90deg, var(--primary-color), #6c5ce7, var(--primary-color));
            background-size: 200% 100%;
            animation: shimmer 3s ease-in-out infinite;
        }

        @keyframes shimmer {
            0%, 100% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
        }

        @media (max-width: 1200px) {
          
            .main-content {
                margin-left: 320px;
                max-width: calc(100vw - 350px);
            }
        }

        @media (max-width: 991px) {
            
            
            .main-content {
                margin-left: 270px;
                max-width: calc(100vw - 290px);
                padding-top: 100px;
            }
        }

        @media (max-width: 768px) {
           
            
         
            .main-content {
                margin-left: 0;
                padding-top: 76px;
                max-width: 100%;
            }
            
            .content-wrapper {
                margin: 0;
                padding: 20px 15px;
                border-radius: 0;
            }
            
            .hero-section {
                margin-top: 76px !important;
            }
            
            .back-to-top {
                display: block !important;
            }
        }

        .section {
            margin-bottom: 50px;
            padding: 30px 0;
            border-bottom: 1px solid #f0f0f0;
            position: relative;
        }

        .section:last-child {
            border-bottom: none;
        }

        .section h3 {
            color: var(--primary-color);
            margin-bottom: 20px;
            font-size: 1.4em;
            font-weight: 600;
            position: relative;
            padding-left: 20px;
        }

        .section h3::before {
            content: '';
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
            width: 4px;
            height: 30px;
            background: linear-gradient(135deg, var(--primary-color), #6c5ce7);
            border-radius: 2px;
        }

        .section p {
            margin-bottom: 15px;
            text-align: justify;
            line-height: 1.7;
            color: #444;
        }

        .section ol {
            padding-left: 25px;
            color: #444;
        }

        .section ol li {
            margin-bottom: 12px;
            line-height: 1.7;
        }

        h1 {
            color: var(--primary-color);
            margin-bottom: 30px;
            text-align: center;
            font-size: 2.8em;
            font-weight: 700;
            position: relative;
            padding-bottom: 20px;
        }

        h1::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 100px;
            height: 4px;
            background: white;
            border-radius: 2px;
        }

        .hero-section {
            background: linear-gradient(135deg, var(--lavender-color), var(--light-blue-color));
            padding: 60px 0;
            margin-top: 76px;
            position: relative;
            overflow: hidden;
            margin-bottom: 0;
        }

        .hero-section::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="50" cy="50" r="1" fill="rgba(255,255,255,0.1)"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>');
            opacity: 0.3;
        }
        
        /* Back to top button - hidden by default */
        .back-to-top {
            display: none;
            position: fixed;
            bottom: 30px;
            right: 30px;
            z-index: 1060;
            width: 55px;
            height: 55px;
            border-radius: 50%;
            background: linear-gradient(135deg, var(--primary-color), #6c5ce7);
            color: white;
            border: none;
            box-shadow: 0 8px 25px rgba(122, 90, 248, 0.3);
            transition: all 0.3s ease;
            font-size: 1.1rem;
        }
        
        .back-to-top:hover {
            transform: translateY(-3px);
            box-shadow: 0 12px 35px rgba(122, 90, 248, 0.4);
        }
        
     
        /* Mobile styles for better navigation */
        @media (max-width: 576px) {
            .hero-section {
                padding: 40px 0;
            }
            
            h1 {
                font-size: 1.8em;
            }
            
            .section {
                padding: 20px 0;
            }
            
            .section h3 {
                font-size: 1.2em;
                padding-left: 15px;
            }
            
            .section h3::before {
                height: 24px;
            }
          
        }

        .m-0-auto{
                margin:0 auto;
        }


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;
    }
}

/* 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;
}
.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;
}







/* 1. Reset native bullets & spacing */
.pw1-features-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* 2. Space out each item and indent for our custom marker */
.pw1-features-list li {
  position: relative;
  margin-bottom: 0.5em;
  padding-left: 1.5em;
  line-height: 1.4;
  font-size: 16px;
  color: #333;
}

/* 3. Draw a hollow circle as bullet */
.pw1-features-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.4em;                /* vertically center the circle */
  width: 0.5em;
  height: 0.5em;
  border: 2px solid #1890ff; /* bullet color */
  border-radius: 50%;
  background: white;         /* or transparent if your background isn’t white */
}

/* 4. Bold styling inside any <strong> */
.pw1-features-list li strong {
  font-weight: 600;
  color: #222;
}



  .kosten-table {
    width: 100%;
    border-collapse: collapse;
    font-family: Arial, sans-serif;
    color: #343a40;
    margin-bottom: 1.5em;
  }

  /* Caption with accent color */
  .kosten-table caption {
    caption-side: top;
    background: #4e73df;
    color: #fff;
    text-align: left;
    padding: 0.75em 1em;
    font-weight: bold;
    font-size: 1em;
  }

  /* Column headers */
  .kosten-table thead th {
    background: #e9ecef;
    color: #495057;
    text-align: center;
    padding: 0.75em;
    border-bottom: 2px solid #dee2e6;
  }

  /* Section headings inside tbody */
  .kosten-table tbody th {
    background: #f1f3f5;
    color: #495057;
    text-align: left;
    padding: 0.75em;
    border-top: 1px solid #dee2e6;
  }

  /* Data cells */
  .kosten-table td {
    background: #fff;
    color: #343a40;
    text-align: center;
    padding: 0.75em;
    border-top: 1px solid #e9ecef;
  }

  /* Alternate row shading */
  .kosten-table tbody tr:nth-child(odd) td {
    background: #f8f9fa;
  }

  /* Hover effect using accent color at low opacity */
  .kosten-table tbody tr:hover td,
  .kosten-table tbody tr:hover th {
    background: rgba(78, 115, 223, 0.1);
  }