/* @import url('https://fonts.googleapis.com/css2?family=Courier+Prime:ital,wght@0,400;0,700;1,400;1,700&display=swap'); */
/* @import url('https://fonts.googleapis.com/css2?family=Abril+Fatface,wght@0,400;0,700;1,400;1,700&display=swap'); */

/* @import url('https://fonts.googleapis.com/css2?family=Abril+Fatface&family=Courier+Prime&family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap'); */

@font-face {
  font-family: "Chainprinter";
  src: url("chainprinter.ttf");
}
@font-face {
  font-family: "Lato";
  src: url("Lato-Regular.ttf");
}

/* alte Farbe: braun: #997F65 */
body
{
  margin:0px;
  background-color:#111111;
  /* background-image:url(im/bg.jpg); */
  color:white;
  font-family: "Lato","Courier Prime","sans serif";
}

a{color:white;}

div{box-sizing:border-box;}

div.hinweis,div.fehler{background-color:#B9FFB9;color:black !important;font-weight:bold;display:block;text-align:left;padding:12px;border:2px solid #00ff00;border-radius:7px;margin-bottom:10px;}
div.fehler{background-color:#FEC6C6;border:2px solid #ff0000;}

.r{float:right;}
.tr{text-align:right;}
.l{float:left;}
.tl{text-align:left;}

#alles{
}

/* select,option{all: unset;} */
option,select{background-color:white;color:black;}

.overflown
{
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

h1,h2,h3,#malert_headline
{
  /* text-transform:uppercase; */
  margin:5px 0px 10px 0px;
  font-weight:400;
  /* font-family:"Abril Fatface","sans serif"; */
  font-family:"Chainprinter","sans serif";
}
h1,h2,h3{font-size:30px;}

/* Form-Felder */
.button,button,input[type=button],input[type=submit]
{
  font-family: "Lato","Courier Prime","sans serif";
  cursor:pointer;
  margin:0px 10px 10px 0px;
  background-color:black;
  color:white;
  border-radius:3px;
  border:2px solid white;
  padding:10px;
  text-decoration:none;
  font-size:15px;
  display:inline-block;
  white-space: nowrap;
}

input[type=text],input[type=search],input[type=email],input[type=tel],input[type=password],select,textarea
{
  padding:6px;
  border:1px solid black;
  font-size:17px;
  border-radius:3px;
}
#navi .button{width:100px;}

#anmeldeform input[type=text],#anmeldeform input[type=search],#anmeldeform input[type=email],#anmeldeform input[type=tel],#anmeldeform input[type=password],#anmeldeform select,#anmeldeform textarea
{
  width:300px;
  max-width:90%;
}
.pwfeld
{
  width:275px !important;
  max-width:calc(90% - 25px) !important;
}

textarea{width:96%;}

.gleich{display:inline-flex;align-items:center;justify-content:center;height:20px;width:20px;line-height:20px;font-weight:bold;border:0px;}

#malert_head,#malert_headline{background-color:black;color:white;}

table{border:1px solid black;border-collapse: collapse;}
th{background-color:#444444 !important;color:white;font-weight:normal;text-align:left;vertical-align:top;}
tr:nth-of-type(even){background-color:#ddd !important;}
tr:nth-of-type(odd){background-color:#fff !important;}

tr.bezahlt td{background-color:#92f892 !important;}
tr.offen td{background-color:#f19696 !important;}

/* Speziell für Backend: */
#backend_content td{color:black;}
#backend_content tr.inaktiv,#backend_content tr.inaktiv >td{background-color:#bbb !important;color:#eee;}
.klein{font-size:12px;}
.preisfeld{width:60px;}
.priofeld{width:30px !important;}

.weiter_button{background-color:#b08b58 !important;}

/* Kalender */
.day{border:1px solid black;border-radius:4px;padding:5px;margin:10px 10px 0px 0px;min-width:180px;min-height:50px;float:left;}
.datum{background-color:black;color:white;}
.heute{color:red;}
.sonntag{font-weight:bold;}
.pfeil{font-size:10px;margin-top:-2px;display:inline-block;float:left;}
#datum_auswahl{margin-top:-1px;display:inline-block;float:left;}
.day_hidden{visibility:hidden;}

.qrcode{background-color:white;padding:30px;display:inline-block;margin:auto auto;}

.onlyprint{display:none;}

/* Artikel */

.artikel
{
  width:290px;
  border-radius:10px;
  float:left;
  padding:20px;
  background-color:white;
  color:black;
  margin-right:20px;
  margin-bottom:20px;
}

.aufklickbar{color:black;text-decoration:none;font-size:18px;}
.aufklickbar_zeichen{font-size:30px;line-height:10px;float:right;margin-top:5px;}
.aufklick_div{padding-top:10px;font-size:18px;}

/* .artikel:last-of-type
{
  margin-right:0px;
} */

.artikelbild
{
  border-radius:10px;
  margin: -10px 0px 8px -10px;
  width:calc( 100% + 20px );
}

.artikeltext
{
  font-weight: 300;
  line-height:32px;
  font-size:17px;
  margin-bottom:10px;
}

.artikelpreis
{
  font-size:40px;
  line-height:20px;
  margin-top:5px;
  margin-bottom:20px;
  font-weight: bold;
}

.artikel_inner
{
  display:block;
  cursor:pointer;
  height:400px;
}

.mengefeld,.mengefeldwk
{
  display:inline-block;
  width:25px;
  height:25px;
  padding:3px;
  text-align:center;
  position:relative;
  top:-1px;
  /* margin-top:-5px; */
  font-size:22px;
  border:1px solid black;
}
.wkbild{border-radius:3px;}
.artikel_unten
{
  position:relative;
  top:10px;
}

.mengebereich
{
  /* border:1px solid red; */
  width:160px;
  white-space: nowrap;
}
.mengebereich .button,.artikel .button{margin:0px 0px 10px 0px;}
.mengebereich .gleich{margin-bottom:0px !important;}

.artikelname
{
  font-size:19px;
  overflow: hidden;
  height:45px;

  /* white-space: nowrap; */
  /* text-overflow: ellipsis; */

  /* Neu ab 22.05.2025 */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.tr_deakt td{color:#666 !important;}

@media print
{
  .noprint{display:none;}
  .onlyprint{display:block;}
}

@media(max-width: 700px)
{
  .artikelbild
  {
    width:calc( 50% - 10px );
    float:left;
    margin: -15px 10px 8px -10px;
  }
  .artikel_inner{height:auto;}
  .overflown{-webkit-line-clamp: 2;margin-bottom:40px;}

  /* .artikel{width:calc(50% - 20px);zoom:70%} */
  .artikel{width:calc(100% - 10px);}
  /* Kalender */
  .day{min-width:1%;width:100%;}
  .day_hidden{display:none;}
}
@media(max-width: 500px)
{
  .overflown{-webkit-line-clamp: 1;margin-bottom:0px;}
  /* .artikelbild{width:calc( 50% - 10px );} */
  .artikelbild{width:125px;}
  .artikelpreis{font-size:20px;margin-bottom:0px;}
  .mengebereich .button,.artikel .button{margin:0px 0px 0px 0px;}
  .artikel_unten{margin-left:-10px;}

}
@media(max-width: 300px)
{
  .artikelbild
  {
    width:calc( 100% + 20px );
    float:none;
    margin: -10px 0px 8px -10px;
  }
}