@font-face {
    font-family: 'pt_sans';
    src: url('mix/pt_sans.ttf');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    color: #828486;
    font-family: 'pt_sans';
}
/* --------------------------- header start ---------------------------------------- */

/* Header Styles */
header {
    position: fixed;
    width: 100%;
    background: linear-gradient(to right, #7aced8, #326bb5);
    z-index: 1000;
    opacity: 0.9;
    padding: 0.5rem 2rem 0.5rem 18rem;
}

.header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 auto;
    position: relative;
}

.contact-info {
    display: flex;
    gap: 1.5rem;
    color: white;
    font-size: 0.9rem;
}

.contact-info a {
    color: white;
    text-decoration: none;
}

/* Dropdown Navigation */
.dropdown-nav {
    position: absolute;
    top: 100%;
    right: 0;
    background: linear-gradient(to right, #7aced8, #326bb5);
    width: 200px;
    border-radius: 0 0 5px 5px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    display: none;
}

.dropdown-nav.active {
    display: block;
    animation: fadeIn 0.3s ease;
}

.dropdown-nav ul {
    list-style: none;
    padding: 0.5rem 0;
}

.dropdown-nav li {
    padding: 0.5rem 1rem;
}

.dropdown-nav a {
    color: white;
    text-decoration: none;
    display: block;
    transition: color 0.3s ease;
}

.dropdown-nav a:hover {
    color: #e6f7ff;
}

/* Hamburger Menu Styles */
.hamburger {
    padding: 0.5rem;
    background: none;
    border: none;
    cursor: pointer;
    z-index: 1001;
}

.hamburger-box {
    width: 30px;
    height: 24px;
    display: inline-block;
    position: relative;
}

.hamburger-inner {
    width: 100%;
    height: 2px;
    background-color: white;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    transition: background-color 0.2s ease;
}

.hamburger-inner::before,
.hamburger-inner::after {
    content: "";
    width: 100%;
    height: 2px;
    background-color: white;
    position: absolute;
    left: 0;
    transition: transform 0.2s ease;
}

.hamburger-inner::before {
    top: -8px;
}

.hamburger-inner::after {
    top: 8px;
}

/* Active state for hamburger */
.hamburger.active .hamburger-inner {
    background-color: transparent;
}

.hamburger.active .hamburger-inner::before {
    transform: translateY(8px) rotate(45deg);
}

.hamburger.active .hamburger-inner::after {
    transform: translateY(-8px) rotate(-45deg);
}

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



.telefon_number {
    color: white;
}

header a {
    color: white;
    text-decoration: none;
}

.ordination_address {
    color: white;
}

.contact-info i {
    margin-right: 8px;
    color: white;
    width: 16px;
    text-align: center;
}

/* Optional: Add hover effects */
.contact-info a:hover i {
    color: #e6f7ff;
}

.copyright_text {
    color: white;
}

/* ---------------------------- header end ----------------------------------------- */

/* ---------------------------- main start ----------------------------------------- */

main {
    padding: 5rem 20vw;
}

.content-section {
    display: none;
}

.content-section.active {
    animation: fadeIn 0.5s ease-in-out;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.home_section, .about_me_section, .psychotherapie_section, .kontakt_section, .impressum_section {
    position: relative;
    display: flex;
    justify-content: center;
    width: 100%;
    padding: 0;
    margin: 0;
}

.bold_text {
    font-weight: bold;
    white-space: nowrap;
    display: inline-block;
}

/*home start*/

.home_complete {
    display: flex;
    flex-direction: row;
    margin-top: 10vh;
}

.home_text {
    flex: 1;
}

.home_img {
    flex: 1;
    display: flex;
    align-items: center;
}

.home_title {
    font-size: 1rem;
    font-weight: bold;
    color: #153763;
}

.home_name {
    font-weight: bold;
    font-size: 3rem;
    color: #153763;
}

.home_section img {
    height: 40vh;
    border-radius: 10px;
    margin-left: 4rem;
}

.home_section h1 {
    color: gray;
    font-size: 1.5rem;
    margin: 3rem auto 3rem auto;
}

 .home_description {
    font-size: 1rem;
    color: #153763;
    color: gray;
    margin-top: 1rem;
}

.home_button_div {
    text-align: center;
}

.home_button {
    display: inline-block;
    margin-top: 5rem; /* Space from last paragraph */
    padding: 12px 25px;
    background-color: #153763; /* Matching your gradient */
    color: white;
    text-decoration: none;
    border-radius: 50px;
    font-weight: bold;
    transition: background-color 0.3s ease;
}

.home_button:hover {
    background-color: #326bb5; /* Darker blue on hover */
}

/*home end*/

/*about_me start*/

.about_me_section {
    padding-top: 5vh;
}

.about_me_top_part {
    display: flex;
    gap: 2rem;
}

.about_me_section img {
    min-height: 50vh;  /* Changed from height to max-height */
    max-width: 100%;   /* Prevents horizontal stretching */
    width: auto;       /* Maintains aspect ratio */
    height: auto;      /* Maintains aspect ratio */
    object-fit: contain; /* Ensures entire image is visible without distortion */
    border-radius: 10px;
    margin: 5vh 2rem 1rem auto;
}

.beruf_ausbildung {
    display: flex;
    margin-top: 3rem;
}

.about_me_section h1 {
    margin: 2rem auto 1rem 17vw;
    color: #153763;
    font-size: 1.5rem;
}

.about_me_section p {
    vertical-align: top; /* Aligns text to the top */
    margin-left: 17vw;
    font-size: 1rem; /* Reset font size after parent's font-size: 0 */
}

.about_me_descr {
    text-align: justify;
    margin-bottom: 1rem;
}

.date {
    color: #326bb5;
    margin-top: 1rem;
}

.beruf {
    margin-left: -17vw;
    flex: 1;
}

.ausbildung {
    margin-left: -15vw;
    flex: 1;
}

.about_me_intro {
    margin-left: -17vw;
}

/*about_me end*/

/*psychotherapie start*/

.psychotherapie_section {
    /* Ensure the container properly contains floats */
    overflow: auto;
}

.psych_overpart {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 4vw;
}

.psychotherapie_section img {
    width: 18vw;
    border-radius: 10px;
    margin-top: 5vh;
}

.psych_text {
    width: 38vw;
    text-align: justify;
}

.psychotherapie_section h1 {
    color: #153763;
    font-size: 1.5rem;
    margin-top: 2rem;
    margin-bottom: 1rem;
}

.psychotherapie_section h5 {
    color: gray;
    font-size: 1rem;
    margin-top: 3rem;
    margin-bottom: -3rem;
}

.psychotherapie_section p {
    font-size: 1rem;
    margin-bottom: 1rem;
    /* Text will automatically flow around the image */
}

.psychotherapie_section li {
    margin-left: 5vw;
    font-size: 1rem;
}

.psych_underpart {
    margin-top: 5rem;
}

.psych_button {
    text-align: center;
}

/*psychotherapie end*/

/*training start*/

.training_section {
    /* Ensure the container properly contains floats */
    overflow: auto;
}

.training_overpart {
    display: flex;
    gap: 2vw;
}

.training_section img {
    width: 35.3vh;
    margin: 2rem 0 2rem 1rem;
    border-radius: 10px;
}

.training_section h1 {
    color: #153763;
    font-size: 1.5rem;
    margin-top: 2rem;
    margin-bottom: 1rem;
}

.training_section h5 {
    font-size: 1rem;
    margin-top: 3rem;
    margin-bottom: -3rem;
}

.training_section p {
    font-size: 1rem;
    margin-bottom: 1rem;
    /* Text will automatically flow around the image */
}

.training_section li {
    margin-left: 5vw;
    font-size: 1rem;
}

.training_button {
    text-align: center;
}

/*training end*/

/*faq start*/

.faq_section h1 {
    color: #153763;
    font-size: 1.5rem;
    margin-top: 3vh;
    margin-bottom: 1rem;
}

.faq_section p {
    margin-bottom: 0.5rem;
}

/* FAQ Container */
.faq-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

/* FAQ Group */
.faq-group {
  margin-bottom: 40px;
}

.faq-group-title {
  font-size: 1.5rem;
  color: #153763; /* Matching your gradient's blue */
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid #e0e0e0;
}

/* FAQ Item */
.faq-item {
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  margin-bottom: 16px;
  overflow: hidden;
}

.faq-question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  cursor: pointer;
  background: #f9f9f9;
  transition: background 0.2s ease; /*something is wrong here*/
}

.faq-question:hover {
  background: #f0f0f0;
}

.faq-question h3 {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 600;
  color: gray;
}

.toggle-btn {
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  color: #326bb5;
  padding: 0 0 0 16px;
  flex-shrink: 0;
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease, padding 0.3s ease;
}

.faq-answer.show {
  max-height: 500px; /* Adjust based on content */
  padding: 16px;
}

.faq-answer p {
  margin: 0 0 10px 0;
  line-height: 1.6;
}

.faq-answer p:last-child {
  margin-bottom: 0;
}

.faq-question {
  cursor: pointer; /* Already in your CSS, just double-check */
  user-select: none; /* Prevent text selection when clicking rapidly */
}

.faq_button {
    text-align: center;
    margin-top: -6rem;
}

/*faq end*/

/*kontakt start*/

.kontakt_container {
    display: flex;
    padding-top: 3vh;
}

.kontakt_container p {
    color: gray;
}

.map_container {
    width: 40vw;
    height: 80vh;
}

.kontakt_text {
    width: 60vw;
    padding: 2rem 4rem;
    background-color: #f8f8f8; /* Light gray background */
}

.kontakt_text h1 {
    color: #153763;
    margin-bottom: 2rem;
}

.kontakt_undertitle {
    color: gray;
    font-size: 1.1rem;
    font-weight: bold;
}

.kontakt_info {
    margin-bottom: 1.5rem;
    line-height: 1.6;
}

.kontakt_descr {
    margin-top: 2rem;
    margin-bottom: 1rem;
}

.kontakt_container li {
    margin-left: 2vw;
    color: gray;
}
/*kontakt end*/

/*impressum start*/
.impressum_tel i, .impressum_mail i, .impressum_website i {
    margin-right: 0.5rem;
    color: gray;
}

.impressum_section h1 {
    margin-bottom: 2rem auto;
    color: #153763;
    font-size: 1.5rem;
}

.impressum_section p {
    margin-top: 1rem;
}

.impressum_section li {
    margin-left: 3vw;
}
/*impressum end*/


/* ----------------------------- main end ------------------------------------------ */

/* --------------------------- footer start ---------------------------------------- */

footer {
    position: fixed;
    bottom: 0;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    width: 100%;
    height: 3rem;
    background: linear-gradient(to right, #7aced8, #326bb5);
    padding: auto;
    color: white;
    opacity: 0.9;
}



/*mask: linear-gradient(to top, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));*/

.sticky-menu ul {
    display: flex;
    justify-content: space-around;
    width: 100%;
    list-style-type: none;
}

.sticky-menu li {
    display: inline-block;
    padding: 0 2vw;
    align-self: center;
    text-align: center;
}

.fas {
    color: white;
}

.sticky-menu a {
    color: white;
    text-decoration: none;
}

.mail_address a, .ordination_address a, .f_impressum a {
    color: white;
    text-decoration: none;
}

/* ---------------------------- footer end ----------------------------------------- */