@font-face{font-family:font3;src:url(hyr/cyen.woff2);font-display:swap;}
@font-face{font-family:font2;src:url(hyr/latinmodernmono.woff2);font-display:swap;}
@font-face{font-family:font1;src:url(hyr/small.woff2);font-display:swap;}
html,body{margin:0;padding:0;left:0;min-width:100%;max-width:100%;width:100%;min-height:100%;max-height:100%;height:100%;}

html{filter:grayscale(0%);font-size:16px;}
body{color:rgb(0,0,0);background:rgb(255,255,255);font-family:font2;}

.cards {
display:grid;
margin:0 auto;
margin-top:5px;
margin-bottom:5px;
gap:calc(3px + 0.2vw);
grid-template-columns: repeat(auto-fit, minmax(calc(325px + 2vw), 1fr));}

.card {
padding-top:calc(12px + 0.3vw);
height:calc(23px + 2vw);
white-space:nowrap;
font-size:10px;
font-family:font2;
font-weight:bold;
background-image:transparent;
color:rgb(100,0,0);}

.inh {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
grid-auto-rows: auto;
grid-gap: 2px;}

.artikel {
background:rgb(255,255,230);
white-space:wrap;
border: green 2px solid;
border-radius:5px;}

.container {display:grid;
grid-template-columns:1fr 1fr 1fr;
grid-auto-rows: minmax(150px, auto);
grid-template-areas:
'header header header'
'sidebar content content'
'ground ground ground';}

.haus{
position:absolute;
display:block;
margin:0;
padding:0;
top:calc(7px + 0.7vw);
left:calc(1px + 0.12vw);
float:left;
width:calc(40px + 6vw);
height:calc(37px + 6vw);
background-image:url(pic/72x72/1F9D1-200D-1F373.png);  // *.png Format
background-repeat:no-repeat;
background-size:contain!important;
animation:drehen 4s infinite linear; 
z-index:9;}
@keyframes drehen{from{transform: rotateY(0deg)} to {transform: rotateY(360deg)}}

.logo{
position:absolute;
display:block;
margin:1px;
top:calc(2px + 0.5vw);
right:10px;
width:calc(90px + 8vw);
height:calc(60px + 8vw);
border-radius:5px;
background-image:url(pic/pizzerialatoscana-20260804.webp);
background-repeat:no-repeat;
background-size:contain!important;
z-index:9;}

.menue{
position:absolute;
display:block;
top:calc(40px + 12vw);
left:20px;
line-height:400%;
z-index:10;}

h1,h2,h3,h4,h5,h6,p{
margin:1px;
padding:5px;
text-align:justify;
background-image: linear-gradient(150deg, rgba(255,255,0,0.96) 50%, rgba(255,50,50,0.96) 80%);
border:solid 1px;
border-radius:20px;}

h1{font-size:calc(5px + 2vw);padding:10px 0 20px calc(20px + 8vw);white-space:nowrap;}
h2{font-size:calc(10px + 0.9vw);}
h3{font-size:calc(10px + 0.8vw);}
h4{font-size:calc(10px + 0.7vw);}
h5{font-size:calc(10px + 0.7vw);}
h6{font-size:calc(10px + 0.6vw);}

p{
position:relative;
padding:3px;
font-size:calc(12px + 0.8vw);
margin:-2px 3px calc(2px + 2vw) 3px;
border-radius:0 0 1vw 1vw;
background-image: linear-gradient(350deg, rgba(0,255,0,0.5) 0%, rgba(255,205,0,0.15) 30%);
z-index:3;}

p::first-letter{
color:rgb(0,0,200);
font-family:font2;
font-weight:bold;
font-size:calc(18px + 1.8vw);}

a:link,a:visited{margin:2px;
padding:calc(2px + 0.6vw);
background-image: linear-gradient(165deg, rgb(255,255,100) 30%, rgb(255,70,70) 95%);
text-decoration:none;
color:rgb(0,0,0);
font-size:calc(12px + 0.6vw);
font-weight:bold;
border:solid 0.1em;
border-color:rgb(0,80,0);
border-radius:calc(8px + 0.3vw);
z-index:12;}

a:hover{
color:rgb(255,255,50);
background:rgb(200,50,50);
border-color:rgb(0,155,0);
font-size:calc(12px + 0.8vw);
font-weight:bold;
z-index:12;}

img{display:inline-block;}

.symbol1,.symbol2,.symbol3,.symbol4,.symbol5{position:relative;display:block;float:left;}
.symbol{font-size:50px;}
.symbol1{transform: scale(110%);font-size:calc(15px + 1vw);margin-right:10px;}
.symbol2{margin-right:10px;font-size:35px;}
.symbol3{font-size:calc(30px + 4vw);}
.symbol4{transform: scale(110%);padding:7px;top:calc(-20px - 0.13vw);}
.symbol5{transform:scale(110%);font-size:calc(15px + 1vw);margin-left:200px;}

.under{text-decoration: underline;text-decoration-style: solid;}
.ueber{text-decoration: bold;text-decoration-style: solid;font-size:calc(14px + 0.8vw);}

.blind{
position:fixed;
display:none;
left:-999px;
top:-999px;
visibility: hidden;
width:1px;
height:1px;
overflow:hidden;}

.data_nr {
position:relative;
margin:4px;
padding:4px;
top:8px;
left:2px;
letter-spacing:0;
background:rgb(255,255,200);
font-size:calc(18px + 0.5vw);
font-weight: bold;
font-family:font2;
z-index:9;}

.data_kategorie {
position: sticky;
display: block;
top: 0;
background-color: rgb(200,200,255);
height:calc(32px + 3vw);
margin:5px;
padding:8px;
letter-spacing:0;
text-align: center;
font-size:calc(20px + 2vw);
font-weight: bold;
font-family:font2;
border-radius:15px;
z-index:100;}

.data_artikel {
position:relative;
margin: 14px 0 0 0;
padding:4px;
top:8px;
letter-spacing:0;
background:linear-gradient(110deg, rgba(255,250,250,0.96) 0%, rgba(255,255,0,0.96) 80%);
font-size:calc(16px + 0.5vw);
font-weight: bold;
font-family:font2;
border: solid 1px;
border-radius:calc(8px + 0.3vw);
z-index:9;}

.data_beschreibung {
position:relative;
left:2px;
overflow: hidden;
overflow-wrap: break-word;
font-size:calc(13px + 0.9vw);
font-family:font2;
z-index:9;}

.data_beschreibung a:link {
color: #ff5722;
text-decoration: none;}

.data_kinder {
position:relative;
left:1px;
bottom:1px;
letter-spacing:-0.1em;
font-size:calc(15px + 0.3vw);
font-family:font2;
font-weight:normal;
z-index:9;}

.data_klein {
position:relative;
left:6px;
letter-spacing:-0.1em;
bottom:1px;
font-size:calc(15px + 0.3vw);
font-family:font2;
font-weight:normal;
z-index:9;}

.data_standard {
position:relative;
left:12px;
letter-spacing:-0.1em;
bottom:1px;
font-size:calc(15px + 0.3vw);
font-family:font2;
z-index:9;}

.data_gross {
position:relative;
left:18px;
letter-spacing:-0.1em;
bottom:1px;
font-size:calc(15px + 0.3vw);
font-family:font2;
font-weight:normal;
z-index:9;}

.cookiebanner{
position:fixed;
display:block;
margin:5px;
padding:10px;
top:calc(70px + 2vw);
right:5px;
left:5px;
line-height:160%; 
font-size:calc(10px + 0.6vw);
font-weight:bold;
background:rgb(220,255,220);
overflow:hidden;
border: 3px;
border-radius:10px;
z-index:11;}

input[type='radio'] { 
background-image:url(./pic/72x72/1F44C.png);
transform: scale(160%);
margin:5px 10px 5px 2px;}

input[type='submit'] {
font-size:calc(6px + 1.5vw);
margin:0;}

.button-cookie{
position:sticky;
float:right;
display:flex;
top:4px;
right:2px;
z-index:100;}

.button-top{
position:fixed;
display:block;
bottom:15px;
right:5px;
z-index:11;}

.clicks {
font-size : 1em;
font-family:'font2','font3','font1';
z-index : 5;}

.speisekarte1,
.speisekarte2,
.speisekarte3,
.speisekarte4,
.speisekarte5,
.speisekarte6,
.speisekarte7,
.speisekarte8,
.speisekarte9,
.speisekarte10,
.speisekarte11,
.speisekarte12 {
display: block;
padding:0;
height:65vw;
width:65vw;
background-repeat:no-repeat;
background-size: cover !important;
background-color:transparent;
border-radius:1em;
z-index: 2;}

.speisekarte1 {background-image: url(pic/pizzeria-la-toscana-2023-speisekarte-01-400-400.webp);}
.speisekarte2 {background-image: url(pic/pizzeria-la-toscana-2023-speisekarte-02-400-400.webp);}
.speisekarte3 {background-image: url(pic/pizzeria-la-toscana-2023-speisekarte-03-400-400.webp);}
.speisekarte4 {background-image: url(pic/pizzeria-la-toscana-2023-speisekarte-04-400-400.webp);}
.speisekarte5 {background-image: url(pic/pizzeria-la-toscana-2023-speisekarte-05-400-400.webp);}
.speisekarte6 {background-image: url(pic/pizzeria-la-toscana-2023-speisekarte-06-400-400.webp);}
.speisekarte7 {background-image: url(pic/pizzeria-la-toscana-2023-speisekarte-07-400-400.webp);}
.speisekarte8 {background-image: url(pic/pizzeria-la-toscana-2023-speisekarte-08-400-400.webp);}
.speisekarte9 {background-image: url(pic/pizzeria-la-toscana-2023-speisekarte-09-400-400.webp);}
.speisekarte10 {background-image:url(pic/pizzeria-la-toscana-2023-speisekarte-10-400-400.webp);}
.speisekarte11 {background-image:url(pic/pizzeria-la-toscana-2023-speisekarte-11-400-400.webp);}
.speisekarte12 {background-image:url(pic/pizzeria-la-toscana-2023-speisekarte-12-400-400.webp);}

.tagesbild {
position:relative;
margin: 0 5vw 1vw 0.4vw;
width:50px;
height:50px;
float: left;
background-size: contain !important;
z-index:8;}

.tagestext {
position:relative;
left:6em;
z-index:8;}

.urlaub{
position:fixed;
display: block;
padding:15px;
top:35px;
left:130px;
right:35px;
text-align:center;
background-color:rgba(230,255,230,0.985);
border-radius:0.6vw;
opacity: 0;
animation: urlaub 30s ease-in-out 1 forwards;
z-index:100;}
@keyframes urlaub {
0% { opacity: 0; }
10% { opacity: 1; }
90% { opacity: 1; }
100% { opacity: 0; visibility: hidden; }}

.renovierung{
position:fixed;
display: block;
padding:15px;
top:15px;
left:15px;
right:15px;
text-align:center;
background-color:rgba(230,255,230,0.97);
border-radius:0.6vw;
opacity:0;
animation: wegda 5s forwards;
z-index:200;}
@keyframes wegda {
0% { opacity: 1; }
80% { opacity: 1; }
100% { opacity: 0; visibility: hidden; }}

.flamme1 {
position:relative;
display:block;
top:8px;
float:left;
height:1em;
width:1em;
background-size:cover !important ;
background-image:url(pic/flamme1.gif);
background-repeat:no-repeat;
z-index:100;}

.flamme2,.flamme3 {
position:relative;
display:block;
float:right;
top:calc(2px + 0.9vw);
right:calc(120px + 3vw);
height:calc(25px + 1.4vw);
width:20px;
background-size:cover !important ;
background-image:url(pic/flamme2.gif);
background-repeat:no-repeat;
z-index:100;}

.apettit{
position:relative;
display:block;
margin:15px;
left:5px;
top:5px;
font-size:calc(13px + 0.9vw);
font-family:font2;
z-index:100;}

.kategorie {
position: sticky;
display: block;
top: 0;
background-color: rgb(200,200,255);
height:calc(30px + 3vw);
margin:3px;
padding:12px 0 0 5px;
letter-spacing:0;
font-size:calc(2px + 3vw);
font-weight: bold;
font-family:font2;
border-radius:15px;
z-index:101;}

.zusatz {
position:absolute;
right: 5px;
z-index:7;}

.skip {
position: absolute;
left: -9999px;
z-index: 999;
padding: 1em;
background-color: black;
color: white;
opacity: 0;}

.skip:focus {
left: 50%;
transform: translateX(-50%);
opacity: 1;}

/**** css-Stern 1 *****************/
.css-stern {
position: absolute;
top: 280px;
left:100px;
width: 0;
height: 0;
border-right: 150px solid transparent;
border-bottom: 200px solid rgb(220,220,255);
border-left: 160px solid transparent;
animation: kreisenrechts 8s infinite linear;
z-index:114;}

.css-stern:before {
position: absolute;
top: 80px;
left: -140px;  
width: 0;
height: 0;
border-top: 180px solid rgb(230,230,255);
border-right: 150px solid transparent;
border-bottom: 150px solid transparent;
border-left: 130px solid transparent;
content: "";}

.css-stern-linie1,.css-stern-linie2,.css-stern-linie3{
position:absolute;
display:block;
animation-name: stretch;
animation-duration: 2.5s; 
animation-timing-function: ease-out; 
animation-delay: 0;
animation-direction: alternate;
animation-iteration-count: infinite;
animation-play-state: running;
margin: 0 auto;
background-color: rgb(40,40,255);
animation: kreisen 4s infinite linear;
z-index:113;}

.css-stern-linie1 {
top:390px;
left:-30px;
height:15px;
width: 500px;
rotate: -130deg;}

.css-stern-linie2 {
top:400px;
left:-10px;
height:15px;
width: 500px;
rotate: 130deg;}

.css-stern-linie3 {
top:410px;
left:-30px;
height:15px;
width: 500px;
rotate: 0deg;}

.hrmove {
position:relative;
display:block;
top:100px;
left:100px;
height: 3px;
width: 80%;
animation-name: stretch;
animation-duration: 2.5s; 
animation-timing-function: ease-out; 
animation-delay: 0;
animation-direction: alternate;
animation-iteration-count: infinite;
animation-play-state: running;

margin: 0 auto;
z-index:111;}

@keyframes stretch {
  0% {transform: scale(.1);}
100% {}}


/**** Rotieren unendlich **********/

@keyframes kreisenrechts {from{transform: rotate(0deg);}
to {transform:rotate(359deg);}}

@keyframes kreisen {from{transform: rotate(360deg);}
to {transform:rotate(1deg);}}

.rotate {animation: kreiseln 8s infinite linear;}
@keyframes kreiseln {from{transform: rotate(359deg);}
to {transform:rotate(0deg);}}

.zoom{
position:absolute;
display:block;
top:130px;
left:120px;
transform: scale(.04);}

.blinken {
animation-name: blinkt;
animation-timing-function: ease-in;
animation-duration: 5s; 
animation-iteration-count: infinite;}

@keyframes blinkt {
0% {opacity:0;}
10% {opacity:0.3;}
20% {opacity:0.7;}
30% {opacity:1;}
40% {opacity:0.7;}
50% {opacity:0.3;}
60% {opacity:0;}
70% {opacity:0.5;}
80% {opacity:0.9;}
90% {opacity:0;}
93% {opacity:0.7;}
96% {opacity:0.2;}
100% {opacity:1; }}