@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,
p.bg-tag {
-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;
}

p.info:before {
content: '!';
background: tomato;
color: white;
font-weight: bold;
text-align: center;
display: inline-block;
box-sizing: border-box;
height: 24px;
width: 24px;
margin: 0 6px 0 0;
border-radius: 50%;
}

p.info.achtung {
background: white;
color: tomato;
padding: 8px;
border-radius: 3px;
}

p.info.achtung a {
color: darkslategray;
border-bottom-color: darkslategray;
}

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 {
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 {
display: inline-block;
vertical-align: top;
width: auto;
margin: 2px 0 30px 0;
color: darkslategray;
background: gold;
border-bottom: 4px solid peru;
}

input[disabled] {
opacity: 0.25;
pointer-events: none;
}

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

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

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

article.login form input.submit:active,
article.bestellung 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.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 {
margin: 32px -16px 0 0;
}

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

article form fieldset.tagesmenu.weekday2:first-of-type {margin-left: calc(100% / 5);}
article form fieldset.tagesmenu.weekday3:first-of-type {margin-left: calc(100% / 5 * 2);}
article form fieldset.tagesmenu.weekday4:first-of-type {margin-left: calc(100% / 5 * 3);}
article form fieldset.tagesmenu.weekday5:first-of-type {margin-left: calc(100% / 5 * 4);}

article form fieldset.tagesmenu.heute {
border: 4px solid steelblue;
margin: -4px 12px 12px -4px;
border-radius: 4px;
}

article form fieldset.tagesmenu.heute.weekday2:first-of-type {margin-left: calc(100% / 5 - 4px);}
article form fieldset.tagesmenu.heute.weekday3:first-of-type {margin-left: calc(100% / 5 * 2 - 4px);}
article form fieldset.tagesmenu.heute.weekday4:first-of-type {margin-left: calc(100% / 5 * 3 - 4px);}
article form fieldset.tagesmenu.heute.weekday5:first-of-type {margin-left: calc(100% / 5 * 4 - 4px);}

article form fieldset.tagesmenu label {
position: relative;
display: block;
width: 100%;
min-height: 72px;
box-sizing: border-box;
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 form fieldset.tagesmenu label.storno {
display: none;
}

article form fieldset.tagesmenu label p,
article form fieldset.tagesmenu label label,
article form fieldset.tagesmenu label div {
padding: 6px 8px;
}

article.bestellung form fieldset.tagesmenu > label {
color: darkslategray;
background: aliceblue;
min-height: 104px;
}

article.bestellung form fieldset.tagesmenu.storno label {
background: lightblue;
}

article.bestellung form fieldset.tagesmenu.inaktiv label {
color: dimgray;
background: transparent;
}

/* 
article.bestellung form fieldset.tagesmenu label.feiertag b span {
color: rgba(255,255,255,.6);
}
 */

article.bestellung form fieldset.tagesmenu.inaktiv label p.bg-tag {
color: rgba(255,255,255,.2);
}

article.bestellung form fieldset.tagesmenu label h3 {
display: inline;
float: left;
font-size: 14px;
line-height: 20px;
margin: 0;
}

article.bestellung form fieldset.tagesmenu:not(.storno) label label:hover {
background: white;
}

article.bestellung form fieldset.tagesmenu.inaktiv label {
cursor: default;
pointer-events: none;
}

article.bestellung form fieldset.tagesmenu:not(.inaktiv) label:hover p.bg-tag {
color: skyblue;
}

article form fieldset.tagesmenu label input[type="radio"],
article form fieldset.tagesmenu.storno label input[type="checkbox"] {
display: none;
}

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

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 form fieldset.tagesmenu label.auswahl label.a ul li:first-child:before {
content: 'A. ';
font-weight: bold;
}

article form fieldset.tagesmenu label.auswahl label.b ul li:first-child:before {
content: 'B. ';
font-weight: bold;
}


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

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

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

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

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

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

article form fieldset.tagesmenu label svg.indikator {
display: block;
position: absolute;
top: 0;
left: 0;
z-index: 1;
width: 100%;
height: 100%;
background-color: transparent;
fill: transparent;
}

article form fieldset.tagesmenu.storno label input:checked ~ svg.indikator #check,
article form fieldset.tagesmenu.storno label:hover input:not(:checked) ~ svg.indikator #check {
fill: transparent;
}

article form fieldset.tagesmenu label input:checked ~ svg.indikator {
background-color: lightgreen;
}

article form fieldset.tagesmenu.storno label input:not(:checked) ~ svg.indikator {
background-color: lightgreen;
/* filter: saturate(33%); */
}

article form fieldset.tagesmenu label input:checked ~ svg.indikator #check,
article form fieldset.tagesmenu.storno label input:checked ~ svg.indikator #x,
article form fieldset.tagesmenu.storno label:hover input:not(:checked) ~ svg.indikator #x, 
article form fieldset.tagesmenu.storno label input:not(:checked) ~ svg.indikator #check {
fill: white;
}

article form fieldset.tagesmenu.storno label:hover input:not(:checked) ~ svg.indikator {
background-color: orange;
filter: saturate(100%);
}

article form fieldset.tagesmenu.storno label input:checked ~ svg.indikator {
background-color: tomato;
}

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 {
  margin: 32px 0 0 0;
  }
  
  article form fieldset.tagesmenu {
  display: block;
  width: 100%;
  margin: 0 0 8px 0;
  height: auto;
  }
  
  article form fieldset.tagesmenu.inaktiv {
  display: none;
  }
  
  article form fieldset.tagesmenu label.auswahl label:not(.storno) {
  display: inline-block;
  vertical-align: top;
  width: 50%;
  }
  
  article form fieldset.tagesmenu.weekday2:first-of-type,
  article form fieldset.tagesmenu.weekday3:first-of-type,
  article form fieldset.tagesmenu.weekday4:first-of-type,
  article form fieldset.tagesmenu.weekday5:first-of-type {
  margin-left: 0;
  }
    
  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 {
  
  }
  
}