@charset "UTF-8";
@layer reset {
  /* Box sizing rules */
  *,
  *::before,
  *::after {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
  }
  main {
    min-height: 100dvh;
  }
  body {
    scroll-behavior: smooth;
    font-family: 'Open Sans', Arial, sans-serif;
    font-size: 16px;
    -webkit-text-size-adjust: none;
    -moz-text-size-adjust: none;
    -ms-text-size-adjust: none;
    text-size-adjust: none;
    color: var(--dark-grey-10);
    line-height: 1.6;
    background-color: var(--background);
  }
  h1,
  h2,
  h3 {
    font-family: 'Source Serif 4', Georgia, serif;
  }
  html {
    scroll-behavior: smooth;
  }
  /* Remove default margin in favour of better control in authored CSS */
  body,
  h1,
  h2,
  h3,
  h4,
  p,
  figure,
  blockquote,
  dl,
  dd {
    -webkit-margin-after: 0;
    margin-block-end: 0;
  }
  /* all unset*/
  button {
    all: unset;
    display: block;
  }
  /* Inherit fonts for inputs and buttons */
  input,
  button,
  textarea,
  select {
    font-family: inherit;
    font-size: inherit;
  }
  /* Make images easier to work with */
  img,
  picture {
    max-width: 100%;
    height: auto;
    display: block;
  }
  svg {
    pointer-events: none;
  }
  ul:not(.list) {
    margin: 0;
  }
  ul:not(.list) li {
    list-style: none;
  }
  a {
    text-decoration: none;
  }
  @media (prefers-reduced-motion: reduce) {
    * {
      scroll-behavior: auto !important;
      -webkit-animation-duration: 0s !important;
      animation-duration: 0s !important;
      transition-duration: 0s !important;
    }
  }
  /* Statusbar-Hintergrund (iOS Notch / Safe Area) */
  .statusbar-bg {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    /* Höhe der Statusbar dynamisch */
    height: env(safe-area-inset-top);
    /* deine Wunschfarbe (z. B. Lila) */
    background-color: var(--purple);
    /* über Inhalt legen */
    z-index: 999;
  }
}
/**
Breakpoints
*/
@layer colors {
  :root {
    --main-greyblue: oklch(63.902% 0.02925 246.61);
    --purple: oklch(39.961% 0.12934 345.978);
    --purple10: oklch(49.783% 0.10432 346.058);
    --green: oklch(69.406% 0.14303 111.004);
    --green10: oklch(76.88% 0.11596 107.186);
    --light-grey: oklch(86.026% 0.01326 266.728);
    --light-grey10: oklch(78.963% 0.01625 257.292);
    --grey: oklch(71.048% 0.02465 252.312);
    --grey-10: oklch(63.902% 0.02925 246.61);
    --dark-grey10: oklch(69.601% 0.00008 271.152);
    --dark-grey: oklch(54.517% 0.00006 271.152);
    --dark-grey-10: oklch(from var(--dark-grey) calc(l - 0.1) c h);
    --dark-grey-20: oklch(from var(--dark-grey) calc(l - 0.2) c h);
    --black: hsl(0, 0%, 0%);
    --white: hsl(0, 0%, 100%);
    --background: oklch(97.015% 0.00011 271.152);
    --link-blue: oklch(43.06% 0.23242 263.605);
    --cl-grey-bg-text-box: oklch(from var(--dark-grey) l c h / 0.7);
    --cl-purple-bg-text-box: oklch(from var(--purple) l c h / 0.7);
    --cl-green-bg-text-box: oklch(from var(--green) l c h / 0.7);
    --cl-navigation: var(--main-greyblue);
    --cl-card-background: oklch(27.666% 0.04719 348.195);
  }
}
@layer spaces {
  :root {
    --nav-block-start: 20px;
    --space-footer: clamp(3rem, 6vw, 6rem);
    --space-wrapper: clamp(2rem, 0.5918rem + 7.0408vw, 10.625rem);
    --space-section: clamp(4rem, 8vw, 8rem);
    --space-content: clamp(1rem, 2vw, 4rem);
    --space-heading-text: clamp(0.35rem, 0.45rem, 0.6rem)
      clamp(0.6rem, 0.8rem, 1.1rem);
    --prose-flow: 0.9rem; /* Standard Abstand */
    --prose-h1: clamp(1rem, 2vw, 1.75rem); /* nach h1/h2 */
    --prose-h3: 0.75rem; /* nach h3 */
    --prose-p: 0.5rem; /* p zu p */
  }
}
/*
! * Hintergrundmöglichkeiten * ! 	
* #f9f9f9 → fast weiß, aber etwas sanfter
* #f5f5f5 → Standard “Off-White”, häufig genutzt in UIs
* #f7f8fa → leicht ins Bläuliche, wirkt ruhiger
* #fafaf7 → minimal warm, angenehmer für längeres Lesen
* hsl(0, 0%, 97%) → flexibler in HSL, kannst du leicht heller/dunkler anpassen
*/
@layer fonts {
  @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-v44-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }
  /* open-sans-italic - 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: italic;
    font-weight: 400;
    src: url('/fonts/open-sans-v44-latin-italic.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-v44-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }
  /* open-sans-600italic - 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: italic;
    font-weight: 600;
    src: url('/fonts/open-sans-v44-latin-600italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }
  /* source-serif-4-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: 'Source Serif 4';
    font-style: normal;
    font-weight: 400;
    src: url('/fonts/source-serif-4-v14-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }
  /* source-serif-4-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: 'Source Serif 4';
    font-style: normal;
    font-weight: 600;
    src: url('/fonts/source-serif-4-v14-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }
  /* source-serif-4-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: 'Source Serif 4';
    font-style: normal;
    font-weight: 700;
    src: url('/fonts/source-serif-4-v14-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }
}
@layer fontsizes {
  h1,
  .h1 {
    font-size: clamp(1.75rem, 1.125rem + 3.125vw, 3.625rem);
    line-height: 1.1;
  }
  h1:not(.background__heading),
  .h1:not(.background__heading) {
    color: var(--purple);
  }
  h2,
  .h2 {
    color: var(--dark-grey-20);
    font-size: clamp(1.35rem, 0.8833rem + 2.3333vw, 2.75rem);
    line-height: 1.2;
  }
  h3,
  .h3 {
    font-size: clamp(1.5rem, 1.3367rem + 0.8163vw, 2.5rem);
    line-height: 1.3;
  }
  h4 {
    font-size: clamp(1.25rem, 1.0459rem + 1.0204vw, 2.25rem);
    line-height: 1.4;
  }
  h5 {
    font-size: clamp(1.15rem, 0.9867rem + 0.8163vw, 2.15rem);
    line-height: 1.5;
  }
  h6 {
    font-size: clamp(1.1rem, 1vw + 0.1rem, 1.3rem);
    line-height: 1.5;
  }
  p:not(.background__heading, .home__aerzte-card-text, address > p),
  li:not(.background__heading, .home__aerzte-card-text, address > p),
  a:not(.background__heading, .home__aerzte-card-text, address > p),
  span:not(.background__heading, .home__aerzte-card-text, address > p) {
    font-size: clamp(1rem, 0.9107rem + 0.4464vw, 1.125rem);
    line-height: 1.6;
    font-weight: 400;
    color: var(--dark-grey-20);
    letter-spacing: 0.01em;
  }
  @media (min-width: 768px) {
    p,
    li,
    a,
    span {
      line-height: 1.5;
    }
  }
  a:not(.primarynav__link) {
    color: var(--link-blue);
    text-decoration: underline;
  }
  a:not(.primarynav__link):visited {
    color: var(--link-blue);
  }
}
@layer layout {
  :root {
    --space-section-gap: clamp(3.5rem, 6vw, 7rem);
    --space-content-gap: clamp(1.5rem, 3vw, 2.5rem);
    --section-element-gap: clamp(0.75rem, 1.5vw, 1.25rem);
    --footer-height: clamp(4.375rem, 4.324rem + 0.2551vw, 4.6875rem);
    --full: minmax(1rem, 1fr);
    --wide: min(3vw, 40px);
  }
  .wrapper {
    --max-content-width: 1440px;
    display: grid;
    width: min(100%, 1440px);
    margin-inline: auto;
    overflow-x: hidden;
    /* 5 Spalten
    1. Links außen (flexibel)
    2. Links "Popout" (für breitere Medien)
    3. Center Content (Hauptinhalt max-width: 1200px)
    4. Rechts "Popout" (für breitere Medien)
    5. Rechts außen (flexibel)
    */
    grid-template-columns:
      [full-start] var(--full) [wide-start] var(--wide)
      [content-start] minmax(0, 1200px) [content-end] var(--wide)
      [wide-end] var(--full) [full-end];
    /* Standardmäßig sollen alle direkten Kinder der Wrapper-Klasse in der Content-Spalte liegen */
  }
  .wrapper > * {
    grid-column: content;
  }
  .wrapper {
    /* Klassen für Ausbrechende Elemente */
    /* Elemente, die über die breite "wide" gehen sollen, z.B. breitere Bilder oder Medien max 1440px */
  }
  .wrapper > .break-wide {
    grid-column: wide;
  }
  .wrapper {
    /* Elemente, die über die volle Breite gehen sollen, z.B. Hintergrundbilder oder -farben */
  }
  .wrapper > .break-full {
    grid-column: full;
    width: 100%;
  }
  .sub-grid {
    display: grid;
    grid-template-columns: inherit;
    /* Damit die Sub-Grid-Elemente die gleiche Spaltenstruktur wie der übergeordnete Grid haben */
    grid-column: full;
  }
  main.wrapper {
    position: relative;
    flex-grow: 1;
    align-content: start;
    grid-template-rows: auto;
  }
  main.wrapper > * + * {
    -webkit-margin-before: var(--space-section-gap, 1rem);
    margin-block-start: var(--space-section-gap, 1rem);
  }
  .section-content {
    grid-column: content;
    display: flex;
    flex-direction: column;
    gap: var(--space-content-gap);
  }
  .section-content ul:not(.team__picture-container, .list) {
    display: flex;
    flex-direction: column;
    gap: var(--section-element-gap);
    margin: 0; /* Entfernt den Standardabstand von ul */
    padding-left: 2rem; /* Einrückung für Listenpunkte */
  }
  body {
    display: grid;
    grid-template-areas: 'nav' 'main' 'footer';
    grid-template-rows: auto 1fr auto;
  }
  #primarynav {
    grid-area: nav;
  }
  main {
    grid-area: main;
  }
  footer {
    grid-area: footer;
  }
  footer.main-footer {
    -webkit-margin-before: var(--space-section-gap);
    margin-block-start: var(--space-section-gap);
    padding: 1rem;
    background-color: var(--main-greyblue);
    height: var(--footer-height);
    text-align: center;
  }
  .section {
    min-height: 300px;
  }
  .bold {
    font-weight: bold;
  }
}
@layer mainstyles {
  .t-bold {
    font-weight: bold;
  }
  .skip__link {
    display: block;
    position: absolute;
    left: -999px;
    top: -999px;
  }
  .skip__link:focus {
    left: 0;
    top: 0;
    padding: 3px;
    background: #ffc;
    border: 1px solid #990000;
  }
  .visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
}
@layer navigation {
  :root {
    --nav-height-small: 65px;
    --nav-heightlarge: 80px;
    --breakpoint: 1024px;
  }
  .main-navigation {
    position: fixed;
    inset: 0 0 auto 0;
    height: var(--nav-height-small);
    background-color: var(--main-greyblue);
    z-index: 999;
  }
  .main-navigation__wrapper {
    height: 100%;
  }
  .main-navigation__content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-block: 0.5rem;
  }
  .main-navigation__logo {
    display: block;
    width: -webkit-max-content;
    width: max-content;
    height: 100%;
    background-color: var(--white);
  }
  .main-navigation__logo:focus-visible {
    outline: 3px solid #005fcc;
    outline-offset: 4px;
  }
  .main-navigation__img {
    height: 100%;
    width: auto;
  }
  .main-navigation__toggle {
    display: none;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
  }
  .main-navigation__toggle.is-open span:nth-child(1) {
    -webkit-transform: translateY(8px) rotate(45deg);
    transform: translateY(8px) rotate(45deg);
  }
  .main-navigation__toggle.is-open span:nth-child(2) {
    opacity: 0;
  }
  .main-navigation__toggle.is-open span:nth-child(3) {
    -webkit-transform: translateY(-8px) rotate(-45deg);
    transform: translateY(-8px) rotate(-45deg);
  }
  .main-navigation__toggle:focus-visible {
    outline: 3px solid #005fcc;
    outline-offset: 4px;
  }
  @media (max-width: 1023px) {
    .main-navigation__toggle {
      display: block;
    }
  }
  .main-navigation__toggle-lines {
    display: block;
    width: 28px;
    height: 3px;
    margin: 5px auto;
    background: var(--white);
    transition:
      opacity 200ms ease,
      -webkit-transform 200ms ease;
    transition:
      transform 200ms ease,
      opacity 200ms ease;
    transition:
      transform 200ms ease,
      opacity 200ms ease,
      -webkit-transform 200ms ease;
  }
  .main-navigation__container ul {
    display: flex;
    gap: 1rem;
    list-style: none;
  }
  .main-navigation__container ul li {
    position: relative;
  }
  .main-navigation__container ul li a {
    color: var(--white);
    text-decoration: none;
    font-size: clamp(0.75rem, 0.1346rem + 0.9615vw, 1rem);
  }
  .main-navigation__container ul li a::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -0.3rem;
    width: 100%;
    height: 2px;
    background: currentColor;
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transform-origin: left;
    transform-origin: left;
    transition: -webkit-transform 200ms ease;
    transition: transform 200ms ease;
    transition:
      transform 200ms ease,
      -webkit-transform 200ms ease;
  }
  .main-navigation__container ul li a[aria-current='page']::after,
  .main-navigation__container ul li a:hover::after,
  .main-navigation__container ul li a:focus-visible::after {
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
  }
  .main-navigation__container ul li a:focus-visible {
    outline: 3px solid #005fcc;
    outline-offset: 4px;
  }
  @media (max-width: 1023px) {
    .main-navigation__container {
      position: fixed;
      top: var(--nav-height-small);
      left: 0;
      background: oklch(from var(--main-greyblue) l c h/0.38);
      visibility: hidden;
      -webkit-transform: translateX(-100%);
      transform: translateX(-100%);
      transition: -webkit-transform 300ms ease;
      transition: transform 300ms ease;
      transition:
        transform 300ms ease,
        -webkit-transform 300ms ease;
      width: 60vw;
      height: 100%;
      backdrop-filter: blur(14px) saturate(1.3);
      padding-block: 1rem;
      padding-inline: 1.5rem;
    }
    .main-navigation__container ul {
      flex-direction: column;
      width: -webkit-max-content;
      width: max-content;
    }
    .main-navigation__container ul li {
      opacity: 0;
      -webkit-transform: translateX(-24px);
      transform: translateX(-24px);
    }
    .main-navigation__container ul li a {
      font-size: 16px;
    }
    .main-navigation__container.is-open {
      -webkit-transform: translateX(0);
      transform: translateX(0);
      visibility: visible;
    }
    .main-navigation__container.is-open li {
      -webkit-animation: navItemIn 300ms ease forwards;
      animation: navItemIn 300ms ease forwards;
    }
    .main-navigation__container.is-open li:nth-child(1) {
      -webkit-animation-delay: 80ms;
      animation-delay: 80ms;
    }
    .main-navigation__container.is-open li:nth-child(2) {
      -webkit-animation-delay: 140ms;
      animation-delay: 140ms;
    }
    .main-navigation__container.is-open li:nth-child(3) {
      -webkit-animation-delay: 200ms;
      animation-delay: 200ms;
    }
    .main-navigation__container.is-open li:nth-child(4) {
      -webkit-animation-delay: 260ms;
      animation-delay: 260ms;
    }
    .main-navigation__container.is-open li:nth-child(5) {
      -webkit-animation-delay: 320ms;
      animation-delay: 320ms;
    }
    .main-navigation__container.is-open li:nth-child(6) {
      -webkit-animation-delay: 380ms;
      animation-delay: 380ms;
    }
    .main-navigation__container.is-open li:nth-child(7) {
      -webkit-animation-delay: 440ms;
      animation-delay: 440ms;
    }
    .main-navigation__container.is-open li:nth-child(8) {
      -webkit-animation-delay: 500ms;
      animation-delay: 500ms;
    }
    .main-navigation__container.is-open li:nth-child(9) {
      -webkit-animation-delay: 560ms;
      animation-delay: 560ms;
    }
    .main-navigation__container.is-open li:nth-child(10) {
      -webkit-animation-delay: 620ms;
      animation-delay: 620ms;
    }
    .main-navigation__container.is-open li:nth-child(11) {
      -webkit-animation-delay: 680ms;
      animation-delay: 680ms;
    }
    .main-navigation__container.is-open li:nth-child(12) {
      -webkit-animation-delay: 740ms;
      animation-delay: 740ms;
    }
  }
  @-webkit-keyframes navItemIn {
    to {
      opacity: 1;
      -webkit-transform: translateX(0);
      transform: translateX(0);
    }
  }
  @keyframes navItemIn {
    to {
      opacity: 1;
      -webkit-transform: translateX(0);
      transform: translateX(0);
    }
  }
}
/* @forward 'docmedico'; */
@layer consent-overlay {
  .consent-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--dark-grey);
    z-index: 9999;
  }
  .consent-overlay__text {
    font-size: clamp(0.875rem, 0.7917rem + 0.4167vw, 1.125rem);
  }
  .consent-overlay__box {
    position: absolute;
    display: grid;
    inset: 10% 0.5em;
    padding: clamp(1rem, 0.6667rem + 1.6667vw, 2rem);
    background-color: var(--white);
    gap: 1rem;
  }
  @media (min-width: 768px) {
    .consent-overlay__box {
      inset: 14% 6em;
    }
  }
  @media (min-width: 1180px) {
    .consent-overlay__box {
      inset: 14% 13em;
    }
  }
  @media (min-width: 1800px) {
    .consent-overlay__box {
      inset: 14% 500px;
    }
  }
  .consent-overlay__options {
    padding: 1rem;
  }
  .consent-overlay__buttons {
    -webkit-columns: 2;
    -moz-columns: 2;
    columns: 2;
    width: -webkit-max-content;
    width: max-content;
  }
  body.consent-locked {
    overflow: hidden;
    height: 100vh;
  }
}
@layer headings {
  .background__heading,
  .background__heading-subtext {
    width: -webkit-max-content;
    width: max-content;
    padding: var(--space-heading-text);
    background-color: oklch(from var(--main-greyblue) l c h/0.7);
    font-weight: normal;
    color: var(--white);
  }
  .background__heading-subtext {
    font-size: clamp(1.15rem, 0.9867rem + 0.8163vw, 2.15rem);
  }
}
@layer buttons {
  .fixed__btn-container {
    display: flex;
    flex-direction: column;
    position: fixed;
    bottom: 125px;
    right: clamp(0.75rem, -3.5833rem + 13vw, 13.75rem);
    gap: 1rem;
    z-index: 9999;
  }
  .fixed__btn {
    display: flex;
    width: clamp(2.5rem, 0.75rem + 3.75vw, 3.75rem);
    justify-content: center;
    align-items: center;
    background-color: var(--purple);
    padding: 0.5rem;
    border-radius: 100vmax;
  }
  .btn {
    display: inline-block;
    padding-block: var(--block);
    padding-inline: var(--inline);
    border: 1px solid var(--purple);
    border-radius: 5px;
  }
  .btn__primary {
    background-color: var(--purple);
    color: var(--white);
  }
  .btn__primary:hover {
    background-color: var(--purple20);
  }
  .btn__secondary {
    background-color: var(--white);
    color: var(--purple);
  }
}
@layer cards {
  .teamCard {
    position: relative;
    align-items: stretch;
  }
  .teamCard__list {
    position: relative;
    -webkit-perspective: 1000px;
    perspective: 1000px;
    width: 100%;
    aspect-ratio: 2/3;
    border-radius: 5px;
  }
  .teamCard__inner {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    cursor: pointer;
  }
  @media (hover: hover) and (pointer: fine) {
    .teamCard__inner:hover .teamCard__backside {
      -webkit-transform: translateX(0);
      transform: translateX(0);
    }
  }
  .teamCard__frontside,
  .teamCard__backside {
    position: absolute;
    inset: 0;
    overflow: hidden;
  }
  .teamCard__frontside {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
    grid-template-areas: 'stack';
    transition: opacity 0.5s ease-in-out;
  }
  .teamCard__frontside > * {
    grid-area: stack;
    min-width: 0;
    min-height: 0;
  }
  .teamCard__img {
    width: 100%;
    height: 100%;
    max-width: none;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: center;
    object-position: center;
  }
  .teamCard__content {
    background: linear-gradient(
      to top,
      rgba(0, 0, 0, 0.9) 0%,
      rgba(0, 0, 0, 0) 40%
    );
    display: grid;
    align-content: end;
    justify-content: right;
    justify-items: right;
    -webkit-padding-end: 0.8rem;
    padding-inline-end: 0.8rem;
    -webkit-padding-after: 1rem;
    padding-block-end: 1rem;
  }
  .teamCard__heading-subtext {
    color: var(--white);
    font-size: clamp(0.625rem, 0.5833rem + 0.2083vw, 0.75rem);
  }
  .teamCard__heading-maintext {
    color: var(--white);
    font-size: clamp(0.75rem, 0.7083rem + 0.2083vw, 0.875rem);
  }
  .teamCard__backside {
    padding: 0.3em;
    align-content: center;
    background: oklch(from var(--cl-card-background) l c h/0.5);
    backdrop-filter: blur(10px);
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
    transition:
      opacity 0.5s ease-in-out,
      -webkit-transform 0.5s cubic-bezier(0.25, 1, 0.5, 1);
    transition:
      transform 0.5s cubic-bezier(0.25, 1, 0.5, 1),
      opacity 0.5s ease-in-out;
    transition:
      transform 0.5s cubic-bezier(0.25, 1, 0.5, 1),
      opacity 0.5s ease-in-out,
      -webkit-transform 0.5s cubic-bezier(0.25, 1, 0.5, 1);
  }
  .teamCard__backside[aria-hidden='false'] {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
  .teamCard__btn {
    display: block;
    position: absolute;
    top: 5px;
    right: 5px;
    width: 10%;
    aspect-ratio: 1/1;
  }
  @media (hover: hover) and (pointer: fine) {
    .teamCard__btn {
      display: none;
    }
  }
  .teamCard__btn svg {
    width: 100%;
    height: 100%;
    fill: var(--white);
  }
  .teamCard__job-desc {
    width: 100%;
    color: var(--white);
    font-size: clamp(0.6875rem, 0.5417rem + 0.7292vw, 1.125rem);
    padding-block: clamp(0.3rem, 0.1333rem + 0.8333vw, 0.8rem);
    text-align: center;
  }
}
@layer slider {
  .image-slider {
    position: relative;
    width: 100%;
    overflow: hidden;
  }
  .image-slider:has(.image-slider__button[aria-pressed='true'])
    .image-slider__track {
    -webkit-animation-play-state: paused;
    animation-play-state: paused;
  }
  .image-slider__viewport {
    width: 100%;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(
      to right,
      transparent,
      black 10% 90%,
      transparent
    );
    mask-image: linear-gradient(
      to right,
      transparent,
      black 10% 90%,
      transparent
    );
  }
  .image-slider__track {
    position: relative;
    width: -webkit-max-content;
    width: max-content;
    display: flex;
    align-items: center;
    gap: 1rem;
    will-change: transform;
    -webkit-animation: scroll 45s linear infinite;
    animation: scroll 45s linear infinite;
  }
  @media (hover: hover) and (pointer: fine) {
    .image-slider__track:hover {
      -webkit-animation-play-state: paused;
      animation-play-state: paused;
    }
  }
  .image-slider__slides {
    width: min(50vw, 300px);
    height: -webkit-max-content;
    height: max-content;
    border-radius: 5px;
    overflow: hidden;
  }
  @media (min-width: 768px) {
    .image-slider__slides {
      width: min(60vw, 600px);
    }
  }
  .image-slider__slides img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
  }
  .image-slider__control-container {
    display: none;
    justify-content: center;
    align-items: center;
    width: min(200px, 60%);
    height: -webkit-max-content;
    height: max-content;
    background-color: var(--purple);
    border-radius: 32px;
    margin-inline: auto;
    -webkit-margin-before: 1rem;
    margin-block-start: 1rem;
  }
  @media (hover: none) and (pointer: coarse) {
    .image-slider__control-container {
      display: flex;
    }
  }
  .image-slider__button {
    width: 35px;
    aspect-ratio: 1/1;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 32px;
    margin-inline: auto;
    cursor: pointer;
  }
  .image-slider__button[aria-pressed='true'] .image-slider__button-icon-pause {
    display: none;
  }
  .image-slider__button[aria-pressed='true'] .image-slider__button-icon-play {
    display: block;
  }
  .image-slider__button[aria-pressed='false'] .image-slider__button-icon-pause {
    display: block;
  }
  .image-slider__button[aria-pressed='false'] .image-slider__button-icon-play {
    display: none;
  }
  .image-slider__icon {
    fill: var(--white);
    width: 100%;
    height: 100%;
  }
  @-webkit-keyframes scroll {
    to {
      -webkit-transform: translateX(-50%);
      transform: translateX(-50%);
    }
  }
  @keyframes scroll {
    to {
      -webkit-transform: translateX(-50%);
      transform: translateX(-50%);
    }
  }
}
@layer mainheader {
  .site__header {
    display: grid;
    grid-template-areas: 'hero-stack';
    width: 100%;
    overflow: hidden;
    -webkit-margin-before: var(--nav-height-small);
    margin-block-start: var(--nav-height-small);
  }
  .site__header-media {
    grid-area: hero-stack;
    grid-column: full;
    display: block;
    width: 100%;
    height: 100%;
  }
  .site__header-media img {
    width: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: center;
    object-position: center;
  }
  .site__header-overlay {
    grid-area: hero-stack;
    grid-column: full;
    display: grid;
    background: linear-gradient(
      to top,
      rgba(0, 0, 0, 0.9) 0%,
      rgba(0, 0, 0, 0) 60%
    );
    align-items: end;
  }
  .site__header-content {
    color: #ffffff;
    max-width: 600px; /* Verhindert, dass der Text zu lang und unlesbar wird */
    -webkit-margin-after: clamp(1.1875rem, -0.6161rem + 9.0179vw, 7.5rem);
    margin-block-end: clamp(1.1875rem, -0.6161rem + 9.0179vw, 7.5rem);
  }
  .site__header-hero-titel {
    color: var(--white);
    font-size: clamp(1.5rem, 0.9286rem + 2.8571vw, 3.5rem);
    margin-bottom: 0.5rem;
    font-weight: 700;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* Zusätzlicher Schutz für Lesbarkeit */
  }
  .site__header-hero-subtitel {
    color: var(--white);
    font-size: clamp(0.875rem, 0.6964rem + 0.8929vw, 1.5rem);
    opacity: 0.9;
  }
}
@layer bento-grid {
  .activity-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    grid-auto-rows: 150px;
    gap: 16px;
    grid-auto-flow: dense;
  }
  .activity-grid .grid-item {
    position: relative;
    overflow: hidden;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    transition:
      box-shadow 0.3s ease,
      -webkit-transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);
    transition:
      transform 0.3s cubic-bezier(0.25, 1, 0.5, 1),
      box-shadow 0.3s ease;
    transition:
      transform 0.3s cubic-bezier(0.25, 1, 0.5, 1),
      box-shadow 0.3s ease,
      -webkit-transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);
  }
  .activity-grid .grid-item::after {
    content: '+';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(0, 0, 0, 0.4);
    color: #ffffff;
    font-size: 3rem;
    font-weight: 300;
    opacity: 0;
    -webkit-transform: translateY(10px);
    transform: translateY(10px);
    transition:
      opacity 0.3s ease,
      -webkit-transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);
    transition:
      opacity 0.3s ease,
      transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);
    transition:
      opacity 0.3s ease,
      transform 0.3s cubic-bezier(0.25, 1, 0.5, 1),
      -webkit-transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);
    pointer-events: none;
  }
  @media (hover: hover) and (pointer: fine) {
    .activity-grid .grid-item:hover {
      -webkit-transform: scale(1.02);
      transform: scale(1.02);
      box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
    }
    .activity-grid .grid-item:hover::after {
      opacity: 1;
      -webkit-transform: translateY(0);
      transform: translateY(0);
    }
    .activity-grid .grid-item:hover img {
      -webkit-transform: scale(1.06);
      transform: scale(1.06);
    }
  }
  .activity-grid .grid-item:focus {
    outline: none;
  }
  .activity-grid .grid-item:focus-visible {
    outline: 3px solid #0056b3;
    outline-offset: 4px;
  }
  .activity-grid .grid-item picture,
  .activity-grid .grid-item img {
    width: 100%;
    height: 100%;
    display: block;
  }
  .activity-grid .grid-item img {
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: center;
    object-position: center;
    transition: -webkit-transform 0.5s ease;
    transition: transform 0.5s ease;
    transition:
      transform 0.5s ease,
      -webkit-transform 0.5s ease;
  }
  @media (hover: none) and (pointer: coarse) {
    .activity-grid .grid-item::after {
      display: none;
    }
  }
  .activity-grid .item-landscape {
    grid-column: span 2;
    grid-row: span 1;
  }
  .activity-grid .item-portrait {
    grid-column: span 1;
    grid-row: span 2;
  }
  .activity-grid .item-big {
    grid-column: span 2;
    grid-row: span 2;
  }
  @media (max-width: 480px) {
    .activity-grid {
      grid-template-columns: repeat(2, 1fr);
      grid-auto-rows: 120px;
      gap: 10px;
    }
    .activity-grid .item-landscape,
    .activity-grid .item-portrait,
    .activity-grid .item-big {
      grid-column: span 2;
      grid-row: span 1;
    }
    .activity-grid .item-portrait {
      grid-row: span 2;
    }
  }
}
@layer lightbox {
  .lightbox-dialog {
    border: none;
    background: transparent;
    padding: 0;
    max-width: 90vw;
    max-height: 85vh;
    overflow: visible;
    place-self: center;
  }
  .lightbox-dialog::-ms-backdrop {
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(5px);
    opacity: 0;
    -ms-transition: opacity 0.4s ease;
    transition: opacity 0.4s ease;
  }
  .lightbox-dialog::backdrop {
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(5px);
    opacity: 0;
    transition: opacity 0.4s ease;
  }
  .lightbox-dialog[open] {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .lightbox-dialog[open]::-ms-backdrop {
    opacity: 1;
  }
  .lightbox-dialog[open]::backdrop {
    opacity: 1;
  }
  .lightbox-dialog[open] .lightbox-content img {
    height: 85vh;
    opacity: 1;
  }
  .lightbox-content {
    position: relative;
  }
  .lightbox-content img {
    max-width: 100%;
    -o-object-fit: contain;
    object-fit: contain;
    border-radius: 4px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    height: 0;
    opacity: 0;
    transition:
      height 0.5s cubic-bezier(0.25, 1, 0.5, 1),
      opacity 0.4s ease;
  }
  .lightbox-close-btn {
    position: absolute;
    top: -45px;
    right: 0;
    background: none;
    border: none;
    color: #fff;
    font-size: 3rem;
    cursor: pointer;
    line-height: 1;
  }
}
@layer home {
  .home__times-section {
    scroll-margin-block-start: 6rem;
  }
  .home__times-content {
    display: grid;
    gap: 2rem;
  }
  .home__times-container {
    width: -webkit-max-content;
    width: max-content;
    display: grid;
    grid-template-columns: -webkit-max-content -webkit-max-content;
    grid-template-columns: max-content max-content;
    grid-auto-rows: -webkit-max-content;
    grid-auto-rows: max-content;
    -webkit-column-gap: 3rem;
    -moz-column-gap: 3rem;
    column-gap: 3rem;
    row-gap: 0.5rem;
    align-items: center;
    margin-inline: auto;
  }
  .home__times-container p {
    font-size: clamp(1rem, 0.8333rem + 0.8333vw, 1.5rem);
  }
  .home__kontakt {
    scroll-margin-block-start: 6rem;
  }
  .home__kontakt-navigation-container {
    display: flex;
    justify-content: center;
  }
  .home__kontakt-navigation-card {
    width: 40%;
    text-align: center;
    flex-grow: 1;
    padding: 0.5rem;
  }
  .home__kontakt-navigation-link {
    display: block;
    cursor: pointer;
  }
  .home__kontakt-navigation-icon {
    width: min(100px, 16vw);
  }
}
@layer leistungen {
  .leistungen {
    scroll-margin-block-start: 6rem;
  }
  .leistungen__list li {
    list-style-position: outside;
    list-style: decimal;
    list-style-type: disc;
  }
}
@layer neupatient {
  .neupatient__list li {
    list-style-position: outside;
    list-style: decimal;
    -webkit-margin-start: 2rem;
    margin-inline-start: 2rem;
  }
}
@layer patientenbogen {
  .patientenbogen {
    -webkit-margin-before: calc(var(--nav-height-small) + 1rem);
    margin-block-start: calc(var(--nav-height-small) + 1rem);
  }
  .patientenbogen input[type='text'],
  .patientenbogen input[type='email'],
  .patientenbogen input[type='date'],
  .patientenbogen input[type='number'],
  .patientenbogen textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--grey);
    border-radius: 10px;
    font-size: 14px;
  }
  .patientenbogen textarea {
    min-height: 96px;
    resize: vertical;
  }
  .patientenbogen button {
    padding: 10px 14px;
    border-radius: 10px;
    border: 1px solid var(--grey);
    background: #111;
    color: #fff;
    font-weight: 600;
  }
  .patientenbogen button.secondary {
    background: var(--white);
    color: var(--dark-grey);
  }
  .card {
    background: var(--white);
    border: 1px solid var(--light-grey);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 16px;
  }
  .row {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--gap);
    -webkit-padding-after: 0.5rem;
    padding-block-end: 0.5rem;
  }
  @media (min-width: 640px) {
    .row.cols-2 {
      grid-template-columns: 1fr 1fr;
    }
    .row.cols-3 {
      grid-template-columns: 1fr 1fr 1fr;
    }
  }
  label {
    font-weight: 600;
    font-size: 14px;
    display: block;
    margin-bottom: 6px;
  }
  .check {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .muted {
    color: var(--dark-grey);
    font-size: 13px;
  }
  .actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
  }
  .only-print {
    display: none;
  }
}
@media print {
  @page {
    size: A4;
    margin: 12mm;
  }
  html,
  body {
    width: auto;
    height: auto;
    min-height: 0;
    overflow: visible !important;
  }
  body {
    font-size: 9.5pt;
    line-height: 1.25;
    color: #000;
    background: #fff;
  }
  .patientenbogen {
    display: block !important;
    margin: 0 !important;
  }
  .page-break {
    page-break-before: always !important;
    -webkit-column-break-before: page !important;
    -moz-column-break-before: page !important;
    break-before: page !important;
  }
  .wrapper,
  .wrapper__content,
  .section-content,
  .patientenbogen-wrapper,
  .patientenbogen-content,
  .main {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  /* Verstecke unnötige Elemente */
  header,
  nav,
  footer,
  .fixed__btn-container,
  .actions {
    display: none !important;
  }
  .patientenbogen input[type='text'],
  .patientenbogen input[type='email'],
  .patientenbogen input[type='date'],
  .patientenbogen input[type='number'],
  .patientenbogen textarea {
    border-color: #777;
    border-radius: 0;
    font-size: 9pt;
    padding: 2mm;
  }
  .patientenbogen textarea {
    min-height: 18mm;
    resize: none;
  }
  .row {
    gap: 3mm;
    -webkit-padding-after: 2mm;
    padding-block-end: 2mm;
  }
  .row.cols-2 {
    grid-template-columns: 1fr 1fr;
  }
  .row.cols-3 {
    grid-template-columns: repeat(3, 1fr);
  }
  label {
    font-size: 9pt;
    line-height: 1.2;
    margin-bottom: 1mm;
  }
  .muted {
    font-size: 8.5pt;
  }
  /* Verhindere unschöne Seitenumbrüche mitten in einer Karte */
  .card {
    page-break-inside: avoid !important;
    break-inside: avoid-page !important;
    border-color: #999;
    border-radius: 0;
    padding: 4mm;
    margin-bottom: 5mm;
    overflow: visible !important;
  }
  .card:nth-of-type(3),
  .card:nth-of-type(4),
  .card:nth-of-type(6) {
    page-break-before: always;
    -webkit-column-break-before: page;
    -moz-column-break-before: page;
    break-before: page;
  }
  .card h2 {
    margin-bottom: 3mm;
  }
  .card p,
  .card label,
  .card textarea,
  .card input {
    page-break-inside: avoid !important;
  }
  .no-print {
    display: none;
  }
  .only-print {
    display: block;
  }
}
@layer downloads {
  .downloads {
    scroll-margin-block-start: 6rem;
  }
  .downloads__list li {
    list-style-position: outside;
    list-style: decimal;
    -webkit-margin-start: 2rem;
    margin-inline-start: 2rem;
    list-style-type: disc;
  }
}
@layer team {
  .team__picture-container {
    position: relative;
    display: grid;
    grid-template-columns: repeat(2, minmax(auto, 220px));
    justify-content: center;
    gap: 1rem;
    -webkit-margin-before: var(--prose-flow);
    margin-block-start: var(--prose-flow);
  }
  @media screen and (min-width: 744px) {
    .team__picture-container {
      grid-template-columns: repeat(3, minmax(auto, 270px));
    }
  }
  @media screen and (min-width: 1180px) {
    .team__picture-container {
      grid-template-columns: repeat(3, minmax(auto, 310px));
    }
  }
  @media screen and (min-width: 1280px) {
    .team__picture-container {
      grid-template-columns: repeat(4, minmax(auto, 310px));
    }
  }
}
@layer laws {
  .law h2:not(.site__header-hero-titel) {
    font-size: clamp(1.125rem, 0.9167rem + 1.0417vw, 1.75rem);
  }
  .law h3 {
    font-size: clamp(1rem, 0.8333rem + 0.8333vw, 1.5rem);
  }
  .law p:not(.site__header-hero-subtitel),
  .law address,
  .law a,
  .law li {
    font-size: clamp(0.875rem, 0.7917rem + 0.4167vw, 1.125rem);
  }
  .law ol {
    list-style-position: inside;
    list-style: decimal;
    -webkit-margin-start: 1.5rem;
    margin-inline-start: 1.5rem;
  }
}
@layer footer {
  .main-footer__wrapper {
    height: 100%;
    align-items: center;
  }
  .main-footer__content {
    grid-column: content;
  }
  .main-footer__copyright {
    color: var(--white);
  }
} /*# sourceMappingURL=/css/main.css.map */