/* open-sans-300 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300;
  src: url('fonts/open-sans-v40-latin-300.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* open-sans-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/open-sans-v40-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* open-sans-500 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 500;
  src: url('fonts/open-sans-v40-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* open-sans-600 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 600;
  src: url('fonts/open-sans-v40-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* open-sans-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 700;
  src: url('fonts/open-sans-v40-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* open-sans-800 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 800;
  src: url('fonts/open-sans-v40-latin-800.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}


.img-responsive.img-center.header-logo {
  margin-top: 89px !important;
}


.fa.fa-cogs {
  font-size: 25px;
  color: #fff;
}

#main-nav .nav a:before {
    background:#349cc7 !important;
}


body.high-contrast .small.scrollimation.scale-in.in {
  color: #333;
}


/* Bedienhilfen-Button (unten rechts) */
    .accessibility-btn {
      position: fixed;
      bottom: 20px;
      right: 20px;
      width: 60px;
      height: 60px;
      border-radius: 50%;
      background: #349cc7;
      border: none;
      cursor: pointer;
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.3s ease;
      z-index: 1000;
    }

    .accessibility-btn:hover {
      background: #349cc7;
      transform: scale(1.05);
    }

    .accessibility-btn:focus {
      outline: 3px solid #349cc7;
      outline-offset: 2px;
    }

    .accessibility-icon {
      width: 30px;
      height: 30px;
      fill: white;
    }

    /* Bedienhilfen-Menü */
    .accessibility-menu {
      position: fixed;
      bottom: 85px;
      right: 20px;
      background: white;
      border-radius: 10px;
      box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
      width: 320px;
      transform: translateY(20px);
      opacity: 0;
      visibility: hidden;
      transition: all 0.3s ease;
      z-index: 999;
      overflow: hidden;
    }

    .accessibility-menu.active {
      transform: translateY(0);
      opacity: 1;
      visibility: visible;
    }

    /* Tabs-Navigation */
    .tabs-container {
      display: flex;
      flex-direction: column;
      height: 100%;
    }

    .tabs-nav {
      display: flex;
      background: #f0f0f0;
      border-bottom: 1px solid #ddd;
    }

    .tab-btn {
      flex: 1;
      padding: 12px 15px;
      background: transparent;
      border: none;
      font-size: 15px;
      font-weight: 500;
      color: #666;
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .tab-btn:hover {
      background: #e6e6e6;
    }

    .tab-btn.active {
      background: #349cc7;
      color: white;
    }

    /* Tab-Inhalte */
    .tab-content {
      padding: 15px;
      display: none;
    }

    .tab-content.active {
      display: block;
    }

    .setting-item {
      margin-bottom: 15px;
    }

    .setting-item:last-child {
      margin-bottom: 0;
    }

    .setting-title {
      font-weight: 500;
      margin-bottom: 8px;
      color: #333;
    }

    /* Slider für Textgröße */
    .slider-container {
      width: 100%;
      padding: 5px 0;
    }

    .slider {
      -webkit-appearance: none;
      width: 100%;
      height: 8px;
      border-radius: 4px;
      background: #ddd;
      outline: none;
      color: #eb5d0b;
    }

    .slider::-webkit-slider-thumb {
      -webkit-appearance: none;
      appearance: none;
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background: #349cc7;
      cursor: pointer;
    }

    .slider::-moz-range-thumb {
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background: #349cc7;
      cursor: pointer;
      border: none;
    }

    .slider-value {
      display: block;
      text-align: center;
      margin-top: 5px;
      font-size: 14px;
      color: #666;
    }

    /* Optionsbuttons */
    .option-buttons {
      display: flex;
      gap: 8px;
    }

    .option-btn {
      flex: 1;
      padding: 8px 0;
      background: #f0f0f0;
      border: 1px solid #ddd;
      border-radius: 4px;
      cursor: pointer;
      font-size: 14px;
      transition: all 0.2s ease;
    }

    .option-btn:hover {
      background: #e6e6e6;
    }

    .option-btn.active {
      background: #349cc7;
      color: white;
    }

    #dyslexicToggle {
  accent-color: #349cc7;
}

#motionToggle {
  accent-color: #349cc7;
}

    /* Toggle-Switch */
    .toggle-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 12px;
    }

    .toggle-item:last-child {
      margin-bottom: 0;
    }

    .toggle-label {
      font-size: 15px;
      color: #333;
    }

    .toggle-switch {
      position: relative;
      display: inline-block;
      width: 44px;
      height: 24px;
    }

    .toggle-switch input {
      opacity: 0;
      width: 0;
      height: 0;
    }

    .toggle-slider {
      position: absolute;
      cursor: pointer;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: #ccc;
      transition: .3s;
      border-radius: 24px;
    }

    .toggle-slider:before {
      position: absolute;
      content: "";
      height: 18px;
      width: 18px;
      left: 3px;
      bottom: 3px;
      background-color: white;
      transition: .3s;
      border-radius: 50%;
    }

    input:checked + .toggle-slider {
      background-color: #5aaacf;
    }

    input:checked + .toggle-slider:before {
      transform: translateX(20px);
    }

    /* Aktions-Buttons */
    .action-buttons {
      display: flex;
      gap: 10px;
      margin-top: 15px;
      padding-top: 15px;
      border-top: 1px solid #eee;
    }

    .action-btn {
      flex: 1;
      padding: 10px 0;
      border-radius: 4px;
      font-weight: 500;
      cursor: pointer;
      transition: all 0.2s ease;
      border: none;
      font-size: 18px !important;
    }

    .save-btn {
      background: #349cc7;
      color: white;
    }

    .save-btn:hover {
      background: #349cc7;
    }

    .reset-btn {
      background: #f2f2f2;
      color: #333;
      border: 1px solid #ddd;
    }

    .reset-btn:hover {
      background: #e6e6e6;
    }

    /* Farbschema-Vorschau */
    .color-preview {
      display: flex;
      border-radius: 4px;
      overflow: hidden;
      border: 1px solid #ddd;
      height: 40px;
      margin-bottom: 10px;
    }

    .color-preview-item {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;
      transition: all 0.3s ease;
    }

    .notification {
  position: fixed;
  bottom: 3%;
  left: 75%;
  background: #28a745;
  color: white;
  padding: 12px 20px;
  border-radius: 0px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  opacity: 0;
  transform: translateY(15px);
  transition: opacity 0.3s ease, transform 0.3s ease;
  z-index: 1045;
  font-size: 16px;
}

@media screen and (max-width: 768px) {
  .notification {
    left: 5% !important;
    bottom: 5% !important;
    font-size: 14px;
    padding: 14px;
    background: #28a745;
  }
}

    .notification.show {
      opacity: 1;
      transform: translateY(0);
    }
    /* Bedienhilfen-Styles */
    body.text-size-1 {
      font-size: 200% !important;
      line-height: 1.6 !important;
    }

    body.text-size-2 {
      font-size: 200% !important;
      line-height: 1.7 !important;
    }

    body.text-size-3 {
      font-size: 220% !important;
      line-height: 1.8 !important;
    }

    body.text-size-4 {
      font-size: 235% !important;
      line-height: 1.9 !important;
    }


body.text-size-2 h3, 
body.text-size-2 h4 {
  font-size: 100% !important;
}

body.text-size-3 h3, 
body.text-size-3 h4 {
  font-size: 105% !important;
}

body.text-size-4 h3, 
body.text-size-4 h4 {
  font-size: 110% !important;
  line-height:3rem;
}


    body.high-contrast #main-nav {
background-color: #333;
}
body.high-contrast .nav.navbar-nav {
background-color: #333;
color: #fff !important;
}
    

    body.high-contrast {
      background: #333 !important;
      
    }

.sub-titel.text-center {
  line-height: 6rem;
}

    body.high-contrast .content,
    body.high-contrast p,
    body.high-contrast h1,
    body.high-contrast h2,
    body.high-contrast h3 {
      
    }

    body.high-contrast a {
      color: #fff !important;
    }
body.high-contrast #services {
  background-color: #333;
  color: #fff;
}

body.reduced-motion * {
  transition: none !important;
  animation: none !important;
}


body.high-contrast .section-title {
  background: #333;
  color: #fff;
}

    body.dyslexic-font {
      font-family: 'Arial', sans-serif;
      letter-spacing: 0.05em;
      word-spacing: 0.05em;
      line-height: 1.5;
    }


#home {
    display: flex;
    justify-content: center;
    align-items: center; 
    height: 700px; 
    overflow: hidden;
    text-align: center; 
}

@media (max-width: 992px) { /* Gilt für lg (≤992px) und kleiner */
    #home {
        
        height: 500px!important; 
        
    }
}


/* Media Queries für md (768px) und kleiner */
@media (max-width: 768px) {
  .sticky {
    width: 220px!important;
  }
  
  #sticky-social a {
    height: 46px!important;
  }
  
  #sticky-social p {
    height: 28px!important;
    font: 17px "Open Sans", sans-serif!important;
  }
  
  .fa.fa-phone.sticky::before {
    font-size: 30px!important;
  }
  
  i.sticky > p:nth-child(1) {
    margin-top: -35px!important;
    margin-right: -200px!important;
  }

#sticky-social {
  top: 17%!important;
}

body.dyslexic-font {
    letter-spacing: 0.05em;
    word-spacing: 0.05em;
    line-height: 1.3;
  }

}




    body.high-contrast .panel-heading {
background-color: #fff;
color: #333 !important;
}
body.high-contrast .panel-heading a {
color: #333 !important;
}

body.high-contrast .panel.panel-default {
background-color: #fff;
color: #333 !important;
}


body.high-contrast #portfolio {
background: #333;
color: #fff;
}
body.high-contrast .mobiles.bad {
background: #333;
color: #fff;
}

body.high-contrast #contact {
background: #333;
color: #fff;
}
body.high-contrast #main-footer {
background: #333;
color: #fff;
}


body.high-contrast #main-footer p span.foot {
color: #fff;
}
body.high-contrast .grey {
color: #fff;
color: ;
font-size: 11px;
}