/* 
    Created on : 04.12.2023, 12:32:08
    Author     : Markus Breitschuh
*/

/**
* @license
*
* Font Family: Clash Display
* Designed by: Indian Type Foundry
* URL: https://www.fontshare.com/fonts/clash-display
* © 2024 Indian Type Foundry
*
* Clash Display Extralight 
* Clash Display Light 
* Clash Display Regular 
* Clash Display Medium 
* Clash Display Semibold 
* Clash Display Bold 

*
*/
@font-face {
  font-family: 'ClashDisplay';
  src: url('../fonts/ClashDisplay-Extralight.woff2') format('woff2'),
       url('../fonts/ClashDisplay-Extralight.woff') format('woff'),
       url('../fonts/ClashDisplay-Extralight.ttf') format('truetype');
  font-weight: 200;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: 'ClashDisplay';
  src: url('../fonts/ClashDisplay-Light.woff2') format('woff2'),
       url('../fonts/ClashDisplay-Light.woff') format('woff'),
       url('../fonts/ClashDisplay-Light.ttf') format('truetype');
  font-weight: 300;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: 'ClashDisplay';
  src: url('../fonts/ClashDisplay-Regular.woff2') format('woff2'),
       url('../fonts/ClashDisplay-Regular.woff') format('woff'),
       url('../fonts/ClashDisplay-Regular.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: 'ClashDisplay';
  src: url('../fonts/ClashDisplay-Medium.woff2') format('woff2'),
       url('../fonts/ClashDisplay-Medium.woff') format('woff'),
       url('../fonts/ClashDisplay-Medium.ttf') format('truetype');
  font-weight: 500;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: 'ClashDisplay';
  src: url('../fonts/ClashDisplay-Semibold.woff2') format('woff2'),
       url('../fonts/ClashDisplay-Semibold.woff') format('woff'),
       url('../fonts/ClashDisplay-Semibold.ttf') format('truetype');
  font-weight: 600;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: 'ClashDisplay';
  src: url('../fonts/ClashDisplay-Bold.woff2') format('woff2'),
       url('../fonts/ClashDisplay-Bold.woff') format('woff'),
       url('../fonts/ClashDisplay-Bold.ttf') format('truetype');
  font-weight: 700;
  font-display: swap;
  font-style: normal;
}


/* cantarell-regular - latin */
@font-face {
  font-display: swap;
  font-family: 'Cantarell';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/cantarell-v17-latin-regular.woff2') format('woff2'), 
       url('../fonts/cantarell-v17-latin-regular.ttf') format('truetype'); 
}

/* cantarell-italic - latin */
@font-face {
  font-display: swap; 
  font-family: 'Cantarell';
  font-style: italic;
  font-weight: 400;
  src: url('../fonts/cantarell-v17-latin-italic.woff2') format('woff2'), 
       url('../fonts/cantarell-v17-latin-italic.ttf') format('truetype'); 
}

/* cantarell-700 - latin */
@font-face {
  font-display: swap; 
  font-family: 'Cantarell';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/cantarell-v17-latin-700.woff2') format('woff2'), 
       url('../fonts/cantarell-v17-latin-700.ttf') format('truetype'); 
}

/* cantarell-700italic - latin */
@font-face {
  font-display: swap; 
  font-family: 'Cantarell';
  font-style: italic;
  font-weight: 700;
  src: url('../fonts/cantarell-v17-latin-700italic.woff2') format('woff2'), 
       url('../fonts/cantarell-v17-latin-700italic.ttf') format('truetype'); 
}




:root {
    --bs-primary: #000000;
    --bs-primary-rgb: 0,0,0;
    --bs-secondary: #e86c4f;
    --bs-secondary-rgb: 232,108,79;
    --bs-link-color: rgb(var(--bs-highlight-rgb));
    --bs-link-hover-color: var(--bs-highlight-bg);
    --bs-font-sans-serif: Cantarell,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
.btn-outline-warning {
    --bs-btn-hover-bg: var(--bs-warning);
    --bs-btn-hover-border-color: var(--bs-warning);
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: ClashDisplay;
}
h1, h2 {
    font-weight: 200;
}

.btn {
    --bs-btn-border-radius: 3rem;
    text-transform: uppercase;
    padding: 0.4em 2em 0.5em;
}
.vh-50 {
    min-height: 50vh;
}



header {
/*    background-image: linear-gradient(0deg, white 50%, black 50%);*/
    background-color: white;
}
header .logo {
    mix-blend-mode: difference;
    top: 40% !important;
}
header .more {
    position: absolute;
    width: calc(100vw - var(--bs-gutter-x));
    bottom: 20%;
}
header .btn {
    background-color: rgba(255,255,255,0.7);
    box-shadow: white 0px 0px 10px;
}
header .btn:hover,
header .btn:active,
header .btn:focus {
    background-color: rgba(0,0,0,0.5);
}

#hotnews {
    position: absolute;
    width: 11rem;
    height: auto;
    right: -3rem;
    top: 12vh;
    rotate: 8deg;
    background-color: var(--bs-secondary);
    box-shadow: rgba(0,0,0,0.4) 3px 8px 12px 0px;
    transition: all 0.2s;
}
#hotnews:hover {
    rotate: 6deg;
    right: -3.5rem;
    box-shadow: rgba(0,0,0,0.3) 3px 3px 6px 0px;
}
#hotnews a {
    display: block;
    font-weight: bold;
    text-decoration: none;
    position: relative;
    height: 100%;
    padding: 0.8rem 1rem 0.9rem;
    letter-spacing: 0.1rem;
    opacity: 0.7;
    line-height: 1;
}


article h2 {
    font-size: calc(1.375rem + 2vw) !important;
    letter-spacing: 2rem;
    padding-left: 2rem;
    line-height: 2;
}
p {
    hyphens: auto;
}
p a:not(.btn) {
    text-decoration: none;
}
p a:not(.btn):hover,
p a:not(.btn):focus,
p a:not(.btn):active {
    color: inherit;
    text-decoration: underline;
}


.bg-image {
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    overflow: hidden;
}

header.bg-image {
    background-image: url('../img/bg-table-light.jpg');
}

.bg-image.bg-black {
    background-image: url('../img/bg-italianfood-dark.jpg');
}

.bg-image.bg-white {
    background-image: url('../img/bg-italianfood-light.jpg');
}

#newsletter h2,
#jobs h2 {
    letter-spacing: 2rem;
    padding-left: 2rem;
    line-height: 2;
    font-weight: 500;
}

#reservierung,
#gutscheine {
    background-color: #004240 !important;
}
#reservierung h2,
#gutscheine h2 {
    letter-spacing: 0.6rem;
    line-height: 1.3;
    font-weight: 200;
}

#jobs {
    padding-top: 5em;
    padding-bottom: 6em;
}
#jobs h3,
#jobs h4 {
    letter-spacing: 0.5rem;
    padding-left: 0.5rem;
    line-height: 1.4;
    font-weight: 400;
}
#jobs h5 {
    font-family: Cantarell;
    font-weight: 700;
}
#jobs hr {
    width: 10rem;
    margin: 5rem auto;
    display: block;
    border: none;
    opacity: 1;
}
#jobs hr:before {
    content: "";
    display: block;
    width: 10em;
    height: 1.5em;
    line-height: 1.25;
    border-bottom: 1px solid #00000026;
}
#jobs hr:after {
    content: "";
    position: relative;
    display: block;
    width: 10rem;
    height: 2rem;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    background-image: url('../img/tomate.png');
    top: -1.15rem;
}

footer {
    font-size: 0.85rem;
}
footer abbr[title] {
    text-decoration: none;
}
footer a {
    opacity: 0.5;
}
footer a:hover,
footer a:focus,
footer a:active {
    opacity: 1;
}
footer .btn-link {
    padding: 0 0.5em;
}
footer h1 {
    font-weight: 400;
    letter-spacing: 0.2rem;
}
footer #mod_impressum h3 {
    font-weight: 300;
}
footer #mod_datenschutz h3 {
    font-weight: 500;
    letter-spacing: 0.3rem;
}

.cc-nb-okagree,
.cc-nb-reject,
.cc-cp-foot-save {
	background-color: var(--bs-primary) !important;
}
.cc-nb-okagree:focus,
.cc-nb-reject:focus,
.cc-nb-changep:focus,
.cc-cp-foot-save:focus,
.cc-pc-head-close:focus,
.freeprivacypolicy-com---palette-dark .cc-cp-foot-byline a:focus,
.freeprivacypolicy-com---palette-dark .cc-pc-head-lang select:focus,
.freeprivacypolicy-com---palette-dark .cc-cp-body-content-entry a:focus {
  box-shadow: 0 0 0 2px red !important;
  border-style: none !important;
}
.cc-pc-head-lang-select {
	padding: .4rem 1rem !important;
	font-size: 75% !important;
}
/*.cc-cp-body-tabs-item:nth-child(3),*/
.cc-cp-body-tabs-item:nth-child(5) {
	display: none !important;
}
.cc-pc-head-lang {
	min-height: 2.5em !important;
}
.cc-cp-foot-byline {
	font-size: 8px !important;
}
.freeprivacypolicy-com---palette-dark p,
.freeprivacypolicy-com---palette-dark button {
	font-size: 85% !important;
}
.freeprivacypolicy-com---palette-dark button.cc-cp-body-tabs-item-link {
	font-size: 75% !important;
}
.freeprivacypolicy-com---palette-dark .cc-nb-title {
	font-weight: 700 !important;
}

.icon {
    display: inline-block;
    width: 32px;
    height: 32px;
    border-radius: 16px;
    background-color: white;
    background-size: 62%;
    background-repeat: no-repeat;
    background-position: center center;
    position: relative;
    top: 0.15rem;
    margin: 0 0.2em;
}
.ig .icon {
	background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2f%2fwww.w3.org%2f2000%2fsvg%22%20viewBox%3D%220%200%2031.999999%2031.999999%22%20height%3D%2232%22%20width%3D%2232%22%3E%3Cpath%20d%3D%22M9.51%2031.933c-2.427-.126-4.23-.643-5.683-1.627-.55-.373-1.505-1.296-1.938-1.87-.754-1-1.354-2.474-1.605-3.943C.068%2023.225%200%2021.195%200%2016.013c0-6.81.1-8.325.668-10.02.474-1.417%201.104-2.42%202.153-3.427.96-.92%201.838-1.443%203.176-1.89C7.676.112%209.204.01%2016%20.01c6.796%200%208.325.1%2010.004.663%201.338.448%202.216.97%203.175%201.89%201.048%201.01%201.678%202.01%202.152%203.43C31.9%207.687%2032%209.2%2032%2016.01s-.1%208.324-.668%2010.018c-.474%201.418-1.104%202.42-2.153%203.428-.96.92-1.838%201.443-3.176%201.89-.994.334-2.077.503-3.754.59-1.647.085-11.073.08-12.74-.005zm12.385-2.868c2.558-.125%203.825-.484%204.967-1.408%201.244-1.007%201.895-2.4%202.13-4.557.138-1.264.138-12.912%200-14.176-.235-2.16-.88-3.54-2.134-4.563-.888-.724-2.11-1.16-3.77-1.34-1.264-.138-12.912-.138-14.176%200-1.66.18-2.882.616-3.77%201.34-1.253%201.024-1.9%202.404-2.134%204.564-.138%201.267-.138%2012.913%200%2014.176.216%201.966.712%203.17%201.723%204.182%201.187%201.186%202.544%201.65%205.2%201.78%201.59.077%2010.406.08%2011.965.004zM14.56%2024.11c-3.403-.608-6.076-3.304-6.663-6.72-.437-2.542.37-5.176%202.152-7.034.717-.747%201.296-1.184%202.158-1.63%202.402-1.243%205.182-1.243%207.584%200%203.156%201.632%204.913%205.163%204.31%208.663-.59%203.445-3.28%206.133-6.725%206.725-.765.132-2.063.13-2.816-.006zm2.808-2.94c.61-.165%201.478-.61%201.98-1.018.84-.68%201.53-1.745%201.82-2.807.172-.63.172-2.037%200-2.666-.405-1.492-1.45-2.766-2.817-3.437-.85-.417-1.328-.524-2.35-.524s-1.5.106-2.35.523c-1.06.52-1.9%201.358-2.42%202.418-.353.723-.49%201.244-.54%202.074-.16%202.59%201.63%204.92%204.227%205.5.6.134%201.837.102%202.45-.064zm6.688-11.85c-.983-.274-1.6-1.262-1.394-2.228.093-.436.16-.56.48-.916.724-.802%201.987-.83%202.756-.062.57.57.724%201.512.362%202.22-.17.332-.635.774-.958.91-.35.145-.88.18-1.246.077z%22%20fill%3D%22%23000000%22%2f%3E%3C%2fsvg%3E");
}
.nl .icon {
	background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20height%3D%22800%22%20width%3D%22800%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2075.3%2075.3%22%20xml%3Aspace%3D%22preserve%22%3E%3Cpath%20d%3D%22M66.1%2012H9.2c-5%200-9.2%204.2-9.2%209.3V54c0%205%204.1%209.2%209.2%209.2h56.9c5%200%209.2-4.1%209.2-9.2V21.3c0-5-4.1-9.2-9.2-9.2zm-4.5%206-24%2015.5-24-15.4h48zm4.5%2039.2H9.2A3.2%203.2%200%200%201%206%2054V21.5l29.8%2019.1h.1l.2.2.7.2.8.1h.9a3.5%203.5%200%200%200%20.9-.4h.1l29.8-19.2V54c0%201.8-1.4%203.2-3.2%203.2z%22%2F%3E%3C%2Fsvg%3E")
}


@media (orientation: portrait) {
    header .w-50 {
        width: 75% !important;
    }
}

@media (max-width: 720px) {
    article h2,
    #newsletter h2 {
        letter-spacing: 1rem;
        padding-left: 1rem;
        hyphens: auto;
    }
}

@media (max-width: 480px) {
    .ew-mw-100 {
        min-width: 100% !important;
    }
    article h2,
    #newsletter h2 {
        letter-spacing: 0.5rem;
        padding-left: 0.5rem;
    }
}

@media (orientation: landscape) and (max-height: 480px) {
    body {
        --bs-body-font-size: 0.8rem;
    }
    .btn {
        --bs-btn-font-size: 0.8rem;
    }
    .mt-5 {
        margin: 1.5rem !important;
    }
    
    header > div.w-75 {
        max-width: 25%;
    }
    header .more {
        bottom: 15%;
    }
    article h2,
    #newsletter h2 {
        font-size: calc(1.375rem + 1vw) !important;
        line-height: 1.75;
    }
    
    #newsletter .translate-middle { transform: none !important; }
    #newsletter .start-50 { left: auto !important; margin-left: 12.5%; }
    #newsletter .position-absolute { position: relative !important; }
}