@font-face {
  font-family: "Belly Betty";
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  src: url(../fonts/bellybetti/BellyBetty.ttf) format("truetype");
}

@font-face {
  font-family: "Karla";
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  src: url(../fonts/karla/Karla-VariableFont_wght.ttf) format("truetype");
}

@font-face {
  font-family: "Karla";
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
  src: url(../fonts/karla/Karla-Italic-VariableFont_wght.ttf) format("truetype");
}

@media screen {

  /**
    * 1. Grundlegende Einstellungen
    */
  html {
    /* Box-Modell umstellen auf border-box, Teil 1/2 */
    box-sizing: border-box;
    /* erzeugt inaktiven Rollbalken und verhindert so ein "Hüpfen" bei kurzen Webseiten */
    overflow-y: scroll;
  }

  /* Box-Modell umstellen auf border-box, Teil 2/2 */
  *, *::before, *::after {
    box-sizing: inherit;
  }

  /*Standardabstände verhindern*/
  * {
    padding: 0;
    margin: 0;
  }

  /* Für alte Browser wie den IE11 */
  header, nav, main, footer,
  section, article, aside,
  figcaption, figure {
    display: block;
  }

  /* Vermeidung von "collapsing margins" */
  h1, h2, h3, h4, h5, h6,
  p, ul, ol, blockquote {
    margin-top: 0;
    margin-bottom: 1rem;
  }

  /* Elemente im visuellen Layout versteckt, aber für Screenreader vorhanden */
  .visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    border: 0;
    margin: -1px;
    clip-path: inset(0 0 0 0);
    overflow: hidden;
    white-space: nowrap;
  }

  /* Umgebende Elemente sollen gefloatete Elemente umschließen */
  .clear-overflow {
    overflow: hidden;
  }

  .clearfix::after {
    content: "";
    display: table;
    clear: both;
  }

  .clear-flow-root {
    display: flow-root;
  }

  /* Element soll unterhalb von gefloateten Elementen bleiben */
  .clear-both {
    clear: both;
  }

  /**
    * 2. Grundlegende Textgestaltung
    */
  body {
    /*Webfonts - Schriftart mitliefern (in style.css mit @import geladen) */
    font-family: 'Karla', sans-serif;
    /* Schriftgröße explizit festlegen */
    font-size: 1rem;
    margin: auto;
  }

  h1, h2, h3, h4 {
    font-family: 'Karla', sans-serif;
  }

  /* Schriftgrößen für Überschriften */
  h1 {
    font-size: 1.75rem;
  }

  h2 {
    font-size: 1.5rem;
  }

  h3 {
    font-size: 1.25rem;
  }

  h4 {
    font-size: 1rem;
    font-variant: small-caps;
  }

  /**
    * 3. Elementselektoren und allgemeine Klassen
    */
  /* flexible Bilder */
  img {
    max-width: 100%;
    height: auto;
  }

  /* blockquote gestalten */
  blockquote {
    text-align: center;
  }

  blockquote>p {
    font-size: 1.2rem;
    font-style: italic;
    font-weight: 430;
    letter-spacing: 1px;
    color: #333;
  }

  cite {
    font-size: smaller;
  }

  /* figure ohne margin und Bildbeschriftung gestalten */
  figure {
    padding: 0;
    margin: 0;
  }

  figcaption {
    text-align: center;
    font-size: 80%;
    font-style: italic;
    padding: 0;
    margin: 0;
  }

  /* Bilder floaten */
  .bildrechts {
    float: right;
    margin-left: 1rem;
    margin-bottom: 1rem;
  }

  .bildlinks {
    float: left;
    margin-right: 1rem;
    margin-bottom: 1rem;
  }

  /* Gestaltung der Layoutbereiche */
  body {
    background: #F2A687;
    max-width: 960px;
    margin: auto;
    min-height: 100vh;
    display: flex;
    flex-flow: column;
  }

  /**
  * Inhaltsbereich
  */
  /* Zeilenabstand auf das anderthalbfache der Schriftgröße */
  .site-content {
    background-color: #FCDECF;
    padding: 1rem;
    color: #4A413D;
    line-height: 1.5;
    flex: 1 auto;
  }

  /**
  * Fußbereich
  */
  /* Grundlegende Gestaltung der Fußzeile  */
  .site-footer {
    font-size: smaller;
    background-color: #D98E73;
    padding: 1rem 0;
    margin-top: auto;
    clear: both;
  }

  .site-footer a {
    color: white;
    text-decoration: none;
  }

  .chicken {
    text-align: center;
  }

  /* Banner */
  .banner {
    width: 100%;
    background-color: #F2A687;
  }

  .banner {
    margin: auto;
  }

  .banner-image {
    background-color: #F2A687;
    background: url("../images/bg_logo.jpg") no-repeat 50% 50%;
    width: 100%;
    height: 0;
    padding-top: 31.25%;
    background-size: contain;
  }

  /* responsive Navigation */
  /**
    * Menübutton zum Ein- und Ausklappen gestalten
    */
  .menubutton {
    display: block;
    background: #C96D61;
    color: white;
    font-family: inherit;
    font-size: inherit;
    text-align: center;
    padding: 0.5rem 1rem;
    border: 0;
    border-radius: 0.25rem;
    margin: 0 1rem 0.5rem 1rem;
  }

  .menu:before {
    content: '\2630';
  }

  .site-nav>.wrapper {
    padding-left: 0;
    padding-right: 0;
  }

  /**
    * Basisformatierung
    */
  .site-nav {
    position: sticky;
    top: 0;
    background: #D98E73;
    color: white;
    box-shadow: 0 2px 6px rgba(51, 51, 51, 0.3);
    padding: 0.5rem 0 0 0;
  }

  /**
    * Liste gestalten
    */
  .site-nav-list {
    display: flex;
    flex-flow: column nowrap;
    padding: 0;
    margin: 0;
  }

  .site-nav-list li {
    list-style: none;
  }

  /**
    * Links gestalten
    */
  .site-nav-list a {
    display: block;
    text-decoration: none;
    min-width: 72px;
    min-width: 70px;
    background: #D98E73;
    color: white;
    padding: 0.5rem 1rem;
  }

  .site-nav-list a.sie-sind-hier {
    background: #B3755F;
    color: white;
  }

  .site-nav-list a:hover,
  .site-nav-list a:focus {
    background: #B3755F;
    color: white;
  }

  .site-nav-list a:active {
    background: #C96D61;
    color: white;
  }

  /* Die Navigationsliste ausblenden */
  .site-nav-list {
    max-height: 0;
    overflow: hidden;
  }

  /* Die Navigationsliste nach einem Klick auf den Menübutton einblenden */
  .show-menu+.site-nav-list {
    max-height: 100rem;
    transition: max-height 400ms ease-in-out;
  }

  /*   Meta-Navigation im Footer */
  .meta-nav-list {
    display: flex;
    list-style-type: none;
    padding: 0;
    margin: 0;
  }

  .meta-nav-list li {
    margin-right: 1rem;
  }

  .meta-nav-list li:last-child {
    margin-right: 0;
    margin-left: auto;
  }

  /**
* Gestaltung der Links
* fast identisch mit den Links in ul.site-nav-list
*/
  .meta-nav-list a {
    display: block;
    text-decoration: none;
    background: #D98E73;
    color: white;
    line-height: 1;
    padding: 0.25rem;
  }

  .meta-nav-list .sie-sind-hier {
    background-color: #B3755F;
    color: white;
  }

  .meta-nav-list a:hover,
  .meta-nav-list a:focus {
    background-color: #B3755F;
    color: white;
  }

  .meta-nav-list a:active {
    background: #C96D61;
    color: white;
  }

  .image-container {
    display: flex;
    justify-content: space-around;
  }

  .image {
    padding: 1rem;
  }

  /* Gestaltung der Layoutbereiche */
  .portrait.bildrechts {
    border: 5px solid white;
    border-radius: 50%;
    width: 100px;
  }

  .services-list {
    margin: 0 1.5rem 1.5rem 1.5rem;
  }

  .services-list>li {
    padding-bottom: 1rem;
  }

  .time {
    color: #D98E73;
    text-decoration: underline;
  }

  .time-content {
    margin-left: 1rem;
  }

  .contact {
    display: flex;
    flex-flow: column;
  }

  .larger {
    font-size: larger;
  }

  .adress {
    margin-bottom: 1rem;
  }

  iframe {
    max-width: 100%;
    box-shadow: 0px 0px 5px 0px rgba(179, 117, 95, 0.25);
  }

  iframe .navigate {
    display: block !important;
  }

  /* Datenschutz */
  li.adsimple-321830689 {
    margin-left: 1rem;
  }

  li.adsimple-311830689 {
    margin-left: 1rem;
  }

  adress a:link,
  adress a:hover,
  adress a:active {
    color: #C96D61;
  }

  adress a:visited {
    color: #B3755F;
  }

  .datenschutz a:link,
  .datenschutz a:hover,
  .datenschutz a:active {
    color: #C96D61 !important;
  }

  .datenschutz a:visited {
    color: #B3755F !important;
  }
}

/* Ende @media */
/**
  * Navigation ab 768px - Menübutton ausblenden und Liste horizontal anzeigen
  *
  */
@media screen and (min-width: 768px) {

  /* Menübutton verstecken */
  .menubutton {
    display: none;
  }

  /* Liste einblenden und als Zeile darstellen */
  .site-nav-list {
    max-height: none;
    overflow: auto;
    transition: none;
    flex-flow: row wrap;
    justify-content: right;
  }

  /* Fine-Tuning und Fallback für Flexbox */
  .site-nav {
    position: sticky;
    top: 0;
    padding: 0;
  }

  .site-nav>.wrapper {
    padding: 0 1rem;
  }

  .site-nav-list li {
    display: inline-block;
    flex: 1;
    text-align: center;
    border-left: 1px solid #eee;
    /* Maximale Breite begrenzen */
    max-width: 170px;
  }

  .portrait.bildrechts {
    width: 150px;
  }

  .contact {
    flex-flow: row;
  }

  .adress {
    flex: 2;
  }

  .adress a {
    color: #52572F;
  }

  .map {
    flex: 3;
  }
}

/* Ende der Media Query */