/* Corporate Design */
:root
{
 --fs-braun:#533a20;
 --fs-gruen:#64ae24;
 --fs-beige:#f1e7c9;
}
@font-face
{
 font-family:'Alfa Slab One';
 font-style:normal;
 font-weight:400;
 src:url('./fonts/alfa-slab-one-v8-latin-regular.eot');
 src:local('Alfa Slab One Regular'),local('AlfaSlabOne-Regular'),
  url('./fonts/alfa-slab-one-v8-latin-regular.woff2') format('woff2'),
  url('./fonts/alfa-slab-one-v8-latin-regular.woff') format('woff'),
  url('./fonts/alfa-slab-one-v8-latin-regular.ttf') format('truetype');
}
@font-face
{
 font-family:'Source Sans Pro';
 font-style:normal;
 font-weight:400;
 src:url('./fonts/source-sans-pro-v12-latin-regular.eot');
 src:local('Source Sans Pro Regular'),local('SourceSansPro-Regular'),
  url('./fonts/source-sans-pro-v12-latin-regular.woff2') format('woff2'),
  url('./fonts/source-sans-pro-v12-latin-regular.woff') format('woff'),
  url('./fonts/source-sans-pro-v12-latin-regular.ttf') format('truetype');
}
body
{
 font-family:'Source Sans Pro',sans-serif;
 font-size:1.2rem;
 background-color:var(--fs-beige);
 color:black;
}

/* Reset */
body,nav ul
{
 margin:0;
}
a
{
 color:var(--fs-braun);
 text-decoration:inherit;
 border-bottom:1px dotted black;
}
a:hover
{
 color:var(--fs-gruen);
}

/* Klappkasten */
.kasten .versteckt,.kasten .nicht_versteckt
{
 overflow:hidden;
}
.kasten input:not(:checked) ~ .versteckt, .kasten input:checked ~ .nicht_versteckt
{
 max-height:0;
}
.kasten input:not(:checked) ~ label .einklappen, .kasten input:checked ~ label .ausklappen, .kasten input
{
 display:none;
}
.kasten label
{
 cursor:pointer;
}
.kasten
{
 border-style:solid;
 margin-bottom:1.5em; 
 margin-left:10%;
 margin-right:10%;
 padding:1em;
}

/* Termine-Tabelle */
tr > td
{
 white-space:nowrap;
 padding-right:.3em;
}
tr > td:last-of-type
{
 padding-right:0;
 white-space:normal;
}

/* Menü */
nav
{
 background-color:var(--fs-beige);
 font-size:1.2rem;
 width:100%;
 top:0;
 left:0;
 position:sticky;
 z-index:1;
 box-shadow:0 .5rem 1rem rgba(0,0,0,.05),inset 0 -1px 0 rgba(0,0,0,.1);
}
nav a
{
 border:none;
 padding:.5rem;
}
nav a:hover
{
 color:var(--fs-beige);
 background-color:var(--fs-gruen);
 border-radius:10px;
}
nav li:first-of-type a
{
 padding:0;
}
nav ul
{
 display:flex;
 align-items:center;
 flex-wrap:wrap;
 justify-content:flex-end;
 padding:.5rem 10vw;
 list-style-type:none;
}
nav ul li
{
 font-weight:bold;
}
nav ul li:first-of-type
{
 font-size:0;
 font-family: "Alfa Slab One",sans-serif;
 flex-grow:1;
}
nav ul li:first-of-type a b::before
{
 font-size:1.5rem;
 color:var(--fs-braun);
 content:'food';
}
nav ul li:first-of-type a b::after
{
 font-size:1.5rem;
 color:var(--fs-gruen);
 content:'sharing';
}
nav ul li:first-of-type a::after
{
 font-size:1.2rem;
 color:var(--fs-braun);
 content:'\aJena';
 white-space:pre;
}

/* Kopfzeile */
hgroup#kopf
{
 background-image:url('bilder/gemuese.jpeg');
 padding:5rem 0 3rem;
 position:relative;
 top:-1.5rem;
 display:flex;
 flex-direction:column;
 align-items:center;
 color:var(--fs-beige);
 font-family: "Alfa Slab One",sans-serif;
 text-shadow:.2rem .2rem .35rem var(--fs-braun);
 text-align:center;
}
hgroup#kopf h1
{
 font-size:3.75rem;
 font-weight:normal;
 margin:0 0 1rem;
}
hgroup#kopf h2
{
 font-size:1.7rem;
 font-weight:normal;
 margin:0;
 width:43rem;
 max-width:100%;
}

/* Haupttext */
main
{
 padding:0 10vw;
}
main h2,main h3,main h4,main h5,main h6
{
 color:var(--fs-braun);
}
main h2
{
 border-bottom:1px solid #bbb;
}
main img
{
 max-width:100%;
}

/* Rezepte */
div.gabel::before
{
 background-image:url('bilder/gabel.svg');
 content:"";
 display:block;
 width:5rem;
 height:9rem;
 background-size:contain;
 background-repeat:no-repeat;
 float:left;
}
article.rezept
{
 display:flex;
 flex-wrap:wrap;
 margin-left:5rem;
}

article.rezept::after
{
 content:"";
 flex-basis:100%;
 order:-1;
}
article.rezept hgroup
{
 font-family: "Alfa Slab One",sans-serif;
 text-shadow:.1rem .1rem .2rem var(--fs-braun);
 text-align:center;
 order:-2;
}
article.rezept hgroup h3,article.rezept hgroup h4
{
 font-weight:normal;
}
article.rezept section
{
 flex-basis:50%;
 flex-grow:1;
 min-width:20rem;
}

/* Dark mode */
@media(prefers-color-scheme:dark)
{
 body
 {
  background-color:var(--fs-braun);
  color:var(--fs-beige);
 }
 a
 {
  color:var(--fs-gruen);
  text-decoration:inherit;
  border-bottom:1px dotted var(--fs-beige);
 }
 a:hover
 {
  color:black;
 }
 nav
 {
  background-color:var(--fs-braun);
 }
 nav a:hover
 {
  color:var(--fs-braun);
 }
 nav ul li:first-of-type a b::before,nav ul li:first-of-type a::after
 {
  color:var(--fs-beige);
 }
 main h2,main h3,main h4,main h5,main h6
 {
  color:var(--fs-gruen);
 }
 article.rezept hgroup
 {
  text-shadow:.1rem .1rem .2rem black;
 }
 div.gabel::before
 {
  background-image:url('bilder/gabel_beige.svg');
 }
 hgroup#kopf
 {
  background-image:linear-gradient(#533a2099,#533a2099),url('bilder/gemuese.jpeg'); /* --fs-braun transparent */
 }
}