/* Sales Writing Styles */
@import url(sale.css);
@import url(typo.css);

:root {
  --bg: #fff;
  --intro-bg: #ffffff;
  --kaffeeundkuchen-bg: #c8c19f;
/*  --saisonkarte-bg: #d2e4a3;  #f4f4f4;  #fdf6e1; #fbf2e5; #b29583; */
  --delicious-bg: #ffffff;
/*  --veranstaltungen-bg: #f5f5f5; */
  --veranstaltungen-bg: #202950;
  --offen-bg: #b5cf6c;
  --card-bg: #271b0a;
  --angebot-bg: #eff3f4;

/*   --schnitzel-bg: #694628; */
}


body {
  background: var(--bg);
/*  font-size: 1.1em; */
  font-size: 1.1em;
}

@media screen and (min-width: 1024px){
   body { font-size: 1.3em; }
}

/*  Typo */
/*
html, body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}
*/



/*
.box {

  background: var(--card-bg);
}
*/

/*
input::placeholder {
  color: antiquewhite;
}
*/

/*
.navbar {
  background: var(--card-bg);
}
*/
.navbar-item img {
  max-height: 2.8rem;

}

/*
.navbar-burger {
  color: white;
}
*/

/*
.navbar-item {
  color: #e8e8e8;
}


.navbar .navbar-item.is-active {
    color: #3529e3; 
    font-weight: 700;
}






@media screen and (min-width: 1024px) {
    a.navbar-item.is-active, .navbar-link.is-active {
        color: #ffffff;
	}
	
	.hero-container {
/*	    margin: 0 10%; */
/*    }
}


@media screen and (max-width: 1023px){
.navbar-menu {
    background-color: #938370;
    }
}
*/


@media screen and (min-width: 1024px){
  .navbar {
    min-height: 4.0rem;
   }
}



.filou-hero {
/*  padding: 0;
/*  min-height: 150px; */
    background-color: #775528;
	background: url("../bg/filou-theke-hero_05_2560px.jpg"); /* filou-theke-hero_02b_1920.jpg  20220211_170634_1920x1080_v2@60.jpg*/
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    color: #fff;
}

.hero-body img {
	margin-left: 2%;

}


.filou-hero-logo {
/*   margin-top: 13%; */
/*   margin-bottom: 12%; */
/*   margin-left: 7%; */
}

/* Ein DIV drehen und positionieren */
.rotated-8 {
   
   /* rotate */
   width: 160px;
   height: 50px;
   transform: rotate(-8deg);
  
   /* translate */
   position: relative;
   left: 50px;
   top: -20px;

/* background-color: transparent; */
/* outline: 2px dashed; */
/* box-shadow: 5px 0px 4px #555; */
}
/*  transform-origin: 0 0;       */ /* Drehpunkt ist obere linke Ecke  */
/*  transform-origin: 100% 0;    */ /* Drehpunkt ist obere rechte Ecke */
/*  transform-origin: 100% 100%; */ /* Drehpunkt ist untere reche Ecke */
/*  transform-origin: 50% 0;     */ /* Drehpunkt ist mitte oben        */
/*  transform-origin: 50% 50%    */ /* Drehpunkt zentral               */


/* Ein DIV drehen und positionieren */
.rotated-7 {
   
   /* rotate */
/*    width: 160px; */
/*    height: 50px; */
   transform: rotate(-7deg);
  
   /* translate */
   position: relative;
   left: 50px;
   top: -20px;
}


.rotated-5 {
   
/*    rotate */
/*    width: 160px; */
/*    height: 50px; */
   transform: rotate(-5deg);
  
   /* translate */
   position: relative;
/*   left: 50px;  */
/*   top: -50px;  */
}



.gruss {
	font-size: 1.2em;
    font-family: "FrankFehrholz Hand";
    color: #25609f;
   /* translate */
    position: relative;
    left: 50px;
    top: -20px;

/*   background: #da0000; /* red; */
/*   opacity: 0.9; */
}


.engrave {
   background: hsl(190,50%,80%);
   color:hsl(190,50%,80%);
   text-shadow: 
     -1px -1px 1px hsl(190,50%,90%), 
     1px 1px 1px hsl(190,50%,50%);
}


/* ersetzt .card aus bulma.css. Der Schatten wird zarter */
.card {
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.18);
  margin-bottom: 2rem;
}


/* margin könnte auch woanders stehen, ersetzt auch das von cards */
.is-shady {
    animation: flyintoright .4s backwards;
    background: #fff;
    box-shadow: rgba(0, 0, 0, .1) 0 1px 0;
    border-radius: 4px;
    display: inline-block;
    margin: 10px;
    position: relative;
    transition: all .2s ease-in-out;
}


.is-shady:hover {
box-shadow: 0 10px 16px rgba(0, 0, 0, .13), 0 6px 6px rgba(0, 0, 0, .19);
}



/* eventuell .card aus bulma ersetzen
.card {
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.18);
  margin-bottom: 2rem;
}
*/




@media screen and (min-width: 1024px){
.section.is-medium-more {
  padding: 13rem 5rem;
 }
}


.intro {
/*    background-image: url('#'); */
/*     background-size: cover; */
    background-color: var(--intro-bg);
/*  color: #000000; */
}


/*.saisonkarte img, */
 .kaffeeundkuchen img, .veranstaltungen img, .schnitzel img, .neues img {
    border-radius: 0.25rem;
    box-shadow: 0 0.5em 1em -0.125em rgba(10, 10, 10, 0.1), 0 0px 0 1px rgba(10, 10, 10, 0.02);
}




.neues {
/*    background-image: url('../bg/wood-s@40.jpg');  */
/*    background-size: cover;  */
/*    background-color: var(--neues-bg);  */
    color: #555555;
/* 	text-shadow: 1px 1px 4px #777   */
}


.neues .heading { margin-top: 15px; margin-bottom: 30px; text-align: center; }
.neues .heading .suptitle { font-size: 18px; font-weight: 600; line-height: 25px; }
.neues .heading .title { font-size: 30px; color: #333333; text-transform: none;}
.neues .heading .subtitle { font-size: 18px; color: #555555; line-height: 30px; font-family: "FrankFehrholz Hand"; }

@media (min-width: 1024px) {
  .neues .heading { margin-bottom: 60px; }
  .neues .heading .suptitle { font-size: 25px; line-height: 30px; }
  .neues .heading .title { font-size: 50px; line-height: 60px; }
  .neues .heading .subtitle { font-size: 25px; line-height: 60px; }
}



/***
.kaffeeundkuchen {
    background-image: url('../bg/hg_kuchen.jpg');
    background-size: cover; 
    background-color: var(--kaffeeundkuchen-bg);
/*  color: #fff; */
/* } */




/*
.schnitzel {
    background-color: var(--schnitzel-bg);
    background-image: url("../bg/hg-schnitzel.jpg");
    background-image: image-set(
      "../bg/hg-schnitzel.webp" type("image/webp"),
      "../bg/hg-schnitzel.jpg" type("image/jpeg")
    );
	background-size: cover;
}
*/



.schnitzel .heading { margin-top: 15px; margin-bottom: 30px; text-align: center; }
.schnitzel .heading .suptitle { font-size: 18px; font-weight: 600; line-height: 25px; }
.schnitzel .heading .title { font-size: 30px; color: #333333; text-transform: none;}
.schnitzel .heading .subtitle { font-size: 18px; color: #ff0000; line-height: 30px; font-family: "FrankFehrholz Hand"; }

@media (min-width: 1024px) {
  .schnitzel .heading { margin-bottom: 60px; }
  .schnitzel .heading .suptitle { font-size: 25px; line-height: 30px; }
  .schnitzel .heading .title { font-size: 50px; line-height: 60px; }
  .schnitzel .heading .subtitle { font-size: 25px; line-height: 60px; }
}

.schnitzel, .neues { 
     background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2VmZWZlZiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-size: 100%;
     background-color: rgb(255,255,255);
     background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #efefef), color-stop(100%, #ffffff));
     background-image: -moz-linear-gradient(top, #efefef, #ffffff);
     background-image: -webkit-linear-gradient(top, #efefef, #ffffff);
     background-image: linear-gradient(to bottom, #efefef, #ffffff);
}



.image-schnitzel {
	margin-top: 30px;
}




.tageskarte .heading { margin-top: 15px; margin-bottom: 30px; text-align: center; }
.tageskarte .heading .suptitle { font-size: 18px; font-weight: 600; line-height: 25px; }
.tageskarte .heading .title { font-size: 30px; text-transform: none;} /* als inline style ausgelagert   color: #333333; */
.tageskarte .heading .subtitle { font-size: 18px; color: #555555; line-height: 30px; font-family: "FrankFehrholz Hand"; }

@media (min-width: 1024px) {
  .tageskarte .heading { margin-bottom: 60px; }
  .tageskarte .heading .suptitle { font-size: 25px; line-height: 30px; }
  .tageskarte .heading .title { font-size: 50px; line-height: 60px; }
  .tageskarte .heading .subtitle { font-size: 25px; line-height: 60px; }
}


.schnitzel-2 .heading { margin-top: 15px; margin-bottom: 30px; text-align: center; }
.schnitzel-2 .heading .suptitle { font-size: 18px; font-weight: 600; line-height: 25px; }
.schnitzel-2 .heading .title { font-size: 30px; text-transform: none;} /* als inline style ausgelagert   color: #333333; */
.schnitzel-2 .heading .subtitle { font-size: 18px; color: #555555; line-height: 30px; font-family: "FrankFehrholz Hand"; }

@media (min-width: 1024px) {
  .schnitzel-2 .heading { margin-bottom: 60px; }
  .schnitzel-2 .heading .suptitle { font-size: 25px; line-height: 30px; }
  .schnitzel-2 .heading .title { font-size: 50px; line-height: 60px; }
  .schnitzel-2 .heading .subtitle { font-size: 25px; line-height: 60px; }
}





/* verlegt als inline-style zur vereinfachten Änderung */
/*.saisonkarte {   */
/*  background-image: url('../bg/wood-s@40.jpg');  */
/*    background-image: url('../bg/pic_2952_1280x1080.jpg');
    background-size: cover;
    background-color: var(--saisonkarte-bg);
    color: #555555;
/* 	text-shadow: 1px 1px 4px #777   */
/*}  */

/*
.saisonkarte  h2, .saisonkarte p {
	color: #fff;
    text-shadow: 1px 1px 3px rgba(48, 27, 8, 0.7);
}
*/

.saisonkarte .heading { margin-top: 15px; margin-bottom: 30px; text-align: center; }
.saisonkarte .heading .suptitle { font-size: 18px; font-weight: 600; line-height: 25px; }
.saisonkarte .heading .title { font-size: 30px; text-transform: none;} /* als inline style ausgelagert   color: #333333; */
.saisonkarte .heading .subtitle { font-size: 18px; color: #555555; line-height: 30px; font-family: "FrankFehrholz Hand"; }

@media (min-width: 1024px) {
  .saisonkarte .heading { margin-bottom: 60px; }
  .saisonkarte .heading .suptitle { font-size: 25px; line-height: 30px; }
  .saisonkarte .heading .title { font-size: 50px; line-height: 60px; }
  .saisonkarte .heading .subtitle { font-size: 25px; line-height: 60px; }
}


.content.saison figure {
  margin: 0;
}


.delicious {
/*     background-image: url('../../images/wood-s.jpg'); */
/*     background-size: cover; */
    background-color: var(--delicious-bg);
/*  color: #fff; */
}


/* Personalsuche
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.personalsuche {
/*  background-image: url('../images/personalsuche-bg.jpg'); background-size: cover;*/
/*  background-color: #FC6B1E;*/
/*  background-color: #FF6E00;*/ /*kräftig rotorange*/
  background-color: #FFAE07; /*kräftig gelboranger*/
/*    color: #fff;*/
  color: #000000;
  padding-bottom: 8rem;
}

.centerpersonal {
    margin-left: auto;
    margin-right: auto;
/*    max-width: 35em; */
    max-width: 40em; 
} 



.veranstaltungen {
/*  background-image: url('../bg/hg_buffett.jpg'); */
    background-image: url('../bg/hg_veranstaltung.jpg');
    background-size: cover;
    background-position: center;
    background-color: var(--veranstaltungen-bg);
    color: #fff;
}



.veranstaltungen .heading { margin-top: 15px; margin-bottom: 30px; text-align: center; }
.veranstaltungen .heading .suptitle { font-size: 18px; font-weight: 600; line-height: 25px; }
.veranstaltungen .heading .title { font-size: 30px; color: #ffffff; text-transform: none;}
.veranstaltungen .heading .subtitle { font-size: 18px; color: #ff0000; line-height: 30px; font-family: "FrankFehrholz Hand"; }

@media (min-width: 1024px) { .veranstaltungen .heading { margin-bottom: 60px; }
  .veranstaltungen .heading .suptitle { font-size: 25px; line-height: 30px; }
  .veranstaltungen .heading .title { font-size: 50px; line-height: 60px; }
  .veranstaltungen .heading .subtitle { font-size: 25px; line-height: 60px; }
}



.features {
  padding: 5rem 0;
}


.offen {
    background-color: var(--offen-bg);
    background-image: url('../bg/hintergrund-offen.jpg');
	background-size: cover;
	color: #333;
/*  	background-attachment: fixed; */
}





.card {
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.18);
  margin-bottom: 2rem;
}