/* FONTS */
/*
*/
@font-face {
font-family: 'Antic Slab';
src: url(b95a2aa5ff388731ebde.ttf);
}
@font-face {
font-family: 'Cabin Sketch';
src: url(5bd223bd2d8a0399271a.ttf);
}
@font-face {
font-family: 'Calligraffitti';
src: url(9670e64df0514531743d.ttf);
}
/* @font-face {
font-family: 'Cabin Sketch';
src: url('../fonts/Cabin_Sketch/CabinSketch-Bold.ttf');
font-weight: bold;
} */
@font-face {
font-family: 'Tempus Sans';
src: url(bab58ef2f682f5f740c8.TTF);
}
/* STYLES RESET */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
ol, ul {
list-style: none;
}
/* blockquote, q {
quotes: none;
}
blockquote::before, blockquote::after,
q::before, q::after {
content: '';
content: none;
} */
q:lang(de) {
quotes: "„" "“" "‚" "‘";
}
q:lang(en) {
quotes: '"' '"' "''" "'";
}
table {
border-collapse: collapse;
border-spacing: 0;
}
input:focus,
select:focus,
textarea:focus,
button:focus {
outline: none;
border-color: transparent;
}
a {
text-decoration: none;
}
* {
-webkit-tap-highlight-color: transparent;
text-size-adjust: none;
-webkit-text-size-adjust: none;
}
/* VARIABLES */
:root {
--selection-color: rgba(255, 216, 0, 0.5);
--body-color: #fff;
--font-color: #116CC1;
--font-light-color: #227DD1;
--highlight-color: #FCD701;
--highlight-light-color: #FFEB7C;
--markup-color: #ffc70f;
--extlink-color: #3986a3;
--maillink-color: #ccac12;
--headline-background-color: #EEE;
--body-transparent-1-color: rgba(255,255,255,0.1);
--body-transparent-25-color: rgba(255,255,255,0.25);
--body-transparent-333-color: rgba(255,255,255,0.333);
--body-transparent-4-color: rgba(255,255,255,0.4);
--body-transparent-45-color: rgba(255,255,255,0.45);
--body-transparent-75-color: rgba(255,255,255,0.75);
--invalid-color: #f00;
--valid-color: #090;
--button-shadow-color: #989898;
}
/* USE IN COMBINATION WITH colortheme.js */
.darkmode {
--body-color: #202020;
--font-color: #489eef;
--body-transparent-1-color: rgba(0,0,0,0.1);
--body-transparent-25-color: rgba(0,0,0,0.25);
--body-transparent-333-color: rgba(0,0,0,0.1);
--body-transparent-45-color: rgba(0,0,0,0.45);
--body-transparent-75-color: rgba(0,0,0,0.68);
--headline-background-color: #000;
--markup-color: #ffcf33;
--button-shadow-color: #606060;
}
.darkmode .shoppingcart input:not([value='']):focus
, .darkmode .shoppingcart textarea:not([value='']):focus
{
background-color: rgba(255,255,255,0.65);
}
.darkmode .shoppingcart label {
background-color: rgba(255,255,255,0.75);
border-color: rgba(255,255,255,0.75);
}
.darkmode .shoppingcart .summary-foldbox-closed, .shoppingcart .summary-foldbox-closed:hover
, .darkmode .shoppingcart .summary-foldbox-open
, .darkmode .shoppingcart .summary-foldbox-open:hover {
background-color: rgba(255,255,255,0.75);
}
.darkmode .product_searchbar::placeholder {
color: #1b5a9b;
}
.darkmode .openingHours div {
background: var(--markup-color);
}
.darkmode .attractions>div:nth-child(2) .attractions_headline {
background-color: rgba(213, 172, 0, 1);
}
.darkmode .zusatzinformationen img, .vegetarian_or_vegan img {
filter: invert(1);
}
.darkmode .speisekarteneintrag_fullinfo_ato {
background-color: var(--highlight-color);
}
.darkmode .add_to_orders {
background-color: rgba(0,0,0,0.1);
}
/* @media (prefers-color-scheme: dark) {
:root {
--body-color: #202020;
--font-color: #489eef;
--body-transparent-75-color: rgba(255,255,255,0.025);
--headline-background-color: #000;
--markup-color: #ffcf33;
}
.shoppingcart input:not([value='']):focus
, .shoppingcart textarea:not([value='']):focus
{
background-color: rgba(255,255,255,0.65);
}
.shoppingcart label {
background-color: rgba(255,255,255,0.75);
border-color: rgba(255,255,255,0.75);
}
.shoppingcart .summary-foldbox-closed, .shoppingcart .summary-foldbox-closed:hover
, .shoppingcart .summary-foldbox-open
, .shoppingcart .summary-foldbox-open:hover {
background-color: rgba(255,255,255,0.75);
}
.product_searchbar::placeholder {
color: #1b5a9b;
}
.openingHours div {
background: var(--markup-color);
}
.attractions>div:nth-child(2) .attractions_headline {
background-color: rgba(213, 172, 0, 1) !important;
}
} */
/* FADE IN AND OUT ANIMATIONS - MORE IN animations.css */
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes fadeOut {
from { opacity: 1; }
to { opacity: 0; }
}
/* COLOR SCHEME */
/* :root {} is found in aegcss%20Build.css */
/* SCROLLBAR STYLING */
/* FOR WEBKIT BASED BROWSERS */
::-webkit-scrollbar {
display: none;
/* height: 2px;
width: 0px;
padding-left: 20px;
padding-right: 20px; */
}
/* FOR FIREFOX */
* {
scrollbar-width: none;
}
/* ::-webkit-scrollbar-track{
background-color: transparent;
margin-left: 0.5%;
margin-right: 0.5%;
}
::-webkit-scrollbar-thumb{
background-color: #96aacc;
border-radius: 50px;
} */
/* FOR CSS SCROLLBAR-WIDTH PROPERTY SUPPORTED BROWSERS (e.g. Firefox64 +) */
html {
scrollbar-width: none;
}
/* NOT WORKING -> hide scrollbar that are not wanted explicitly, hiding on container and unhiding on elements does not work!!! */
/* ::-webkit-scrollbar {
display: auto;
}
html {
scrollbar-width: auto;
} */
/* SCROLLBAR STYLING END */
::selection {
background: var(--selection-color);
}
/* und hiermit der Firefox >=1 */
::-moz-selection {
background: var(--selection-color);
}
/* .iframe-container {
position: relative;
padding-bottom: 56.25%;
height: 0;
width: 80%;
margin: 0 auto;
}
.iframe-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
} */
/* TAG, FLEX, CENTER STYLING */
body {
/* Anti-Aliasing / Sleek Fonts */
font-synthesis: none;
-moz-font-feature-settings: 'kern';
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-family: 'Antic Slab', sans-serif;
background-color: var(--body-color);
color: var(--font-color);
overflow: auto;
/* don't switch to cursor text on hovering text elements inside the body -> distracting */
cursor: default;
-ms-overflow-style: none; /* IE 11 */
/* The image used */
background-image: url(bacf2e383137b7816874.svg);
/* 'Parallax' / scroll-over-background effect */
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: contain;
/* ::selection */
/* -moz-user-select: none; -webkit-user-select: none; -ms-user-select:none; user-select:none;-o-user-select:none; */
}
sup {
/* font-size: 0.75em; */
}
.aegaeis-body {
/* padding: 0% 1%; */
/* padding: 0.25em 1% 0 1%; */
/* padding: 1% 1% 0 1%; */
padding: 1em 1em 1em 1em;
font-size: 1.2rem;
/* overflow: hidden; */
}
#language-switch {
position: relative;
height: 3em;
display: flex;
align-items: center;
background-color: var(--highlight-color);
padding: 0 1em;
margin: 0em 0 1em 0;
border-radius: 2em;
}
#language-switch a.place {
padding: 0.5em 0.75em;
background-color: var(--body-transparent-4-color);
border-radius: 2em;
}
#language-switch a.place:hover {
background-color: rgba(255,255,255,1) !important;
color: var(--font-color) !important;
}
#language-switch-dismiss {
position: absolute;
top: 0;
right: 0;
height: 3em;
width: 3em;
cursor: pointer;
display: flex;
align-items: center;
}
#language-switch-dismiss img {
/* height: 100%; */
height: 2em;
}
/* mark external links */
a[href*='//']:not([href*='']), a[target] {
cursor: alias;
color: var(--extlink-color);
}
a[href*='//']:not([href*=''])::after {
content: ' ↗︎';
font-size: 80%;
color: var(--extlink-color);
}
#lagebeschreibung a[href*='//']:not([href*=''])::after {
content: '';
}
/* mark mailto links */
a[href*='mailto']:not([href*='']) {
color: var(--maillink-color);
}
a[href*='mailto']:not([href*=''])::before {
content: '➣ ';
color: var(--maillink-color);
font-size: 70%;
white-space: nowrap;
}
/* must contain one div container with content followed by an img-tag with class='clickable' */
.clickableparent {
position: relative;
z-index: 1;
}
.clickableparent > * {
}
.clickableparent:hover > .clickable {
}
.clickable {
width: 2rem;
position: absolute;
float: right;
bottom: 2%;
right: 2%;
z-index: 0;
}
.clickable img {
border-radius: 0px;
}
.letterspace-headline {
display: inline-block;
letter-spacing: 2px;
padding: 0.5em 1em;
margin: 2% 0;
transform: translateX(-1em);
background-color: var(--headline-background-color);
border-radius: 50px;
line-height: 1.75;
}
.flex-const { /* always flex also with small window width */
display: flex;
flex-wrap: wrap;
}
.flex-const * {
flex: 1px 1 0; /* adaptive width of columns/constant layout */
}
.flex { /* going to display block at certain window width */
display: flex;
flex-wrap: wrap;
}
.flex * {
flex: 1px 1 0; /* adaptive width of columns/constant layout */
}
.verticalcenter {
align-items: center; /* works only on flexed items if verticalcenter is added to the flex-container */
}
.footnote {
font-size: 0.6em;
color: grey;
width: 40%;
display: block;
margin: 0 auto;
}
.underline {
text-decoration: underline !important;
}
.bigUnderline {
border: 0px solid transparent;
border-bottom-color: var(--headline-background-color);
border-radius: 2px;
border-bottom-width: thick;
}
.uYellow {
border-bottom-color: var(--highlight-color);
}
.starListType, .starListTypeAddition, .starListTypeEmpty {
display: block;
margin-left: 0.5em;
}
.starListType::before {
content: '★';
display: inline-block;
font-size: 0.75em;
margin-right: 0.5em;
transform: translateY(-0.125em);
line-height: 0;
}
.starListTypeAddition::before {
content: '-';
display: inline-block;
padding-right: 0.5em;
line-height: 0;
}
.starListTypeEmpty::before {
content: ' ';
display: inline-block;
padding-right: 0.5em;
line-height: 0;
}
.lr {
text-indent: -0.5em;
padding-left: 0.5em !important;
}
.gmaps {
background-color: var(--highlight-light-color);
/* background: linear-gradient(to right bottom, var(--highlight-light-color), var(--highlight-color)); */
/* background: linear-gradient(to right bottom, var(--highlight-light-color) 59%, transparent 59%, transparent 60%, var(--headline-background-color) 60%); */
background: linear-gradient(to right bottom, transparent 60%, var(--highlight-light-color) 60%);
/* background: linear-gradient(to right bottom, #FFEBa72C 59%, var(--highlight-light-color) 59%, var(--body-color) 60%, #FFEB8C 62%); */
border-radius: 50px;
margin: 3% auto 1% auto;
/* width: 60%; */
width: 400px;
}
@media(max-width: 567px){
.gmaps {
width: unset;
}
}
.gmaps iframe {
margin: 0 auto;
/* border: 5px solid var(--font-light-color); */
/* border-radius: 50px; */
border-radius: 12px;
}
.center {
text-align: center;
justify-content: center;
margin-left: auto;
margin-right: auto;
}
.centertext {
text-align: center;
}
.blocktext {
text-align: justify;
}
.headline {
font-size: 2em;
line-height: 2;
overflow: scroll;
}
/* styles for the first element following an element with class='headline' */
.headline + * {
margin-top: 1%;
}
.hoverfx:hover {
background-color: var(--font-color);
color: var(--body-color);
transition: background-color 1.5s;
border-radius: 2px;
transition: color background-color 0.33333s;
}
.hoverfx:active {
color: var(--headline-background-color);
}
.aegaeis_form {
display: block;
padding: 2.2rem 0.5rem 0.5rem 0.5rem;
margin-left: 30%;
margin-right: 30%;
color: var(--body-color);
background-color: var(--font-light-color);
/* text-align: center; */
border-radius: 0px 25px 25px 0px;
background-image: linear-gradient(to right, var(--font-color), var(--font-light-color), var(--font-color), var(--font-color), var(--font-color), var(--font-color), var(--font-color));
transform: rotate3d(0);
}
.formholder {
position: absolute;
top: 0px;
left: 28.75%;
width: 2.5%;
height: 100%;
background-color: var(--font-color);
background-image: linear-gradient(to right, var(--font-light-color), var(--font-color), var(--font-light-color), var(--font-color), var(--font-light-color), var(--font-color), var(--font-light-color), var(--font-color), var(--font-color));
border-radius: 10px 0px 0px 10px;
}
.belowform {
width: 36.5%;
margin-top: 2%;
margin-left: auto;
margin-right: auto;
font-size: 0.8rem;
text-align: justify;
padding-right: 1%;
max-width: 33rem;
}
label {
letter-spacing: 2px;
border: 1px solid var(--body-color);
border-bottom-color: transparent;
padding-top: 5px;
padding-right: 5px;
padding-left: 5px;
padding-bottom: 3px;
margin: 2px;
border-radius: 10px 10px 0px 0px;
color: var(--font-light-color);
background-color: var(--body-color);
text-decoration: underline;
}
input {
font-family: 'Antic Slab', sans-serif;
font-size: 1.2rem;
display: block;
width: 97.5%;
width: 80%;
padding: 1%;
color: var(--body-color);
border-radius: 0px 4px 4px 4px;
}
textarea {
font-family: 'Antic Slab', sans-serif;
font-size: 1.2rem;
display: block;
width: 90.4%;
padding: 1%;
margin-left: 2px;
color: var(--body-color);
background-color: transparent;
border-radius: 0px 4px 4px 4px;
border-color: transparent;
/* iOS Bug fix for visually empty textareas (that are actually not empty, but visibly) until touched */
-webkit-transform: translateZ(0px);
}
textarea:placeholder-shown {
background-color: var(--body-color);
}
textarea:hover, textarea:focus {
background-color: var(--body-color);
color: var(--font-light-color);
transition: background-color 0.1s;
}
form::placeholder {
font-size: 0.8rem;
}
select {
transform: scale(2) translateX(1rem);
background-color: var(--font-light-color);
color: var(--body-color);
}
select:focus {
background-color: var(--highlight-color);
color: var(--font-light-color);
}
input:not([value='']):focus {
color: var(--font-light-color);
background-color: var(--body-color);
}
input:not([value='']):not(:focus) {
color: var(--body-color);
background-color: var(--font-light-color);
}
input:invalid:not(:focus) {
color: var(--font-light-color);
background-color: var(--body-color);
border-color: transparent;
}
input:invalid:focus {
color: var(--invalid-color);
}
input:valid:not(:focus) {
border-color: transparent;
background-color: transparent;
}
input:valid:not(:focus) + .labelcheckmark {
color: var(--body-color);
display: block;
}
/* Invalid highlighting */
input:not([value='']):invalid:not(:focus), input:hover:not([value='']):invalid:not(:focus) {
color: var(--invalid-color);
}
/* Input/Textarea hover and after-active (focus) Highlighting */
input:not([value='']):not(:focus):hover {
color: var(--font-light-color);
background-color: var(--body-color);
transition: background-color 0.1s;
opacity: 0.9;
}
textarea:hover:not(:focus) {
opacity: 0.9;
}
textarea:hover {
opacity: 0.95;
}
textarea:focus {
transition: opacity 0.2s;
opacity: 1;
}
textarea {
opacity: 0.95;
}
/* transition opacity changes when focused */
input:not([value='']):focus {
transition: opacity 0.2s;
}
input {
opacity: 0.95;
}
input:focus {
opacity: 1;
}
.forminputcontainer {
margin: 0 auto;
width: 80%;
}
.checkmarkcontainer {
position: relative;
padding: 2px;
}
.labelcheckmark {
position: absolute;
right: 1rem;
top: 0.2rem;
/* z-index: 2; */
display: none;
}
textarea {
resize: none;
}
input[value='Send'] {
text-align: center;
}
input[value='Send'], input[type='reset'] {
cursor: pointer;
width: 90%;
margin: 5% auto;
border: 3px solid var(--body-color);
border-radius: 50px;
font-weight: bold;
color: var(--body-color);
/* not really needed, but hover feels a tiny bit smoother */
transition: border-color 0.02s;
}
input[value='Send']:not(:focus), input[value='Send']:focus {
background-color: var(--valid-color);
border-color: var(--valid-color);
font-weight: bold;
color: var(--body-color);
}
input[type='reset']:not(:focus), input[type='reset']:focus {
background-color: var(--invalid-color);
border-color: var(--invalid-color);
font-weight: bold;
color: var(--body-color);
}
input[value='Send']:hover, input[type='reset']:hover {
border-color: var(--headline-background-color) !important;
}
input[value='Send']:active, input[type='reset']:active {
border-color: var(--valid-color) !important;
border-color: var(--font-light-color) !important;
}
input[value='Send']:not(:focus):hover, input[value='Send']:focus:hover {
border-color: var(--valid-color);
background-color: var(--valid-color);
font-weight: bold;
color: var(--body-color);
}
input[type='reset']:not(:focus):hover, input[type='reset']:focus:hover {
border-color: var(--invalid-color);
background-color: var(--invalid-color);
font-weight: bold;
color: var(--body-color);
}
input[value='Send']:not(:focus):active, input[value='Send']:focus:active {
border-color: var(--body-color);
font-weight: bold;
color: var(--body-color);
}
input[type='reset']:not(:focus):active, input[type='reset']:focus:active {
border-color: var(--body-color);
font-weight: bold;
color: var(--body-color);
transition: none !important;
}
a {
cursor: pointer;
color: var(--font-color);
}
h1, h2, h3, h4, p {
margin: 2% 1%;
line-height: 2em;
}
img {
width: 48%;
border-radius: 20px;
/* padding: 5px; */
display: block;
margin-left: auto;
margin-right: auto;
}
embed {
width: 80%;
display: block;
margin: 0 auto;
}
.veghoverfx {
transition: background-color 0.1s ease;
}
.veghoverfx a {
display: block;
border-radius: 0.25em;
}
.veghoverfx:hover {
background-color: rgba(38, 191, 11, 0.19);
border-radius: 2px;
transition: background-color 0.4s ease;
}
.veghoverfx:hover a {
color: var(--font-color);
}
.veghoverfx:active {
background-color: rgba(38, 191, 11, 1);
transition: background-color 0.2s ease;
}
.veghoverfx:active a {
color: var(--headline-background-color);
background-color: rgba(38, 191, 11, 1);
transition: background-color 0.1s ease;
}
@keyframes blink {
from {
background-color: rgba(17, 108, 193, 1);
}
to {
background-color: rgba(17, 108, 193, 0.875);
}
}
/* NAVBAR STYLING */
.navbar {
justify-content: space-around;
font-family: 'Cabin Sketch', cursive;
font-size: 1.2rem;
/* border-radius: 50px; */
border-radius: 50px 50px 0px 0px;
/* border-bottom: 2px solid var(--body-color); */
/* border-bottom: 2px solid transparent; */
/* border-bottom: 2px solid rgba(0,0,0,0.04); */
border-bottom: 2px solid rgba(16, 108, 193, 0.05);
background-color: rgba(0,0,0,0.02);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
/* NEXT CHANGE? */
/* Recent change */
/* position: sticky;
top: 0;
left: 0;
right: 0;
-webkit-backdrop-filter: blur(33px);
z-index: 10; */
}
.navbar>* *{
pointer-events: none;
}
.navtab-active, .navtab-active:hover {
color: var(--body-color);
background-color: var(--font-color);
cursor: default;
}
/* navbar images switch */
.navbar > *.navtab-active img[hov='true'] {
display: block;
}
.navbar > *:hover img[hov='true'] {
display: block;
}
.navbar > * img[hov='true']
, .navbar > *.navtab-active img[hov='false']
, .navbar > *:hover img[hov='false']
{
display: none;
}
.navbar > * img[hov='false'] {
display: block;
}
.navbar>* {
text-transform: uppercase;
width: 33.333%;
text-align: center;
transition: border-radius 0.3s;
cursor: pointer;
}
.navbar>* img {
margin: 0.25em auto;
}
.navbar>* h1 {
display: block;
margin-bottom: 0.2em;
line-height: 1.2em;
}
.navbar>*:hover {
color: var(--body-color);
background-color: var(--font-color);
/* NAVBAR BLINK FX ON HOLD HOVER */
/* animation: blink 0.75s ease-in-out infinite alternate; */
animation: blink 0.8s ease-in-out infinite alternate;
/* animation-delay: 0.25s; */
animation-delay: 0.3s;
}
.navbar>*.navtab-active:hover {
animation: none;
}
.navbar>*>img {
border-radius: unset;
background-color: transparent;
}
.navbar>*:hover>img {
}
.navbar>*.navtab-active:hover>img {
}
.navbar>*:nth-child(1) {
border-radius: 50px;
}
.navbar>*:nth-child(2) {
border-radius: 50px;
}
.navbar>*:nth-child(3) {
border-radius: 50px;
}
/* COMMENT THIS IN AND SWITCH ABOVES BORDER-RADIUSES FOR FILL OUT EFFECT */
.navbar>*:nth-child(1)[class~=navtab-active] {
border-radius: 50px 0px 0px 0px;
}
.navbar>*:nth-child(2)[class~=navtab-active] {
border-radius: 0px;
}
.navbar>*:nth-child(3)[class~=navtab-active] {
border-radius: 0px 50px 0px 0px;
}
.navbar>*:nth-child(1):hover {
border-radius: 50px 0px 0px 0px;
}
.navbar>*:nth-child(2):hover {
border-radius: 0px;
}
.navbar>*:nth-child(3):hover {
/* border-radius: 0px 50px 50px 0px; */
border-radius: 0px 50px 0px 0px;
}
/* when navbar tab is already active (marked with navtab-active class)
keep navtab-active tab border radius at 50 to show you cannot switch cause you're already there */
/* .navbar>*:hover[class~=navtab-active] {
color: var(--body-color);
background-color: var(--font-color);
border-radius: 50px;
} */
/* Logo SVGs formatting in Navbar */
.navbar img {
width: 33%;
padding: 0;
}
/* Navtab switch animation */
.navbarbody>div{
/* realistic effect */
/* animation: fadeIn 1.2s ease-out, bounceInLeft 2s ease-in; */
/* super smooth */
animation: bounceInLeft 2s;
/* cloudy/smooth effect */
/* animation: fadeIn 1.2s ease-out; */
/* speedy/spacy effect */
/* animation: fadeIn 1.2s ease-out, bounceInLeft 0.2s; */
animation-fill-mode: forwards;
}
.navtab-trigger{}
/* NAVBAR CONTENT STYLING */
.navbarbody {
/* for .horizontalRow embed:hover {} selector which is positioned absolute, so it docks below navbar */
/* position: relative; */
/* overflow: hidden; */
}
/* NAVSUB BAR STYLING */
/* navsub container styling */
.navsub {
border-radius: 0px 0px 50px 50px;
flex-wrap: nowrap;
background-color: rgba(0,0,0,0.02);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
/* position: sticky;
top: 0;
-webkit-backdrop-filter: blur(180px);
backdrop-filter: blur(180px);
background-color: rgba(255,255,255,0.35);
z-index: 1; */
}
.navsub>* {
cursor: pointer;
white-space: nowrap;
padding: 0.1em 4%;
/* padding: 0.15em 4%; */
border-radius: 0px;
border: 1px solid transparent;
height: 2.25em;
padding-top: 0.5em;
padding-bottom: 0.125em;
box-sizing: border-box;
/* display: flex;
align-items: center;
justify-content: center;
flex-direction: column; */
/* Comment in border-radius and transition below to enable animations (of border) like in navbar */
border-radius: 50px;
/* Activate for border-radius animation of navsub */
transition: border-radius 0.8s ease;
transition-delay: 0.2s;
}
.navsub > *:first-child {
border-radius: 0px 50px 50px 0px;
}
.navsub > *:last-child {
border-radius: 50px 0px 0px 50px;
}
.navsub>*::after {
content: '';
display: block;
height: 1px;
width: 0;
background-color: var(--body-color);
}
@keyframes rollOutLeft {
0% { width: 0%; opacity: 0.5;}
70% { width: 70%; opacity: 1;}
90% { width: 90%; opacity: 0.7;}
100% { width: 100%; opacity: 0.9;}
}
.navsub>:not(.navsubtab-active):hover::after {
animation: rollOutLeft 0.5s;
animation-fill-mode: forwards;
}
.navsub>.navsubtab-active::after {
width: 110%;
transform: translateX(-5%);
background-color: var(--body-color);
opacity: 0.5;
}
.navsub>.navsubtab-active:hover::after {
opacity: 1;
transition: opacity 0.1s;
}
.navsub>:not(.navsubtab-active):active::after {
background-color: var(--body-color);
opacity: 1;
animation: none;
width: inherit;
/* deactivate/comment-out for activating navsub bottom line width jump animation on/while active click */
/* width: 125%;
transform: translateX(-10%); */
}
.navsub>*:last-child {
border-right-color: transparent;
}
/* navsubtab hover and active styling - border-radius needed for animation like in navbar */
.navsub>*:hover, .navsub>*:active {
background-color: var(--font-color);
color: var(--body-color);
border-radius: 0px;
animation: blink 0.75s ease-in-out infinite alternate;
animation-delay: 0.35s;
}
.navsub>.navsubtab-active {
animation: none !important;
}
/* Color active navsub tabs blue - border-radius needed for animation like in navbar */
.navsub>*.navsubtab-active, .navsub>*.navsubtab-active:hover, .navsub>*.navsubtab-active:active {
background-color: var(--font-color);
color: var(--body-color);
border-radius: 0px;
}
/* Keep active navsubtab color the same scheme on hover - border-radius needed for animation like in navbar */
.navsub>*.navsubtab-active:hover {
background-color: var(--font-color);
color: var(--body-color);
cursor: default;
/* border-effect */
/* border-radius: 50px; */
/* no border-effect */
border-radius: 0px;
transition: border-radius 0.1s;
}
.navsub>*.navsubtab-active {
transition: none !important;
border-radius: 0px !important;
}
/* keep border-radius of first and last navsubtab round to match round borders of subnav (container of navsubtab) */
/* .navsub>*:first-child{
border-top-left-radius: 50px;
border-bottom-left-radius: 50px;
} */
/* .navsub>*:last-child{
border-top-right-radius: 50px;
border-bottom-right-radius: 50px;
} */
/* NAVSUBBODY ANIMATION */
.navsubbody {
/* for .horizontalRow embed:hover {} selector which is positioned absolute, so it docks below navsubbar */
position: relative;
}
@keyframes zoomInDown {
from {
opacity: 0;
transform: scale(0.1) translateY(-1000px);
animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
60% {
opacity: 0.5;
transform: scale(0.475) translateY(60px);
animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
}
90% {
opacity: 1;
}
}
/* !!!!! */
/* NAVSUBBODY ANIMATION OPTIONS (BETTER NONE OR SUDDLE) */
.navsubtabbody-shown {
animation: zoomInDown 1.2s ease-in-out;
animation-fill-mode: forwards;
}
.shoppingcart[order_added_animation='true'] {
animation: addtoordersanimation 0.5s ease-in-out;
/* temporary only: -> NO fillmode */
animation-fill-mode: none;
}
@keyframes opacityFade {
from {opacity: 0;}
99% {opacity: 0;}
to {opacity: 1;}
}
@keyframes slideInLeft {
from {
opacity: 0;
transform: translateX(-100%);
}
60% {
opacity: 0.2;
transform: translateX(-10px);
}
80% {
opacity: 0.5;
transform: translateX(-2px);
}
95% {
opacity: 0.75;
transform: translateX(1px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
/* Slide in Headline Animation */
.navbarbody-shown .slideIn {
/* minimum 1.26 -> aim: hide and smooth fade in element before animation starts with opacityFade */
/* animation: opacityFade 0.8s;
animation-fill-mode: forwards; */
}
.navbarbody-shown .slideIn>* {
/* color: var(--font-light-color); */
animation: slideInLeft 0.4s;
animation-delay: 0.8s;
animation-fill-mode: both;
}
.navbarbody-shown .slideIn>*:nth-child(2) {
animation-delay: 0.75s;
}
.navbarbody-shown .slideIn>*:nth-child(3) {
animation-delay: 0.65s;
}
.navbarbody-shown .slideIn>*:nth-child(4) {
animation-delay: 0.55s;
}
@keyframes bounce {
from,
20%,
53%,
80%,
to {
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
transform: translateY(0);
}
40%,
43% {
animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
transform: translateY(-30px);
}
70% {
animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
transform: translateY(-15px);
}
90% {
transform: translateY(-4px);
}
}
@keyframes bounceInLeft {
from,
60%,
62%,
75%,
90%,
to {
animation-timing-function: cubic-bezier(0.215, 0.61, 0.62, 0.355, 1);
}
from {
opacity: 0;
transform: translateX(-3000px);
}
60% {
transform: translateX(25px);
opacity: 0.5;
}
62% {
opacity: 1;
}
75% {
transform: translateX(0);
}
90% {
transform: translateX(2px);
transform: translateX(0);
}
to {
transform: translateX(0);
}
}
/* FOLDBOX STYLING */
.foldbox-closed {
/* animation: bounce 0.2s; */
/* display: none; */
height: 0px;
overflow: hidden;
/* blended out div with javascript after e.g. 1s of the click for animations to be displayed in that delayed second */
}
.foldbox-open {
/* margin: 2% 0% 1% 0%; */
/* animation: fadeIn 1s; */
/* transition: height 0.1s linear; */
}
.foldbox-open img {
}
.foldbox {
text-align: center;
overflow: hidden;
}
.foldbox>div:nth-of-type(2) {
text-align: left;
transition: height 0.1s linear, margin 0.1s linear, padding 0.1s linear;
}
.summary-foldbox-closed, .summary-foldbox-open, button {
position: relative; /* important for foldbox-marker position: absolute to work properly */
z-index: 1;
cursor: pointer;
background-color: var(--headline-background-color);
font-size: 2rem;
line-height: 1em;
/* padding: 1% 8%; */
padding: 0.35em 8%;
margin: 1% 0%;
display: inline-block;
min-width: 26rem;
border-radius: 4px;
text-align: center;
word-wrap: break-word;
}
@media only screen and (max-width: 30rem){
.summary-foldbox-closed, .summary-foldbox-open, button {
min-width: unset;
}
}
/* rule for exactly 2 foldboxes being flexed */
.flex .summary-foldbox-closed, .flex .summary-foldbox-open {
min-width: 58.666%;
}
.summary-foldbox-closed:hover, .summary-foldbox-open:hover {
color: var(--body-color);
background-color: var(--font-color);
}
.summary-foldbox-closed:active, .summary-foldbox-open:active {
border-radius: 50px;
/* Activate for border-radius animation of summaries of foldboxes */
transition: border-radius 0.5s;
}
/* Activate if border animation for summary-foldbox-closed should not run on mouseclickdown but mouseclickup */
/* .summary-foldbox-closed:active {
border-radius: 10px;
transition: border-radius 0.5s;
} */
/* Activate if border animation for summary-foldbox-open should not run on mouseclickdown but mouseclickup */
/* .summary-foldbox-open:active {
border-radius: 10px;
transition: border-radius 0.5s;
} */
.summary-foldbox-closed {
}
.summary-foldbox-open {
border-radius: 50px;
}
/* Change summary font color to darker when open and hovered */
.summary-foldbox-open:hover {
color: var(--headline-background-color);
}
.container-foldbox-closed {}
.container-foldbox-open {}
/* Foldbox-marker styling and animation (triangle inside the summary divs) */
.foldbox-marker {
position: absolute;
width: 0;
height: 0;
border-top: 0.5em solid transparent;
border-bottom: 0.5em solid transparent;
border-left: 0.5em solid var(--font-light-color);
top: 20%;
left: 4%;
border-radius: 2px;
transition: left 0.5s ease-in-out, transform 0.5s ease-in-out, border-color 0.5s ease-in-out;
pointer-events: none;
}
/* Change foldbox-marker attributes in start position exclusively */
/* .summary-foldbox-closed .foldbox-marker {
} */
.summary-foldbox-open:hover .foldbox-marker {
border-radius: 5px;
}
.summary-foldbox-open:active .foldbox-marker {
border-top-left-radius: 50px;
border-top-right-radius: 50px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}
.summary-foldbox-open:hover .foldbox-marker {
border-left-color: var(--headline-background-color);
}
.summary-foldbox-closed:hover .foldbox-marker{
border-left-color: var(--body-color);
}
.summary-foldbox-open .foldbox-marker{
transform: rotate(90deg);
left: 92.5%;
}
.foldbox:active .summary-foldbox-closed .foldbox-marker{
border-radius: 25px;
}
/* no padding-top for first element of foldbox body? */
/* .foldbox>div:nth-child(2)>div:first-child {
padding-top: 0;
margin-top: 0;
} */
/* (NAVBAR) CONTENT STYLING */
.restaurant {
}
/* Über uns - Elemente Styling */
.unsereWerte {
font-family: 'Calligraffitti', cursive;
}
.unsereWerte h1 {
font-size: 2rem;
}
.unsereWerte h2 {
font-size: 2rem;
}
.unsereWerte h3 {
font-size: 1.5rem;
}
.attractions {
max-width: 100%;
margin: 0 auto;
padding: 0 2%;
box-sizing: border-box;
}
/* for image-carousel so with is not overflown until images are loaded */
.attractions img[lazy-src]{
width: 80%;
margin: 0 auto;
}
.attractions>*:first-child * {
margin-left: 0;
}
.attractions>*:last-child * {
margin-right: 0;
}
.attractions>div p {
width: 90%;
margin: 0 auto;
box-sizing: border-box;
padding: 0.5em 0.25em;
}
/* styling all headlines of attractions */
.attractions_headline {
opacity: 0.9;
border-radius: 2px;
padding: 0.5em;
color: #F5F5F5;
box-sizing: border-box;
line-height: 2em;
display: block;
width: 90%;
margin-left: auto;
text-align: center;
}
.attractions>div:nth-child(1) .attractions_headline {
font-weight: 800;
background-color: #ed3166; /* #f44268; */
}
.attractions>div:nth-child(2) .attractions_headline {
font-weight: 800;
background-color: var(--markup-color); /* #f9b83e; */
}
.attractions>div:nth-child(3) .attractions_headline {
font-weight: 800;
background-color: #26bf0b; /* #277700; */
}
/* styling p tag / text below headline of attractions */
.attractions>div:nth-child(n)>p:nth-child(2) {
padding-top: 3%;
padding-bottom: 3%;
padding-left: 1%;
width: 89%;
}
.attractions>div>div:first-child {
}
.attractionsimg img {
width: 90%;
margin-bottom: 0.5em;
}
.impressions {
margin: 0 auto;
line-height: 1.5em;
}
.impressionsHeader {
background-color: var(--font-light-color);
border-radius: 25px;
padding-top: 1%;
padding-bottom: 1%;
}
.impressionsPics {
object-fit: contain;
width: 96%;
height: auto;
border-radius: 2em;
}
.horizontalRow a {
display: block;
text-align: center;
flex: 1px 1 1;
}
.horizontalRow {
display: flex;
justify-content: space-around;
flex-wrap: wrap;
}
.horizontalRow embed {
border: 2px solid var(--body-color);
border-radius: 50px;
border-radius: 10px;
transition: border-color 1s;
margin-bottom: 3rem;
/* transition: width 0.5s linear; */
}
.horizontalRow embed:hover {
/* position relative is given to navsubbody for embedded pdf to be shown full size on hover */
position: absolute;
top: 0;
left: 0;
border-width: 1px;
border-top-width: 5px;
/* Fallback for browsers that don't implement calc() */
width: 100%;
width: calc(100% - 2px);
height: 18em;
/* transition: all 0.5s linear 0.5s; */
}
.horizontalRow .hoverfx:hover embed {
border-color: var(--highlight-color);
}
.horizontalRow embed:hover {
border-color: var(--font-color);
border-color: var(--highlight-color);
}
/* can't be selected by .horizontalRow:nth-child(2) embed because embed is buggy and somehow all embeds get targeted */
.hovercorr1 {
}
.hovercorr2 {
left: 33.333%;
}
.hovercorr3 {
left: 66.666%;
}
.ferienwohnung {
}
.keysfewocontainer {
}
#keysfewo {
margin-top: 0.25rem;
}
#keysfewo li > * {
cursor: pointer;
display: inline-flex;
max-width: 76%;
padding: 5px 5%;
margin: 5px;
/* border: 3px solid var(--font-light-color);
border-left-color: transparent;
border-right-color: transparent; */
width: 100%;
border-radius: 1em;
border: 3px solid transparent;
}
#keysfewo li {
position: relative;
display: block;
z-index: 1;
line-height: 1em !important;
display: block;
margin: 0 0 0 0.5rem;
}
#keysfewo li::before {
content: '★';
color: inherit;
color: var(--highlight-color);
}
#keysfewo li:hover::before {
}
/* #keysfewo li>span:active{ */
#keysfewo li:active{
/* corresponds with padding-right: 1% below */
transform: scale(0.98) translateX(-1%);
}
/* #keysfewo li>span:active::before { */
#keysfewo li:active::before {
padding-right: 1%;
}
#keysfewo li::after {
content: '';
display: block;
position: absolute;
z-index: -1;
bottom: 0;
/* left: 5%; */
left: 1.25em;
width: 0%;
/* height: calc(100% - 0.8em);
margin-bottom: 8px; */
height: calc(100% - .5em);
margin-bottom: .25em;
background-color: var(--highlight-light-color);
/* background-image: linear-gradient(to right, var(--body-color), var(--highlight-color), var(--body-color)); */
background-image: linear-gradient(to right, var(--body-color)6ab, var(--highlight-color), var(--body-color)bc8);
border-radius: 1em;
}
#keysfewo li:hover::after {
/* width: 85%; */
width: 86.375%;
transition: width 0.75s ease;
}
.activeli {
cursor: default !important;
display: inline-flex;
max-width: 80%;
padding: 5px;
margin: 5px;
border: 3px solid transparent;
background-color: var(--highlight-color);
}
.closeWindow {
display: none;
}
.closeWindow:hover {
}
#inventoryPictures {
align-items: baseline;
display: inline-flex;
background-color: transparent;
border: 0.5em solid var(--font-color);
border-width: 0.5em 0.25em;
background-color: var(--highlight-color);
display: block;
border-radius: 50px;
padding: 2% 0;
/* extend with javascript for up and down scrolling with n-resize and s-rezise maybe */
cursor: ns-resize;
/* Is set via javascript: */
/* overflow: scroll; */
/* height: 44em; */
}
#inventoryPictures img {
width: 92%;
object-fit: contain;
margin: 0 auto;
/* extended with javascript for up and down scrolling on hover */
/* cursor: ns-resize !important; */
}
#inventoryPictures hr {
padding: 0.1em;
border-width: 0.05em 0px;
border-color: var(--highlight-light-color);
background-color: var(--highlight-light-color);
border-style: inset;
/* margin: 1.5em 7.5%; */
margin: 1.5em 0;
}
#picPlaceholder {
width: 100%;
}
#lagebeschreibung {
line-height: 1.75em;
letter-spacing: 0.2px;
}
#lagebeschreibung .lr {
padding: 0.25em 0;
}
#lagebeschreibung a {
color: var(--font-color);
position: relative;
}
#fewo-pricing {
margin: 2rem auto;
}
#fewo-pricing input {
background-color: var(--font-color);
color: var(--body-color) !important;
height: 1.5rem;
padding: 0.5rem;
text-indent: 1rem;
width: 60%;
width: 4rem;
border-radius: 50px;
font-size: 2rem;
display: block;
margin: 10px auto;
}
#fewo-pricing input:not([value='']):not(:focus) {
color: var(--font-color);
}
#fewo-pricing th {
line-height: 2em;
min-width: 8em;
background-color: var(--headline-background-color);
color: var(--font-color);
}
#fewo-pricing th:nth-of-type(1){
border-top-left-radius: 10px !important;
}
#fewo-pricing th:nth-of-type(2){
border-top-right-radius: 10px !important;
}
#fewo-pricing td {
color: var(--font-color) !important;
background-color: var(--headline-background-color);
}
#fewo-pricing tr {
color: var(--font-color);
}
#fewo-pricing button {
font-family: 'Antic Slab', sans-serif;
font-size: 1em;
line-height: 2em;
color: var(--headline-background-color);
background-color: var(--font-color);
border-radius: 50px;
width: 95%;
margin: 0.5em auto;
}
.fewopricingcontainer {
border: 5px solid var(--font-color);
border-radius: 50px;
min-width: 16em;
min-height: 16em;
width: 40%;
margin: 2% auto 0 auto;
/* padding: 1em 0; */
overflow: scroll;
transition: margin 0.4s;
min-width: 26em;
}
.fewopricingcontainer:hover {
/* margin: 2% auto 0.5% auto; */
transition: margin 0.4s;
}
.fewopricingcontainer + .footnote {
height: 0;
overflow: hidden;
transition: height 0.4s;
}
.fewopricingcontainer:hover + .footnote {
height: 19em;
transition: height 1.4s ease, padding 0.4s ease-out;
}
.fewopricingcontainer + .footnote:hover {
height: 19em;
padding: 0 0 2em 0;
transition: height 1s ease, padding 0.4s ease-out;
}
#pricesapartmentanchor {
min-height: 3em;
padding: 2%;
padding: 1rem;
color: var(--font-color);
}
.preisinfo {
background-color: var(--headline-background-color);
border-radius: 50px;
padding: 1rem;
margin-top: 1rem;
}
.preisinfo > div {
border: 0.25em solid transparent;
width: 20%;
}
.preisinfo > div:hover {
transform: translateY(0.5rem);
transition: transform 1s;
transition-delay: 0.2s;
}
.preisinfo > div:active {
transform: translateY(0rem);
transition: transform 0.01s;
}
.preisinfo > div > a {
font-size: 1.5rem;
line-height: 1.5rem;
display: block;
text-align: center;
background-color: var(--font-color) !important;
color: var(--headline-background-color);
border-radius: 50px;
padding: 1rem 0;
}
.preisinfo > div > a > img {
width: 50%;
height: auto;
margin: 0 auto;
padding: 10%;
cursor: pointer !important;
}
.speisekarteneintrag div[preis='nach Tagesangebot'] + .add_to_orders {
display: none !important;
}
.rechtlich {
margin-top: 6em;
margin-bottom: 3em;
font-size: 0.8em;
text-align: center;
line-height: 2em;
}
#formfewo select {
display: block;
margin-top: 2em;
margin-left: 0;
transform: translateX(1em) scale(1.5);
}
.kontakt {
}
.infobox {
}
/* Öffnungszeiten Table Design */
.openingHours {
display: flex;
justify-content: space-between;
overflow: scroll;
padding-bottom: 0.25em;
}
.openingHours div {
display: inline-block;
margin: 0 auto;
color: var(--font-color);
border-color: var(--font-color);
padding: 1%;
border: 5px solid;
border-radius: 25px;
justify-content: center;
background-color: var(--markup-color);
background: linear-gradient(193deg, rgba(255, 206, 14, 1), rgba(255, 199, 15, 1));
}
.openingHours table {
text-align: center;
}
.openingHours table th {
font-weight: bold;
/* border-bottom: 2px solid rgba(255, 255, 255, 0.11); */
/* border-bottom: 2px solid rgba(17, 108, 193, 0.01); */
}
/* .openingHours table tr:nth-of-type(1) > * {
padding-bottom: 7px;
}
.openingHours table tr:nth-of-type(2) > * {
padding-top: 9px;
} */
.openingHours table th, .openingHours table td {
padding: 5px 10px;
}
.openingHoursException {
padding: 0.5em 1em;
border: 5px solid var(--markup-color);
border-radius: 25px;
max-width: 25em;
margin: 1em auto;
overflow: scroll;
}
/* OPENING HOURS NOTIFICATION ... */
.opening_hours_notification_container {
margin: 1em auto 2em auto;
text-align: center;
color: var(--body-color);
font-weight: bold;
width: 98%;
max-width: 27em;
padding: .5em 1.5em;
box-sizing: border-box;
border-radius: 2em;
border: 3px solid transparent;
border-left-width: 1px;
border-right-width: 1px;
box-shadow: 0px 7.5px 15px 0px rgba(100,100,100,0.1);
background-color: #26bf0b;
font-weight: normal;
position: relative;
}
.opening_hours_notification_container.oh_closed {
background-color: var(--markup-color);
color: var(--font-color);
}
.opening_hours_notification_container:empty {
display: none;
}
.opening_hours_notification {
display: flex;
/* align-items: center; */
align-items: flex-end;
justify-content: space-between;
overflow: scroll;
z-index: 1;
position: relative;
}
.opening_hours_next {
flex: 0 0 30%;
padding-right: 1em;
text-align: right;
box-sizing: border-box;
}
.opening_hours_next_preinfo {
display: block;
font-size: 0.75rem;
/* width: 120%; */
position: relative;
/* left: -20%; */
}
.opening_hours_next_text {
display: block;
font-size: 1.5rem;
}
.opening_hours_next_text > span {
font-size: 1rem;
padding-left: 0.125em;
}
.opening_hours_remaining {
flex: 0 0 70%;
text-align: left;
}
.opening_hours_next_info {
display: block;
font-size: 0.95rem;
margin-top: 0.25em;
overflow: scroll;
border-top: 1px solid var(--body-color);
margin-top: 0.75em;
padding-top: 0.75em;
}
.opening_hours_next_info:empty {
display: none;
}
/* ... OPENING HOURS NOTIFICATION */
/* OPENING HOURS EXCEPTIONS TABLE ... */
.opening_hours_exceptions_container {
overflow-x: scroll;
overflow-y: hidden;
/* margin: 0 1% 2em 1%; */
margin: 0 0 1em 0;
padding: 0 1% 1em 1%;
}
.opening_hours_exceptions_container:empty {
display: none;
}
.opening_hours_exceptions_container h3 {
text-align: center;
font-size: 1.25em;
background-color: var(--font-color);
color: var(--body-color);
border-radius: 2em;
display: block;
width: 14em;
/* width: 13em; */
margin: 0 auto 0.25em auto;
position: sticky;
left: 1%;
left: calc(1% + 0.25em);
box-shadow: 0px 7.5px 15px 0px rgba(100,100,100,0.1);
}
.opening_hours_exceptions {
padding: 0.5em;
box-sizing: border-box;
border-radius: 1em;
background-color: var(--highlight-color);
/* width: 40em; */
width: 31em;
margin: 0 auto;
box-shadow: 0px 7.5px 15px 0px rgba(100,100,100,0.1);
}
.opening_hours_exceptions .ohe_row {
display: flex;
flex-wrap: nowrap;
width: 100%;
}
/* .opening_hours_exceptions > .ohe_row:not(:last-child):not(.ohe_th) {
border-bottom: 1px solid rgb(255, 255, 255, 0.5);
padding-bottom: 0.5em;
padding-top: 0.5em;
} */
.opening_hours_exceptions > .ohe_row:not(.ohe_th):nth-child(2n+1) {
/* background-color: rgba(255,255,255,0.2); */
background-color: rgba(255,255,255,0.3);
}
.opening_hours_exceptions > .ohe_row:not(.ohe_th) {
padding-bottom: 0.5em;
padding-top: 0.5em;
border-radius: 1em;
}
.ohe_row.ohe_th {
box-sizing: border-box;
/* background-color: rgba(255,255,255,0.32); */
/* background-color: rgba(255,255,255,0.5); */
background-color: var(--body-transparent-4-color);
border-radius: 1em;
padding: 0.375em 0.5em 0.25em 0em;
box-sizing: border-box;
margin-bottom: 0.5em;
/* border: 1px solid; */
box-shadow: 0px 7.5px 15px 0px rgba(100,100,100,0.05);
}
.opening_hours_exceptions .ohe_row .ohe_date
, .opening_hours_exceptions .ohe_row .ohe_hours
, .opening_hours_exceptions .ohe_row .ohe_info
{
/* flex-basis: 8rem; */
padding-left: 1em;
margin-right: 1em;
}
.opening_hours_exceptions .ohe_row .ohe_date
{
flex-basis: 7rem;
width: 7rem;
}
.opening_hours_exceptions .ohe_row .ohe_hours
{
flex-basis: 8rem;
}
.opening_hours_exceptions .ohe_row .ohe_info {
flex-basis: 50%;
flex-grow: 1;
}
/* ... OPENING HOURS EXCEPTIONS TABLE */
.disclaimer {
width: 50%;
margin: 0 auto;
}
/* SPECIAL LINK STYLING */
.place, .place:active {
cursor: pointer;
display: inline-block;
color: var(--font-color);
background-color: var(--headline-background-color);
margin: 1% 0.5rem !important;
/* padding: 1.5% 1%; */
padding: 0.75em 1em;
border-radius: 10px;
}
.place:hover {
color: var(--body-color);
background-color: var(--font-light-color);
transition: background-color 0.4s, color 0.4s;
}
.place::before {
content: "➫ ";
/* include designed place svg instead of arrow? */
}
.placecontainer {
overflow: scroll;
}
/* FOOTER STYLING */
footer {
text-align: center;
font-size: 80%;
padding: 5%;
line-height: 1.5em;
}
footer>div>div {
padding: 5%;
}
.crsv {
font-family: 'Calligraffitti', cursive;
}
.roamed {
filter: grayscale(100%) blur(6px);
}
.markedup {
background-color: var(--markup-color) !important;
}
.markedup:hover {
background-color: var(--markup-color) !important;
color: var(--font-light-color) !important;
}
.speisekarten_pdf {
margin: 1em 0;
}
.speisekarten_pdf a {
padding: 0 1em;
box-sizing: border-box;
cursor: alias;
margin: 0.75em;
border-radius: 2px;
transition-duration: 0.05s !important;
border-radius: 2em;
background-color: #106cc1;
background: linear-gradient(357deg,#2269bb 0,#207cca 41%,#5fb7ff 98%);
color: var(--body-color);
/* box-shadow: 0px 0px 0px 0px #c9c9c9; */
box-shadow: 0px 2px 5px 0px #c9c9c9;
transform: translateY(0px);
transition: transform 0.2s ease, box-shadow 0.4s ease;
display: flex;
align-items: center;
justify-content: center;
}
.speisekarten_pdf a:hover {
transform: translateY(-2px);
/* box-shadow: 2px 9px 13px 0px #c9c9c9; */
box-shadow: 2px 4px 7px 0px #c9c9c9;
}
/* INTERAKTIVE SPEISEKARTE */
.interaktive_speisekarte {
position: relative;
}
.how_to_speisekarte {
margin: 1em auto;
}
.how_to_speisekarte p {
}
/* .how_to_speisekarte .foldbox-closed {
margin: 0.5em 0;
} */
.product_filters {
display: flex;
flex-wrap: nowrap;
justify-content: flex-start;
/* overflow-x: scroll; */
width: 98%;
/* padding: 0 1%; */
padding: 0.25em 1%;
position: sticky;
top: 0;
z-index: 2;
}
.product_filters > * {
padding: 0.25em 1em;
margin-right: 1em;
border: 1px solid var(--font-color);
border-radius: 1em;
transition: color 0.3s linear, box-shadow 0.1s linear;
cursor: pointer;
box-shadow: 0px 0px 0px 0px var(--font-color);
white-space: pre;
background-color: var(--body-transparent-75-color);
-webkit-backdrop-filter: blur(4px);
backdrop-filter: blur(4px);
}
.product_filters > *:last-child {
margin-right: 0;
}
.product_filters > *:hover {
box-shadow: 0 0px 3px 0 var(--font-color);
}
.product_filters > *.product_filter_active {
color: var(--body-color);
background-color: var(--font-color);
background: linear-gradient(135deg, #1e5799 0%,#207cca 41%,#2989d8 98%);
box-shadow: 0px 1px 3px 0px var(--font-color);
}
.product_searchbar {
-webkit-appearance: none; /* box-shadow not displayed otherwise on iOS browsers */
color: var(--font-color) !important;
border: 1px solid var(--font-color) !important;
border-bottom-width: 2px !important;
width: 98%;
box-sizing: border-box;
margin: 0.5em auto;
border-radius: 12.5px;
padding: 12.5px 12.5px 12.5px 1.5em;
box-shadow: 0px 0px 0px var(--font-color);
background-color: rgba(200,200,200,0.1) !important;
transition: box-shadow 0.2s ease, background-color 0.2s ease !important;
height: 3em;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
}
/* .product_searchbar::placeholder {
text-align: center;
} */
.product_searchbar_container {
position: relative;
height: 2em;
width: 98%;
margin-bottom: 2em;
position: sticky;
top: 2em;
z-index: 2;
margin-left: auto;
margin-right: auto;
}
.product_searchbar_container input, .product_searchbar_container input:not([value='']):not(:focus):hover {
opacity: 1;
background-color: var(--body-transparent-75-color) !important;
-webkit-backdrop-filter: blur(4px);
backdrop-filter: blur(4px);
}
.product_searchbar_icon {
display: flex;
content: '';
position: absolute;
right: 0.5em;
bottom: 0;
top: 0.5em;
height: 3em;
width: 3em;
object-fit: contain;
pointer-events: none;
}
.product_searchbar_icon img {
width: 48%;
}
.product_searchbar_icon img[src*="close.svg"] {
cursor: pointer !important;
border: 2px solid rgba(17, 108, 193, 0);
border-radius: 1.5em;
align-self: center;
transition: border 0.25s ease;
}
/* .product_searchbar_icon img[src*="close.svg"]:hover {
border-color: rgba(17, 108, 193, 1);
}
.product_searchbar_icon img[src*="close.svg"]:active {
border-color: rgba(17, 108, 193, 0);
} */
.product_searchbar:hover {
box-shadow: 0px 1px 3px var(--font-color);
/* background-color: rgba(200,200,200,0.2) !important; */
}
.product_searchbar:focus {
box-shadow: 0px 1px 3px var(--font-color);
/* background-color: rgba(200,200,200,0) !important; */
}
.speisekarte {
display: block;
font-size: 1.05em;
padding: 1em 0;
color: var(--body-color);
background-color: var(--font-color);
position: relative;
border-radius: 25px;
box-shadow: 0 1px 2px 0px rgba(2, 18, 32, 1);
}
.speisekarte.nofoldboxes {
padding: 2em 3em;
}
.speisekarte .speisekartenkategorie {
text-align: center;
border-bottom: 2px solid rgba(255, 255, 255, 0.12);
padding: 2em 0 0.5em 0;
margin-bottom: 0.5em;
background-color: rgba(238, 238, 238, 0);
color: var(--body-color);
padding: 0;
margin: 0;
line-height: 2.5;
width: 80%;
text-align: left;
padding-left: 7.5%;
border-radius: 0;
font-weight: normal;
border-top-left-radius: 25px;
border-top-right-radius: 25px;
font-size: 1.3em;
/* cursor: default; */
-webkit-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
white-space: break-spaces;
}
.speisekarte>div:last-child .speisekartenkategorie {
border-bottom-color: transparent;
}
.speisekarte .foldbox.container-foldbox-closed:hover {
background-color: var(--body-transparent-1-color);
}
/* .speisekarte .foldbox.container-foldbox-closed {
border-radius: 0.5em;
} */
.speisekarte span[request_vegetarian] {
display: block;
text-align: right;
margin-top: 0.5em;
font-size: 75%;
}
.speisekarte span[request_vegan] {
display: block;
text-align: right;
margin-top: 0.5em;
font-size: 75%;
}
.speisekarte span[seasonal] {
display: block;
font-size: 75%;
}
.speisekarte .foldbox {}
.speisekarte .foldbox:hover {}
.speisekarte .foldbox:active {}
.speisekarte .summary-foldbox-closed:hover {
/* background-color: var(--font-color); */
background-color: transparent;
color: var(--body-color);
}
.speisekarte .summary-foldbox-closed:active {
/* background-color: var(--font-color); */
background-color: transparent;
color: var(--body-color);
}
.speisekarte .foldbox-open {
padding: 0 13.5%;
margin: 0;
}
.speisekarte .foldbox-closed {
padding: 0 13.5%;
}
.foldbox.container-foldbox-open {
/* background-color: rgba(0,0,0,0.1); */
background-color: rgba(255,255,255,0.05);
/* border-bottom-left-radius: 2em;
border-bottom-right-radius: 2em; */
/* border-radius: 2em; */
}
.speisekarte .foldbox-open, .speisekarte .foldbox-closed {
background-color: rgba(0,0,0,0.1);
/* background-color: rgba(0,0,0,0.05); */
/* border-bottom-left-radius: 2em;
border-bottom-right-radius: 2em; */
}
.speisekarte .foldbox .foldbox-marker {
border-top: 0.5rem solid transparent;
border-bottom: 0.5rem solid transparent;
border-left: 0.5rem solid var(--font-light-color);
}
.speisekarte .foldbox:hover .foldbox-marker {
border-top: 0.5rem solid transparent;
border-bottom: 0.5rem solid transparent;
border-left: 0.5rem solid var(--body-transparent-75-color);
}
.speisekarteneintrag {
display: flex;
flex-wrap: nowrap;
justify-content: space-between;
border: 1px solid transparent;
border-bottom-color: rgba(255, 255, 255, 0.18);
position: relative;
font-family: 'Tempus Sans';
background-color: transparent;
padding: 0.25em;
min-height: 6em;
}
.speisekarteneintrag:hover {
transition: border 1s ease;
border: 1px solid rgba(255, 255, 255, 0.18);
border-top-color: transparent;
/* background-color: rgba(255, 255, 255, 0.09); */
background-color: rgba(255, 255, 255, 0.025);
}
.speisekarteneintrag.spke_index {
color: rgba(255,255,255,0.9);
min-height: unset;
/* background-color: rgba(255,255,255, 0.1); */
background-color: rgba(56, 133, 203, 1);
box-sizing: border-box;
width: 105%;
transform: translateX(-2.5%);
padding: 0.125em 2.5%;
width: 110%;
transform: translateX(-5%);
padding: .125em 5%;
border-bottom: none;
border-bottom-right-radius: 1em;
border-bottom-left-radius: 1em;
/* transform: translateX(-5%) translateY(-2px);
border-top: 2px solid var(--body-transparent-25-color); */
}
.speisekarteneintrag.spke_index > * {
word-break: keep-all !important;
-webkit-hyphens: unset !important;
-ms-hyphens: unset !important;
hyphens: unset !important;
min-height: unset !important;
color: var(--body-color);
}
.speisekarteneintrag.spke_index > *[gericht] {
/* margin-left: 0.75%; */
margin-left: 0.3em;
margin-left: calc(0.3em + 1px);
}
[lang="de"] .speisekarteneintrag.spke_index > *[gericht]::after {
content: 'Gericht';
}
[lang="de"] .speisekarteneintrag.spke_index > *[beschreibung]::after {
content: 'Beschreibung';
}
[lang="de"] .speisekarteneintrag.spke_index > *[beilagen]::after {
content: 'Beilagen';
}
.speisekarteneintrag.spke_index > *[gericht]::after {
content: 'Dish';
}
.speisekarteneintrag.spke_index > *[beschreibung]::after {
content: 'Description';
}
.speisekarteneintrag.spke_index > *[beilagen]::after {
content: 'Side dishes';
}
[lang="de"] .speisekarteneintrag.spke_index > *[preis]::after {
content: 'Preis';
}
.speisekarteneintrag.spke_index > *[preis]::after {
content: 'Price';
}
.speisekarteneintrag.spke_index > *[preis] {
text-align: center;
}
.speisekarteneintrag.spke_index[kategorie="Kaffee & Tee"] > *[gericht]::after,
.speisekarteneintrag.spke_index[kategorie="Weißweine"] > *[gericht]::after,
.speisekarteneintrag.spke_index[kategorie="Roséweine"] > *[gericht]::after,
.speisekarteneintrag.spke_index[kategorie="Rotweine"] > *[gericht]::after,
.speisekarteneintrag.spke_index[kategorie="Sekt"] > *[gericht]::after,
.speisekarteneintrag.spke_index[kategorie="Alkoholfreie Getränke"] > *[gericht]::after,
.speisekarteneintrag.spke_index[kategorie="Biere"] > *[gericht]::after,
.speisekarteneintrag.spke_index[kategorie="Griechische Spirituosen"] > *[gericht]::after
{
content: 'Getränk';
}
.speisekarteneintrag.spke_index[kategorie="Beilagen nach Wahl"] > *[beilagen],
.speisekarteneintrag.spke_index[kategorie="Desserts"] > *[beilagen],
.speisekarteneintrag.spke_index[kategorie="Kaffee & Tee"] > *[beilagen],
.speisekarteneintrag.spke_index[kategorie="Weißweine"] > *[beilagen],
.speisekarteneintrag.spke_index[kategorie="Roséweine"] > *[beilagen],
.speisekarteneintrag.spke_index[kategorie="Rotweine"] > *[beilagen],
.speisekarteneintrag.spke_index[kategorie="Sekt"] > *[beilagen],
.speisekarteneintrag.spke_index[kategorie="Alkoholfreie Getränke"] > *[beilagen],
.speisekarteneintrag.spke_index[kategorie="Biere"] > *[beilagen],
.speisekarteneintrag.spke_index[kategorie="Griechische Spirituosen"] > *[beilagen]
{
display: none;
}
.speisekarteneintrag[kategorie="Beilagen nach Wahl"] > *[beilagen],
.speisekarteneintrag[kategorie="Desserts"] > *[beilagen],
.speisekarteneintrag[kategorie="Kaffee & Tee"] > *[beilagen],
.speisekarteneintrag[kategorie="Weißweine"] > *[beilagen],
.speisekarteneintrag[kategorie="Roséweine"] > *[beilagen],
.speisekarteneintrag[kategorie="Rotweine"] > *[beilagen],
.speisekarteneintrag[kategorie="Sekt"] > *[beilagen],
.speisekarteneintrag[kategorie="Alkoholfreie Getränke"] > *[beilagen],
.speisekarteneintrag[kategorie="Biere"] > *[beilagen],
.speisekarteneintrag[kategorie="Griechische Spirituosen"] > *[beilagen]
{
display: none;
}
.speisekarteneintrag.spke_index[kategorie="Beilagen nach Wahl"] > *[beschreibung],
.speisekarteneintrag.spke_index[kategorie="Desserts"] > *[beschreibung],
.speisekarteneintrag.spke_index[kategorie="Kaffee & Tee"] > *[beschreibung],
.speisekarteneintrag.spke_index[kategorie="Weißweine"] > *[beschreibung],
.speisekarteneintrag.spke_index[kategorie="Roséweine"] > *[beschreibung],
.speisekarteneintrag.spke_index[kategorie="Rotweine"] > *[beschreibung],
.speisekarteneintrag.spke_index[kategorie="Sekt"] > *[beschreibung],
.speisekarteneintrag.spke_index[kategorie="Alkoholfreie Getränke"] > *[beschreibung],
.speisekarteneintrag.spke_index[kategorie="Biere"] > *[beschreibung],
.speisekarteneintrag.spke_index[kategorie="Griechische Spirituosen"] > *[beschreibung]
{
text-align: center;
transform: translateX(calc(-1.125em - 0.75%));
}
.speisekarte.nofoldboxes .spke_index {
display: none;
}
/* .speisekarte.nofoldboxes .spke_index:not(:nth-of-type(1)) {
display: none;
}
.speisekarte.nofoldboxes .spke_index > *[gericht]::after {
content: '';
} */
/* .speisekarteneintrag>*:nth-child(1) {
} */
.speisekarteneintrag div[preis] {
position: relative;
flex-basis: 4em;
flex-grow: 0;
}
.speisekarteneintrag:not(.spke_index) div[preis]::after {
/* position: absolute; */
content: '*';
display: inline-block;
font-size: 0.75;
padding-bottom: 25%;
}
.shoppingcart .dsgvo_note {
position: relative;
width: 98%;
margin: 1em auto;
padding: 0 1em;
text-align: left;
}
.shoppingcart .preis_mwst_erlaeuterung {
text-align: right;
width: 85%;
margin: 1em;
}
.add_to_orders {
opacity: 0;
position: absolute;
top: 0.125em;
right: -2.5em;
width: 1.75em;
height: 1.75em;
font-size: 1em;
line-height: 2;
background-color: rgba(252, 215, 1, 0.14901960784313725);
transition: opacity 0.25s ease-out;
cursor: pointer;
border: 2px solid transparent;
border-radius: 4em;
display: flex;
align-items: center;
justify-content: center;
}
.add_to_orders:hover {
border: 2px solid rgba(252, 215, 1, 0.65);
/* transition: border 0.1s ease-in; */
cursor: pointer !important;
}
.add_to_orders:active {
border-color: rgba(252, 215, 1, 1);
transition: none;
/* margin: 0px;
padding: 1px; */
}
.add_to_orders img {
width: 70%;
height: 70%;
cursor: pointer !important;
}
.add_to_orders * {
pointer-events: none;
/* unselectable */
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.ato_visible .add_to_orders {
opacity: 1 !important;
}
.speisekarteneintrag:hover .add_to_orders{
opacity: 1;
min-height: unset;
}
.speisekarteneintrag > * {
flex-basis: 20%;
flex-grow: 1;
}
.speisekarteneintrag > *[gericht] {
position: relative;
padding-right: 1.125em;
box-sizing: border-box;
-webkit-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
flex-grow: 0;
/* max-width: 10em; */
}
.speisekarteneintrag > *[beschreibung]{
margin: 0 0.5em;
-webkit-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
}
.speisekarteneintrag > *[beilagen]{
margin: 0 0.5em;
}
/* .speisekarteneintrag > *[beilagen]:empty{
display: none;
} */
.speisekarteneintrag > *[preis]{
text-align: right;
-webkit-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
}
/* Speisekarteneintrag Zusatzinformationen Button */
.vegetarian_or_vegan {
display: inline-block;
width: 1em;
height: 1em;
}
.speisekarteneintrag .vegetarian_or_vegan {
position: absolute;
top: 1.5em;
right: 0;
background-color: var(--body-transparent-1-color);
border-radius: 1em;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid var(--body-transparent-25-color);
box-sizing: border-box;
}
.speisekarteneintrag .vegetarian_or_vegan:hover {
transition: transform 0.75s ease 0.25s;
transform: rotate(360deg);
}
.zusatzinformationen img,
.vegetarian_or_vegan img {
all: initial;
max-width: 100%;
max-height: 100%;
pointer-events: none;
}
.vegetarian-byrequest + [beschreibung] span[request_vegetarian]::before,
.vegan-byrequest + [beschreibung] span[request_vegan]::before
{
content: '';
background-image: url(10da307d1e178ad58769.svg);
width: 1em;
height: 1em;
display: inline-block;
background-size: 1em 1em;
background-repeat: no-repeat;
transform: translateY(0.15em);
margin-right: 0.125em;
flex-basis: 1em;
flex-shrink: 0;
margin-left: auto;
background-color: rgba(255,255,255,0.125);
border-radius: 1em;
margin-right: 0.3em;
}
.vegan-byrequest + [beschreibung] span[request_vegan]::before {
background-image: url(3d638b6ecce3fb8dfe42.svg);
transform: translateY(0.2em);
}
.speisekarteneintrag .zusatzinformationen {
display: inline-block;
width: 1em;
height: 1em;
position: absolute;
top: 0.125em;
right: 0;
cursor: pointer;
transition: transform 0.1s ease;
border-radius: 100%;
}
.speisekarteneintrag .zusatzinformationen:hover {
transform: scale(1.1);
}
.speisekarteneintrag .zusatzinformationen:active {
transform: scale(1.1) translateY(1px);
}
/* Speisekarteneintrag Zusatzinformationen Button END */
/* Speisekarteneintrag Fullinfo Window */
@keyframes slideup {
from {
opacity: 0;
transform: translateY(100%);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes slidedown {
from {
opacity: 1;
transform: translateY(0);
}
to {
opacity: 0;
transform: translateY(100%);
}
}
.slideup_fullinfo {
animation: slideup 0.25s ease;
animation-fill-mode: forwards;
}
.slidedown_fullinfo {
animation: slidedown 0.25s ease;
animation-fill-mode: forwards;
}
.speisekarteneintrag_fullinfo {
position: absolute;
top: 1em;
left: 7%;
right: 7%;
background-color: var(--body-transparent-75-color);
-webkit-backdrop-filter: blur(5px);
backdrop-filter: blur(5px);
padding: 2em 7%;
border-radius: 0.75em;
color: var(--font-color);
z-index: 1;
}
/* Does not work with minifying Atom program ..... */
/* @supports ((-webkit-backdrop-filter: blur(5px)) or (backdrop-filter: blur(5px))) {
.speisekarteneintrag_fullinfo {
background-color: var(--body-transparent-75-color);
-webkit-backdrop-filter: blur(5px);
backdrop-filter: blur(5px);
}
} */
@media(max-width: 567px){
.speisekarteneintrag_fullinfo {
left: 4%;
right: 4%;
}
}
.speisekarteneintrag_fullinfo h2 {
text-align: center;
font-size: 150%;
margin: 0;
line-height: 1em;
padding-bottom: 1rem;
}
.speisekarteneintrag_fullinfo .beschreibung {
margin: 0;
line-height: 1.25em;
padding-bottom: 1rem;
}
.speisekarteneintrag_fullinfo .beilagen,
.speisekarteneintrag_fullinfo .zusatzstoffe,
.speisekarteneintrag_fullinfo .allergene {
margin: 0;
line-height: 1.25em;
padding-bottom: 1rem;
display: flex;
}
.speisekarteneintrag_fullinfo .beilagen > span:first-child,
.speisekarteneintrag_fullinfo .zusatzstoffe > span:first-child,
.speisekarteneintrag_fullinfo .allergene > span:first-child {
text-decoration: underline;
min-width: 5.75em;
display: inline-block;
}
/* .speisekarteneintrag_fullinfo > *:last-child {
padding-bottom: 0;
} */
.close_speisekarteneintrag_fullinfo {
width: 1.25em;
height: 1.25em;
position: absolute;
top: 0.5em;
right: 0.5em;
cursor: pointer;
transition: transform 0.1s ease;
border-radius: 100%;
}
.close_speisekarteneintrag_fullinfo:hover {
transform: scale(1.1);
}
.close_speisekarteneintrag_fullinfo:active {
transform: scale(1.1) translateY(1px);
}
.close_speisekarteneintrag_fullinfo img {
all: initial;
max-width: 100%;
max-height: 100%;
pointer-events: none;
}
.button {
box-shadow: 0px 1px 1px 0px var(--button-shadow-color);
}
.button:hover {
box-shadow: 0px 1px 2px 0px var(--button-shadow-color);
}
.button:active {
box-shadow: 0px 0px 1px 0px var(--button-shadow-color);
transform: translateY(1px);
}
.speisekarteneintrag_fullinfo_ato_wrapper * {
/* unselectable */
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.speisekarteneintrag_fullinfo_ato_wrapper {
display: flex;
justify-content: flex-end;
align-items: flex-end;
flex-wrap: nowrap;
position: relative;
margin-top: 1.25em;
padding-top: 1.25em;
}
.speisekarteneintrag_fullinfo_ato_wrapper > * {
flex-basis: 50%;
flex-grow: 1;
}
.speisekarteneintrag_fullinfo_ato_wrapper > *:last-child {
flex-basis: unset;
flex-grow: 0;
}
.speisekarteneintrag_fullinfo_ato {
padding: 0.5em 1em;
border-radius: 0.5em;
background-color: rgba(252,215,1,0.65);
display: inline-block;
cursor: pointer;
text-align: center;
border: 2px solid rgba(255,255,255,0);
box-sizing: border-box;
}
.speisekarteneintrag_fullinfo_beilagen {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
/* position: relative; */
margin-right: 1em;
}
[lang="de"] .speisekarteneintrag_fullinfo_beilagen:before {
content: 'Wählen Sie Ihre Beilage:';
width: 100%;
margin-top: 0.5em;
margin-bottom: 1em;
}
.speisekarteneintrag_fullinfo_beilagen::before {
content: 'Choose your side dish:';
width: 100%;
margin-top: 0.5em;
margin-bottom: 1em;
}
.speisekarteneintrag_fullinfo_beilagen::after {
content: '';
position: absolute;
top: 0;
bottom: 0;
left: 0;
/* left: 10%; */
right: 0;
/* right: 10%; */
/* border-top: 1px solid; */
border-top: 1px solid rgba(0,0,0,0.1);
pointer-events: none;
}
.speisekarteneintrag_fullinfo_beilage {
flex-grow: 1;
padding: 0.5em 1em;
margin-right: 0.5em;
border-radius: 0.75em;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
border: 2px solid rgba(255,255,255,0);
box-sizing: border-box;
margin-top: 0.4em;
background-color: var(--body-transparent-45-color);
max-width: 14em;
}
.speisekarteneintrag_fullinfo_beilage.beilage_gewaehlt {
width: unset;
}
/* .speisekarteneintrag_fullinfo_beilage.beilage_gewaehlt {
background-color: rgba(252, 215, 1, 0.2);
} */
/* .speisekarteneintrag_fullinfo_beilage.beilage_gewaehlt[name="Tomatenreis"] {
background-color: rgba(173, 7, 7, 0.2);
} */
/* .speisekarteneintrag_fullinfo_beilage.beilage_gewaehlt[name="Reis"] {
background-color: rgba(212, 212, 212, 0.2);
} */
/* .speisekarteneintrag_fullinfo_beilage.beilage_gewaehlt[name="Kartoffeln vom Backofen"] {
background-color: rgba(213, 148, 6, 0.2);
} */
/* Speisekarteneintrag Fullinfo Window END */
.beilagenwahl {
display: flex;
flex-direction: column;
position: absolute;
top: 2.125em;
right: -2.4em;
width: 1.75em;
font-size: 1em;
line-height: 2;
opacity: 0;
}
.beilagenwahl * {
/* unselectable */
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.beilagenwahl > * {
cursor: pointer !important;
border: 3px solid rgba(252, 215, 1, 0);
box-sizing: border-box;
width: 1.75em;
height: 1.75em;
display: flex;
justify-content: center;
align-items: center;
margin-top: 0.25em;
background-color: var(--body-transparent-333-color);
border-radius: 20px;
}
.beilagenwahl > * * {
pointer-events: none;
}
.speisekarteneintrag:hover .beilagenwahl {
opacity: 1;
}
.speisekarteneintrag.ato_visible .beilagenwahl {
opacity: 1;
}
.beilagenwahl img {
object-fit: contain;
}
.beilage_gewaehlt {
border-color: rgba(252, 215, 1, 0.8);
/* background-color: rgba(252, 215, 1, 0.149);
background-color: rgba(255,255,255,0.152); */
width: 100%;
/* transition: border 0.05s linear; */
}
.beilage_gewaehlt[name="Tomatenreis"] {
border-color: rgba(173, 7, 7, 0.8);
}
.beilage_gewaehlt[name="Reis"] {
border-color: rgba(212, 212, 212, 0.8);
}
.beilage_gewaehlt[name="Kartoffeln vom Backofen"] {
border-color: rgba(213, 148, 6, 0.8);
}
/* .beilage_gewaehlt[title="Tomatenreis"] {
border-color: rgba(173, 7, 7, 0.8);
}
.beilage_gewaehlt[title="Reis"] {
border-color: rgba(212, 212, 212, 0.8);
}
.beilage_gewaehlt[title="Kartoffeln vom Backofen"] {
border-color: rgba(213, 148, 6, 0.8);
} */
/* STYLING FOR TIPPY JS POPUPS */
.tippy-box[data-theme~='aeg'] {
background-color: var(--body-color);
color: var(--font-color);
}
.tippy-box[data-theme~='aeg'] > .tippy-arrow::before {
border-left-color: var(--body-color);
border-right-color: var(--body-color);
}
/* STYLING FOR TIPPY JS POPUPS END */
.foldbox div.speisekarteneintrag:last-of-type {
min-height: 6em;
border-bottom-color: transparent;
}
.nofoldboxes div.speisekarteneintrag:nth-of-type(2):hover {
border-top-color: rgba(255,255,255,0.18);
}
.foldbox div.speisekarteneintrag:last-of-type:hover {
border-bottom-color: rgba(255,255,255,0.18);
box-sizing: border-box;
}
.shoppingcart {
position: -webkit-sticky;
position: sticky;
bottom: 0;
right: 0;
width: 40%;
background-color: rgba(252, 215, 1, 0.51);
text-align: left;
margin-left: auto;
z-index: 1;
max-height: 50vh;
overflow-y: scroll;
overflow-x: hidden;
border-radius: 2px;
border-top-left-radius: 2em;
border-bottom-right-radius: 0px;
box-sizing: border-box;
z-index: 3;
}
.shoppingcart:hover {
background-color: rgba(252, 215, 1, 1);
cursor: default !important;
}
.email_confirmation_note {
font-size: 0.75em;
line-height: 1;
margin: 2rem 1% 1rem 1%;
}
.shoppingcart textarea {
margin-left: 0;
color: var(--font-light-color);
/* width: 80%; */
}
.shoppingcart input:not([value='']):not(:focus), .shoppingcart textarea:not([value='']):not(:focus) {
color: var(--font-light-color);
background-color: rgba(255, 255, 255, 0.5);
}
.shoppingcart input:not([value='']):invalid:not(:focus), input:hover:not([value='']):invalid:not(:focus) {
color: var(--invalid-color);
}
.shoppingcart .labelcheckmark {
/* display: none !important; */
}
.shoppingcart.foldbox>div:nth-of-type(2){
transition: all 0.25s cubic-bezier(0, 0, 0, 2.15);
}
.order_helper {
padding: 0.5em 0 !important;
}
.orders_display.foldbox-open {
background-color: rgba(255, 255, 255, 0.05);
height: 0px;
}
.orders_display.foldbox-open {
transition: height .15s cubic-bezier(0.75, 1.49, 0.9, 0.85)!important;
}
.orders_display.foldbox-closed {
/* transition: height .25s cubic-bezier(0.75, 1.49, 0.9, 0.85)!important; */
transition: height .25s cubic-bezier(1, 1.49, 0.96, 0.9)!important;
}
.shoppingcart .foldbox-marker {
display: none;
border-left-color: var(--font-color) !important;
left: 4%;
}
.shoppingcart .foldbox {
}
.shoppingcart .summary-foldbox-closed, .shoppingcart .summary-foldbox-closed:hover, .shoppingcart .summary-foldbox-open, .shoppingcart .summary-foldbox-open:hover {
border-radius: 0px;
padding: 0.125em 0;
margin: 0;
background-color: rgba(255, 255, 255, 0.5);
color: var(--font-color);
border-top-left-radius: 25px;
width: 100%;
cursor: default;
box-shadow: 0 0 5px rgba(0,0,0,0.1);
}
.sync_ordered_products {
padding: 0.25em 0em;
transform: translateX(0%);
}
.sync_ordered_products[checkingout='true'] {
background-color: rgba(0,255,0,0);
/* transition: border 0.5s linear; */
animation: shoppingcartanimation 2s linear;
animation-fill-mode: forwards;
border-top-left-radius: 0.75em;
border-bottom-left-radius: 0.75em;
padding-left: 0.75em;
}
@keyframes shoppingcartanimation {
from {background-color: rgba(0,255,0,0.25); transform: translateX(0%);}
25% {background-color: rgba(0,255,0,1); transform: translateX(10%);}
50% {background-color: rgba(0,255,0,0.5); transform: translateX(50%);}
75% {background-color: rgba(0,255,0,0.1); transform: translateX(70%);}
to {background-color: rgba(0,255,0,0);transform: translateX(200%);}
}
@keyframes redoanimation {
from {background-color: rgba(255,0,0,0.25); transform: translateX(0%);}
25% {background-color: rgba(255,0,0,1); transform: translateX(10%);}
50% {background-color: rgba(255,0,0,0.5); transform: translateX(50%);}
75% {background-color: rgba(255,0,0,0.1); transform: translateX(70%);}
to {background-color: rgba(255,0,0,0);transform: translateX(200%);}
}
/* @keyframes shake {
from {background-color: rgba(0,220,0,0.25); transform: translateX(0%);}
25% {background-color: rgba(255,220,0,1); transform: translateX(5%);}
50% {background-color: rgba(255,220,0,0.5); transform: translateX(-5%);}
70% {background-color: rgba(255,220,0,0.1); transform: translateX(7.5%);}
80% {background-color: rgba(255,220,0,0.1); transform: translateX(-7.5%);}
90% {background-color: rgba(255,220,0,0.1); transform: translateX(2.5%);}
95% {background-color: rgba(255,220,0,0.1); transform: translateX(-2.5%);}
to {background-color: rgba(255,220,0,0);transform: translateX(0%);}
} */
@keyframes addtoordersanimation {
from,
20%,
53%,
89%,
to {
transform: translate3d(0, 0, 0);
background-color: rgba(255,220,0,1);
}
40%,
43% {
transform: translate3d(0, -30px, 0);
background-color: rgba(255,220,0,0.7);
}
70% {
transform: translate3d(0, -16px, 0);
background-color: rgba(255,220,0,0.7);
}
90% {
transform: translate3d(0, -6px, 0);
background-color: rgba(255,220,0,1);
}
}
/* Old add to order animation */
/* @keyframes addtoordersanimation {
from,
20%,
53%,
80%,
to {
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
transform: translate3d(0, 0, 0);
background-color: rgba(255,220,0,0.666);
}
40%,
43% {
animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
transform: translate3d(0, -30px, 0);
background-color: rgba(255,220,0,0.8);
}
70% {
animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
transform: translate3d(0, -15px, 0);
background-color: rgba(255,220,0,1);
}
90% {
transform: translate3d(0, -4px, 0);
background-color: rgba(255,220,0,1);
}
} */
.addtoordersanimation {
animation: addtoordersanimation 1s linear;
animation-fill-mode: forwards;
}
.sync_last_ordered_products {
position: relative;
padding: 0.25em 0em;
background-color: var(--body-transparent-333-color);
border-top-left-radius: 0.75em;
border-bottom-left-radius: 0.75em;
scroll-behavior: smooth;
transform: translateX(0%);
}
.sync_last_ordered_products:empty {
padding: 0em;
}
.sync_last_ordered_products[order_redone='true'] {
background-color: rgba(255,0,0,0);
animation: redoanimation 2s linear;
transition: border 0.5s linear;
animation-fill-mode: forwards;
padding-left: 0.75em;
}
.sync_last_ordered_products>h4 {
font-weight: bold;
font-size: 1.25em;
line-height: 1;
}
.sync_last_ordered_products .redo_order {
position: absolute;
right: 0em;
top: 0em;
font-weight: bold;
text-align: right;
display: flex;
align-items: center;
justify-content: flex-end;
width: 2.25em;
height: 2.25em;
cursor: pointer;
/* background-color: var(--body-transparent-333-color); */
/* border-bottom-left-radius: 5px; */
}
/* .sync_last_ordered_products .redo_order:hover {
background-color: rgba(255,255,255,0.666);
}
.sync_last_ordered_products .redo_order:active {
background-color: rgba(255,255,255,0.999);
} */
.sync_last_ordered_products .redo_order img {
object-fit: contain;
pointer-events: none;
}
.sync_last_ordered_products img {
pointer-events: none;
}
.orders_item {
display: flex;
margin: 0.25em;
justify-content: flex-start;
position: relative;
}
.orders_item .orders_man {
position: absolute;
right: 32%;
top: 0.7em;
display: flex;
}
.sync_last_ordered_products .orders_item .orders_man {
display: none;
}
.orders_item .orders_gericht {
width: 50%;
margin-right: 20%;
}
.orders_item .orders_amount {
width: 15%;
text-align: center;
}
.orders_item .orders_price {
width: 15%;
text-align: right;
}
/* .orders_item .orders_price::after, */
.total_price::after {
content: '*';
}
.total_price {
margin: 0.5em 0.75em;
text-align: right;
}
.total_price span {
text-decoration: underline;
}
.orders_item .orders_item_add, .orders_item .orders_item_subtract {
width: 1.5em;
height: 1.5em;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
background-color: rgba(255,255,255,0.666);
border-radius: 60px;
margin-right: 0.25em;
border: 1px solid rgba(255,255,255,0.666);
box-sizing: border-box;
}
.orders_item .orders_item_add:hover {
background-color: rgba(220,255,220,0.666);
}
.orders_item .orders_item_subtract:hover {
background-color: rgba(255,220,220,0.666);
}
.orders_item .orders_item_add:active {
background-color: rgba(180,255,180,0.666);
border-color: rgba(180,255,180,0.666);
}
.orders_item .orders_item_subtract:active {
background-color: rgba(255,180,180,0.666);
border-color: rgba(255,180,180,0.666);
}
.orders_item .orders_item_add img, .orders_item .orders_item_subtract img {
object-fit: contain;
}
.send_order {
padding: 0.5em 0.25em;
border: 2px solid var(--font-color);
border-radius: 5px;
text-align: center;
margin: 2em 10% 0.5em 10%;
cursor: pointer;
background-color: rgba(255,255,255,0.666);
position: relative;
}
.send_order:hover {
background-color: rgba(230,255,230,0.666);
}
.send_order:active {
background-color: rgba(200,255,200,0.666);
}
.ordering_info {
margin: 1em 10%;
}
.sync_send_order_errornotion {
/* display: none; */
opacity: 0;
position: absolute;
top: -2em;
height: 1.5em;
right: 0em;
font-size: 0.9em;
line-height: 1.625;
/* overflow: scroll; */
overflow: visible;
background-color: #f5090912;
padding: 0.25em 0.5em;
border-top-left-radius: 15px;
border-top-right-radius: 15px;
cursor: default;
font-size: 0.8em;
}
.sync_send_order_errornotion[error='true'] {
/* display: block; */
opacity: 1;
}
.confirm_order {
border: 1px solid;
border-radius: 25px;
display: none;
padding: 0.75em 10%;
margin: 2px;
text-align: center;
}
.confirm_order.toggle_on {
display: block;
animation: bounceInLeft 0.25s ease;
animation-fill-mode: forwards;
}
.confirm_order>*:nth-child(1) {
margin: 0em auto 1em auto;
}
.confirm_order .flex>* {
cursor: pointer;
color: var(--body-color);
transition: background-color 0.2s linear;
}
.confirm_order .flex>*:nth-child(1) {
background-color: var(--valid-color);
border-top-left-radius: 25px;
border-bottom-left-radius: 25px;
}
.confirm_order .flex>*:nth-child(1):hover {
background-color: #0c0;
}
.confirm_order .flex>*:nth-child(1):active {
background-color: #0f0;
}
.confirm_order .flex>*:nth-child(2) {
background-color: var(--invalid-color);
border-top-right-radius: 25px;
border-bottom-right-radius: 25px;
}
.confirm_order .flex>*:nth-child(2):hover {
background-color: #d00;
}
.confirm_order .flex>*:nth-child(2):active {
background-color: #b00;
}
.confirm_order .flex {
display: flex !important;
display: 1px 1 0 !important;
}
.confirm_order .flex>* {
min-width: 50% !important;
}
.memorize_uinfo {
margin: 0.25em 0;
padding: 0.25em 0.5em;
/* border: 1px solid var(--font-color); */
transition: background-color 0.1s linear;
cursor: pointer;
}
.mu_false:hover {
background-color: rgba(255,255,255,0.152);
}
.mu_false:active {
background-color: rgba(0,255,0,0.416);
}
.mu_true:hover {
background-color: rgba(180,255,180,0.5);
}
.mu_true:active {
background-color: rgba(255,0,0,0.3);
}
.shoppingcart .forminputcontainer {
margin-left: 0;
padding: 0.5em 0;
position: relative;
}
.inputerrornotion {
position: absolute;
top: 0.65em;
right: 17.25%;
text-align: right;
height: 1.25em;
color: #a00;
background-color: var(--body-transparent-75-color);
padding: 0.25em 0.5em;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
opacity: 0.666;
font-size: 0.75em;
margin: 0;
left: 60%;
overflow-x: scroll;
}
.inputerrornotion:empty {
display: none;
}
.ordered_products {
}
.shoppingcart_details {
}
/* TOUCH SCREEN INTERFACE RULES - HOVER ADAPTIVENESS */
/* This needs to come before width adaptiveness because width-adaptiveness overwrites some properties for touchscreen devices with enough width */
@media (hover: none){
.navbar>*:nth-child(1):hover[class~=navtab-active] {
border-radius: 50px 0px 0px 50px; /* goes back to original border radius when unhovered - but not with touch interface */
}
.navbar>*:nth-child(2):hover[class~=navtab-active] {
border-radius: 0px; /* goes back to original border radius when unhovered - but not with touch interface */
}
.navbar>*:nth-child(3):hover[class~=navtab-active] {
border-radius: 0px 50px 50px 0px; /* goes back to original border radius when unhovered - but not with touch interface */
}
/* open foldboxes should stay colored like hovered on mobile (tapping anywhere elsewhere than a summary of a foldbox
would make the below set colorscheme disappear again to initial unhovered state (different color scheme )-> weird on touch) */
.summary-foldbox-open {
color: var(--body-color);
background-color: var(--font-color);
}
/* details/foldbox summaries get the right color scheme and some extra effect with this when opened or closed on touchscreen */
.summary-foldbox-closed:hover {
color: var(--font-color);
/* set maindarker to main for the last summaries background-color to be shown in the main color after clicked and be resettet when the next foldbox summary is clicked */
background-color: var(--headline-background-color);
}
/* make summary maindarker background-color switch to main on hold on touch screen devices */
.summary-foldbox-closed:active {
color: var(--font-color);
background-color: var(--body-color);
}
.summary-foldbox-open:hover .foldbox-marker {
border-left-color: var(--headline-background-color);
}
.summary-foldbox-closed:hover .foldbox-marker {
border-left-color: var(--font-light-color);
}
.summary-foldbox-open .foldbox-marker {
border-left-color: var(--body-color);
}
/* Subnav adaptions for touchscreen */
.navsub>*:hover, .navsub>*:active {
background-color: var(--font-color);
color: var(--body-color);
border-radius: 0px;
}
.navsub>*.navsubtab-active, .navsub>*.navsubtab-active:hover, .navsub>*.navsubtab-active:active {
background-color: var(--font-color);
color: var(--body-color);
border-radius: 0px;
}
.navsub>*.navsubtab-active:hover, .navsub>*.navsubtab-active:active {
background-color: var(--font-color);
color: var(--body-color);
cursor: default;
border-radius: 0px;
}
.navsub>*:first-child{
border-top-left-radius: 50px;
border-bottom-left-radius: 50px;
}
.navsub>*:last-child{
border-top-right-radius: 50px;
border-bottom-right-radius: 50px;
}
.navsub>*:first-child:hover{
border-top-left-radius: 50px;
border-bottom-left-radius: 50px;
}
.navsub>*:last-child:hover{
border-top-right-radius: 50px;
border-bottom-right-radius: 50px;
}
.navsub>.navsubtab-active::after {
opacity: 1;
}
/* for touch: embed is zoomed big after onclick (embed is in an a-tag in html) without this */
.horizontalRow embed:hover {
position: relative;
width: 80%;
height: auto;
}
.fewopricingcontainer + .footnote {
height: 19em !important;
padding-top: 1.75em !important;
}
.shoppingcart {
background-color: rgba(252, 215, 1, 1);
}
}
/* HIGHER WIDTH REPONSIVENESS */
@media only screen and (min-width: 925px) {
/* Keeps navbar imgs at static size -> getting too big */
.navbar img {
width: 100px;
}
.beilagenwahl {
top: 1.25em;
transform: scale(0.75);
}
}
/* ADDITIONAL RESPONSIVENESS */
@media only screen and (max-width: 900px) {
/* .fewopricingcontainer {
width: 70%;
} */
.speisekarte .speisekartenkategorie {
padding-left: 7.5%;
}
.speisekarte .foldbox-open {
padding: 0 13.5%;
}
.shoppingcart {
width: 64%;
}
.beilagenwahl {
top: 1.25em;
transform: scale(0.75);
}
}
[beilagen_in_beschreibung] {
display: none;
}
@media only screen and (max-width: 750px){
.speisekarteneintrag>div[beilagen] {
display: none;
}
.speisekarteneintrag>div[beschreibung] {
flex-basis: 50%;
}
[beilagen_in_beschreibung] {
display: inline;
}
.speisekarteneintrag > * {
flex-basis: 30%;
}
.speisekarteneintrag > * {
max-width: unset !important;
}
.speisekarteneintrag {
flex-wrap: wrap;
}
.speisekarteneintrag > *:nth-child(1) {
order: 1;
flex-basis: 50%;
flex-grow: 1;
}
.speisekarteneintrag > *:nth-child(2) {
order: 3;
margin-right: 2.5em;
margin-left: 0;
font-size: 0.9em;
}
.speisekarteneintrag > *:nth-child(4) {
order: 2;
}
.speisekarteneintrag.spke_index > *[column_two]{
display: none !important;
}
/* .speisekarteneintrag .zusatzinformationen {
position: relative !important;
margin-left: 0.5em !important;
top: 0.175em !important;
} */
.speisekarteneintrag > * {
min-height: 4.5em;
}
}
/* SMALL WIDTH RESPONSIVENESS */
@media only screen and (max-width: 567px) {
.aegaeis-body {
padding: 0;
}
.footnote {
width: 90%;
}
.navbar {
border-radius: 0px !important;
}
.navbar>* {
font-size: 0;
padding: 0.4rem 0; /* in rem because of the displayed none text (font-size: 0;), so the navbar retains the same aspect ratio */
border-radius: 0 !important;
border: none !important;
}
.navbar img {
width: 37.5%;
}
.navsub {
border-radius: 0 !important;
}
.navsub>*.navsubtab-active, .navsub>*.navsubtab-active:hover {
border-radius: 5px; /* no visible border radius for navsub tabs at small width */
}
/* no border radius for first and last navsub tab/element at small width */
.navsub>*:first-child{
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
}
.navsub>*:last-child{
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
}
img {
width: 96%;
}
.flex {
display: block;
}
.flex * {
flex: unset;
}
.headline {
line-height: 1em;
padding: 3%;
}
.summary-foldbox-closed, .summary-foldbox-open {
width: 100%;
font-size: 1.8rem;
padding: 3% 0%;
/* padding: 3% 5%; */ /* but then comment width: 100%; out*/
}
/* No marker for details tags / foldboxes
on mobile / little width windows -> no space available */
.foldbox-marker {
display: none;
}
.speisekarte.nofoldboxes {
padding: 2em 1em;
}
.speisekarte .speisekartenkategorie {
font-size: 1.25em;
line-height: 1.25em;
padding: 0.5em;
}
.speisekarte .foldbox-open {
padding: 0 1em;
}
.speisekarteneintrag>div[beilagen] {
display: none;
}
.aegaeis_form {
margin-left: 0;
margin-right: 0;
}
.formholder {
left: 0;
}
.belowform {
width: 90%;
}
.attractions>* {
margin-top: 5%;
margin-bottom: 5%;
}
.attractions>*:first-child * {
margin-left: auto;
}
.attractions>*:last-child * {
margin-right: auto;
}
.keysfewocontainer {
display: flex;
flex-direction: column-reverse;
}
.preisinfo > div {
width: unset;
}
.fewopricingcontainer {
width: 90%;
min-width: unset;
}
#fewo-pricing th {
padding: 0.25em;
}
.disclaimer {
width: 80%;
margin: 0 auto;
}
.add_to_orders {
right: 0.25em;
top: 2em;
min-height: unset !important;
}
.beilagenwahl {
right: 0.25em;
top: 3.25em;
}
.beilagenwahl > * {
padding: 0.2em;
}
.foldbox div.speisekarteneintrag:last-of-type {
min-height: 8em;
}
.speisekarteneintrag > * {
flex-basis: 30%;
/* min-height: 4em; */
/* word-break: break-word; */
overflow: visible;
max-width: 30%;
}
.shoppingcart {
width: 100%;
}
.orders_man {
margin-right: 0.75em;
margin-top: 0.125em;
}
.orders_item .orders_item_add, .orders_item .orders_item_subtract {
width: 1.25em;
height: 1.25em;
}
.shoppingcart {
border-top-right-radius: 2em;
}
}
iframe.speisekarte-iframe {
width: 75%;
height: 297mm;
display: block;
margin: 1.5em auto;
box-shadow: 0px 0px 1.5em rgba(0,0,0,0.5);
border-radius: 12px;
transition: height 1s ease;
}
@media only screen and (max-width: 290mm) {
iframe.speisekarte-iframe {
height: 0mm;
/* height: 31vh; */
}
}