/* ------------------------------------------------ */
/*  !Reset  */
/* ------------------------------------------------ */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  text-rendering: optimizeSpeed;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

ul,
ol {
  list-style: none;
}

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

figure img {
  height: auto;
}

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

a {
  text-decoration: none;
}

/* ------------------------------------------------ */
/*  !Focus Barrierefreiheit */
/* ------------------------------------------------ */
:focus-visible {
  outline: 2px solid #000;
  outline-offset: 2px;
}

/* Skip-to-Content Link */
.skip-link {
  position: absolute;
  top: -100%;
  left: 16px;
  z-index: 10000;
  padding: 8px 16px;
  background: var(--darkblue, #495969);
  color: #fff;
  font-size: 14px;
  border-radius: 0 0 4px 4px;
  text-decoration: none;
}

.skip-link:focus {
  top: 0;
}

/* ------------------------------------------------ */
/*  !Fonts  */
/* ------------------------------------------------ */
/* source-sans-pro-300 - latin */
@font-face {
  font-family: "Source Sans Pro";
  font-style: normal;
  font-weight: 300;
  src:
    local(""),
    url("../fonts/source-sans-pro-v18-latin-300.woff2") format("woff2"),
    /* Chrome 26+, Opera 23+, Firefox 39+ */ url("../fonts/source-sans-pro-v18-latin-300.woff") format("woff");
  /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
  font-display: swap;
}

/* source-sans-pro-regular - latin */
@font-face {
  font-family: "Source Sans Pro";
  font-style: normal;
  font-weight: 400;
  src:
    local(""),
    url("../fonts/source-sans-pro-v18-latin-regular.woff2") format("woff2"),
    /* Chrome 26+, Opera 23+, Firefox 39+ */ url("../fonts/source-sans-pro-v18-latin-regular.woff") format("woff");
  /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
  font-display: swap;
}

/* source-sans-pro-italic - latin */
@font-face {
  font-family: "Source Sans Pro";
  font-style: italic;
  font-weight: 400;
  src:
    local(""),
    url("../fonts/source-sans-pro-v18-latin-italic.woff2") format("woff2"),
    /* Chrome 26+, Opera 23+, Firefox 39+ */ url("../fonts/source-sans-pro-v18-latin-italic.woff") format("woff");
  /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
  font-display: swap;
}

/* source-sans-pro-600 - latin */
@font-face {
  font-family: "Source Sans Pro";
  font-style: normal;
  font-weight: 600;
  src:
    local(""),
    url("../fonts/source-sans-pro-v18-latin-600.woff2") format("woff2"),
    /* Chrome 26+, Opera 23+, Firefox 39+ */ url("../fonts/source-sans-pro-v18-latin-600.woff") format("woff");
  /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
  font-display: swap;
}

/* source-sans-pro-700 - latin */
@font-face {
  font-family: "Source Sans Pro";
  font-style: normal;
  font-weight: 700;
  src:
    local(""),
    url("../fonts/source-sans-pro-v18-latin-700.woff2") format("woff2"),
    /* Chrome 26+, Opera 23+, Firefox 39+ */ url("../fonts/source-sans-pro-v18-latin-700.woff") format("woff");
  /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
  font-display: swap;
}

/* ------------------------------------------------ */
/*  !Variable  */
/* ------------------------------------------------ */
:root {
  --red: hsl(357.9, 92.6%, 47.6%);
  --orange: #efa489;
  --black: #303940;
  --midgrey: #e1e2e6;
  --lightgrey: #f6f8fb;
  --lightred: #ffe9e0;
  --lightblue: #e3f0fc;
  --darkblue: #495969;
  --blau: #495969;
  --red-accessible: hsl(357.9, 85%, 38%);
  --white: #ffffff;
  --fbase: 20px;
  /* 50px Headlines */
  --fh1: 240%;
  /* 50px Headlines */
  --fh2: 240%;
  --f40: 200%;
  --f28: 140%;
  /* Normale Textseiten mit h1 und h2 */
  --f26: 130%;
  --f24: 120%;
  /* 22px Buttons */
  --f22: 110%;
  /* 18px Footer */
  --fmedium: 90%;
  /* 16px Breadcrumbs */
  --fsmall: 80%;
  /* Radius Ecken */
  --radius: 12px;
}

/* ------------------------------------------------ */
/*  !Utils */
/* ------------------------------------------------ */

.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;
}

/* ------------------------------------------------ */
/*  !Typo  */
/* ------------------------------------------------ */
h1,
h2,
h3 {
  line-height: 1.1;
}

h1 em,
h2 em,
h3 em {
  color: var(--red);
}

h1,
h2 {
  font-size: var(--fh1);
  margin-bottom: 24px;
}

h1.aktuelles {
  margin-bottom: 40px;
}

.flex h2 {
  font-size: var(--f26);
  margin-bottom: 8px;
}

.tags h2 {
  font-size: var(--f28);
}

h1 em,
h2 em,
h3 em {
  font-style: normal;
}

strong {
  font-weight: 600;
}

.light {
  font-weight: 300;
}

p {
  margin-bottom: 24px;
}

ul {
  line-height: 1.5;
  margin-bottom: 40px;
}

main li {
  padding: 0 0 0 14px;
  background-image: url("/assets/images/layout/sprites.svg");
  background-repeat: no-repeat;
  background-position: -590px -376px;
}

@media screen and (max-width: 414px) {
  h1,
  h2,
  h1.aktuelles {
    font-size: var(--f40);
    margin-bottom: 24px;
  }
}

/* ------------------------------------------------ */
/*  !Links  */
/* ------------------------------------------------ */
main p a,
main ul a {
  color: var(--red-accessible);
  text-decoration: underline;
  text-underline-offset: 4px;
}

main p a.arw {
  text-decoration: none;
}

main a:hover {
  color: var(--black);
}

a.btn {
  display: inline-block;
  color: var(--white);
  background-color: var(--red);
  font-size: var(--f22);
  padding: 16px 24px;
  border-radius: 6px;
  box-shadow: 0 2px 16px rgba(242, 65, 71, 0.7);
  text-decoration: none;
  transition: box-shadow 0.2s ease;
}

a.btn.blue {
  background-color: var(--black);
  box-shadow: 0 2px 16px rgba(48, 57, 64, 0.4);
}

a.btn:hover {
  color: var(--white);
  box-shadow: none;
}

a.arw {
  display: flex;
  align-items: center;
  color: var(--black);
  font-weight: 600;
  line-height: 1;
  font-size: 95%;
}

a.arw:hover::after {
  transform: translateX(8px);
}

a.arw::after {
  content: "";
  display: block;
  width: 18px;
  height: 15px;
  background-image: url("/assets/images/layout/sprites.svg");
  background-repeat: no-repeat;
  background-position: -400px -50px;
  margin: 3px 0 0 8px;
  transition: transform 0.3s ease;
}

a.send {
  color: var(--black);
  display: flex;
  align-items: center;
}

a.send:hover {
  color: var(--red);
}

a.send span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

a.send::before {
  content: "";
  display: block;
  width: 20px;
  height: 20px;
  background-image: url("/assets/images/layout/sprites.svg");
  background-repeat: no-repeat;
  background-position: -400px -100px;
  margin: 3px 8px 0 0;
  transition: transform 0.3s ease;
  flex-shrink: 0;
}

a.medicum {
  display: block;
  text-indent: -9999px;
  width: 240px;
  height: 60px;
  background-image: url("/assets/images/layout/sprites.svg");
  background-repeat: no-repeat;
  background-position: -10px -280px;
}

.insta {
  display: block;
  width: 40px;
  height: 40px;
  background-image: url("/assets/images/layout/sprites.svg");
  background-repeat: no-repeat;
  background-position: -396px -146px;
  text-indent: -9999px;
  margin-bottom: 16px;
}

.facebook {
  display: block;
  width: 40px;
  height: 40px;
  background-image: url("/assets/images/layout/sprites.svg");
  background-repeat: no-repeat;
  background-position: -399px -349px;
  text-indent: -9999px;
}

@media screen and (max-width: 1024px) {
  .insta,
  .facebook {
    display: inline-flex;
    align-items: center;
    color: var(--black);
    text-indent: 0;
    padding: 0 0 0 48px;
  }
}

/* ------------------------------------------------ */
/*  !Backgrounds Waves  */
/* ------------------------------------------------ */
.bg-01 {
  background-image: url("/assets/images/layout/bg-01.svg");
  background-repeat: no-repeat;
  background-position: top center;
  background-size: 100%;
}

.bg-02 {
  background-image: url("/assets/images/layout/bg-02.svg");
  background-repeat: no-repeat;
  background-position: top center;
  background-size: 100%;
}

@media screen and (max-width: 1024px) {
  .bg-01,
  .bg-02 {
    background-size: 200% 100%;
  }
}

/* ------------------------------------------------ */
/*  !Logos  */
/* ------------------------------------------------ */
.logo {
  display: block;
  width: 312px;
  height: 120px;
  text-indent: -9999px;
  background-image: url("/assets/images/layout/sprites.svg");
  background-repeat: no-repeat;
  background-position: -10px -10px;
}

@media screen and (max-width: 520px) {
  .logo {
    margin-bottom: 40px;
  }
}

@media screen and (max-width: 375px) {
  .logo {
    width: 268px;
    height: 103px;
    background-position: -10px -160px;
  }
}

/* ------------------------------------------------ */
/*  !Specials  */
/* ------------------------------------------------ */
p.btns {
  padding: 24px 0 0 0;
}

p.btns a:nth-child(1) {
  margin: 0 16px 0 0;
}

.rounded {
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.dots {
  position: relative;
}

.dots span {
  position: absolute;
  z-index: -1;
  display: block;
  width: 60px;
  height: 60px;
  background-image: url("/assets/images/layout/sprites.svg");
  background-repeat: no-repeat;
  background-position: -400px -240px;
}

.dots.top-left span {
  top: -30px;
  left: -30px;
}

.dots.bottom-right span {
  bottom: -30px;
  right: -30px;
}

@media screen and (max-width: 768px) {
  .dots span {
    display: none;
  }
}

@media screen and (max-width: 375px) {
  p.btns a:nth-child(2) {
    display: none;
  }
}

/* ------------------------------------------------ */
/*  !Body  */
/* ------------------------------------------------ */
body {
  color: var(--black);
  background-color: var(--white);
  font-family: "Source Sans Pro", system-ui;
  font-style: normal;
  font-weight: 400;
  font-size: var(--fbase);
  line-height: 1.5;
}

/* ------------------------------------------------ */
/*  !Container  */
/* ------------------------------------------------ */
.container {
  max-width: 1480px;
  padding: 0 40px;
  margin: 0 auto;
}

.container.medium {
  max-width: 1240px;
}

.container.small {
  max-width: 1000px;
}

@media screen and (max-width: 1024px) {
  .container.medium {
    max-width: 760px;
  }
}

@media screen and (max-width: 414px) {
  .container {
    padding: 0 24px;
  }
}

/* ------------------------------------------------ */
/*  !Sticky Site-Header (nur Desktop)               */
/* ------------------------------------------------ */
@media screen and (min-width: 1025px) {
  .site-header {
    position: sticky;
    top: 0;
    z-index: 10;
    background-color: var(--white);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  }
}

main {
  padding-top: 56px;
}

/* ------------------------------------------------ */
/*  !Header  */
/* ------------------------------------------------ */
header {
  padding: 0 0 40px 0;
  margin: 0 0 0 0;
}

header > .container {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

header > .container > nav ul {
  display: flex;
  align-items: center;
}

header ul a {
  display: inline-block;
  padding: 0 24px 0 0;
  line-height: 1;
  color: var(--black);
  text-transform: uppercase;
  font-size: var(--fmedium);
}

.termin > a {
  display: flex;
  align-items: center;
  color: var(--white);
  background-color: var(--red);
  padding: 12px 16px;
  border-radius: 6px;
  transition: box-shadow 0.1s ease;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.termin > a.active,
.termin > a:active {
  box-shadow: none;
}

.termin > a::before {
  content: "";
  display: inline-block;
  width: 19px;
  height: 19px;
  background-image: url("/assets/images/layout/sprites.svg");
  background-repeat: no-repeat;
  background-position: -400px -10px;
  margin: 0 8px 0 0;
}

header ul a::after {
  content: "";
  display: block;
  height: 2px;
  background-color: var(--red);
  margin: 4px 0 0 0;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.1s 0.1s ease-in;
}

header ul a:hover::after,
header ul a.active::after {
  transform: scaleX(35%);
}

header ul li:last-child a::after {
  display: none;
}

@media screen and (max-width: 1024px) {
  header {
    margin: 0;
  }

  header > .container > nav ul {
    display: none;
  }
}

@media screen and (max-width: 520px) {
  header {
    padding: 24px 0;
  }

  header > .container {
    display: block;
  }
}

/* ------------------------------------------------ */
/*  !Pulldown-Termine  */
/* ------------------------------------------------ */
.termin {
  position: relative;
}

#menu-termine {
  position: absolute;
  top: 64px;
  right: 0;
  background-color: var(--white);
  box-shadow:
    0 -2px 16px rgba(0, 0, 0, 0.02),
    0 1px 24px rgba(0, 0, 0, 0.15);
  border-radius: 6px;
  height: 0;
  visibility: hidden;
  opacity: 0;
  transform: translateY(-6px);
  transition:
    transform 0.15s 0.1s ease,
    opacity 0.15s 0.1s ease;
}

#menu-termine.active {
  padding: 24px;
  height: auto;
  padding: 24px;
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
}

#menu-termine::before {
  position: absolute;
  top: -8px;
  right: 55px;
  content: "";
  display: block;
  width: 16px;
  height: 16px;
  transform: rotateZ(45deg);
  background-color: var(--white);
}

#menu-termine a:hover {
  color: var(--red);
}

/* ------------------------------------------------ */
/*  !Mobile-Menu-Link  */
/* ------------------------------------------------ */
@media screen and (min-width: 1025px) {
  .mobile-menu-link {
    display: none;
  }
}

@media screen and (max-width: 1024px) {
  .mobile-menu-link {
    display: block;
    width: 45px;
    height: 45px;
    text-indent: -9999px;
    background-color: var(--lightgrey);
    background-image: url("/assets/images/layout/sprites.svg");
    background-repeat: no-repeat;
    background-position: -493px -48px;
    border-radius: 4px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  }

  .mobile-menu-link.active {
    background-position: -488px 2px;
  }
}

@media screen and (max-width: 520px) {
  .mobile-menu-link {
    color: var(--black);
    font-weight: 400;
    width: 100%;
    height: auto;
    padding: 16px 0 16px 56px;
    text-indent: 0;
    background-position: -486px -39px;
  }

  .mobile-menu-link.active {
    background-position: -486px 11px;
  }
}

/* ------------------------------------------------ */
/*  !Mobile-Menu  */
/* ------------------------------------------------ */
@media screen and (min-width: 1025px) {
  .mobile-menu {
    display: none;
  }
}

@media screen and (max-width: 1024px) {
  .mobile-menu {
    position: relative;
    transform-origin: top center;
    height: 0;
    visibility: hidden;
    opacity: 0;
    transform: scaleY(0.9);
    transition:
      opacity 0.12s linear,
      transform 0.12s cubic-bezier(0, 0, 0.2, 1);
  }

  .mobile-menu.active {
    height: auto;
    visibility: visible;
    opacity: 1;
    transform: scaleY(1);
    margin: -24px auto 64px auto;
  }

  .mobile-menu nav {
    background-color: var(--lightgrey);
    border-radius: 6px;
    margin: 0;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    padding: 24px 40px;
  }

  .mobile-menu nav ul {
    margin: 0;
  }

  .mobile-menu nav a {
    display: block;
    color: var(--black);
    padding: 16px 8px;
    border-bottom: 1px dashed var(--black);
  }

  .mobile-menu nav li:last-child a {
    border: none;
  }
}

@media screen and (max-width: 520px) {
  .mobile-menu::after {
    display: none;
  }

  .mobile-menu.active {
    margin: -32px auto 64px auto;
  }
}

@media screen and (max-width: 414px) {
  .mobile-menu nav {
    padding: 24px;
  }
}

/* ------------------------------------------------ */
/*  !Section margins  */
/* ------------------------------------------------ */
.m-160 {
  margin-bottom: 160px;
}

.m-120 {
  margin-bottom: 120px;
}

.m-80 {
  margin-bottom: 80px;
}

.m-56 {
  margin-bottom: 56px;
}

@media screen and (max-width: 768px) {
  .m-160 {
    margin-bottom: 80px;
  }

  .m-120 {
    margin-bottom: 56px;
  }
}

/* ------------------------------------------------ */
/*  !Slider Homepage  */
/* ------------------------------------------------ */
.home-slider > .container {
  display: flex;
  justify-content: space-between;
  flex-direction: row-reverse;
}

.home-slider .txt {
  width: calc(50% - 100px);
}

.slider {
  width: calc(50% - 20px);
}

.slider-inner {
  margin: 0 0 24px 0;
  position: relative;
}

.slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  opacity: 0;
  transform: translateX(20px);
  transition:
    opacity 0.3s ease,
    transform 0.5s ease;
  will-change: transform;
}

.slide.active {
  position: relative;
  z-index: 1;
  transform: translateX(0);
  opacity: 1;
}

.slider-nav {
  display: flex;
  justify-content: center;
  align-items: center;
}

.slider-nav span {
  display: block;
  width: 22px;
  height: 22px;
  border: 5px solid var(--midgrey);
  border-radius: 50%;
  margin: 0 8px;
  text-indent: -9999px;
  transition: transform 0.1s ease-out;
  transform: scale(1);
}

.slider-nav span.active {
  border-color: var(--red);
  transform: scale(1.2);
  box-shadow: 0 1px 8px rgba(242, 65, 71, 0.7);
}

@media screen and (max-width: 1280px) {
  .home-slider .txt {
    width: calc(50% - 80px);
  }

  .slider {
    width: 50%;
  }
}

@media screen and (max-width: 1024px) {
  .home-slider > .container {
    flex-direction: column;
    align-items: center;
  }

  .home-slider .txt {
    width: 100%;
    max-width: 680px;
  }

  .slider {
    width: 100%;
    max-width: 680px;
    margin-bottom: 56px;
  }
}

/* ------------------------------------------------ */
/*  !Home - Services  */
/* ------------------------------------------------ */
.home-services > .container {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.home-services figure {
  max-width: 320px;
}

.home-services .txt {
  max-width: 600px;
  padding: 40px 0 0 80px;
}

@media screen and (max-width: 1024px) {
  .home-services > .container {
    flex-direction: column;
    align-items: center;
  }

  .home-services figure {
    max-width: 680px;
    margin-bottom: 56px;
  }

  .home-services .txt {
    max-width: 680px;
    padding: 0;
  }
}

/* ------------------------------------------------ */
/*  !Home - Aktuelles  */
/* ------------------------------------------------ */
.home-news h3 {
  margin-bottom: 40px;
}

.home-news-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 40px;
  row-gap: 40px;
}

.home-news-grid {
  perspective: 900px;
  perspective-origin: 50% 40%;
}

.news-item {
  display: flex;
  flex-direction: column;
  padding: 40px;
  background-color: var(--lightgrey);
  border-radius: var(--radius);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  transform-style: preserve-3d;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.4s ease;
  position: relative;
  overflow: hidden;
  will-change: transform;
}

.news-item::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(115deg, transparent 0%, transparent 35%, rgba(255,255,255,0.15) 50%, transparent 65%, transparent 100%);
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}

.news-item:hover {
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.13), 0 1px 0 rgba(255,255,255,0.1) inset;
}

.news-item:hover::before {
  opacity: 1;
}

.news-item:nth-child(1):hover {
  transform: rotateY(-4deg) rotateX(2deg) translateZ(6px);
}

.news-item:nth-child(2):hover {
  transform: rotateY(0deg) rotateX(3deg) translateZ(6px);
}

.news-item:nth-child(3):hover {
  transform: rotateY(4deg) rotateX(2deg) translateZ(6px);
}

.news-item p:nth-child(1) {
  font-size: var(--fmedium);
}

.news-item h3 {
  font-size: var(--f28);
  font-weight: 600;
  margin-bottom: 1rem;
}

.news-item p:nth-child(2) em {
  font-style: normal;
}

.news-item p:nth-child(4) {
  margin-top: auto;
}

@media screen and (max-width: 768px) {
  .home-news-grid {
    grid-template-columns: repeat(1, 1fr);
  }
}

@media screen and (max-width: 414px) {
  .news-item {
    padding: 24px;
  }
}

/* ------------------------------------------------ */
/*  !Footer  */
/* ------------------------------------------------ */
.footer-logo {
  width: 312px;
  height: 120px;
  background-image: url("/assets/images/layout/sprites.svg");
  background-repeat: no-repeat;
  background-position: -10px -10px;
  text-indent: -9999px;
  margin-bottom: 24px;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 80px;
  column-gap: 80px;
  margin-bottom: 56px;
}

.footer-grid-item {
  display: flex;
  flex-direction: column;
}

footer address {
  font-style: normal;
}

footer .txt-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 24px;
  row-gap: 24px;
  margin-bottom: 24px;
}

.txt-grid ul {
  margin: 0;
}

.txt-grid ul li {
  white-space: nowrap;
}

/* Arztnamen */
.footer-grid-item:first-child p:first-child {
  max-width: 440px;
}

/* Adresse und Tage der Sprechzeiten */
footer .txt-grid ul li:first-child {
  font-weight: 600;
}

/* Telefonnummern */
.footer-grid-item:first-child .txt-grid ul li:nth-last-child(2) {
  padding-top: 8px;
}

/* Telefon-Links schwarz, kein Unterstrich */
footer .footer-grid-item .txt-grid ul li a[href^="tel:"],
footer .footer-grid-item .txt-grid ul li a[href^="tel:"]:visited,
footer .footer-grid-item .txt-grid ul li a[href^="tel:"]:hover {
  color: #000 !important;
  text-decoration: none !important;
  font-weight: 400;
}

/* Letzte Zeile Adresse und Sprechzeiten */
.footer-grid-item p:last-child {
  margin-top: auto;
}

/* Sprechzeiten Ueberschrift */
.footer-grid-item h2 {
  font-weight: 600;
  font-size: var(--f28);
  margin-bottom: 1.5rem;
}

@media screen and (max-width: 1024px) {
  footer.bg-01 {
    background-size: 200% 40%;
  }

  .footer-grid {
    display: block;
  }

  .footer-grid-item {
    margin-bottom: 56px;
  }

  .footer-grid-item p:last-child {
    margin: 0;
  }

  footer .txt-grid {
    grid-template-columns: repeat(2, 200px);
  }
}

@media screen and (max-width: 520px) {
  footer .txt-grid {
    display: block;
  }

  footer .txt-grid ul {
    margin-bottom: 24px;
  }

  footer .txt-grid ul:last-child {
    margin-bottom: 0;
  }
}

@media screen and (max-width: 375px) {
  .footer-logo {
    width: 268px;
    height: 103px;
    background-position: -10px -160px;
  }
}

/* ------------------------------------------------ */
/*  !Legal - Abschlusszeile  */
/* ------------------------------------------------ */
.legal {
  display: grid;
  grid-template-columns: 1fr 1fr 80px;
  column-gap: 80px;
  align-items: center;
}

.legal ul {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
}

.legal ul a {
  color: var(--black);
  font-size: var(--fmedium);
}

.legal ul a:hover {
  color: var(--red);
}

.legal ul a::after {
  content: "|";
  color: var(--red);
  margin: 0 8px;
}

.legal ul li:last-child a::after {
  display: none;
}

@media screen and (max-width: 1024px) {
  .legal {
    display: block;
    border-top: 1px dashed var(--black);
    padding-top: 40px;
  }

  .legal ul {
    margin: 0 0 40px 0;
  }
}

/* ------------------------------------------------ */
/*  !Breadcrumbs  */
/* ------------------------------------------------ */
.breadcrumbs {
  margin-bottom: 80px;
}

.breadcrumbs ul {
  display: flex;
  flex-wrap: wrap;
  font-size: var(--fmedium);
}

.breadcrumbs ul li {
  padding: 0;
  background: none;
  line-height: 1.5;
}

.breadcrumbs a {
  display: flex;
  align-items: center;
  color: var(--black);
  text-decoration: none;
}

.breadcrumbs a:hover {
  color: var(--red);
}

.breadcrumbs a::after {
  content: "";
  display: block;
  width: 5px;
  height: 9px;
  background-image: url("/assets/images/layout/sprites.svg");
  background-repeat: no-repeat;
  background-position: -460px -10px;
  margin: 2px 10px 0 12px;
}

/* ------------------------------------------------ */
/*  !Text Center  */
/* ------------------------------------------------ */
.txt-center {
  margin-bottom: 56px;
}

.txt-center > .container {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.txt-center p {
  font-size: var(--f22);
  max-width: 560px;
}

/* ------------------------------------------------ */
/*  !Grid Team  */
/* ------------------------------------------------ */
.grid-team-inner {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  z-index: 1;
}

.team-item {
  width: 240px;
  margin: 0 40px 56px 40px;
}

.team-item.team {
  width: 200px;
  margin: 0 40px 56px 40px;
}

.grid-team figure {
  position: relative;
  width: 200px;
  height: 200px;
  margin: 0 auto 24px auto;
}

.team-item.team figure {
  width: 160px;
  height: 160px;
  margin: 0 auto 24px auto;
}

.grid-team figure::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  display: block;
  width: 190px;
  height: 190px;
  background-color: var(--lightred);
  transform: rotateZ(54deg);
  border-radius: 40px;
  border-top-right-radius: 24px;
  border-bottom-left-radius: 56px;
}

.team-item.team figure::after {
  width: 160px;
  height: 160px;
  background-color: var(--lightblue);
  border-radius: 32px;
  border-top-right-radius: 16px;
  border-bottom-left-radius: 40px;
}

.grid-team .txt {
  text-align: center;
}

.grid-team .txt h2,
.grid-team .txt h3 {
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 8px;
}

.grid-team .txt p {
  font-weight: 300;
  margin-bottom: 0;
}

/* ------------------------------------------------ */
/*  !Titelbilder  */
/* ------------------------------------------------ */
.titleimage {
  width: 34.61538461538461%;
  max-width: 360px;
  max-height: 540px;
}

.titleimage figure {
  background-size: cover;
  background-position: center center;
  border-radius: var(--radius);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.titleimage figure::after {
  content: "";
  display: block;
  padding-bottom: 150%;
}

@media screen and (max-width: 960px) {
  .titleimage {
    width: 100%;
    max-width: 680px;
  }

  .titleimage figure::after {
    padding-bottom: 50%;
  }
}

@media screen and (max-width: 480px) {
  .titleimage figure {
    border-radius: 6px;
  }
}

/* ------------------------------------------------ */
/*  !Figures  */
/* ------------------------------------------------ */
.landscape,
.portrait,
.square {
  background-size: cover;
  background-position: center center;
  border-radius: var(--radius);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.landscape::after,
.portrait::after,
.square::after {
  content: "";
  display: block;
}

.landscape::after {
  padding-bottom: 62.5%;
}

.portrait::after {
  padding-bottom: 150%;
}

.square::after {
  padding-bottom: 100%;
}

@media screen and (max-width: 480px) {
  .landscape,
  .portrait,
  .square {
    border-radius: 6px;
  }
}

/* ------------------------------------------------ */
/*  !Locations  */
/* ------------------------------------------------ */
.w-720 {
  max-width: 720px;
  display: grid;
  grid-template-columns: 27.77777777777778% 66.66666666666667%;
  column-gap: 40px;
  grid-template-areas:
    "c1 c2"
    ". c4";
}

.w-720 .cell:nth-child(1) figure {
  margin: -40px 0 0 0;
}

.w-720 .cell:nth-child(3) {
  padding: 40px 0 0 0;
  grid-area: c4;
}

@media screen and (max-width: 768px) {
  .w-720 {
    column-gap: 16px;
    grid-template-areas:
      "c1 c2"
      "c4 c4";
  }

  .w-720 .cell:nth-child(1) figure {
    margin: 0;
  }
}

@media screen and (max-width: 414px) {
  .w-720 {
    column-gap: 8px;
    grid-template-areas:
      "c1 c2"
      "c4 c4";
  }

  .w-720 .cell:nth-child(3) {
    padding: 16px 0 0 0;
  }
}

/*  Grid2 w-1040 */
.grid.w-1040 {
  max-width: 1040px;
  display: grid;
  grid-template-columns: 46.15384615384615% 46.15384615384615%;
  column-gap: 40px;
  row-gap: 40px;
  margin: 0 0 0 auto;
}

.grid.w-1040 .cell:nth-child(1) figure:nth-child(1) {
  margin: 0 0 40px 0;
}

.grid.w-1040 .cell:nth-child(1) figure:nth-child(2) {
  width: 41.666666666666664%;
  margin: 0 0 0 auto;
}

@media screen and (max-width: 768px) {
  .grid.w-1040 {
    grid-template-columns: repeat(1, 1fr);
    margin: 0;
  }

  .grid.w-1040 .cell:nth-child(1) {
    display: grid;
    grid-template-columns: 66.66666666666667% 27.77777777777778%;
    column-gap: 16px;
  }

  .grid.w-1040 .cell:nth-child(1) figure:nth-child(1) {
    max-width: 480px;
    margin: 0;
  }

  .grid.w-1040 .cell:nth-child(1) figure:nth-child(2) {
    width: 100%;
  }
}

/* ------------------------------------------------ */
/*  !Standard-Seiten  */
/* ------------------------------------------------ */
.flex {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.flex.reverse {
  flex-direction: row-reverse;
}

.flex.flex-start {
  justify-content: flex-start;
}

.flex .txt {
  width: 57.69230769230769%;
  margin: 0 0 0 80px;
}

.flex.reverse .txt {
  margin: 0 80px 0 0;
}

@media screen and (max-width: 960px) {
  .flex {
    display: block;
  }

  .flex.reverse .txt {
    width: 100%;
    max-width: 680px;
    margin: 0 auto;
  }

  .flex figure {
    width: 100%;
    margin: 0 auto 40px auto;
  }

  .flex figure.portrait,
  .flex figure.landscape {
    max-width: 680px;
    min-width: auto;
  }
}

@media screen and (max-width: 414px) {
  .flex figure {
    margin: 0 auto 24px auto;
  }
}

/* ------------------------------------------------ */
/*  !Grid Leistungen  */
/* ------------------------------------------------ */
.grid-service {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 56px;
  row-gap: 56px;
  perspective: 900px;
  perspective-origin: 50% 40%;
}

.grid-service .grid-item {
  display: flex;
  flex-direction: column;
  border-radius: var(--radius);
  padding: 40px;
  background-color: var(--lightgrey);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
  transform-style: preserve-3d;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.4s ease;
  position: relative;
  overflow: hidden;
  will-change: transform;
}

.grid-service .grid-item::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(115deg, transparent 0%, transparent 35%, rgba(255,255,255,0.15) 50%, transparent 65%, transparent 100%);
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}

.grid-service .grid-item:hover,
.news-item:hover {
  cursor: pointer;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.13), 0 1px 0 rgba(255,255,255,0.1) inset;
}

/* Stretch-link: entire card clickable */
.grid-item-link {
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* arw as span (not link) keeps arrow styling */
span.arw {
  display: flex;
  align-items: center;
  color: var(--black);
  font-weight: 600;
  line-height: 1;
  font-size: 95%;
}

span.arw::after {
  content: "";
  display: block;
  width: 18px;
  height: 15px;
  background-image: url("/assets/images/layout/sprites.svg");
  background-repeat: no-repeat;
  background-position: -400px -50px;
  margin: 3px 0 0 8px;
  transition: transform 0.2s ease;
}

.grid-item:hover span.arw::after,
.news-item:hover span.arw::after {
  transform: translateX(8px);
}

.grid-service .grid-item:hover::before {
  opacity: 1;
}

.grid-service .grid-item:nth-child(3n+1):hover {
  transform: rotateY(-4deg) rotateX(2deg) translateZ(6px);
}

.grid-service .grid-item:nth-child(3n+2):hover {
  transform: rotateY(0deg) rotateX(3deg) translateZ(6px);
}

.grid-service .grid-item:nth-child(3n+3):hover {
  transform: rotateY(4deg) rotateX(2deg) translateZ(6px);
}

.grid-service .grid-title {
  font-size: 140%;
  font-weight: 600;
  margin-bottom: 40px;
  line-height: 1.3;
}

.grid-service .grid-title::after {
  content: "";
  display: block;
  width: 40px;
  height: 3px;
  background-color: var(--red);
  margin: 4px 0 0 0;
  border-radius: 2px;
}

.grid-service .grid-item p:last-child {
  margin: auto 0 16px 0;
}

.grid-service ul {
  font-size: 95%;
  margin-bottom: 40px;
}

@media screen and (max-width: 1200px) {
  .grid-service {
    column-gap: 40px;
    row-gap: 40px;
  }
}

@media screen and (max-width: 1080px) {
  .grid-service {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media screen and (max-width: 768px) {
  .grid-service {
    grid-template-columns: repeat(1, 1fr);
  }
}

@media screen and (max-width: 414px) {
  .grid-service .grid-item {
    padding: 24px;
  }
}

/* ------------------------------------------------ */
/*  !Tags  */
/* ------------------------------------------------ */
.tags h4 {
  font-size: 150%;
  margin-bottom: 24px;
}

.tags {
  perspective: 900px;
  perspective-origin: 50% 50%;
}

.tags-inner {
  display: flex;
  flex-wrap: wrap;
  background-color: var(--lightgrey);
  border-radius: var(--radius);
  padding: 24px;
  margin-bottom: 56px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
  transform-style: preserve-3d;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.4s ease;
  position: relative;
  overflow: hidden;
  will-change: transform;
}

.tags-inner::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(115deg, transparent 0%, transparent 35%, rgba(255,255,255,0.15) 50%, transparent 65%, transparent 100%);
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}

.tags-inner:hover {
  transform: rotateY(-3deg) rotateX(2deg) translateZ(4px);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.13), 0 1px 0 rgba(255,255,255,0.1) inset;
}

.tags-inner:hover::before {
  opacity: 1;
}

.tags-inner a {
  color: var(--black);
  padding: 4px 24px 4px 0;
}

.tags-inner a:hover {
  color: var(--red);
}

.tags-inner a::before {
  content: "#";
  color: var(--red);
  font-weight: 600;
  margin: 0 2px 0 0;
}

@media screen and (max-width: 414px) {
  .tags-inner {
    flex-direction: column;
  }

  .tags-inner a {
    padding: 8px 24px 8px 0;
  }
}

/* ------------------------------------------------ */
/*  !Einblenden der Bilder  */
/* ------------------------------------------------ */
.fadein {
  transform: translateX(24px);
  opacity: 0;
  transition:
    transform 1s ease,
    opacity 0.2s linear;
}

.fadein.active {
  opacity: 1;
  transform: translateX(0);
}

/* ------------------------------------------------ */
/*  !Downloads  */
/* ------------------------------------------------ */
.downloads {
  padding: 40px;
  background-color: var(--lightgrey);
  border-radius: var(--radius);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.downloads ul {
  margin: 0;
}

.downloads ul li {
  padding: 4px 0;
  background: none;
}

.downloads h2 {
  margin-bottom: 24px;
}

.downloads a {
  display: inline-flex;
  align-items: flex-start;
  text-decoration: none;
}

.downloads a::before {
  content: "";
  display: block;
  width: 20px;
  height: 24px;
  background-image: url("/assets/images/layout/sprites.svg");
  background-repeat: no-repeat;
  background-position: -500px -110px;
  margin: 2px 10px 0 0;
  flex-shrink: 0;
}

/* ------------------------------------------------ */
/*  !Urgent-Banner  */
/* ------------------------------------------------ */
.urgent {
  margin: 0;
  background-color: var(--lightgrey);
  box-shadow: 0 1px 0px hsla(0, 0%, 0%, 0.075);
}

.urgent-inner {
  display: flex;
  justify-content: center;
  padding: 16px;
}

.urgent-inner a {
  display: inline-flex;
  align-items: flex-start;
  color: var(--black);
  font-size: var(--fsmall);
}

.urgent-inner a::before {
  content: "";
  display: block;
  width: 23px;
  height: 22px;
  background-image: url("/assets/images/layout/sprites.svg");
  background-repeat: no-repeat;
  background-position: -500px -150px;
  margin: 3px 10px 0 0;
  flex-shrink: 0;
}

/* ------------------------------------------------ */
/*  !Sprache  */
/* ------------------------------------------------ */
.language {
  padding-top: 24px;
  font-size: 16px;
}

.language > .container,
.language ul {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.language ul {
  margin: 0;
}

.language ul li:nth-child(1)::after {
  content: "|";
  margin: 0 4px;
}

.language a {
  display: inline-block;
  color: var(--black);
  line-height: 1;
}

.language .active {
  color: var(--red);
}

/* Neuer Termin Link */
@media screen and (min-width: 521px) {
  .language .container > a {
    display: none;
  }
}

@media screen and (max-width: 520px) {
  .language > .container {
    flex-direction: row-reverse;
  }

  .language .container > a {
    display: inline-flex;
    padding: 8px 12px;
    color: var(--white);
    background-color: var(--red);
    border-radius: 4px;
  }

  .language .container > a::before {
    content: "";
    display: inline-block;
    width: 16px;
    height: 16px;
    background-image: url("/assets/images/layout/sprites.svg");
    background-repeat: no-repeat;
    background-position: -500px -200px;
    margin-right: 6px;
  }
}

@media screen and (min-width: 521px) {
  .language > .container,
  .language ul {
    justify-content: flex-end;
  }
}

/* ------------------------------------------------ */
/*  !Datenschutz  */
/* ------------------------------------------------ */
/* Animation */
@keyframes slideIn {
  0% {
    visibility: hidden;
    transform: translateY(-100%);
  }

  100% {
    visibility: visible;
    transform: translateY(0);
  }
}

/* Styles */
.consent-overlay {
  box-sizing: border-box;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  padding: 0 20px;
  min-height: 100vh;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  overflow-y: scroll;
  z-index: 20;
}

.consent-modal {
  background: var(--white);
  max-width: 800px;
  margin: 0 auto 40px auto;
  line-height: 1.4;
  box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.3);
  visibility: hidden;
  transform: translateY(-100%);
  /* Animation Modal */
  will-change: transform;
  animation: slideIn 0.3s ease-out 1s forwards;
}

.consent-modal-inner {
  padding: 40px;
}

.consent-modal-inner h3 {
  font-size: 150%;
  margin-bottom: 24px;
}

.consent-modal-inner p {
  font-size: var(--fmedium);
  margin-bottom: 32px;
}

.consent-modal-inner p a {
  color: var(--red);
}

.consent-modal-inner ul {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 40px;
}

.consent-modal-inner ul:last-child {
  margin: 0;
}

.consent-modal-inner ul li:first-child {
  margin-right: 20px;
}

.consent-btns .consent-btn {
  display: inline-block;
  padding: 12px 24px;
  border-radius: 2px;
  transition:
    background-color 0.1s ease,
    border-color 0.1s ease;
  white-space: nowrap;
}

.consent-btns .consent-btn {
  font-weight: 400;
  color: #fff;
  background-color: var(--darkblue);
  border: 1px solid var(--darkblue);
}

.consent-btns .consent-btn:hover {
  background-color: var(--black);
  border-color: var(--black);
}

@media screen and (max-width: 840px) {
  .consent-modal {
    margin: 0 auto;
  }
}

@media screen and (max-width: 560px) {
  .consent-modal-inner ul {
    display: block;
  }

  .consent-modal-inner ul li:first-child {
    margin: 0 0 10px 0;
  }

  .consent-btns .consent-btn {
    display: block;
  }
}

@media screen and (max-width: 414px) {
  .consent-overlay {
    padding: 0 10px 10px 10px;
  }

  .consent-modal {
    margin: 0 auto;
  }
}

/* ------------------------------------------------ */
/*  !Praxis-Galerie Laufband  */
/* ------------------------------------------------ */
.gallery-strip {
  overflow: hidden;
  padding: 0;
  margin: 0;
}

.gallery-strip-inner {
  display: flex;
  gap: 16px;
  animation: gallery-scroll 35s linear infinite;
  width: max-content;
}

.gallery-strip-inner img {
  height: 220px;
  width: auto;
  object-fit: cover;
  border-radius: var(--radius);
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.gallery-strip-inner img:hover {
  transform: scale(1.03);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
}

@keyframes gallery-scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.gallery-strip:hover .gallery-strip-inner {
  animation-play-state: paused;
}

@media screen and (max-width: 768px) {
  .gallery-strip-inner img {
    height: 160px;
  }
  .gallery-strip-inner {
    gap: 10px;
    animation-duration: 25s;
  }
}

@media screen and (max-width: 480px) {
  .gallery-strip-inner img {
    height: 130px;
  }
}

/* ------------------------------------------------ */
/*  !Splash / Logo Intro Animation                  */
/* ------------------------------------------------ */
body.splash-active {
  overflow: hidden;
}

.splash-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
  transition: opacity 0.6s ease;
}

.splash-overlay.splash-done {
  opacity: 0;
  pointer-events: none;
}

.splash-logo {
  width: min(65vw, 480px);
  height: auto;
}

/* Alle Pfade: Stroke-Draw + Fill-Fade */
.splash-logo path {
  fill-opacity: 0;
  stroke-width: 1;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation:
    splash-draw 1.2s ease-out forwards,
    splash-fill 0.4s ease forwards;
  animation-delay:
    calc(var(--i, 0) * 0.04s),
    calc(1.5s + var(--i, 0) * 0.02s);
}

/* Blume: etwas dickere Striche */
.splash-flower path {
  stroke-width: 1.5;
}

@keyframes splash-draw {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes splash-fill {
  to {
    fill-opacity: 1;
    stroke-width: 0;
  }
}

/* Reduzierte Bewegung */
@media (prefers-reduced-motion: reduce) {
  .splash-logo path {
    animation: none;
    fill-opacity: 1;
    stroke-dashoffset: 0;
    stroke-width: 0;
  }
  .splash-overlay {
    transition-duration: 0.1s;
  }
}

/* Impressum: Silhouette-Icon vor Überschriften */
.page-impressum .txt h2 {
  display: flex;
  align-items: center;
  gap: 8px;
}
.page-impressum .txt h2::before {
  content: "";
  display: inline-block;
  width: 14px;
  height: 26px;
  background: url("/assets/img/silhouette.png") no-repeat center / contain;
  flex-shrink: 0;
}