@charset 'utf-8';
@import url(reset.css);
/* @import url(swipebox.css); */

@font-face {
font-family: 'Roboto Slab';
src: url('../fonts/robotoslab-light.woff') format('woff'),
     url('../fonts/robotoslab-light.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}

@font-face {
font-family: 'Roboto Slab';
src: url('../fonts/robotoslab-bold.woff') format('woff'),
     url('../fonts/robotoslab-bold.ttf') format('truetype');
font-weight: bold;
font-style: normal;
}

article a,
footer a,
.klein span,
nav ul li a {
-webkit-transition: all 250ms ease-in;
-moz-transition: all 250ms ease-in;
transition: all 250ms ease-in;
}

a#alles {
-webkit-transition: none;
-moz-transition: none;
transition: none;
}

::selection {
background: black;
color: white;
}

:target {
background: tomato;
color: white;
padding: 2px 4px 4px 4px;
}

img {
-moz-user-select: text;
-webkit-user-select: text;
user-select: text;
-moz-user-drag: none;
-webkit-user-drag: none;
user-drag: none;
}

.klar {
clear: both;
}

article.tagesliste div.klasse {
display: inline-block;
vertical-align: top;
width: 33%;
width: calc(100% / 3.1);
padding-right: 16px;
box-sizing: border-box;
}

article.tagesliste ul li {
margin: 0 0 4px 0;
padding-left: 12px;
text-indent: -12px;
}

article.tagesliste ul li:before {
content: '› ';
display: block;
float: left;
width: 12px;
}

body,
article.editornav form.nav select {
font-family: 'Roboto Slab';
font-size: 18px;
line-height: 24px;
background: lightgreen;
-webkit-font-smoothing: subpixel-antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-text-size-adjust: none;
}

header,
article,
footer {
padding: 32px 64px;
}

header {
color: white;
background: tomato;
font-size: 24px;
line-height: 32px;
text-align: center;
}

header img {
display: inline-block;
width: 152px;
height: 152px;
}

header div {
display: inline-block;
vertical-align: bottom;
text-align: left;
margin: 0 0 6px 20px;
}

header h1 {
font-weight: bold;
}

article p {
margin: 0 0 12px 0;
}

article.login {
background: dimgray;
color: ivory;
padding-top: 64px;
padding-bottom: 64px;
}

article.links {
background: dimgray;
color: ivory;
padding-top: 64px;
padding-bottom: 64px;
}

article.links ul {

}

article.links ul li {
display: inline-block;
vertical-align: top;
box-sizing: border-box;
width: calc(50% - 16px);
}

article.links ul li + li {
margin-left: 16px;
}

article.links ul li a {
display: inline-block;
box-sizing: border-box;
width: 100%;
padding: 32px;
background: ivory;
color: black;
font-weight: bold;
}

article.links ul li a:hover {
background: yellow;
}

article div.info {
max-width: 640px;
}

article div.info a {
color: white;
border-bottom: 2px dotted yellow;
}

article div.info a:hover {
color: darkslategray;
border-bottom-color: transparent;
}

article.login div.info li.error {
margin: 0 0 4px 0;
}

article.login div.info li.error:before,
.achtung:before {
content: '!';
font-weight: bold;
background: tomato;
display: inline-block;
margin: 0 8px 0 0;
padding: 0 10px 0 8px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
}

article.login form {
margin: 32px 0 0 0;
}

article.login form label {
display: inline-block;
vertical-align: bottom;
margin: 0 16px 32px 0;
width: 35%;
width: calc(40% - 16px);
}

article.login form input,
article.bestellung form fieldset.submit input,
article.abbestellung form fieldset.submit input {
display: block;
font-family: 'Roboto Slab';
font-size: 18px;
line-height: 24px;
color: darkslategray;
background: ivory;
border: 0;
padding: 5px 12px 8px 12px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
box-sizing: border-box;
width: 100%;
-webkit-appearance: none;
}

article.login form input.submit,
article.bestellung form fieldset.submit input,
article.abbestellung form fieldset.submit input {
display: inline-block;
vertical-align: top;
width: auto;
margin: 2px 0 30px 0;
color: darkslategray;
background: gold;
border-bottom: 4px solid peru;
}

article.login form input.submit {
vertical-align: bottom;
}

article.login form input.submit:hover,
article.bestellung form fieldset.submit input:hover,
article.abbestellung form fieldset.submit input:hover {
color: ivory;
background: goldenrod;
border-bottom-width: 2px;
}

article.bestellung form fieldset.submit input:hover,
article.abbestellung form fieldset.submit input:hover {
margin-bottom: 32px;
}

article.login form input.submit:active,
article.bestellung form fieldset.submit input:active,
article.abbestellung form fieldset.submit input:active {
background: darkgoldenrod;
border-bottom-width: 0;
}

article.bestellung form fieldset.submit input:active,
article.anbestellung form fieldset.submit input:active {
margin-top: 6px !important;
}

section.loginfo {
color: ivory;
background: dimgray;
padding: 4px 64px 8px 64px;
}

nav {
color: ivory;
background: tomato;
padding: 8px 64px 16px 64px;
text-align: center;
}

nav ul li {
display: inline-block;
}

nav ul li span,
nav ul li a {
font-weight: bold;
padding: 2px 8px;
border: 1px solid white;
}

nav ul li:first-child span,
nav ul li:first-child a {
-webkit-border-radius: 2px 0 0 2px;
-moz-border-radius: 2px 0 0 2px;
border-radius: 2px 0 0 2px;
border-right-width: 0;
}

nav ul li:last-child span,
nav ul li:last-child a {
-webkit-border-radius: 0 2px 2px 0;
-moz-border-radius: 0 2px 2px 0;
border-radius: 0 2px 2px 0;
}

nav ul li a {
color: ivory;
background: tomato;
}

nav ul li span {
color: tomato;
background: ivory;
}

nav ul li a:hover {
color: orangered;
background: white;
}

section.loginfo p {
display: inline;
vertical-align: middle;
margin: 0 0 4px 0;
}

section.loginfo a,
a#alles {
display: inline-block;
vertical-align: middle;
font-size: 14px;
line-height: 14px;
padding: 4px 8px;
color: darkslategray;
background: gold;
border-bottom: 3px solid peru;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
}

section.loginfo p {
margin: 0 12px 0 0;
}

section.loginfo a:hover,
a#alles:hover {
color: ivory;
background: goldenrod;
border-bottom-width: 2px;
margin-top: 1px;
}

section.loginfo a:active,
a#alles:active {
background: darkgoldenrod;
border-bottom-width: 0;
margin-top: 3px;
}

article.bestellung,
article.editor {
color: ivory;
background: skyblue;
}

article.abbestellung,
article.impressum,
article.tagesliste {
color: darkslategray;
background: wheat;
}

article.editornav {
background: tomato;
padding: 32px 64px 24px 64px;
}

article.impressum div {
max-width: 640px;
margin: 0 auto;
}

article h3,
article.impressum h2 {
font-size: 24px;
line-height: 32px;
font-weight: bold;
margin: 0 0 12px 0;
}

article h4,
article.impressum h3 {
font-size: 20px;
line-height: 28px;
font-weight: bold;
margin: 16px 0 16px 0;
}

article.impressum h3 {
margin: 32px 0 8px 0;
}

article.impressum a {
color: darkslategray;
border-bottom: 2px dotted tomato;
}

article.impressum a:hover {
color: tomato;
border-bottom-color: wheat;
}

article.bestellung form,
article.abbestellung form {
margin: 32px -16px 0 0;
}

article.abbestellung div.tag,
article form fieldset.tagesmenu {
display: inline-block;
vertical-align: top;
width: 14%;
width: calc(100% / 5 - 16px);
margin: 0 16px 16px 0;
height: 152px;
}

article.abbestellung div.tag div,
article form fieldset.tagesmenu label {
position: relative;
display: block;
width: 100%;
height: 100%;
padding: 6px 8px 8px 8px;
box-sizing: border-box;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
font-size: 14px;
line-height: 20px;
-webkit-hyphens: auto;
-moz-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
-moz-user-select: none;
-webkit-user-select: none;
user-select: none;
}

article.bestellung form fieldset.tagesmenu label {
color: darkslategray;
background: aliceblue;
}

article.bestellung form fieldset.tagesmenu label.feiertag {
color: black;
background: honeydew;
}

article.bestellung form fieldset.tagesmenu label.feiertag b span {
color: deepskyblue;
}

article.bestellung form fieldset.tagesmenu label:hover {
background: white;
}

article.bestellung form fieldset.tagesmenu label:hover p.bg-tag {
color: aliceblue;
}

article.abbestellung form fieldset.tagesmenu label {
color: darkslategray;
background: cornsilk;
}

article.abbestellung form fieldset.tagesmenu label.feiertag {
color: black;
background: ivory;
}

article.abbestellung form fieldset.tagesmenu label.feiertag b span {
color: darkgoldenrod;
}

article.abbestellung form fieldset.tagesmenu label:hover {
background: white;
}

article.abbestellung div.tag div {
color: tan;
background: rgba(255,255,255,0.25);
}

article.abbestellung div.tag div ul li a {
color: tan;
}

article.abbestellung div.tag.leer div {
background: wheat;
}

article form fieldset.tagesmenu label input {
position: absolute;
z-index: -1;
}

article.abbestellung div.tag p,
article fieldset.tagesmenu label p,
article fieldset.tagesmenu label ul {
position: relative;
z-index: 10;
margin: 0;
}

article form fieldset.tagesmenu label ul li a.inhalt {
text-transform: uppercase;
}

article.bestellung form fieldset.tagesmenu label ul li a {
color: forestgreen;
}

article.abbestellung form fieldset.tagesmenu label ul li a {
color: sienna;
}

article form fieldset.tagesmenu label ul li a:hover {
background: tomato;
color: white;
padding: 0 4px 2px 4px;
margin: 0 -4px -2px -4px;
}

article.abbestellung div.tag div p.bg-tag,
article form fieldset.tagesmenu label p.bg-tag {
position: absolute;
z-index: 5;
font-size: 60px;
line-height: 60px;
font-weight: bold;
bottom: -2px;
right: 4px;
}

article.bestellung form fieldset.tagesmenu label p.bg-tag {
color: white;
}

article.abbestellung div.tag div p.bg-tag,
article.abbestellung form fieldset.tagesmenu label p.bg-tag {
color: wheat;
}

article.bestellung form fieldset.tagesmenu label input:checked ~ p.bg-tag {
color: ivory;
}

article.abbestellung form fieldset.tagesmenu label input:checked ~ p.bg-tag {
color: salmon;
}


article form fieldset.tagesmenu label span.indikator {
display: block;
position: absolute;
top: 0;
left: 0;
z-index: 1;
width: 100%;
height: 100%;
opacity: 0;
background-size: 50% 50%;
background-position: center center;
background-repeat: no-repeat;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
}

article.bestellung form fieldset.tagesmenu label span.indikator {
background-color: lightgreen;
background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNy4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgOCA4IiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA4IDgiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPHBhdGggZmlsbD0iI0ZGRkZGRiIgZD0iTTYuNCwxTDUuNywxLjdMMi45LDQuNUwyLjEsMy43TDEuNCwzTDAsNC40bDAuNywwLjdsMS41LDEuNWwwLjcsMC43bDAuNy0wLjdsMy41LTMuNWwwLjctMC43TDYuNCwxTDYuNCwxeiINCgkvPg0KPC9zdmc+DQo=);
}

article.abbestellung form fieldset.tagesmenu label span.indikator {
background-color: tomato;
background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE3LjEuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHdpZHRoPSI4cHgiIGhlaWdodD0iOHB4IiB2aWV3Qm94PSIwIDAgOCA4IiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA4IDgiIHhtbDpzcGFjZT0icHJlc2VydmUiPgo8cGF0aCBmaWxsPSJyZ2JhKDI1NSwyNTUsMjU1LDAuMzMpIiBkPSJNMS40LDBMMCwxLjRsMC43LDAuN2wxLjgsMS44TDAuNyw1LjdMMCw2LjRsMS40LDEuNGwwLjctMC43bDEuOC0xLjhsMS44LDEuOGwwLjcsMC43bDEuNC0xLjRMNy4xLDUuNwoJTDUuMywzLjlsMS44LTEuOGwwLjctMC43TDYuNCwwTDUuNywwLjdMMy45LDIuNUwyLjEsMC43QzIuMSwwLjcsMS40LDAsMS40LDB6Ii8+Cjwvc3ZnPg==);
}

article form fieldset.tagesmenu label input:checked ~ span.indikator {
opacity: 1;
}

article form fieldset.tagesmenu label input:disabled ~ span.indikator {
background-color: skyblue;
pointer-events: none;
cursor: default;
}

article form fieldset.submit,
article form fieldset.submit input {
margin-top: 16px;
}

article.editornav form.nav select {
font-weight: bold;
color: red;
background: ivory;
border: none;
margin: 0 0 8px 0;
padding: 4px 32px 4px 8px;
box-sizing: border-box;
max-width: 100%;
background-image: url("data:image/svg+xml;charset=UTF-8,<svg version='1.1' xmlns='http://www.w3.org/2000/svg' x='0' y='0' width='32px' height='32px' viewBox='0 0 32 32'><g><polyline fill='none' stroke='red' stroke-width='2' stroke-miterlimit='10' points='4,11 16,22 28,11 '/></g></svg>");
background-repeat: no-repeat;
background-position: right 6px top 6px;
background-size: 20px 20px;
-webkit-appearance: none;
appearance: none;
border-radius: 4px;
}

article.editornav form.nav select + select {
margin: 0 0 8px 8px;
}

article hr {
background: darkslategray;
border: none;
height: 1px;
margin: 24px 0;
}

p.klein {
color: darkslategray;
font-size: 14px;
line-height: 20px;
}

sup {
font-size: 10px;
font-weight: bold;
position: relative;
top: -4px;
}

footer {
color: darkslategray;
background: lightgreen;
}

footer div {
display: inline-block;
vertical-align: top;
margin: 0;
width: 50%;
}

footer div + div {
text-align: right;
}

footer a {
color: darkslategray;
border-bottom: 2px dotted yellow;
}

footer a:hover {
color: yellow;
border-bottom-color: lightgreen;
}



/* ############# Screens bis 960px ############# */
@media only screen and (max-width: 960px) {
  
  article.bestellung form,
  article.abbestellung form {
  margin: 32px 0 0 0;
  }
  
  article.abbestellung div.tag {
  display: none;
  }
  
  article form fieldset.tagesmenu {
  display: block;
  width: 100%;
  margin: 0 0 8px 0;
  height: auto;
  }
  
  article form fieldset.tagesmenu label ul li {
  display: inline-block;
  }
  
  article form fieldset.tagesmenu label ul li:after {
  content: ', ';
  }
  
  article form fieldset.tagesmenu label ul li:last-child:after {
  content: '';
  }
  
  article.editornav form.nav select.kunde {
  width: calc(50% - 16px);
  }

  article.editornav form.nav select.jahr,
  article.editornav form.nav select.monat {
  width: 25%;
  }

}




/* ############# Screens bis 640px ############# */
@media only screen and (max-width: 640px) {
  
  header,
  article,
  footer {
  padding: 16px 32px;
  }
  
  article.editornav {
  padding: 16px 32px 8px 32px;
  }
  
  section.loginfo {
  padding: 8px 32px;
  }
  
  section.loginfo,
  nav {
  padding: 8px 32px 16px 32px;
  }

  
  header img {
  width: 76px;
  height: 76px;
  }
  
  article.login form label {
  display: block;
  margin: 0 0 16px 0;
  width: 100%;
  }
  
  article.login form input.submit {
  display: block;
  width: 50%;
  margin-top: 40px;
  }
  
  article.tagesliste div.klasse {
  display: block;
  width: auto;
  }
  
  footer div {
  display: block;
  width: 100%;
  margin: 0 0 32px 0;
  }
  
  footer div + div {
  text-align: left;
  }
  
}





/* ############# Screens bis 480px ############# */
@media only screen and (max-width: 480px) {
  
  header {
  font-size: 18px;
  line-height: 24px;
  }
  
  article.login {
  padding-top: 32px;
  padding-bottom: 32px;
  }
  
  article.links ul li,
  article.links ul li + li {
  width: 100%;
  margin: 0 0 16px 0;
  }
  
  article.editornav form.nav select.kunde {
  width: 100%;
  margin: 0 0 8px 0;
  }

  article.editornav form.nav select + select.jahr {
  margin: 0 0 8px 0;
  }

  article.editornav form.nav select.jahr,
  article.editornav form.nav select.monat {
  width: calc(50% - 4px);
  }

}

/* ############# Screens bis 320px ############# */
@media only screen and (max-width: 320px) {
  
  article,
  footer {
  padding: 16px 16px;
  }
  
  article.editornav {
  padding: 16px 16px 8px 16px;
  }
  
  header {
  padding: 8px 0 24px 0;
  }
  
  section.loginfo,
  nav {
  padding: 8px 16px;
  }
  
  header div {
  margin: 0 0 6px 8px;
  }
  
  header img {
  
  }
  
}