/*
div.info anpassen -> gang am ende, überheadline
*/

* {
    box-sizing: border-box;
    border: none;
    font-family: Arial, Helvetica, sans-serif;
  }

  :root{
    --border-BL: 0.5mm dashed black;
    --border-blatt: 0.0mm dashed black;
    --margin: auto;
    --padding-BL: 8mm;
    --gap-BL-A1: 2mm;
    --gap-BL-A2: 1mm;
    --scale-headlineBurger: scaleX(1.2);   /* 25% breiter */
    --color-preisbox: none;


  --PreisBoxGap: 2mm 20mm;
  --PreisBoxFlexDirection:  row;
/*  --PreisBoxFlexDirection:  column;*/
  }

@font-face {
    font-family: "ISOCPEUR";
    src: url("/fonts/ISOCPEUR.ttf") format("truetype");
}




div#ausgabeBox {
    border: 0px solid black;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5rem 10rem; /* Abstand zwischen den Spalten */

    justify-content: center; /* vertikal zentrieren */
    align-items: center;     /* horizontal zentrieren */

    flex:1;

  /*
    margin-top:50mm;
    margin-right: 20mm;
    margin-bottom: 50mm;
    margin-left: 20mm;

    margin-top:0mm;
    margin-right: 0mm;
    margin-bottom: 0mm;
    margin-left: 0mm;
*/

padding-top: 50mm;
padding-bottom: 50mm;
}



div.item {    /*   card */;
  height: 77.5%;
    padding: 0.1rem;
/*    border: 1px solid green;*/
    border-radius: 5rem;
    min-height: 100mm;
    line-height: 1.5;
    
    justify-content: center; /* vertikal zentrieren */
    align-items: center;     /* horizontal zentrieren */
    text-align: center;

    display: flex;
    flex-direction: column;
/*    justify-content: space-between;*/
    gap: 2mm;
    background-color: rgba(0,0,0,0.10);
}


div.bl {
/*    background: silver;*/
/*   transform: rotate(-7.5deg);  */
margin-left: 20mm;
}

div.br {
/*   background: gray;*/
/*   transform: rotate(7.5deg);*/
margin-right: 20mm;
}





/* einzelpreise-box - svg+preis */

div.preis,
div.normalburgerpreis,
div.normalburgerpreis,
div.megaburgerpreis,
div.preisnormalpizza,
div.kleinpizzapreis {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
/*   justify-content: center; /* vertikal zentrieren */
  align-items: center;     /* horizontal zentrieren */
  font-size: 3rem;
  width: 180px;
  height: 100%;
}

/* einzelpreise-box - svg+preis */
div#blattA1 .preis,
div#blattA1 .normalburgerpreis,
div#blattA1 .normalburgerpreis,
div#blattA1 .megaburgerpreis,
div#blattA1 .preisnormalpizza,
div#blattA1 .kleinpizzapreis {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
/*   justify-content: center; /* vertikal zentrieren */
  align-items: center;     /* horizontal zentrieren */
  font-size: 3rem;
}
/*      --      --      --      --      --      --      --      --      --      --      --      */


/*      --      --      --      --      --      --      --      --      --      --      --      */
/*  svg box */
div.PrBuNo, div.PrBuMg, div.PrPzNo, div.PrPzKl {
  display: flex;
  justify-content: center; /* vertikal zentrieren */
  align-items: center;     /* horizontal zentrieren */
/*  background-color: rgba(192, 192, 192, 0.1); */
/*  border:1px solid green; */
  font-size:5mm;
  width: 10mm;
  height: 25mm;
}
/*      --      --      --      --      --      --      --      --      --      --      --      */



/*      --      --      --      --      --      --      --      --      --      --      --      */
svg {
  height: 35mm;
  margin-right:3mm;
  border: none;
}

div#blattA1 svg {
  height: 25mm;
  margin-right:2mm;
}
div#blattA2 svg {
  height: 20mm;
  margin-right:2mm;
}

  @media print{
  svg {
    height: 35mm;
    margin-right:3mm;
    border: none;
  }

  div#blattA1 svg {
    height: 25mm;
    margin-right:2mm;
  }
  div#blattA2 svg {
    height: 20mm;
    margin-right:2mm;
  }
}
/*      --      --      --      --      --      --      --      --      --      --      --      */


/*      --      --      --      --      --      --      --      --      --      --      --      */
div#blattA1 .preisbox, div#blattA2 .preisbox {
  background-color: var(--color-preisbox);
display:flex;

flex-direction: var(--PreisBoxFlexDirection);
gap: var(--PreisBoxGap);
margin-top: auto;

}

div#blattA1 .preisbox {
  padding: 3px;
  margin-top: auto;
}

div#blattA2 .preisbox {
  padding: 2px;
  margin-top: auto;
}

  @media print{
  div#blattA1 .preisbox, div#blattA2 .preisbox {
    background-color: var(--color-preisbox);
    margin-top: auto;
  }

  div#blattA1 .preisbox {
    padding: 3mm;
    margin-top: auto;
  }

  div#blattA2 .preisbox {
    padding: 2mm;
    margin-top: auto;
  }
  }
/*      --      --      --      --      --      --      --      --      --      --      --      */


/*      --      --      --      --      --      --      --      --      --      --      --      */
div#blattA1, div#blattA2 {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border: var(--border-BL);
}

div#blattA1 {
  width: 580mm;   /*  A1  */
  height: 830mm;  /*  A1  */
  margin: var(--margin);
  padding: var(--padding-BL);
  gap: var(--gap-BL-A1);
}

div#blattA2 {
  width: 410mm;   /*  A2  */
  height: 580mm;  /*  A2  */
  margin: var(--margin);
  padding: var(--padding-BL);
  gap: var(--gap-BL-A2);
}

  @media print {
  div#blattA1, div#blattA2 {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border: var(--border-BL);
  }

  div#blattA1 {
    width: 580mm;   /*  A1  */
    height: 830mm;  /*  A1  */
    margin: var(--margin);
    padding: var(--padding-BL);
    gap: var(--gap-BL-A1);
  }
    
  div#blattA2 {
    width: 410mm;   /*  A2  */
    height: 580mm;  /*  A2  */
    margin: var(--margin);
    padding: var(--padding-BL);
    gap: var(--gap-BL-A2);
  }
  }
/*      --      --      --      --      --      --      --      --      --      --      --      */


/*      --      --      --      --      --      --      --      --      --      --      --      */
div.zut, div.zus {
  font-weight: lighter;
}

div#blattA1 .zut, div#blattA1 .zus {
  font-size: 3.5rem;
}

div#blattA2 .zut, div#blattA2 .zus {
  font-size: 2.5rem;
}

  @media print {
  div#blattA1 .zut, div#blattA2 .zus{
    transform: var(--scale-headlineBurger);   /* x% breiter */
  }

  div#blattA1 .zut, div#blattA1 .zut, {
    font-size: 10mm;
  }
                          
  div#blattA2 .zut, div#blattA2 .zut, {
    font-size: 8mm;
  }
  }
/*      --      --      --      --      --      --      --      --      --      --      --      */


/*      --      --      --      --      --      --      --      --      --      --      --      */
div.info {
  font-size: 1.5rem;
  margin-top:-1.5rem;
}
/*      --      --      --      --      --      --      --      --      --      --      --      */


/*      --      --      --      --      --      --      --      --      --      --      --      */
div.headline {
  margin-top: 1rem;
  font-weight: bolder;
}
div#blattA1 .headline, div#blattA2 .headline{
  transform: var(--scale-headlineBurger);   /* x% breiter */
}

div#blattA1 .headline {
  font-size: 3.5rem;
}
                        
div#blattA2 .headline {
  font-size: 2rem;
}

  @media print {
  div#blattA1 .headline, div#blattA2 .headline{
    transform: var(--scale-headlineBurger);   /* x% breiter */
  }

  div#blattA1 .headline {
    font-size: 15mm;
  }
                          
  div#blattA2 .headline {
    font-size: 10mm;
  }
  }
/*      --      --      --      --      --      --      --      --      --      --      --      */




#toplinetop{
border: var(--border-blatt);
font-size: 4rem;
    display:flex;
    justify-content: center; /* vertikal zentrieren */
    align-items: center;     /* horizontal zentrieren */
}
#toplinesub{
border: var(--border-blatt);
font-size: 3rem;
    display:flex;
    justify-content: center; /* vertikal zentrieren */
    align-items: center;     /* horizontal zentrieren */
}

#botlinetop{
border: var(--border-blatt);
font-size: 4rem;
    display:flex;
    justify-content: center; /* vertikal zentrieren */
    align-items: center;     /* horizontal zentrieren */
}

#botlinesub{
border: var(--border-blatt);
font-size: 5mm;
font-family: "OCR B", "OCR-B", monospace;
font-family: "ISOCPEUR", monospace;
    display:flex;
    justify-content: center; /* vertikal zentrieren */
    align-items: center;     /* horizontal zentrieren */
}