/* roboto-300 - latin */
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 300;
  src: url("/fonts/roboto-v30-latin-300.eot");
  /* IE9 Compat Modes */
  src: local(""),
    url("/fonts/roboto-v30-latin-300.eot?#iefix") format("embedded-opentype"),
    /* IE6-IE8 */
    url("/fonts/roboto-v30-latin-300.woff2") format("woff2"),
    /* Super Modern Browsers */
    url("/fonts/roboto-v30-latin-300.woff") format("woff"),
    /* Modern Browsers */
    url("/fonts/roboto-v30-latin-300.ttf") format("truetype"),
    /* Safari, Android, iOS */
    url("/fonts/roboto-v30-latin-300.svg#Roboto") format("svg");
  /* Legacy iOS */
}

html {
  font-family: "Futura,Roboto";
  font-style: normal;
  font-weight: 300;
  color: #00325e;

  background: rgb(0, 92, 169);
  background: radial-gradient(circle,
      rgba(0, 92, 169, 1) 0%,
      rgba(0, 50, 94, 1) 100%);
}

body {
  margin: 0;
  width: 100%;
}

.container {
  padding: 4em 1em;
  max-width: 1680px;
  margin-left: auto;
  margin-right: auto;
}

/* START sections */

section {
  width: 100%;
}

#nav {
  background-color: #ffffff;
}

#nav>.container {
  /* emove padding for nav container */
  padding: 0;
}

#hero {
  background-color: #ffffff;
}

#hero>.container>img {
  transition: transform 0.5s ease;
  width: inherit;
}

#hero>.container>img:hover {
  transform: scale(1.03);
}

#greeting {
  color: #ffffff;
}

#greeting>.container {
  padding-bottom: 0;
}

#news>.container {
  padding: 0 1em;
}

#leistungen {
  color: #ffffff;
}

#contact {
  background-color: #ffffff;
}

#team {
  background-color: #ffffff;
}

#therapie {
  background-color: #ffffff;
}

#praxis {
  background-color: #ffffff;
}

#kontakt {
  background-color: #ffffff;
}

#anfahrt {
  color: #ffffff;
}

#impressum,
#datenschutz {
  background-color: #ffffff;
}

#footer {
  color: #ffffff;
}

#footer>.container {
  padding-top: 1em;
}

/* END sections*/

header {
  position: fixed;
  display: none;
  height: 100px;
  background: #ffffff;
  border-bottom: 1px solid #00325e;
  font-size: 1.5em;
  width: 100%;
  padding: 0 1em;
  z-index: 999;
}

.header-container {
  max-width: 1680px;
  margin-left: auto;
  margin-right: auto;
  height: 100px;
}

.header-container>img {
  float: left;
  height: 100px;
}

.header-container>.menu {
  margin-top: 2em;
}

#nav {
  font-size: 1.5em;
}

.mobile-nav {
  z-index: 1000;
}

/* The Overlay (background) */
.mobile-nav-overlay {
  /* Height & width depends on how you want to reveal the overlay (see JS below) */
  height: 0;
  width: 100%;
  position: fixed;
  /* Stay in place */
  z-index: 1;
  /* Sit on top */
  left: 0;
  top: 0;
  background-color: white;
  /* Black w/opacity */
  overflow-x: hidden;
  /* Disable horizontal scroll */
  transition: 0.5s;
  /* 0.5 second transition effect to slide in or slide down the overlay (height or width, depending on reveal) */
  text-align: center;
}

/* Position the content inside the overlay */
.mobile-nav-content {
  position: relative;
  /* 25% from the top */
  width: 100%;
  /* 100% width */
  text-align: center;
  /* Centered text/links */
  margin-top: 30px;
  /* 30px top margin to avoid conflict with the close button on smaller screens */
}

/* The navigation links inside the overlay */
.mobile-nav-overlay a {
  padding: 8px;
  text-decoration: none;
  font-size: 36px;

  display: block;
  /* Display block instead of inline */
  transition: 0.3s;
  /* Transition effects on hover (color) */
}

.mobile-nav-btn {
  display: none;
}

.mobile-nav-overlay>img {
  height: 100px;
  padding: 1em;
}

.nav-header {
  font-size: initial;
  text-align: center;
  border-bottom: 1px solid #00325e;
  padding: 1em 0;
}

.menu {
  float: right;
}

.menu>.menu-item {
  display: block;
  float: left;
  margin: 0 1.2em;
}

.menu-item>a {
  text-decoration: none;
}

.greeting {
  text-align: center;
  margin-bottom: 4em;
}

.greeting-text {
  hyphens: auto;
  margin: 0 12em;
}

#leistungen>.container {
  padding-top: 0;
}

a {
  color: inherit;
  text-decoration: underline;
}

a:hover {
  text-decoration: underline;
  color: #005ca9;
}

.feature-cards {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto;
  grid-gap: 2em;
}

.card {
  display: block;
  box-shadow: 10px 10px 5px #00325e;
  background-color: #ffffff;
  color: #00325e;
}

.card-img {
  width: 100%;
  overflow: hidden;
}

.card-img>img {
  aspect-ratio: 4/3;
  transition: transform 0.5s ease;
  width: inherit;
}

.card-img>img:hover {
  transform: scale(1.03);
}

.card-text {
  padding: 1em;
  text-align: center;
}

.news-container {
  margin: 0 12em;
  box-shadow: 10px 10px 5px #00325e;
  padding: 2em;
  background-color: white;
  transition: transform 0.5s ease;
  width: inherit;
}

.news-container:hover {
  transform: scale(1.03);
}

.news-container>* {
  align-self: center;
}

.news-header {
  text-align: center;
}

.leistungen-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 1em;
}

.leistungen-beschreibung {
  grid-column-start: 1;
  grid-column-end: 4;
}

.leistung-box {
  padding: 1em;
  box-shadow: 10px 10px 10px #00325e;
  background-color: #005ca9;
  transition: transform 0.5s ease;
  width: inherit;
}

.leistung-box:hover {
  transform: scale(1.03);
}

.leistung-box.weitere-leistungen {
  color: #00325e;
  background-color: #ffffff;
}

.leistung-box.weitere-leistungen:hover {
  cursor: pointer;
  text-decoration: underline;
  color: #005ca9;
}

.leistung-name {
  font-size: 1.3em;
  margin-bottom: 1em;
}

.leistung-text {
  margin-bottom: 1em;
}

.leistung-link:hover {
  cursor: pointer;
  color: #00325e;
}

.button {
  display: inline-block;
  cursor: pointer;
  border: 1px solid #ffffff;
  border-radius: 5px;
  padding: 1em;
}

.button:hover {
  text-decoration: none;
}

footer {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto;
  grid-gap: 2em;
}

.logo-footer {
  height: 4em;
  background-color: #ffffff;
  padding: 1em;
}

iframe,
object,
embed {
  width: 100%;
}

.team-container {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: auto;
  justify-items: center;
  align-items: center;
  gap: 1em;
}

.team-container>img {
  max-width: 100%;
  transition: transform 0.5s ease;
}

.team-container>img:hover {
  transform: scale(1.03);
}

.team-container>.team-img {
  grid-column: span 4;
}

.team-name {
  font-size: 1.5em;
}

.team-beruf {
  margin: 1em;
  color: #005ca9;
}

.impressum-container,
.datenschutz-container {
  margin-top: 2em;
}

.therapien-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 10em;
  gap: 1em;
}

.therapien-container>a {
  text-decoration: none;
  border: 1px solid #00325e;
  padding: 0.5em 1em;
  border-radius: 5px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-content: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.therapien-container>a>span {
  width: fit-content;
  background-color: rgb(255, 255, 255, .75);
  border-radius: 5px;
}

.therapien-container>.return-to-sports {
  background-image: url('/img/bilder/leistungen/return-to-sports.jpeg');
}

.therapien-container>.manuelle-therapie {
  background-image: url('/img/bilder/leistungen/manuelle-therapie.jpeg');
}

.therapien-container>.krankengymnastik {
  background-image: url('/img/bilder/leistungen/krankengymnastik.jpeg');
}

.therapien-container>.krankengymnastik-neurologisch {
  background-image: url('/img/bilder/leistungen/krankengymnastik-neurologisch.jpeg');
}

.therapien-container>.personal-training {
  background-image: url('/img/bilder/leistungen/personal-training.jpeg');
}

.therapien-container>.manuelle-lymphdrainage {
  background-image: url('/img/bilder/leistungen/manuelle-lymphdrainage.jpeg');
}

.therapien-container>.trainingstherapie-kgg {
  background-image: url('/img/bilder/leistungen/krankengymnastik-am-gerät.jpeg');
}

.therapien-container>.bioimpedanzanalyse {
  background-image: url('/img/bilder/leistungen/bioimpedanzanalyse.jpeg');
}

.therapien-container>.tapeverbaende {
  background-image: url('/img/bilder/leistungen/tapeverbände.jpeg');
}

.therapien-container>.ernaehrungsberatung {
  background-image: url('/img/bilder/leistungen/ernährungsberatung.jpeg');
}

.therapien-container>.elektrotherapie-ultraschall {
  background-image: url('/img/bilder/leistungen/elektrotherapie-und-ultraschall.jpeg');
}

.therapien-container>.thermotherapie {
  background-image: url('/img/bilder/leistungen/thermotherapie.jpeg');
}

.therapien-container>a:hover {
  border-width: 2px;
}

.leistung-grid {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto;
  gap: 1em;
}

.leistung-grid>img {
  width: 100%;
  transition: transform 0.5s ease;
}

.leistung-grid>img:hover {
  transform: scale(1.03);
}

.praxis-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto;
  grid-gap: 2em;
  justify-items: center;
  align-items: center;
}

.praxis-container>img {
  max-width: 100%;
}

.kontakt-grid {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto;
  gap: 1em;
}

.kontakt-grid>img {
  width: 100%;
  transition: transform 0.5s ease;
}

.kontakt-grid>img:hover {
  transform: scale(1.03);
}

@media (max-width: 1680px) {
  .container {
    max-width: 1200px;
  }

  .header-container {
    max-width: 1200px;
  }

  .greeting-text {
    margin: 0 8em;
  }
}

@media (max-width: 1200px) {
  .container {
    max-width: 1024px;
  }

  .news-container {
    margin: 0 4em;
  }

  .therapien-container {
    grid-template-columns: 1fr 1fr 1fr;
  }

  .leistung-grid {
    grid-template-columns: 1fr;
  }

  .leistung-grid>img {
    grid-row: 1;
  }

  .kontakt-grid {
    grid-template-columns: 1fr;
  }

  .kontakt-grid>img {
    grid-row: 1;
  }

  .header-container {
    max-width: 1024px;
    display: grid;
    grid-template-columns: 1fr 6em;
    grid-template-rows: auto;
  }

  .mobile-nav-btn {
    font-size: 2em;
    display: block;
    text-align: center;
  }

  .mobile-nav-btn.sticky {
    float: right;
    margin-top: 0.4em;
  }

  .menu {
    display: none;
  }

  .greeting-text {
    hyphens: auto;
    margin: 0 4em;
  }
}

@media (max-width: 1024px) {
  .news-container {
    margin: 0 2em;
  }

  .feature-cards {
    grid-template-columns: 1fr;
  }

  .leistungen-container {
    grid-template-columns: 1fr 1fr;
  }

  .leistungen-beschreibung {
    grid-column-start: 1;
    grid-column-end: 3;
  }

  footer {
    grid-template-columns: 1fr;
  }

  .greeting-text {
    hyphens: auto;
    margin: 0 2em;
  }

  .praxis-container {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .therapien-container {
    grid-template-columns: 1fr 1fr;
  }

  .team-container {
    grid-template-columns: 1fr 1fr;
  }

  .team-container>.team-img {
    grid-column: span 2;
  }

  .leistungen-container {
    grid-template-columns: 1fr;
  }

  .leistungen-beschreibung {
    grid-column-start: 1;
    grid-column-end: 2;
  }

  .header-container {
    grid-template-columns: 1fr 4em;
  }
}

@media (max-width: 480px) {
  .header-container>img {
    height: auto;
    max-height: 100px;
    width: 100%;
  }

  .mobile-nav-btn.sticky {}
}