:root {
    --primary-color:#3e8100;
 --paragraph-background: #4fa3003c;
     --white: rgb(252, 252, 252);
     --black: rgb(20, 20, 20);
     font-family: 'Trebuchet MS', sans-serif;
 }
 
 html {
     height: 100%;
     margin: 0;
     padding: 0;
     scroll-behavior: smooth;
     font-size: 100%;
 }
 
 
 body {
     width: 100%;
     margin: 0;
     padding: 0;
     display: flex;
     flex-direction: column;
     align-items: stretch;
     min-height: 100%;
     max-width: 100%;
     flex-shrink: 0;
     overflow-x: hidden;
 background-color: var(--white);
 }
 
 body * {
     box-sizing: border-box;
 }
 
 
 h1 { font-size: 1.8rem; } /* 40/16 = 2.5 */
 h2 { font-size: 1.6rem; } /* 32/16 = 2 */
 h3 { font-size: 1.3rem; } /* 24/16 = 1.5 */
 h4{ font-size: 1.2rem;}
 p { font-size: 1.1rem;
     margin:  0px 5px 20px 0px;
 line-height: 1.5;} /* 16/16 = 1 */
 
 li {
     font-size: 1.1rem;
 }
 a {
     text-decoration: none;
     color: grey;
 }
 
 a:hover {
     color: rgb(188, 188, 188);
     
 }
 
 header {
     position: sticky;
     display: flex;
   
     top: 0;
     width: 100%;
     height: fit-content;
     max-height: 100px;
   
     padding: 0px 10px;
     /*overflow: hidden;*/
     background-color: rgba(255, 255, 255, 0);
     transition: 0.5s ease;
     z-index: 100;
 }
 
 .sup {
     background-color: var(--white) !important;
     color: var(--black);
 }
 
 .title {
     display: flex;
     min-width: fit-content;
     justify-content: center;
     align-items: center;
     font-size: 25px;
     font-weight: bold;
     color: var(--white);
 }
 
 .menu {
     display: flex;
     flex-wrap:wrap;
     align-content: space-evenly;
     gap: 5px;
     width: 100%;
     padding: 5px;
     justify-content: space-evenly;
     align-items: center;
 }
 
 .navigation {
     display: flex;
     height: 40px;
 
     padding: 10px;
     text-decoration: none;
     font-size: 1.1rem;
     font-weight: bold;
     border-radius: 3px;
     align-items: center;
     border: 1px solid lightgrey;
     color: rgb(20, 20, 20);
     background-color: var(--white);
     /*box-shadow: 5px 5px 10px lightgrey;*/
 
 }
 
 .navigation:hover {
     border: 1px solid grey;
     background-color: var(--primary-color);
     color: var(--white);
     /* box-shadow: 8px 8px 15px lightgrey;*/
 }
 
 .active {
     border: 1px solid grey;
     background-color: var(--primary-color);
     color: var(--white);
 }
 
 main {
     flex-grow: 1;
     display: flex;
     flex-direction: column;
     align-items: stretch;
     width: 100%;
     
     /*calc(5vw + 16px);*/
 
 }
 
 .parallax {
     top: 0;
     display: flex;
     /* The image used */
     background-image: url("images/Therapieraum.jpeg");
 
     /* Set a specific height */
     min-height: 100vh;
 
     /* Create the parallax scrolling effect */
     background-attachment: fixed;
     background-position: center;
     background-repeat: no-repeat;
     background-size: cover;
 }
 
 .overlay {
     width: 70%;
     align-self: last baseline;
     padding: 10px;
     color: var(--white);
     background-color: rgba(86, 86, 86, 0.56);
 }
 
 .popup {
     position: absolute;
     width: fit-content !important;
     top: 15%;
     
 }
 
 .paragraph {
     display: flex;
     flex-direction: column;
     width: 100%;
     height: fit-content;
     padding: 10px;
     padding-top: 15px;
     /*border-bottom: 0.5px solid;*/
     scroll-margin-block-start: 5vh;
     /*outline: green 1px dotted;*/
 }
 
 .one-column {
     display: flex;
     flex-direction: column;
     align-self: center;
     justify-self: center;
 }
 
 .multiple-columns {
     display: flex;
     flex-direction: row;
     width: 100%;
     /*outline: red 1px dotted;*/
 }
 
 .column {
     width: 100%;
     padding-left: 5px;
     padding-right: 5px;
     /*outline: yellow 1px dotted;*/
 }
 
 .inset {
     display: flex;
     flex-direction: column;
     align-self: center;
     width: 70%;
     background-color: var(--white);
     margin: 10px;
     padding: 10px;
     box-shadow: 5px 5px 10px grey;
     border-radius: 5px;
 }
 
 .paragraph:nth-child(even) {
     background-color: var(--paragraph-background);
 }
 
 .paragraph:first-child {
     padding: 0px;
     margin: 0px;
     border-bottom: none;
 }
 
 /*div.img {
     width: 100%;
     height: 100%;
 }*/
 
 .img-sub {
     margin: 2px;
     font-style: italic;
 }
 
 .paragraph:last-child {
     border-bottom: none;
 }
 
 .card-container {
     display: flex;
     height: fit-content;
     justify-content: center;
     gap: 10px;
     flex-wrap: wrap;
     align-content: center;
 }
 
 .people-card {
     display: flex;
     flex-direction: column;
    
     width: 300px;
     border-radius: 5px;
     background-color: var(--white);
     box-shadow: 5px 5px 10px grey;
 }
 
 .card-top {
     display: flex;
     height: 50%;
     align-items: center;
     justify-content: center;
     padding: 10px;
 }
 
 .card-top img {
     width: 200px;
     height: 200px;
     
     object-fit:contain;
     border-radius: 50%;
     border: 1px solid var(--primary-color);
     box-shadow: 5px 5px 10px lightgrey;
 }
 
 .card-bottom {
     
     height: 50%;
     padding: 15px;
 }
 
 article {
     display: flex;
     align-self: center;
     justify-self: center;
     width: 70%;
     border: 1px solid var(--black);
     border-radius: 5px;
 }
 
 footer {
     display: flex;
     flex-direction: column;
     align-items: center;
     width: 100%;
     height: fit-content;
     background-color: var(--primary-color);
     color: var(--white);
     font-size: 18px;
 }
 
 .footer-top {
     display: flex;
     width: 90%;
     border-bottom: 2px solid;
     padding: 10px;
 }
 
 .footer-left {
     width: 50%;
 }
 
 .footer-right {
     width: 50%;
 }
 
 .footer-bottom {
     display: flex;
     /*align-items: center;*/
     justify-content: space-between;
     width: 90%;
     padding: 10px;
 
 }
 
 .footer-bottom a {
     color: var(--white);
     text-decoration: none;
 }
 
 .footer-bottom a:hover {
     color: rgb(160, 160, 160);
 
 }
 
 
 
 button {
     font-size: 1.1rem;
     height: 40px;
     border-radius: 5px;
     background-color: var(--primary-color);
     color: var(--white);
 }
 
 .error-msg {
     width: 100%;
     height: fit-content;
     padding: 5px 10px;
     margin: 10px 0;
     background-color: rgba(255, 0, 0, 0.2);
     border: 1px solid red;
     color: rgb(233, 0, 0);
     border-radius: 5px;
 }
 
 .success-msg {
     width: 100%;
     height: fit-content;
     padding: 5px 10px;
     margin: 10px 0;
     background-color: rgba(0, 178, 0, 0.2);
     border: 1px solid rgb(0, 178, 0);
     color: rgb(0, 164, 0);
     border-radius: 5px;
 }
 
 
 .form-container {
     width: 100%;
     height: 100%;
     display: flex;
     flex-direction: column;
     align-items: center;
 }
 
 .form-container form {
     width: 100%;
     display: flex;
     flex-direction: column;
     gap: 5px;
     font-size: 1.1rem;
 }
 
 .form-container textarea {
     min-height: 150px;
     max-width: 100%;
     min-width: 100%;
 }
 
 .form-container input:not(input[type=submit]),
 .form-container textarea {
     border: 1px solid lightgrey;
     padding: 10px;
     margin: 5px 0px;
     border-radius: 5px;
     font-size: 15px;
     width: 100%;
     height: 40px;
 }
 
 .form-container input:focus,
 .form-container textarea:focus,
 .form-container select:focus {
     outline: 2px solid var(--secondary-color) !important;
 
 }
 
 .form-container select {
     border: 1px solid lightgrey;
     background-color: var(--white);
     color: var(--black);
     padding: 10px;
     margin: 5px 0px;
     border-radius: 5px;
     font-size: 15px;
     height: 40px;
 }
 
 .form-container option {
     color: var(--black);
 }
 
 .form-container select option:first-child {
     color: rgb(80, 80, 80);
 }
 
 .form-item {
     width: 100%;
     position: relative;
     display: flex;
 
 }
 
 .form-item label {
     width: fit-content;
     position: absolute;
     top: 50%;
     transform: translateY(-50%);
     left: 10px;
     padding: 0 2px;
     transition: 0.2s ease;
     color: rgb(80, 80, 80);
     cursor: text;
 }
 
 .form-error-symbol {
     /*display: none;*/
     position: absolute;
     top: 50%;
     transform: translateY(-50%);
     right: 10px;
     color: rgb(233, 0, 0);
 }
 
 .input-error {
     border: 1px solid red !important;
 }
 
 .form-item:has(input:focus, textarea:focus) label,
 .form-item:has(input:valid, textarea:valid) label {
     background-color: var(--white);
     font-size: 14px;
     transform: translateY(-170%);
     color: var(--primary-color);
     transition: 0.2s ease;
 }
 
 
 
 .form-item:has(textarea) label {
     top: 25px;
 }
 
 .in-form-container {
     padding-bottom: 10px;
 }
 
 .checkbox {
     display: inline-block;
     position: relative;
     width: fit-content;
     padding: 10px 15px;
     margin: 5px 0px;
     cursor: pointer;
     color: var(--black);;
     border-radius: 15px;
     background-color: rgb(234, 234, 234);
     text-align: center;
     -webkit-user-select: none;
     -moz-user-select: none;
     -ms-user-select: none;
     user-select: none;
 }
 
 .checkbox input {
     position: absolute;
     top: 0;
     left: 0;
     opacity: 0;
     cursor: pointer;
 
 }
 
 .checkbox:has(input:checked) {
     background-color: var(--secondary-colorer);
     border: 2px solid var(--secondary-color);
     color: var(--black);;
 }
 
 .nosee {
     display: none;
 }
 
 
 @media only screen and (max-width: 860px) {
     .title {
         display: none;
     }
 }
 
 @media only screen and (max-width: 560px) {
     html {
         font-size: 90%;
     }
 
     .footer-bottom {
         flex-direction: column;
     }
 
     .multiple-columns {
         display: flex;
         flex-direction: column;
     }
 
     .inset {
         width: 95%;
     }
 }
 
 @media only screen and (max-width: 470px) {
  
     
     .menu a {
        /* font-size: 10px;*/
     }
 
     .footer-bottom {
         flex-direction: column;
     }
 
   
 }