:root{
    --background: #F3F4F6;
    --primary:#374151;/*#3c393d*/
    --secondary: #c5c7ca;
    --accent: #f39206;
    --black: #000000;
    --white: #ffffff;
    --shadow: 0px 0px 11px -7px rgba(0,0,0,0.75);
    --animate: 0.3s;
    --br: 7px;
    --input-br: 4px;
    --box-hover:#E5E7EB; 
    --image-shadow: 0px 7px 19px -12px rgba(0, 0, 0, 0.75);

    --disabled: rgb(110, 110, 110); 
    --main-font-dark: #575757;
    --main-font-light: white;
    --sub-font-dark: #666666;
    --sub-font-light: white;
    --transparent-modal: #eff3f4aa;
    --dark-gray: #a3a3a3;
    --light-gray: #e1e1e1;
    --modal:#ededed;
    --dark-modal:#ededed;
    --magnify: scale(1.1);
}
body{background-color:var(--background)}
#motto{background-color: var(--primary);}
#motto *{color: var(--white);}
header{
    z-index: 99;
    position: sticky;
    top: 0;
    width: 100%;
    height: fit-content;
    background-color: var(--white);
    color:var(--accent);
    box-shadow: var(--shadow);
}
header *{
    color:var(--accent);
}
#falc-logo{
    cursor:pointer;
    margin:5mm;
    height:auto;
    width:44mm;
    transition: var(--animate);
}
.falc-logo-shrink{
    width:35mm!important;
}
#main-slider{
    height:444px;
    width:100%;
}
#main-slider .banner{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: rgba(255, 255, 255, 0.66);
    width:fit-content;
    height:157px;
    padding:33px 13px;
    border-radius: var(--br);
    text-align-last: center;
}
#main-slider .banner h1{font-size:999%!important;font-weight: 900;}
#main-slider .banner span{font-size:333%!important;margin-top:13px}
menu .caption{
    line-height: 12px;
}
menu .menu-btn{
    height:66px;
    border-radius: var(--br);
}
menu .menu-btn:hover{
    background-color: var(--box-hover);
}
menu .menu-btn .menu-list{
    position: absolute;
    display: block;
    flex-direction: column;
    height:fit-content;
    min-width: 300px;
    background-color: white;
    padding: 13px 7px;
    box-shadow: var(--shadow);
    border-radius: var(--br);
    top:40px;
    height: 263;
    overflow-y:auto;
}
menu .menu-btn .menu-list>a,
menu .menu-btn .menu-list>div{
    border-radius: var(--br);
    margin: 5px;
    padding: 5px;
}
menu .menu-btn .menu-list>a:hover,
menu .menu-btn .menu-list>div:hover{
    background-color: var(--box-hover);
}
.header-btn{
    background-color:var(--accent);
    border-radius: var(--br);
    height:fit-content;
    width:fit-content;
    padding:11px 13px;
    transition: var(--animate);
    box-shadow:0px 1px 11px -4px black;
}
.header-btn *{
    color:white!important;
    font-weight: lighter!important;
}
.header-btn:hover{
    box-shadow: var(--shadow);
}

/* MAIN & SUB BUTTONS */
.sub-btn,
.main-btn{
    background-color:var(--accent);
    border-radius: var(--br);
    height:fit-content;
    padding:17px 40px;
    transition: var(--animate);
    box-shadow:0px 1px 11px -4px black;
    margin-left: 0!important;
    margin-right: 0!important;
    text-align: center;
}
.sub-btn *, .main-btn *{ color:white!important; font-weight: 600!important}
.sub-btn:hover,.main-btn:hover{ box-shadow: var(--shadow)}
.main-btn{width:100%!important}
.sub-btn{width:fit-content!important}
/* MAIN & SUB BUTTONS */

.falc-con{ margin: 33px; }
.falc-list{ font-size: 1.7rem }
.falc-link span{text-decoration: underline;color:var(--accent)}
/** FALC FORMS */
.falc-form-wrapper{
    position: relative;
    min-height: 111px;
}
.falc-form{border-radius: var(--br);box-shadow: var(--image-shadow);background-color: var(--white);padding:13px 33px}
.falc-form label{font-weight:800;font-size:1.4rem;margin:13px 0}
.falc-form .form-btn{
    width:111px;
    height: 57px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 11px;
    margin: 13px;
    font-size:1.7rem;
    font-weight: 500;
    box-shadow: 0px 0px 7px -4px black;
}
.falc-form .form-btn:hover{ background-color: #D1D5DB; }
.falc-form .form-btn.inactive{
    color:white;
    background-color: var(--accent);
    opacity: 0.5;
}
.falc-form .form-btn.active{ color:white; background-color: var(--accent) }
.falc-form .form-btn.active *,
.falc-form .form-btn.inactive *{ color:white }
.falc-form .falc-input-group{ display: flex; flex-direction: column }
.falc-form .falc-input-group select,
.falc-form .falc-input-group input[type=number],
.falc-form .falc-input-group input[type=email],
.falc-form .falc-input-group input[type=password],
.falc-form .falc-input-group input[type=text]{
    font-size: 1.7rem;
    border-radius: var(--input-br);
    border: none;
    box-shadow: 0px 0px 3px 0px rgb(169, 169, 169);
    padding: 13px;
}
.falc-form .falc-input-group input[type=checkbox]{
    width: 33px;
    height: 33px;
    font-size: 1.7rem;
    border-radius: var(--input-br);
    border: none;
    padding: 13px;
    cursor: pointer;
    accent-color: var(--accent); 
    color:white;
    margin: 0 13px 0 0;
}
.falc-form .falc-input-group input[type=checkbox]~label{
    font-weight:100;font-size:1.5rem;cursor:pointer;
}
.falc-form .maxmin b{font-size:small}
.falc-progress{
    position:absolute;
    width:100%;
    height:8px;
    border-top-left-radius: var(--br);
    border-top-right-radius: var(--br);
    background-color: #9CA3AF;
    display:flex;
    flex-direction: row;
    justify-content:space-evenly;
    z-index: 200;
}
.falc-progress span:first-of-type{ border-top-left-radius: var(--br) }
.falc-progress span:last-of-type{ border-top-right-radius: var(--br) }
.falc-progress span{ flex-grow: 1 }
.falc-progress span.active{ background-color: var(--accent) }
/* FALC SQR BOX */
.falc-sqr-box{
    border: 5px solid #9CA3AF;
    cursor: pointer;
    border-radius: 5px;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    width:200px;
    height:200px;
}
.falc-sqr-box.activate,
.falc-sqr-box:hover{
    border: 5px solid var(--accent);
    box-shadow: var(--shadow);
}
.falc-sqr-box h5{transform: translateY(-22px); }
/* FALC SQR BOX */

/* FALC REC BOX */
.falc-rec-box{
    border: 5px solid #9CA3AF;
    cursor: pointer;
    border-radius: 5px;
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
    width:100%;
    height:121px;
}
.falc-rec-box.slim{ height:45px!important }
.falc-rec-box svg{width:131px;height:131px}
.falc-rec-box.activate,
.falc-rec-box:hover{
    border: 5px solid var(--accent);
    box-shadow: var(--shadow);
}
/* FALC SQR BOX */

/* FALC TIME BOX */
.falc-timebox-group{
    position:relative;
}
.falc-timebox-group input[type=checkbox]{
    position:absolute;
    visibility: hidden;
    width:17px;
    height: 17px;
    top: 17px; 
    right:7px;
    accent-color: var(--accent);
}
.falc-timebox-group input[type=checkbox]:checked{visibility:visible}
.falc-time-box{
    border: 5px solid #9CA3AF;
    cursor: pointer;
    border-radius: 5px;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    width:131px;
    height:131px;
    padding:13px;

}
.falc-time-box *{ user-select: none; }
.falc-time-box:hover{ border: 5px solid var(--accent); box-shadow: var(--shadow); }
/* FALC TIME BOX */

/* input['number'] */
    .falc-inputnumber-group{
        display: flex;
        flex-direction: row;
    }
    .falc-inputnumber-group input{margin:0 17px;text-align: center}
    .falc-inputnumber-inc,
    .falc-inputnumber-dec{
        display: flex;
        flex-wrap:wrap;
        align-items: stretch;
        justify-content: center;
        align-content: center;
        width:47px;
        height:47px;
        border-radius: var(--input-br);
        border:2px solid var(--accent);
        cursor:pointer;
    }
    .falc-inputnumber-inc span,
    .falc-inputnumber-dec span{
        font-weight: 900;
        color:var(--accent) ;
        font-size: 3.3rem;
        user-select: none;
    }
/* input slider widget */
    .falc-sliderinput-group { margin: 57px 0 13px 0; }
    .falc-sliderinput-track {
        position: relative;
        width: 100%; /* Width of the entire bar */
        height: 8px; /* Height (thickness) of the bar */
        background-color: #e0e0e0;
        border-radius: 6px;
        overflow: visible;
    }
    .falc-sliderinput-fill {
        height: 100%;
        width: 0%; /* Initial width, will be updated by JS */
        background-color: var(--accent);
        border-radius: 6px;
        transition: width 0.05s linear; /* Smooth transition for the fill */
    }
    .falc-sliderinput-handle {
        position: absolute;
        top: 50%; /* Center vertically on the track */
        transform: translateY(-50%); /* Adjust for handle's height */
        width: 24px; /* Diameter of the handle */
        height: 24px; /* Diameter of the handle */
        background-color: var(--accent);
        color: white;
        border-radius: 50%;
        cursor: grab;
        z-index: 10;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
        /* Initial left position will be set by JavaScript */
    }
    .falc-sliderinput-tooltip {
        position: relative;
        top: -57px !important;
        z-index: 10;
        width: 66px;
        height: 33px;
        background-color: var(--accent);
        border-radius: 5px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .falc-sliderinput-tooltip *{user-select:none; color:white;z-index: 99999;}
    .falc-sliderinput-tooltip::after {
        position: absolute;
        content: '';
        width: 20px;
        height: 20px;
        top: 14px;
        left: 19px;
        background: var(--accent);
        transform: rotate(135deg);
        z-index: 9;
    }
    .falc-sliderinput-tooltip sup { font-size: x-small; }
    .falc-sliderinput { /* Changed ID to class for multiple instances */
        padding: 10px 15px;
        font-size: 1.2em;
        border: 1px solid #ccc;
        border-radius: 5px;
        text-align: center;
        width: 80px;
    }
/* input slider widget */
/* ratgeber */
.ratgeber-con{
    min-height: 444px;
    background-color: white;
    margin: 33px;
    box-shadow: var(--image-shadow);
    border-radius: var(--br);
}
.ratgeber-con h3{ line-height: 44px }
.ratgeber-con p{ line-height: 27px; font-size:1.8rem }
/* GUIDES */
/* CHECKLISTS */
.checklisten-con{
    min-height: 444px;
    background-color: white;
    margin: 33px;
    box-shadow: var(--image-shadow);
    border-radius: var(--br);
}
.checklisten-con h3{ line-height: 44px }
.checklisten-con p{ line-height: 27px; font-size:1.8rem }
/* CHECKLISTS */

/* INTRO */
#intro-wrp{background-color: transparent}
#intro-wrp>div{height:383px}
#intro-con{background-color: transparent}
#intro-caption{color:var(--accent)!important}
#intro-title{font-size:3.7rem;line-height: 52px;}
#intro-body{font-size:1.8rem;line-height: 27px;}
#intro-image{border-radius: 7px;box-shadow: var(--image-shadow)}
/* INTRO */

/* LIST */
#list-wrp{background-color: white}
#list-con{background-color: transparent;}
#list-caption{color:var(--accent)!important}
#list-title{font-size:3.5rem;line-height: 50px;}
#list-body{font-size:1.8rem;line-height: 27px;}
#list-body ul {list-style:none;}
#list-body li {
    display: flex;
    flex-direction: row;
    align-items: center;
}
#list-body li::before {
            content: ''; /* Required for pseudo-elements */
            display: block; /* Make it a block element to control dimensions */
            width: 40px; /* Adjust size as needed */
            height: 40px; /* Adjust size as needed */
            margin-right: 10px; /* Space between icon and content */
            flex-shrink: 0; /* Prevent icon from shrinking */
            background-image: url('../img/list_sign.png'); /* Your custom image path here */
            background-size: contain; /* Ensure the image fits within the element */
            background-repeat: no-repeat; /* Prevent repeating */
            background-position: center; /* Center the image within its area */
        }
#list-image{border-radius: 7px;box-shadow:var(--image-shadow)}
.list-ico{border-radius: 50px;width:33px;height:33px;background-color: #F6E3C6;padding:7px}
/* LIST */

/* DESC */
#desc-wrapper{background-color: transparent}
#desc-con{background-color: #E5E7EB;border:1px solid #9CA3AF;border-radius: var(--br);}
#desc-sign{position: relative; display: inline; float: left; width: 57px; height: 57px}
#desc-sign i{font-size:6rem;color:var(--accent)}
#desc-content{display: inline;font-size:1.8rem;line-height: 29px}
#desc-link{display: inline;font-size:1.8rem;line-height: 27px;text-decoration: underline;color:var(--accent);margin-left:3px}
/* DESC */

/* counselor */
#counselor-wrapper{background-color: transparent}
#counselor-con{background-color: transparent}
#counselor-name{font-size:3.3rem;font-weight: 100;font-family: f-reg;}
#counselor-image{width:202;height:auto;border-radius: 7px;box-shadow:var(--image-shadow)}
.counselor-ico{border-radius: 17px;width:40px;height:40px;background-color: #F6E3C6;padding:7px}
.counselor-link{display: inline;font-size:1.8rem;line-height: 27px;text-decoration: underline;color:var(--accent);margin-left:10px}
/* counselor */



/* IMAGE SLIDER */
.slider-con {
    position: relative;
    width: 313px;
    height: 444px;
    overflow: hidden;
    margin: 0 auto;
    box-shadow: var(--image-shadow);
}
.slider {
    display: flex;
    width: 1565px; /* 313px * 5 images */
    transition: transform 0.3s ease;
}
.slider img {
    width: 313px;
    height: 444px;
    object-fit: cover;
}
.slider-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: white;
    border: none;
    cursor: pointer;
    color:var(--accent);
    font-size: 2rem;
    font-weight: bolder;
    box-shadow: var(--shadow);
}
.prev { left: 10px }
.next { right: 10px }
/* IMAGE SLIDER */

/* INTRO BOX */
.intro-box{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 566px;
    height: fit-content;
    background-color: #ffffffe6;
    padding: 13px;
    border-radius: var(--br);
}
.intro-box .caption{
    font-size:1.6rem;
    color: var(--accent);
}
.intro-box .title{
    font-size: 3.7rem;
    color: #000000;
    font-weight: 500;
    font-family: f-reg;
} 
.intro-box .desc{
    font-size:1.7rem;
    color: #37475C;
    margin: 17px 0;
}
/* INTRO BOX */

/* content*/
.content h1,
.content h2,
.content h3,
.content h4,
.content h5,
.content h6,
.content strong{margin:33px 0}
.content span,
.content p,
.content b,
.content div{ margin:13px 0 }
/* content*/

/* Day SLIDER */
.falc-day-slider-con{
  display: flex;
  align-items: center;
  gap: 10px; /* Space between buttons and days wrapper */
  overflow: hidden; /* Hide overflowing days */
  width: 100%; /* Adjust as needed */
  max-width: fit-content; /* Or a specific max-width */
  margin: 20px auto; /* Center the slider */
}

.days-wrp {
  display: flex;
  overflow-x: hidden; /* This will be controlled by JavaScript for smooth scrolling */
  scroll-behavior: smooth; /* Smooth scroll effect */
  flex-grow: 1; /* Allows the wrapper to take available space */
  gap: 10px; /* Space between individual day items */
  padding: 5px 0; /* Add some padding if needed */
}

.day-item {
  flex: 0 0 auto; /* Prevent items from shrinking, allow them to grow based on content */
  text-align: center;
  position: relative; /* For checkbox positioning if needed */
  margin:0 17px;
}

.day-item input[type="checkbox"] {
  /* Hide the default checkbox */
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.day-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 80px; /* Fixed width for each day box */
  height: 80px; /* Fixed height for each day box */
  border: 1px solid #ccc;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  padding: 5px;
  box-sizing: border-box; /* Include padding in width/height */
}

.day-box:hover {
  background-color: #f0f0f0;
  color:white;
}

/* Style for selected day */
.day-item input[type="checkbox"]:checked + .day-box {
  background-color: var(--accent);
  color: white;
  border-color: var(--accent);
}

.day-name {
  font-size: 0.9em;
  font-weight: bold;
  margin-bottom: 5px;
}

.day-number {
  font-size: 1.5em;
  font-weight: bold;
}

.nav-button {
  background-color:var(--accent);
  color: white;
  border: none;
  padding: 10px 15px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 1.2em;
  line-height: 1; /* Align text vertically */
  display: flex; /* For centering the arrow */
  align-items: center; /* For centering the arrow */
  justify-content: center; /* For centering the arrow */
}

.nav-button:hover {
  background-color:var(--accent);
}

.nav-button:disabled {
  background-color: #cccccc;
  cursor: not-allowed;
}
/* DAY SLIDER */
#map{
    width:100%;
    height:92%;
    box-shadow:var(--shadow);
}
/* Berater box in home */
.berater-box img{
    width: 266px;
    height: 333px;
    box-shadow: var(--image-shadow);
    object-fit: cover;
    border-radius: 10px;
}
.berater-box .title{font-size:1.4rem}
.berater-box .phone{font-size:2rem;font-weight: 100;}
/* Berater box in home */