@charset "UTF-8";
:root {
  --bd-green-dark: #006464;
  --bd-green-light: #b9d7af;
  --bd-blue: #bee1e1;
  --bd-brown: #9b9187;
  --bd-white: #ffffff;
  --btn-one-main: var(--bd-green-dark);
  --btn-one-text: var(--bd-white);
  --btn-two-main: transparent;
  --btn-two-text: #ffffff;
  --mg-lr: 4vw;
  --wrapper-lr: 2rem;
  --mg-tb: 2vh;
  --sidebar-width: 100vw;
  --sidebar-lr: 1rem;
  --header-height: 80px;
  --header-height: calc(
    var(--dynamic-header-height) + 2 * var(--mg-tb)
  );
  --section-height: calc(100vh - var(--header-height));
  --footer-height: min(30vh, 800px);
  --slider-height: 200px;
}

@media (min-width: 350px) {
  :root {
    --slider-padding: 15%;
  }
}
@media (min-width: 800px) {
  :root {
    --scale-factor: 1.4;
    --mg-lr: 2rem;
    --mg-tb: 2rem;
    --sidebar-width: min(36vw, 400px);
    --text-btn: calc(1.5rem * var(--scale-factor)); /* 20px */
    --slider-height: 400px;
  }
}
@media (min-width: 1400px) {
  :root {
    --scale-factor: 2;
    --sidebar-width: min(36vw, 500px);
    --footer-height: min(40vh, 800px);
    --wrapper-lr: min(4vw, 8rem);
    --slider-height: 500px;
  }
}
@media (min-width: 2000px) {
  :root {
    --slider-height: 650px;
  }
}
@media (min-width: 650px) {
  :root {
    --slider-padding: 20%;
  }
}
@media (min-width: 1600px) {
  :root {
    --slider-padding: 25%;
  }
}
.flex-block {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1rem;
}

.text-link {
  font-size: var(--text-paragraph);
  line-height: 1;
}

.wrapper {
  padding-inline: var(--wrapper-lr);
}

.section-text {
  hyphens: auto;
  hyphenate-limit-chars: auto 3;
  hyphenate-limit-lines: 4;
}

/* Global Reset
==================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
  padding: 0;
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

.wp-post-image {
  max-width: 100%;
  width: auto !important;
  height: auto !important;
}

input,
button,
textarea,
select {
  font: inherit;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
  font: inherit;
}

a {
  color: inherit;
}

.site-title a {
  text-decoration: none;
}

#root,
#__next {
  isolation: isolate;
}

ul li {
  list-style: none;
}
ul li a {
  text-decoration: none;
}

/* Hide scrollbar for Chrome, Safari and Opera */
/* Hide scrollbar for IE, Edge, and Firefox */
/* Typography styles */
/* Import Fonts
==================================================== */
@font-face {
  font-family: "Diamito";
  src: url("../assets/fonts/DaimitoNormal-Semibold.woff") format("woff");
  font-weight: 600;
  font-style: semi-bold;
  text-rendering: optimizeLegibility;
}
@font-face {
  font-family: "Rockwell";
  src: url("../assets/fonts/Rockwell-Regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  text-rendering: optimizeLegibility;
}
:root {
  /* 1. The Controller (Basis 1.0 = 320px Screen) */
  --scale-factor: 1;
  /* 2. Recalculated Values */
  --heading-h1: calc(1.75rem * var(--scale-factor)); /* 28px */
  --heading-h2: calc(1.5625rem * var(--scale-factor)); /* 25px */
  --heading-h3: calc(1.25rem * var(--scale-factor)); /* 20px */
  --heading-h4: calc(1.125rem * var(--scale-factor)); /* 18px */
  --text-paragraph: calc(0.875rem * var(--scale-factor)); /* 14px */
  --text-btn: calc(0.875rem * var(--scale-factor)); /* 14px */
  --text-body: calc(0.875rem * var(--scale-factor)); /* 14px */
  --text-small: calc(0.75rem * var(--scale-factor)); /* 12px */
  /* Spacing Multipliers */
  --space-tight: 0.5em;
  --space-medium: 1em;
  --space-loose: 2em;
  /* Line-Heights */
  --line-height-body: 1.5;
  --line-height-heading: 1.2;
}

/* Define Styles
==================================================== */
body {
  font-family: "Rockwell";
  font-size: var(--text-body);
  line-height: var(--line-height-body);
  color: var(--bd-green-dark);
}

p {
  font-size: var(--text-paragraph);
  line-height: var(--line-height-body);
  margin-bottom: var(--space-loose);
  max-width: 90ch;
}

p:last-of-type:not(.section-text.kontakt) {
  margin-bottom: unset;
}

.btn {
  font-family: "Diamito";
  font-size: var(--text-btn);
  margin-bottom: var(--space-medium);
}

h1 {
  font-family: "Diamito";
  font-weight: 600;
  font-size: var(--heading-h1);
  line-height: var(--line-height-heading);
  margin-bottom: var(--space-tight);
}

h2,
.menu-item {
  font-family: "Diamito";
  font-weight: 600;
  font-size: var(--heading-h2);
  line-height: var(--line-height-heading);
  margin-bottom: var(--space-tight);
}

.menu-item {
  line-height: 1;
}

.site-title {
  font-size: 6vw;
  letter-spacing: -0.025em;
  line-height: 0.95;
  font-family: "Diamito";
  font-weight: 600;
  margin-bottom: 0;
  width: min-content;
  height: min-content;
}

.site-description {
  font-family: "Diamito";
  font-weight: 600;
  font-size: var(--heading-h3);
  line-height: 24px;
  margin-bottom: var(--space-tight);
}

h3 {
  font-family: "Diamito";
  font-size: var(--heading-h3);
  line-height: var(--line-height-heading);
  font-weight: 600;
  margin-bottom: var(--space-medium);
}

h4 {
  font-family: "Diamito";
  font-size: var(--heading-h4);
  line-height: var(--line-height-heading);
  font-weight: 600;
}

.intro-head {
  font-family: "Diamito";
  font-weight: 600;
  font-size: var(--heading-h3);
  line-height: var(--line-height-heading);
  margin-bottom: var(--space-tight);
}

@media (min-width: 350px) {
  :root {
    --scale-factor: 1.25;
  }
}
@media (min-width: 800px) {
  .site-title {
    font-family: "Diamito";
    font-weight: 600;
    line-height: var(--line-height-heading);
    line-height: 1;
    margin-bottom: var(--space-tight);
  }
  .intro-head {
    font-size: var(--heading-h2);
  }
}
@media (min-width: 1400px) {
  :root {
    --scale-factor: 1.45;
  }
}
@media (min-width: 2000px) {
  :root {
    --scale-factor: 1.85;
  }
}
/* Header layout */
.site-header {
  align-items: flex-start;
  background-color: var(--bd-white);
  position: fixed;
  z-index: 999;
  top: 0;
  left: 0;
  padding-inline: var(--mg-lr);
  padding-block: var(--mg-tb);
  height: var(--header-height);
  width: 100%;
  background-color: var(--bd-green-light);
  container: header-bar/inline-size;
}

.site-branding {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1em;
  width: 100%;
}

.site-description {
  display: none;
  line-height: 1em;
  max-inline-size: 7ch;
  margin-bottom: unset !important;
}

.burger-menu {
  --burger-button-size: 30px; /* Der klickbare Bereich (Square) */
  --burger-bar-length: 30px; /* Die horizontale Breite der Balken */
  --burger-stroke: 4px; /* Die Dicke der Balken */
  --burger-gap: 6px; /* Der vertikale Abstand zwischen den Balken */
  --burger-color: var(--bd-green-dark);
  --translate-y: calc(var(--burger-stroke) + var(--burger-gap));
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: var(--burger-button-size);
  height: var(--burger-button-size);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  gap: var(--burger-gap);
}
.burger-menu .burger-bar {
  display: block;
  width: var(--burger-bar-length);
  height: var(--burger-stroke);
  background-color: var(--burger-color);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  transform-origin: center;
  border-radius: calc(var(--burger-stroke) / 2);
}
.burger-menu.active .burger-bar:nth-child(1) {
  transform: translateY(var(--translate-y)) rotate(45deg);
}
.burger-menu.active .burger-bar:nth-child(2) {
  opacity: 0;
  transform: translateX(-10px);
}
.burger-menu.active .burger-bar:nth-child(3) {
  transform: translateY(calc(var(--translate-y) * -1)) rotate(-45deg);
}

.brand-group {
  display: flex;
  flex-direction: row;
  align-items: end;
  justify-content: space-between;
  gap: 4vw;
}

.logo-container {
  height: calc(var(--header-height) - 2.4rem);
}
.logo-container.desk {
  display: none;
}
.logo-container.mobile {
  height: 12vw;
}

.logo {
  height: 100%;
  width: auto;
}

.menu-primary-menu-container {
  margin-block: auto;
}

#site-navigation {
  position: fixed;
  top: var(--header-height);
  right: 0;
  left: auto;
  background-color: var(--bd-green-light);
  color: var(--bd-green-dark);
  width: var(--sidebar-width);
  height: calc(100dvh - var(--header-height));
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-inline: var(--wrapper-lr);
  padding-block: 2vh;
  transform: translateX(100%);
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 2000;
}

.menu-item {
  font-size: var(--heading-h1) !important;
}

#site-navigation.menu-open {
  transform: translateX(0);
}

.cta-buttons.in-menu {
  display: flex;
  flex-direction: column;
}
.cta-buttons.in-menu .btn {
  width: 100% !important;
}

@media (min-width: 800px) {
  .burger-menu {
    display: none;
  }
  body {
    margin-left: var(--sidebar-width);
  }
  #site-navigation {
    position: fixed;
    top: 0;
    left: 0;
    height: 100dvh;
    transform: unset;
    padding-top: var(--mg-tb);
    padding-inline: calc(var(--mg-lr) + 1rem);
    z-index: -1;
  }
  .site-branding {
    height: unset !important;
  }
  .site-header {
    display: flex;
    background-color: var(--bd-white);
    padding-left: calc(var(--mg-lr) + 1rem);
    padding-right: 0;
  }
  .logo-container.desk {
    display: block;
    width: calc(var(--sidebar-width) - (var(--mg-lr) + 1rem) - var(--mg-lr));
    height: 80px;
  }
  .logo-container.mobile {
    display: none;
  }
  .site-description {
    display: block;
  }
  .site-title {
    width: unset;
    height: unset;
    margin-bottom: -6px !important;
    font-size: min(4vw, 80px);
  }
  .brand-group {
    flex: 1;
    padding-inline: var(--wrapper-lr);
  }
}
@media (min-width: 1400px) {
  .menu-item {
    transition: all 0.3s ease;
  }
  .menu-item:hover,
  .menu-item:focus-visible {
    --hover-scale: 1.15;
    transform: scale(1.125);
    transform-origin: left;
  }
}
/* General layout */
body {
  margin-left: 0;
  background-color: var(--bd-white);
  height: 100vh;
}

main {
  margin-top: var(--header-height);
}

.site-section {
  --section-margin-tb: 3rem;
  padding-block: var(--section-margin-tb);
  width: 100%;
  scroll-margin-top: var(--header-height);
  container: site-section/inline-size;
}
.site-section:nth-child(1 of .site-section):not(.site-footer) {
  padding-top: 0 !important;
}

#intro {
  background-color: var(--bd-white);
  display: flex;
  flex-direction: column;
  gap: 3rem;
  margin-top: var(--header-height);
}
#intro .intro-text,
#intro .fullscreen-slider {
  margin-bottom: 0 !important;
}

.intro-text-block {
  margin-block: auto;
}

.intro-head {
  hyphens: auto;
  max-width: 60ch;
}

#leistungen {
  background-color: var(--bd-white);
}
#leistungen .list-head {
  margin-bottom: 0 !important;
}
#leistungen ul {
  margin-bottom: var(--space-medium);
}
#leistungen ul li {
  list-style: disc !important;
  list-style-position: inside !important;
}
#leistungen li::marker {
  color: var(--bd-green-dark);
}

p:has(+ ul) {
  margin-bottom: unset !important;
}

#leistungen .section-text,
#termin .section-text {
  margin-bottom: var(--space-loose);
}

#praxis {
  background-color: var(--bd-green-dark);
  color: var(--bd-blue);
  padding-top: 0 !important;
}

@media (min-width: 2000px) {
  #praxis .slick-slide {
    height: 750px !important;
  }
}
#team {
  background-color: var(--bd-white);
}

.team-member_slider {
  margin-top: 15%;
  margin-top: calc(var(--mg-tb) * 4);
}

.team-member_text {
  hyphens: auto;
}

#kontakt {
  background-color: var(--bd-brown);
  color: var(--bd-white);
}

.cta-buttons.flex-block {
  gap: 0 !important;
  margin-left: -0.75em;
}

#termin {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 2rem;
  background-color: var(--bd-green-dark);
  color: var(--bd-blue);
}
#termin .flex-block {
  gap: 0 !important;
}
#termin .btn-outline {
  color: unset;
  border-color: var(--bd-blue);
}
#termin .btn {
  margin-left: -0.75em;
}

.emergency {
  margin-bottom: 1rem;
}

.opening-hours {
  display: flex;
  flex-direction: column;
  max-width: 500px;
  font-family: "Rockwell";
}
.opening-hours__row {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  padding-bottom: 1.5rem;
}
.opening-hours__row:last-child {
  border-bottom: none;
}
.opening-hours .day {
  flex: 0 0 60px;
  font-weight: bold;
  font-size: var(--text-body);
}
.opening-hours .times-stack {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  flex: 1;
}
.opening-hours .time {
  font-size: var(--text-body);
  white-space: nowrap;
}
.opening-hours .time.is-closed {
  opacity: 0.6;
  font-style: italic;
}

@media (min-width: 500px) {
  .times-stack {
    flex-direction: row !important;
    gap: 2rem !important;
  }
}
@media (min-width: 800px) {
  body {
    margin-left: var(--sidebar-width);
  }
  #intro {
    margin-top: unset;
  }
  /* Der Header-Abstand für den Inhalt */
}
@media (min-width: 1400px) {
  .fullscreen-slider .slick-track {
    height: 500px;
  }
  #intro {
    min-height: var(--section-height);
  }
}
/* Footer layout */
.site-footer {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 2rem;
  row-gap: 2rem;
  min-height: var(--footer-height) !important;
  padding-bottom: 6% !important;
  padding-inline: var(--wrapper-lr);
  background-color: var(--bd-green-light);
  container: site-footer/inline-size;
}
.site-footer #primary-menu {
  columns: 2;
  column-gap: 5rem;
}
.site-footer .site-title {
  display: none;
}

#footer-menu .menu-item {
  font-size: var(--heading-h2) !important;
}

.footer-last-row,
.legal,
.socials {
  display: flex;
  gap: 1rem;
}

.facebook {
  display: none;
}

.footer-last-row {
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
}

.socials {
  gap: unset;
}

.socials a img {
  --social-img: 36px;
  height: var(--social-img);
  width: var(--social-img);
  padding: 16%;
}

@media (min-width: 800px) {
  .site-footer {
    background-color: var(--bd-blue);
    height: unset;
    padding-bottom: var(--mg-tb) !important;
  }
  .site-footer .menu-item:hover {
    transform: unset;
  }
  .site-footer .site-title {
    display: block;
    max-width: 10ch;
    line-height: 1.3em;
    margin-top: -0.3em;
  }
  .site-footer .footer-column-grid {
    display: flex;
    justify-content: space-between;
    align-items: start;
    flex-direction: column;
    row-gap: 2rem;
  }
  .site-footer ul {
    columns: 2;
    column-gap: 6rem;
  }
}
@container site-footer (width > 800px) {
  .footer-column-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  }
}
/* 2. Button Config */
/* 3. Base Button Class */
.btn {
  display: inline-block;
  padding: 0.15em 1em 0.1em 1em;
  font-weight: 600;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;
  text-decoration: none;
  border: 0.2em solid transparent;
  background-clip: padding-box;
  width: fit-content;
  text-wrap: nowrap;
}
.btn:active {
  transform: scale(0.97);
}

/* 4. Shape Modifiers */
.btn-rect {
  border-radius: 0.4em;
}

.btn-pill {
  border-radius: 50px;
}

/* 5. Color Identities */
.btn-one {
  --btn-main: var(--btn-one-main);
  --btn-text: var(--btn-one-text);
}

.btn-two {
  --btn-main: var(--btn-two-main);
  --btn-text: var(--btn-two-text);
}

/* 6. Style Modifiers (The Logic) */
.btn-filled {
  background-color: var(--btn-main);
  color: var(--btn-text);
  border-color: var(--btn-main);
}
.btn-filled:hover {
  background-color: transparent;
  color: var(--btn-main);
  border-color: var(--btn-main);
}

.btn-outline {
  background-color: var(--btn-main);
  color: var(--btn-text);
  border-color: var(--btn-text);
}
.btn-outline:hover {
  background-color: var(--btn-main);
  color: var(--btn-text);
  border-color: var(--btn-text);
}

.accordion-container {
  overflow: hidden;
  max-width: 100%; /* Or your preferred width */
}

summary {
  padding: 0.25em 0;
  cursor: pointer;
  font-size: var(--heading-h3);
  font-family: "Diamito";
  /* The Secret Sauce */
  display: flex;
  justify-content: space-between;
  align-items: start;
  list-style: none; /* Hides the default marker */
}
summary > p {
  flex: 1;
  min-width: 0;
  word-break: break-word;
  hyphens: auto;
  hyphenate-limit-chars: auto 3;
  hyphenate-limit-lines: 4;
}

summary p {
  font-size: var(--heading-h3);
  font-family: "Diamito";
  margin-bottom: 0;
  line-height: 1;
}

summary::-webkit-details-marker {
  display: none;
}

summary::after {
  content: "+";
  margin-top: -0.1em;
  margin-left: 2rem;
  font-size: var(--heading-h1);
  line-height: 1;
}

/* State Change */
details[open] summary::after {
  content: "−";
}

.content {
  padding: 1rem 0;
  line-height: 1.5;
}

.team-member_slider {
  container: team-member_slider/inline-size;
}

.team-member {
  display: flex !important;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 2rem;
  align-items: center;
  justify-content: flex-start;
  margin-inline: 2vw;
}

.team-member_profile {
  aspect-ratio: 1/1;
  border-radius: 50%;
  overflow: hidden;
  width: 200px;
}

.team-member_profile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.team-member_info {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 2rem;
  text-align: center;
  gap: 0.2em !important;
  max-width: 30ch;
}

.team-member_headline {
  font-size: var(--heading-h3);
}

.team-member_text {
  font-size: var(--text-small);
  line-height: var(--line-height-body);
}

.team-member_job,
.team-member_pets {
  font-size: var(--text-small);
  font-style: italic;
}

@media (max-width: 1800px) {
  .team-member_slider .slick-list {
    padding: 0 var(--slider-padding) !important;
  }
}
.team-member_slider {
  overflow: hidden;
}
.team-member_slider .slick-list {
  overflow: visible;
}
.team-member_slider .slick-slide {
  transition: all 0.2s ease;
  opacity: 0.5;
}
.team-member_slider .slick-slide.slick-center {
  opacity: 1;
}

@media (min-width: 1400px) {
  .team-member_slider {
    display: flex;
    justify-content: space-between;
    padding-inline: var(--wrapper-lr);
    gap: 4rem;
  }
  .team-member_profile {
    width: 300px;
  }
}

/*# sourceMappingURL=custom-style.css.map */