/* ----------------------------------------------------------------
	Custom CSS

	Add all your Custom Styled CSS here for New Styles or
	Overwriting Default Theme Styles for Better Handling Updates
-----------------------------------------------------------------*/
:root {
    --bs-primary: #e3000f;
	--bs-primary2: #cb0f05;
	--bs-getraenk: #172983;
}
/*Position plan IT Logo*/
#copyrights p.planit a.logo {transform: translate(0px, 5px);}


/*Social Media Icons */
.icon-facebook:before {font-size: 230% !important;}
.icon-youtube:before {content: url("../images/youtube.svg"); transform: translate(-1px, -1px);}

/*Scharfes Sliderbild */
@media (min-width: 1800px) {
.header-image .img-fluid {min-width: 1920px;}
}


/*Mobilmenü: Kompletter Navigationspunt (komplette Breite) klappt Subnavigation aus */
/*@media (max-width: 991px) {
#mainnav .mobile-toggle, #mainnav .mobile-toggle.openmenu {
	width: 100% !important;
	z-index: 2;
    pointer-events: auto;}
	
#mainnav .nav .dropdown-toggle {width: 0px;
    position: absolute;
    z-index: 1;
    pointer-events: none;}
	
}*/

.section-title h2 {color: #fff;}

#header:not(.scrolled), #top-bar:not(.scrolled) {background-image: linear-gradient(45deg, #fff, transparent) !important;}

#speisekarte, #rechtliches {background-image:url(../images/hintergrund-kebaphaus.jpg); background-attachment:fixed; background-size: 1920px; background-repeat: no-repeat; margin-top: -16px;}
.blur {
    backdrop-filter: blur(5px);
    margin: -48px 0;
	padding: 48px 0;
}

#speisekarte .row, #rechtliches .row {margin-bottom: 50px;}

section a[href$=".pdf"] {
    background-image: url(../images/pdf-file.svg);
    background-repeat: no-repeat;
    background-position: left center;
    background-size: 24px;
    padding-left: 26px;
    min-height: 24px;
    display: inline-block;
    width: fit-content;
    margin-right: 16px;
	transition:all .2s ease;}
	
section a[href$=".pdf"]:hover {opacity: .75;}

table {width: 100%;}

table tr:nth-child(odd) {background-color: rgba(0,0,0,.025)}

table td:not(.untertitel):last-child, table th:nth-child(2) {text-align: right;}

td.preis, td.gerichtnummer, td.gerichtname {font-weight: 900;}
td.gerichtname sup, .beilagen {font-weight: 300;}

span.klein, span.beilagen, table th:nth-child(2)  {font-size: 80%;}
td.gerichtname sup {color: var(--bs-getraenk)}
.beilagen {color: var(--bs-primary); font-style: italic; display: inline-block;}
table.speisekarte, table.speisekarte td:not(sup) {vertical-align: top; line-height: 1.2;}

table.speisekarte, div.zusatzstoffe {background-color: rgba(255,255,255,.95);}

div.zusatzstoffe {padding: 15px;}

table.speisekarte tbody {
    break-inside: avoid-column;
}
table.speisekarte td, table.speisekarte th {padding: 5px 5px;}

table.speisekarte th {color:#fff;}
th.essen, th.trinken {text-transform:uppercase;}

th.essen, th {background-color: var(--bs-primary);}

th.trinken {background-color: var(--bs-getraenk);}

td.untertitel {text-align:center;}

@media (min-width: 992px) {
.column-3 {column-count: 3; column-gap: 24px;}
.column-3 table.speisekarte {display: grid;}
.column-3 table.speisekarte tbody {
	display: inline-table;
    width: 100%;}
}



h3.modell {margin-bottom: 0;}

img.hersteller-logo {width: auto; height: 50px;}

figure.header-image {max-height: 100vh;}

#top-bar:not(.scrolled) .top-links a span, #top-bar:not(.scrolled) .top-links a:before {color: #fff;}



img.kontaktperson {    max-width: 250px;
    border-radius: 100%;
    margin-right: 25px;}
	
#copyrights p.planit {
    float: right;
    text-align: left;
    line-height: 25px;
}

#copyrights p.planit span {
    line-height: 25px;
    display: inline-block;
    vertical-align: top;
}

#copyrights p.planit a.logo {
    content: url(../images/planit-white.svg);
}

#copyrights p.planit a.logo {
    transform: translate(0px, 5px);
}

#copyrights p.planit a.logo {
    text-align: left;
    text-indent: -9999px;
    content: url(../images/planit-black.svg);
    position: relative;
    height: 25px;
    margin-left: 1rem;
}


#start .header-image figcaption .row > div > * {}

#start .header-image figcaption .row > div * {width: fit-content; color: #fff;}
#start .header-image figcaption .row > div > * {filter: drop-shadow(2px 4px 6px black);}

#start .header-image figcaption .row > div p {background-color:var(--bs-primary); padding: 5px 15px; border-radius: 5px;}

h1 {
    font-size: 1rem;
	font-weight: 300;
}

#start .header-image figcaption .row > div p {font-size: 1.5rem; font-weight: 900;}

#start .header-image figcaption .row > div p, h1 {margin:auto; text-align:center;}

a.telefon {
    background-image: url(../images/telefon-logo-weiss.svg);
    background-size: 28px;
    background-repeat: no-repeat;
    background-position: 7.5px center;
    padding-left: 42px;
}

/*rechtliches */

#rechtliches {
    padding-top: 166px !important;
}


#rechtliches h1 {
    font-size: 3rem;
    font-weight: 400;
}
#rechtliches .container{
background-color: rgba(255,255,255,.95);
}

#rechtliches .container {
    background-color: rgba(255,255,255,.95);
    padding: 30px;
}

#rechtliches .container ul {padding-left: 20px;}

@media (max-width: 1199px) {
	#top-bar {height: 0px ;
    min-height: unset !important;
    visibility: hidden;}
	
	#top-bar * {display: none;}
}


@media (min-width: 768px) {
.kontakt {display: flex;}
}

@media (max-width: 1000px) AND (min-width: 768px) {
	img.kontaktperson {
    max-width: 145px;}
	
}


@media (max-width: 575px) AND (min-width: 400px) {

	#start .header-image .img-fluid {height: auto;}

}

@media (max-width: 768px) {
	/*h1 {font-size: 3.5rem;}*/
	#start .header-image figcaption .row > div > * {
    margin: auto;
    display: block;}
	
}

@media (max-width: 396px) {
	.mieten-button {display: none;}
}