* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

:root {
    --font-size-h1: 5rem;
    --font-size-h2: 1.625rem;
    --font-size-h3: 1.375rem;
    --font-size-h4: 1.1875rem;
    --font-size-h1-mobile: 3rem;
    --font-size-h2-mobile: 1.4375rem;
    --font-size-text: 1.125rem;
    --font-weight-h1: 500; /* Wert innerhalb des in @font-face definierten Bereichs */
    --font-weight-h2-h3-h4: 600; /* Wert innerhalb des in @font-face definierten Bereichs */
    --text-color: rgba(11, 11, 11, 0.85);
    --text-line-height: 165%;
    --a-color: #344B3B;
    --a-weight-normal: 400;
    --a-weight-light: 300;
    --a-weight-bold: 600;
    /*--a-active-color: #f10c2f;*/
    --default-background-color: #ffffff;
    --header-background-color: #89AE95;
    --notice-background-color: #e3e8e3;
    --darkgreen-background-color: #53785f;
    --tiles-background-color: #AEC7B6;
    --orange-color: #FFA500FF;
    --senf-color: #26372c;
    --form-error-color: #FF0000;
    --border-radius: 15px;
    --width-link-buttons: 220px;
    --width-contact-containers: 250px;
}

html {
  font-family: 'Karla', sans-serif;
  background-color: var(--default-background-color);
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100dvh; /* Mindesthöhe = Viewport-Höhe */
  overflow-y: scroll;

    @media (pointer: coarse) {

    }
}

/* Body - kein Scroll, wenn mobiles Menü ist offen */
body.hide {
  overflow: hidden;
}

li {
  list-style: none;
  display: inline-block;
}

a {
  color: var(--a-color);
  font-weight: var(--a-weight-normal);
  text-decoration: underline;
  text-underline-offset: 3px;
  display: inline-block;
  transition: all 0.3s ease;
}

/*a::after {*/
/*  content: attr(data-text); !* Kopiert den Text aus data-text *!*/
/*  font-weight: var(--a-bold);*/
/*  visibility: hidden;*/
/*  height: 0;*/
/*  overflow: hidden;*/
/*  display: block;*/
/*  width: 100%;*/
/*}*/

a:focus,
a:hover,
a.active {
  text-shadow: 0.5px 0 0 currentColor;
  /*font-weight: var(--a-bold);*/
}

h1 {
  font-weight: var(--font-weight-h1);
  font-size: var(--font-size-h1);
}

h2, h3, h4 {
  color: var(--text-color);
  font-weight: var(--font-weight-h2-h3-h4);
}

h2 {
  font-size: var(--font-size-h2);
}

h3 {
  font-size: var(--font-size-h3);
}

h4 {
  font-size: var(--font-size-h4);
}

p {
  font-size: var(--font-size-text);
  line-height: var(--text-line-height);
  color: var(--text-color);
}





/* Header */
.header {
  display: flex;
  flex-flow: column nowrap;
  min-width: 360px;
  width: 100vw;
  height: 225px;
  background-color: var(--header-background-color);
  position: relative;

  /*@media (min-width: 1700px) {*/
  /*  flex-flow: row nowrap;*/
  /*  justify-content: space-between;*/
  /*}*/
}

.header__items-container {
  display: flex;
  flex-flow: column nowrap;

  align-items: center;

  @media (min-width: 1200px) {
    flex-flow: row nowrap;
  }
}

.header__menu-container {
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-end;
  align-items: center;
  width: 100%;
  height: 100%;

  /* Anzeige größer als 1100px */
  @media (min-width: 1200px) {
    justify-content: center;
    /*align-items: flex-start;*/
    /*gap: 12.5%;*/
  }
}

.header__logo {
  position: absolute;
  top: 0;
  left: 0;
  cursor: pointer;

  /*@media (min-width: 1200px) {*/

  /*}*/
}

.header__logo img {
  height: 200px;
}

.header__menu {
  display: flex;
  flex-flow: row wrap;
  padding: 0 20px 0 0;

  /* Anzeige größer als 1100px */
  @media (min-width: 1200px) {
  }
}

.header__links {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: center;
  margin: 0 0 25px 0;
  gap: 50px;
  position: relative;
  z-index: 2;

  /*@media (min-width: 1700px) {*/
  /*  margin: 25px 125px 0 0;*/
  /*}*/
}

.header__link-form-wrapper {
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  gap: 8px;
}

.header__link-form-wrapper p {
  color: var(--default-background-color);
}

.header__link-form {
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
  width: 115px;
  font-size: var(--font-size-text);
  line-height: var(--text-line-height);
  background-color: var(--default-background-color);
  border: 2px solid var(--default-background-color);
  border-radius: var(--border-radius);
  padding: 0;
  gap: 6px;
}

.header__link-phone-wrapper {
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  gap: 8px;
}

.header__link-phone-wrapper p {
  color: var(--default-background-color);
}

.header__link-phone {
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
  width: 115px;
  font-size: var(--font-size-text);
  line-height: var(--text-line-height);
  background-color: var(--darkgreen-background-color);
  border: 2px solid var(--darkgreen-background-color);
  border-radius: var(--border-radius);
  padding: 0;
  gap: 6px;
}

.header__link-form a {
  color: var(--a-color);
  text-decoration: none;
}

.header__link-phone a {
  color: var(--default-background-color);
  text-decoration: none;
}




/* Nav-Menü */
.nav__container {
  display: flex;
  justify-content: center;
}

.nav__items {
  list-style: none;

  /* Anzeige kleiner als 990px Breite (vertikal): Menüeinträge als Flex untereinander angeordnet */
  @media (max-width: 1200px) {
    display: none;
    flex-direction: column;
    row-gap: 35px;
    position: fixed; /*Position fixed; -> kein Scroll!*/
    z-index: 3;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: scroll;
    padding: 15% 20% 15% 15%;
    background-color: var(--header-background-color);
  }

  /* Anzeige größer als 990px Breite (horizontal): Menüeinträge als Flex nebeneinander */
  @media (min-width: 1200px) {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-evenly;
    padding: 23px 0 0 0;
    gap: 50px;
  }
}

/* Zusammengefasste Listenelemente (Link und Button) auf 1. Ebene vom Nav-Menü (1. ul) */
.nav__wrapper-link-btn a {
  color: var(--default-background-color);
  text-decoration: none;
  font-size: 1.1875rem;

  @media (min-width: 990px) {
    white-space: nowrap; /*wichtig: kein Umbruch(!)*/
    padding-left: 0; /*Innenabstand nach links analog zum Submenu*/
  }
}

.nav__wrapper-link-btn a:focus,
.nav__wrapper-link-btn a:hover,
.nav__wrapper-link-btn a.active {
  text-decoration: underline solid 2px;
  text-underline-offset: 6px;
}

.nav__wrapper-link-btn {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  column-gap: 5px;
  padding-bottom: 10px;
}

.nav__items.open {
  display: flex;
}

/* Button für Submenu (Listenelement neben Menü-Link 1. Ebene) */
.submenu-trigger {
  background-color: var(--header-background-color);
  border-style: none;
  width: 12px;
  height: 12px;
  transition: all .25s ease-in-out;
}
/* Pfeil nach unten (arrow-down), SVG als Button */
.submenu-trigger svg {
  width: 100%;
  fill: var(--default-background-color);
}

.submenu-trigger svg path {
  stroke: var(--default-background-color);
  stroke-width: 5;
}

.submenu-trigger.transform {
  transform: scaleY(-1); /* Animation Button-Klick für Submenu (Listenelement neben Menü-Link 1. Ebene) */
}
.submenu-trigger.transform svg {
  fill: var(--default-background-color);
}
.submenu-trigger.transform svg path {
  stroke: var(--default-background-color);
}

/* 2. (ul): ausgeblendetes Submenu */
.nav__submenu {
  display: none;
  flex-direction: column;
  background-color: var(--default-background-color);
  border-radius: 15px;
  margin: 5px 0 0 0;
  list-style: none;
  /*text-decoration: underline;*/

  /* Submenu Anzeige größer als 990px: Flex, Einträge untereinander, Position: absolut (herausgelöst) */
  @media (min-width: 1200px) {
    position: absolute;
    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
    transition: all .25s ease-in-out;
    padding: 16px 15px 5px 15px;
  }
}

.nav__submenu li {
  /* Anzeige bis 815px: Listenelement vom Submenu: Innenabstand der Einträge / Verlinkungen im Submenu */
  @media (max-width: 1100px) {
    padding: 10px 0 10px 20px;
  }

  @media (min-width: 1100px) {
    padding-bottom: 15px; /* Abstand unten zwischen den Listenelementen vom Submenu */
  }
}

.nav__submenu li a {
  text-transform: none; /* Text der Links in den Listenelementen vom Submenu: keine Großbuchstaben! */

  @media (min-width: 1100px) {
    white-space: nowrap; /* Kein Umbruch der Links in den Listenelementen vom Submenü */
  }
}

.nav__submenu.open {
  display: flex;
}

.nav__current-page {
  display: none;
}

/* Button Hamburger Menü */
.toggle-btn {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 48px;
  height: 48px;
  appearance: none;
  border-style: none;
  background-color: transparent;
  cursor: pointer;

  @media (min-width: 1200px) {
    display: none;
  }
}

/* Erstellen Hamburger Menü */
.bar {
  position: absolute;
  height: 3px;
  width: 32px;
  background-color: var(--default-background-color);
  border-radius: 100px;
  transition: 0.5s;
  transform-origin: center;
  /*mix-blend-mode: difference;*/
}

.bar:nth-child(1) {
  top: 16px;
}
.bar:nth-child(2) {
  top: 24px;
}
.bar:nth-child(3) {
  top: 32px;
}

/* Animation Hamburger Menü */
.toggle-btn.active .bar:nth-child(1) {
  transform: translateY(8px) rotate(-180deg);
}

.toggle-btn.active .bar:nth-child(2){
  opacity:0;
}

.toggle-btn.active .bar:nth-child(3){
  transform: translateY(-8px) rotate(180deg);
}




/* Startseite: Main-Bereich */
.main {
  display: flex;
  flex-flow: column nowrap;
  flex-grow: 1;
  width: 100vw;
}

.banner {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  position: relative;
  overflow: visible;
}

.banner__image {
  width: 100%;
}

.banner__image img {
  display: block; /* verhindert den Inline-Spacing-Bug */
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;

  @media (min-width: 800px) {
    aspect-ratio: 3/1;
    }
}

.banner__notice-container-wrapper {
  display: flex;
  justify-content: center;
  width: 100%;
  background-color: var(--header-background-color);
  padding: 25px 5px 25px 5px;
  margin-bottom: 25px;
}

.banner__notice-container {
  display: flex;
  justify-content: center;
  width: 90%;
  height: fit-content;
  position: static;
  transform: none;
  background-color: var(--default-background-color);
  border: 1px solid var(--header-background-color);
  border-radius: var(--border-radius);
  opacity: 1;
  padding: 20px;
}

.banner__notice h2 {
  margin: 0 0 5px 0;
}


/* Startseite Kontakt-Infos (Snippet: contact-infos) */
.contact {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 50px 0;
}

.contact__info {
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  width: 100%;
  gap: 65px;

  @media (min-width: 990px) {
    flex-flow: row nowrap;
    justify-content: space-evenly;
    align-items: flex-start;
    width: 90%;
  }
}


/* Startseite Kontakt-Infos (Snippet: contact-infos): Kontakt-Kanäle (Tel/Fax/Kontaktformular) */
.contact__channels {
  display: flex;
  flex-flow: column nowrap;
  width: var(--width-contact-containers);
}

.contact__tel {
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-start;
  font-size: var(--font-size-text);
  line-height: var(--text-line-height);
  gap: 6px;
}

.contact__fax {
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-start;
  font-size: var(--font-size-text);
  line-height: var(--text-line-height);
  gap: 6px;
}

.contact__form a {
  font-size: var(--font-size-text);
  line-height: var(--text-line-height);
}


/* Startseite Kontakt-Infos (Snippet: contact-infos): Sprechstunde */
.contact__office-hours {
  display: flex;
  flex-flow: column nowrap;
  width: var(--width-contact-containers);
}

.contact__office-hour {
  display: flex;
  flex-flow: column nowrap;
}


/* Startseite Kontakt-Infos (Snippet: contact-infos): Standort */
address {
  font-style: normal;
}

.contact__address {
  display: flex;
  flex-flow: column nowrap;
  width: var(--width-contact-containers);
}

.contact__direction {
  font-size: var(--font-size-text);
  line-height: var(--text-line-height);
}




/* Startseite Willkommen (Snippet: welcome) */
.welcome {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 50px 0;
  background-color: var(--header-background-color);
}

.welcome__text {
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 80%;
  gap: 15px;
  margin-bottom: 25px;

  @media (min-width: 800px) {
    width: 50%;
  }
}

.welcome__text h1 {
  font-size: var(--font-size-h1-mobile);
  color: var(--default-background-color);
  margin: 25px 0;

  @media (min-width: 800px) {
    font-size: var(--font-size-h1);
  }
}

.welcome__text p {
  color: var(--default-background-color);
}




/* Startseite Leistungen und Schwerpunkt (Snippet: service) */
/* Bereich Leistungen */
.services {
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  gap: 50px;
  padding: 50px 0;
}

.services__headline h1 {
  font-size: var(--font-size-h1-mobile);
  color: var(--text-color);
  margin: 50px 0;

  @media (min-width: 800px) {
    font-size: var(--font-size-h1);
  }
}

.services__list {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-items: center;
  width: 90%;
  gap: 50px 100px;
}

.service__tile {
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: center;
  width: 350px;
  height: 275px;
  border: solid 1px;
  border-radius: var(--border-radius);
  border-color: var(--header-background-color);
  text-decoration: none;
}

.service__link {
  display: flex;
  flex-flow: column nowrap;
  justify-content: space-between;
  width: 75%;
  height: 50%;
  line-height: 1.25;
}

.service__tile h2 {
  font-size: var(--font-size-h2);
  font-weight: 200;
  color: var(--text-color);
}

.service__link span {
  font-size: 1.125rem;
  text-decoration: underline;
}

.service__tile:hover .service__link span {
  color: var(--default-background-color);
}

.service__tile:hover .service__link h2 {
  color: var(--default-background-color);
}

.service__tile:hover {
  background-color: var(--header-background-color);
}

.focuses__headline h1 {
  font-size: var(--font-size-h1-mobile);
  color: var(--text-color);
  margin: 50px 0;

  @media (min-width: 800px) {
    font-size: var(--font-size-h1);
  }
}

/* Bereich Schwerpunkte */
.focuses__list {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-items: center;
  width: 85%;
  gap: 50px 100px;
}

.focus__tile {
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: center;
  width: 350px;
  height: 275px;
  border: solid 1px;
  border-radius: 15px;
  background-color: var(--tiles-background-color);
  text-decoration: none;
}

.focus__tile h2 {
  font-size: var(--font-size-h2);
  font-weight: 200;
  color: var(--text-color);
}

.focus__link {
  display: flex;
  flex-flow: column nowrap;
  justify-content: space-between;
  width: 75%;
  height: 50%;
  line-height: 1.25;
}

.focus__link span {
  font-size: 1.125rem;
  text-decoration: underline;
}

.focus__tile:hover .focus__link span {
  color: var(--default-background-color);
}

.focus__tile:hover .focus__link h2 {
  color: var(--default-background-color);
}

.focus__tile:hover {
  background-color: var(--header-background-color);
}



/* Startseite Team (Snippet: team) */
.team {
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  gap: 50px;
  padding: 0 0 50px 0;
}

.team__container {
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  gap: 50px;
  width: 90%;

  @media (min-width: 1000px) {
    width: 85%;
  }
}

.team__headline {
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
}

.team__headline h1 {
  font-size: var(--font-size-h1-mobile);
  color: var(--text-color);
  margin: 50px 0 0 0;

  @media (min-width: 800px) {
    font-size: var(--font-size-h1);
  }
}

.team__subheadline {
  font-size: var(--font-size-h2);
  margin: 25px 0 0 0;
}

.team__list {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-evenly;
  width: 100%;
  gap: 75px 75px;

  @media (min-width: 1515px) {
    justify-content: space-between;
  }
}

.team__list-item {
  width: 350px;
}

/*.team__member-link {*/
/*  cursor: pointer;*/
/*}*/

.team__member-image {
  display: flex;
  flex-flow: column nowrap;
  gap: 12px;
  width: auto;
}

.team__member-image img {
  width: 100%;
  aspect-ratio: 1/1;
  object-fit: contain;
}

figcaption {
  font-size: 0.85rem;
}



/* Seite: Leistungen und Schwerpunkte */
.blocks__container {
  display: flex;
  flex-flow: column;
  align-items: center;
  width: 100%;
  gap: 50px;
}

.blocks-content {
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  width: 95%;
  height: fit-content;
  border: solid 2px var(--header-background-color);
  border-radius: 15px;
  padding: 25px;

  @media (min-width: 725px) {
    width: 65%;
  }
}

.blocks-content > summary::-webkit-details-marker,
.blocks-content > summary::marker {
  font-size: 1.25rem;

  @media (min-width: 725px) {
    font-size: 1.5rem;
  }
}

.blocks-content-headline {
  display: inline-block;
  width: fit-content;
}

.blocks-content-headline h2 {
  font-size: var(--font-size-h2-mobile);

  @media (min-width: 725px) {
    font-size: var(--font-size-h2);
  }
}

.blocks-content-text {
  padding: 20px 0;
}

.blocks-content-text ol,
.blocks-content-text ul {
  padding-left: 1.2em;
  list-style-position: inside;
  margin: 5px 0 30px 0;
}

.blocks-content-text ol > li {
  display: list-item;
  list-style-type: decimal;
  font-size: var(--font-size-text);
  color: var(--text-color);
}

.blocks-content-text ul > li {
  display: list-item;
  list-style-type: disc;
  font-size: var(--font-size-text);
  color: var(--text-color);
  line-height: 165%;
}



/* Seite: Praxis und Team */
.practice {
  width: 100%;
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  justify-content: center;
  padding: 50px 0;
  gap: 50px;
}

.practice__intro {
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 80%;
  gap: 15px;
  margin-bottom: 25px;

  @media (min-width: 800px) {
    width: 50%;
  }
}

.practice__intro h1 {
  font-size: var(--font-size-h1-mobile);
  margin: 25px 0;

  @media (min-width: 800px) {
    font-size: var(--font-size-h1);
  }
}

.practice__gallery {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  width: 90%;
  gap: 50px;
}

.practice__gallery-item {
  width: 100%;

  @media (min-width: 990px) {
    width: 45%;
  }
}

.practice__image {
  width: auto;
}

.practice__image img {
  width: 100%;
  aspect-ratio: 3/2;
  object-fit: contain;
}


/* Unterseite Ärzte Portraits */
.doctors {
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: center;
  width: 100%;
  min-height: fit-content;
  flex: 1;
  padding: 50px 0;
}

.doctors__bio {
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 50px;
  width: 90%;
}

.doctors__portrait {
  width: 100%;

  @media (min-width: 990px) {
    width: 25%;
  }
}

.doctors__portrait img {
  width: 100%;
}

.doctors__bio-text h4 {
  margin: 0 0 20px 0;
}

.doctors__bio-text span {
  display: block;
  margin-bottom: 50px;
}

/* Unterseite Ärzte Portraits: Breadcrump Navigation */
.nav-breadcrumb-wrapper {
  display: flex;
  width: 90%;
  margin: 0 0 50px 0;
}

.breadcrumb-list {
  display: flex;
  align-items: center;
  justify-content: center;
  list-style: none;
  padding: 0;
  margin: 0;
  flex-wrap: nowrap;
}

/* Trennzeichen für alle Breadcrumb-Items außer dem letzten */
.breadcrumb-item:not(:last-child)::after {
  content: " / ";
  margin: 0 0.5rem;
  color: #666;
}

/* Pfeile und Items ausrichten */
.breadcrumb-item,
.breadcrumb-arrow {
  display: flex;
  align-items: center;
}

.breadcrumb-arrow a {
  margin-bottom: 5px;
  margin-right: 10px;
  font-size: 1.25rem;
  text-decoration: none;
}



/* Seite: Kontakt */
.contact-page {
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  width: 100%;
  gap: 50px;
  padding: 50px 0;
}

.contact-page-wrapper {
  display: flex;
  justify-content: center;
  width: 100%;
  height: 600px;
  background-color: var(--header-background-color);
}

.contact-page__headline {
  display: flex;
  flex-flow: column nowrap; /* muss wieder gelöscht werden */
  justify-content: center;
  align-items: center;
  text-align: center; /* muss wieder gelöscht werden */
  width: 80%;
  gap: 15px;
  background-color: var(--header-background-color);

  @media (min-width: 800px) {
    width: 60%;
  }
}

.contact-page__headline h1 {
  font-size: var(--font-size-h1-mobile);
  color: var(--default-background-color);
  margin: 50px 0;

  @media (min-width: 800px) {
    font-size: var(--font-size-h1);
  }
}

.contact-page__headline p {
  color: var(--default-background-color);
  margin: 0 0 25px 0;
}

.contact-page__container {
  display: grid;
  grid-template-columns: 1fr;
  width: 90%;
  gap: 50px;

  @media (min-width: 990px) {
    grid-template-columns: 35% 55%;
    grid-template-rows: auto auto;
    column-gap: 10%;
    row-gap: 20px;
  }
}

.contact-page__intro {
  display: flex;
  flex-flow: column nowrap;
  width: 90%;

  @media (min-width: 990px) {
    grid-column: 1;
    grid-row: 1;
    align-self: start;
  }
}

.contact-page__form {
  display: flex;
  flex-flow: column nowrap;
  width: 90%;
  margin: 25px 0 0 0;

  @media (min-width: 990px) {
    grid-column: 2;
    grid-row: span 2;
    align-self: start;
    margin: 0;
  }
}

.contact-page__direction {
  display: flex;
  flex-flow: column nowrap;
  width: 90%;

  @media (min-width: 990px) {
    grid-column: 1;
    grid-row: 2;
    align-self: start;
    margin: -300px 0 0 0;
  }
}

.blocks-content-text-container {
  display: flex;
  flex-flow: column nowrap;
}

.contact-page__form-link {
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
  width: var(--width-link-buttons);
  font-size: var(--font-size-text);
  line-height: var(--text-line-height);
  color: var(--default-background-color);
  background-color: var(--orange-color);
  border: 1px solid var(--orange-color);
  border-radius: var(--border-radius);
  padding: 3px;
  gap: 6px;
  margin-top: 50px;
  margin-left: auto;
  margin-right: auto;
}

.contact-page__form-link a {
  color: var(--default-background-color);
}


/* Kontaktformular */
.form__container {
  display: flex;
  flex-flow: row wrap;
  gap: 35px;
  width: 100%;
  border: solid 1px;
  border-radius: var(--border-radius);
  border-color: var(--header-background-color);
  padding: 50px;
  margin: 25px 0 0 0;
}

form {
  display: flex;
  flex-flow: column;
  gap: 15px;
  width: 100%;
}

.field {
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: flex-start;
  gap: 15px;
  width: 100%;
  font-size: .875rem;
}

#js-fieldset-insurance,
#js-field-birthdate,
#js-reason {
  display: none;
}

.field label {
  width: 60%;
}

.form__fieldset-container {
  display: flex;
  align-items: center;
  width: fit-content;
  height: fit-content;
  border: .5px solid #8E8E9B;
  border-radius: 5px;
  margin: 0 0 15px 0;
  background-color: #E9E9ED;
}

.form__fieldset-insurance {
  border: none;
  padding: 8px;
  margin: 8px 0 0 0;
}

.form__legend {
  font-family: sans-serif;
  font-size: .875rem;
}

.form__radio-group {
  display: flex;
  align-items: center;
  gap: 5px;
  margin: 2px 20px 0 0;
}

.form__radio-input {
  width: .875rem;
  height: .875rem;
}

.form__radio-label {
  font-family: sans-serif;
  font-size: .875rem;
}

.visually-hidden {
  position: absolute;
  left: -9999px;
}

.field.subject select,
.field.reason select {
  padding: 5px;
}

.field input {
  width: 100%; /* Breite anpassen */
  padding: 10px 10px 10px 0; /* Innenabstand */
  margin: 8px 0; /* Außenabstand */
  border: none;
  border-bottom: 1px solid #ccc; /* Rahmen */
  font-size: .875rem;
}

.field textarea {
  width: 100%;
  height: 150px;/* Breite anpassen */
  padding: 10px 10px 10px 0; /* Innenabstand */
  margin: 8px 0; /* Außenabstand */
  border: none;
  border-bottom: 1px solid #ccc; /* Rahmen */
}

.cf-turnstile {
  margin: 25px 0 25px 0;
}

input[type="submit"] {
  width: 115px;
  font-size: var(--font-size-text);
  line-height: var(--text-line-height);
  border: 2px solid var(--header-background-color);
  border-radius: var(--border-radius);
  background-color: var(--header-background-color);
  color: var(--default-background-color);
  cursor: pointer;
}

.error-message {
  display: block;
  font-size: .875rem;;
  line-height: 1.5;
  margin-top: 5px;
  font-weight: bold;
  color: var(--form-error-color);
}

input.error,
textarea.error {
  border: 1px solid var(--form-error-color);
}

.form__privacy-container {
  display: flex;
  flex-flow: column nowrap;
  gap: 45px;
  margin: 25px 0 0 0;
  line-height: 1.25;
}

.form__privacy-checkbox {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.form__privacy-notice {
  display: flex;
  flex-flow: column nowrap;
  gap: 15px;
}

.form__privacy-notice p {
  font-size: 1rem;
}

.form__message {
  display: flex;
  width: fit-content;
  padding: 10px;
  border-radius: 5px;
  color: var(--default-background-color)
}

.form__message.success {
  background-color: var(--header-background-color);
}

.form__message.error {
  background-color: var(--form-error-color);
}

.uniform__potty {
  position: absolute;
  left: -9999px;
}




/* Footer */
.footer {
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  justify-content: center;
  width: 100vw;
  flex: 1;
  padding: 0 0 25px 0;
  gap: 45px;
  margin-top: 150px;
  background-color: var(--header-background-color);
}

.footer__maps {
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 40vh;
  margin: 0;
  padding: 0;
  background-color: #555555;
}

.footer__map-placeholder {
  display: flex;
  width: 100%;
  height: 100%;
}

.footer__placeholder-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(80%);
}

.footer__map {
  position: relative;
  width: 100%;
  height: 100%;
}

.footer__map iframe {
  width: 100%;
  height: 100%;
  border: none;
  display: none;
}

.footer__info {
  display: flex;
  flex-flow: column nowrap;
  align-items: flex-start;
  width: fit-content;
  min-height: fit-content;
  row-gap: 75px;

  @media (min-width: 800px) {
    flex-flow: row wrap;
    justify-content: center;
    align-items: flex-start;
    column-gap: 125px;
  }
}

.footer__info p,
.footer__info h4 {
  color: var(--default-background-color);
}

.footer__name {
  display: flex;
  flex-flow: column nowrap;
  gap: 20px;
}

.footer__contact {
  display: flex;
  flex-flow: column nowrap;
  gap: 20px;
}

.footer__tel,
.footer__fax {
  display: flex;
  flex-flow: row nowrap;
  gap: 6px;
}

.footer__tel a {
  color: var(--default-background-color);
}

.footer__fax p {
  color: var(--default-background-color);
}

.footer__form {
  display: flex;
  flex-flow: column nowrap;
}

.footer__form a {
  line-height: 165%;
  font-size: var(--font-size-text);
  color: var(--default-background-color);
}

.footer__legal {
  display: flex;
  flex-flow: column nowrap;
  gap: 5px;
}

.footer__legal a {
  font-size: var(--font-size-text);
  color: var(--default-background-color);
}

.footer__copyright {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  border-top: solid .5px var(--default-background-color);
  padding: 25px 0 0 0;
}

.footer__copyright p {
  color: var(--default-background-color);
}

.footer__klaro-privacy {
  color: var(--default-background-color);
}




/* Datenschutz und Impressum */
.legal {
  display: flex;
  justify-content: space-around;
  width: 100%;
}

.legal__container {
  display: flex;
  flex-flow: column nowrap;
  /*align-items: center;*/
  gap: 25px;
  width: 50%;
}

.legal__title {
  padding: 50px 0;
}

.legal__text {
  padding: 0 0 0 4px;
}