@charset "UTF-8";
/* BODY */
body {
  width: 100vw;
  margin: 0;
  padding-top: 1em;
  background-color: #fab700; }

.kontakt {
  flex-direction: column;
  flex-basis: max-content;
  display: flex;
  align-items: center;
  margin-bottom: 0.5em;
  margin-right: 0.1em;
  margin-left: 0.1em;
  padding-bottom: 1em;
  padding-left: 0.5em;
  padding-right: 0.5em;
  background-color: #003d17;
  color: #fab700; }
  .kontakt img {
    image-rendering: crisp-edges;
    width: 5em; }
  .kontakt figure {
    width: max-content;
    text-align: center; }

.kontakt > a:nth-child(2) {
  color: #fab700;
  padding-bottom: 1.0em; }

.kontakt > a:nth-child(3) {
  color: #fab700;
  padding-bottom: 1.0em; }

.kontakt > a:nth-child(4) {
  color: #fab700;
  padding-bottom: 1.0em; }

.kontakt > a:nth-child(5) {
  color: #fab700;
  padding-bottom: 1.0em; }

.kontakt > a:nth-child(6) {
  color: #fab700; }

header {
  padding: 0.1em;
  display: flex;
  flex-direction: row;
  max-height: 5em;
  background-color: #fab700; }
  header #logo-1 {
    flex-basis: 33%;
    margin-top: 0.1em;
    margin-bottom: 0.1em;
    background-image: url("../../medien/baumfaellung_header_q_1000.svg");
    background-repeat: no-repeat;
    background-position: center; }
  header #ueberschrift {
    display: flex;
    align-items: center;
    flex: 2;
    padding-left: 1em;
    padding-top: 1em;
    padding-right: 1em;
    padding-bottom: 1em;
    font-family: 'interstateblackcondensed';
    font-size: 1.5em;
    font-weight: 900;
    text-align: center; }
  @media (min-width: 30em) {
    header {
      font-size: 2.0em;
      min-width: 20vw;
      min-height: 20vh; } }

/* ***** MAIN - Darstellung des eigentlichen Inhalts ***** */
main {
  display: flex;
  flex-direction: column;
  background-color: #fab700; }
  main article {
    margin-top: 0em;
    flex: 1 1 0%; }
  main article h1 {
    text-align: center; }
  main section > p {
    padding-left: 0.5em;
    padding-right: 0.5em;
    padding-bottom: 0.3em; }

/* ********** Navigation ********** */
nav {
  display: block;
  justify-content: start;
  background-color: #003d17;
  text-align: left;
  white-space: nowrap; }

nav ul,
nav li,
nav a {
  display: block; }

nav ul {
  flex-direction: column;
  list-style-type: none;
  list-style-position: outside;
  background-color: transparent;
  padding: 0em;
  margin-right: 0.2em; }

nav li {
  margin-top: 0.3em;
  margin-right: 0.3em; }

/* Links */
nav a {
  padding: 0.2em 1em;
  text-decoration: none; }
  nav a:link {
    background-color: transparent;
    color: #fab700; }
  nav a:visited {
    background-color: white;
    color: #fab700; }
  nav a:hover {
    background-color: #fab700;
    color: #593112;
    text-decoration: none; }
  nav a:active {
    background-color: #bfaa40; }

/**
* CSS für Hamburger-Menü
*/
nav ul {
  list-style: none; }

/*	Sichtbarkeit nur für mobile Geräte einschalten	*/
@media all and (max-width: 60em) {
  nav ul {
    display: none; } }
@media all and (min-width: 61em) {
  nav ul {
    display: flex;
    flex-direction: row; } }
.burgericon {
  width: 30px;
  height: 30px;
  margin-right: 0.5em;
  display: none; }

.burgericon div {
  margin: 7px 5%;
  height: 3px;
  background-color: #fab700; }

/*	Plazierung an dieser Stelle ist wichtig,
	da ansonsten das Burger-Menü nicht angezeigt wird */
@media all and (max-width: 60em) {
  .burgericon {
    display: block; } }
#navigation {
  opacity: 0; }

#navigation:checked ~ ul {
  display: block; }

#navigation:checked ~ label .burgericon {
  margin-top: 15px;
  margin-right: 0.5em; }

#navigation:checked ~ label .burgericon div:first-of-type {
  rotate: 45deg; }

#navigation:checked ~ label .burgericon div:last-child {
  rotate: -45deg;
  margin-top: -10px; }

#navigation:checked ~ label .burgericon div:nth-child(2) {
  display: none; }

/* Ende nav */
/* ********** Footer ********** */
footer {
  display: block;
  justify-content: space-evenly;
  background-color: #003d17;
  font-size: 0.8em;
  text-align: left;
  white-space: nowrap; }

footer ul,
footer li,
footer a {
  display: inline-block; }

footer ul {
  flex-direction: row;
  list-style-type: none;
  list-style-position: outside;
  background-color: transparent;
  margin-right: 1em; }

footer li {
  margin-top: 0.3em; }

/* Links */
footer a {
  padding: 0.2em 1em;
  text-decoration: none; }
  footer a:link {
    background-color: transparent;
    color: #fab700; }
  footer a:visited {
    background-color: white;
    color: #fab700; }
  footer a:hover {
    background-color: #fab700;
    color: #593112;
    text-decoration: none; }
  footer a:active {
    background-color: #bfaa40; }

/* Ende Footer */
/* Flex - Container */
.ks-flex-container {
  display: flex; }

/* große Viewports */
@media all and (min-width: 30em) {
  .ks-flex-container {
    flex-direction: row;
    flex: 1 2 1; } }
.ks-flex-item {
  justify-content: center; }

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

.ks-flex-column {
  flex-direction: column;
  flex: 1 min-content; }

/* Ende Flex - Container */
/* Schrift / Fonts */
.font {
  font-family: "interstateregularcondensed";
  font-size: 1em;
  color: #003d17; }

@font-face {
  font-family: 'interstateregularcondensed';
  src: url("../../../fonts/baumfaellung/interstate-regularcondensed-webfont.woff2") format("woff2"), url("../../../fonts/baumfaellung/Interstate-RegularCondensed.woff") format("woff");
  font-weight: normal;
  font-style: normal; }
@font-face {
  font-family: 'interstateblackcondensed';
  src: url("../../../fonts/baumfaellung/interstate-blackcondensed-webfont.woff2") format("woff2"), url("../../../fonts/baumfaellung/interstate-blackcondensed-webfont.woff") format("woff");
  font-weight: normal;
  font-style: normal; }
@font-face {
  font-family: 'interstatelightcondensed';
  src: url("../../../fonts/baumfaellung/interstate-lightcondensed-webfont.woff2") format("woff2"), url("../../../fonts/baumfaellung/interstate-lightcondensed-webfont.woff") format("woff");
  font-weight: normal;
  font-style: normal; }
/**
 * Folgende Breakpoints werden unter unterstützt:
 * - Für Mobile Devices – 320px — 480px
 * - iPads und Tablets – 481px — 768px
 * - Laptops und kleine Bildschirme – 769px — 1024px
 * - Große Bildschirme und Desktops – 1025px — 1200px
 * - TV und extragroße Bildschirme – 1201px and mehr
 * ***************************************************
 * Sind sekundäre Breakpoints erforderlich, so werden
 * diese an entsprechender Stelle eingefügt.
 * ***************************************************
 * Innerhalb der @media - Querys werden nur die Styles
 * aufgeführt, deren Anpassung an die Breakpoints
 * erforderlich sind.
 * @author Hilmar Kluschke
 * hilmar.kluschke@wuerstlich.de
 * Bearbeitungsstand: Januar 2023 
 */
/* Mobile Devices (320px - 480px) */
/* iPads und Tablets – 481px — 768px */
@media screen and (min-width: 481px) and (max-width: 768px) {
  header {
    max-height: 4em; }

  article {
    flex-direction: column; }

  section {
    display: flex; }

  section > picture img {
    max-height: 10em;
    padding-left: 0.5em; }

  section > p {
    margin-block: inherit;
    padding-left: 0.5em;
    padding-right: 0.5em; } }
/* Laptops und kleine Bildschirme – 769px — 1024px */
@media screen and (min-width: 769px) and (max-width: 1024px) {
  header {
    max-height: 4em; }

  article {
    flex-direction: column; }

  section {
    display: flex; }

  section > picture img {
    max-height: 15em;
    padding-left: 0.5em; }

  section > p {
    margin-block: inherit;
    padding-left: 0.5em;
    padding-right: 0.5em; } }
/* Große Bildschirme und Desktops – 1025px — 1200px */
@media screen and (min-width: 1025px) and (max-width: 1200px) {
  main,
  header,
  nav,
  footer {
    width: 90%;
    margin-left: 5%;
    margin-right: auto; }

  header {
    max-height: 4em; }

  article {
    flex-direction: column; }

  section {
    display: flex; }

  section > picture img {
    max-height: 15em;
    padding-left: 0.5em; }

  section > p {
    margin-block: inherit;
    padding-left: 0.5em;
    padding-right: 0.5em; } }
/* TV und extragroße Bildschirme – 1201px and mehr */
@media screen and (min-width: 1201px) {
  main,
  header,
  nav,
  footer {
    width: 70%;
    margin-left: 15%;
    margin-right: auto; }

  header {
    max-height: 4em; }

  article {
    flex-direction: column; }

  section {
    display: flex; }

  section > picture img {
    max-height: 15em;
    padding-left: 0.5em; }

  section > p {
    margin-block: inherit;
    padding-left: 0.5em;
    padding-right: 0.5em; } }

/*# sourceMappingURL=style.css.map */