/* @font-face {
    font-family: pacifico;
    src: url("Pacifico-Regular.ttf");
} */

/* @font-feature-values "pacifico" {
    @swash {
        fancy: 3;
    }
} */

/* @font-face {
    font-family: dincondbold;
    src: url("DIN-Condensed-Bold.ttf");
} */

/* latin-ext */
@font-face {
    font-family: 'Pacifico';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    --src: url(https://fonts.gstatic.com/s/pacifico/v22/FwZY7-Qmy14u9lezJ-6J6MmTpA.woff2) format('woff2');
    src: url('/Pacifico-latin-ext-FwZY7-Qmy14u9lezJ-6J6MmTpA.woff2') format('woff2');
    unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
    font-family: 'Pacifico';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/Pacifico-latin-FwZY7-Qmy14u9lezJ-6H6Mk.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'DIN Condensed Web';
    src: url('DIN-Condensed-Web-69dbc1186412d7831b88d8a78a360360.woff2') format("woff2");
}

@font-face {
    font-family: 'D-DIN';
    src: url('D-DIN-97294bc26984beb9185137b039854f9b.woff2') format("woff2");
}

@font-face {
    font-family: 'DM Sans';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('dm-sans-400-regular-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'DM Sans';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('dm-sans-400-regular-latinext.woff2') format('woff2');
    unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

body,
html,
p,
a,
img,
div,
span,
h1,
h2,
h3,
h4 {
    margin: 0;
    padding: 0;
    border: 0;
}

a {
    color: inherit;
    text-decoration: underline;
}

a:visited {
    color: inherit;
}

a:hover {
    color: inherit;
}

body {
    font-family: 'DM Sans';
    font-weight: 400;
    font-style: normal;
    font-size: 20pt;
    background: #fef6d2;
    background: url('bkg-flyer.svg') top left/ 100% repeat-y;
}

.colconts0 {
    /* display: contents; */
    --background: url('bkg-flyer.svg') left/ 100% repeat-y;
    --background: url('bkg-flyer.svg') repeat;
    --background: red;
}

.pacifico-stroke-1 {
    -webkit-text-fill-color: #d32000;
    -webkit-text-stroke-width: 6pt;
    -webkit-text-stroke-color: #d32000;
}

.pacifico-stroke-2 {
    -webkit-text-fill-color: #d37000;
    -webkit-text-stroke-width: 0pt;
    -webkit-text-stroke-color: #d37000;
}

.pra {
    display: none;
    position: relative;
    transform: rotate(10deg);
    background-color: yellow;
    border: 1px solid black;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    font-family: Pacifico;
    font-size: 80pt;
}

.pra1 {
    position: absolute;
    left: 0pt;
    top: 0pt;
}

.pra2 {
    position: absolute;
    left: 0pt;
    top: 0pt;
}

.cgrid {
    display: grid;
    grid-template-columns: auto 800pt auto;
    --transform: rotate(-1.3deg);
}

.cgrid .toplogo {
    grid-row: 1;
    grid-column: 2;
    background: url('bkg-flyer-tall-1.png');
    background-size: 100%;
    background-position: 0 -17pt;
    text-align: center;
}

.cgrid .toplogo img {
    padding: 0;
    padding-top: 0pt;
    margin: 20pt auto 20pt auto;
    border: none;
    width: 70%;
    /* height: 100%; */
}

.cgrid .topspace {
    grid-row: 1;
    grid-column: 2;
    height: 30pt;
    background-color: #f5f5dcc9;
}

.cell0 {
    position: static;
    width: 100%;
    grid-row: 2;
    grid-column: 2;
    text-align: center;
    font-family: Pacifico;
    font-size: 60pt;
    line-height: 100pt;
    background-color: #f5f5dcc9;
}

.stroke1 {
    width: 100%;
    position: absolute;
    --top: 0;
    left: 0;
    -webkit-text-fill-color: #000000;
    -webkit-text-stroke-width: 0pt;
    -webkit-text-stroke-color: #000000;
}

.stroke2 {
    width: 100%;
    --position: absolute;
    -webkit-text-fill-color: #ffffff;
    -webkit-text-stroke-width: 12pt;
    -webkit-text-stroke-color: #ffffff;
}

.xxl {
    font-size: 160%;
}

.row2col1 {
    grid-row: 3;
    grid-column: 2;
    text-align: center;
    font-family: 'DIN Condensed Web';
    font-size: 50pt;
    --padding-top: 0pt;
    background-color: #f5f5dcc9;
}

.subtit-main {
    width: 100%;
}

.subtit-stroke1 {
    width: 100%;
    position: absolute;
    left: 0;
    color: #000000;
    white-space: nowrap;
    text-transform: uppercase;
}

.subtit-stroke2 {
    width: 100%;
    --position: absolute;
    -webkit-text-fill-color: #ffffff;
    -webkit-text-stroke-width: 10pt;
    -webkit-text-stroke-color: #ffffff;
    white-space: nowrap;
    text-transform: uppercase;
}

canvas.bkg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    --z-index: 1;
    --border: 1px solid black;
}

div.cgrid div.menu {
    display: grid;
    grid-template-columns: auto 160pt 160pt 160pt 220pt auto;
    text-transform: uppercase;
    padding-bottom: 20pt;
    color: black;
    font-family: 'DIN Condensed Web';
    font-weight: bold;
    font-size: 120%;
    /* background-color: #f5f5dcc9; */
}

div.cgrid div.menu .menuitem {
    background: rgb(255, 255, 255);
    margin: 5pt;
    padding: 5pt;
    /* padding-top: 10pt; */
    width: 130pt;
    text-align: center;
    box-shadow: 0px 0px 8pt rgb(0 0 0 / 40%);
}

div.cgrid div.menu a {
    text-decoration: none;
}

.cgrid .contents {
    grid-row: 2;
    grid-column: 2;
    color: black;
    /* font-family: 'DM Sans'; */
    /* font-weight: bold; */
    background-color: rgba(255, 255, 243, 0.84);
}

div.cgrid h2 {
    margin: 32pt 20pt 10pt 20pt;
    font-family: 'DIN Condensed Web';
    /* font-family: 'D-DIN'; */
    font-weight: bold;
    font-size: 200%;
    text-transform: uppercase;
    /* color: black; */
}

div.cgrid h2.invert {
    position: relative;
    left: -6pt;
    color: white;
}

div.cgrid h2.invert span {
    background-color: rgb(231, 78, 91);
    padding: 10pt 20pt 4pt 6pt;
}

div.cgrid h3 {
    margin: 16pt 20pt 16pt 20pt;
    font-family: 'DIN Condensed Web';
    /* font-family: 'D-DIN'; */
    font-weight: bold;
    font-size: 160%;
    /* text-transform: uppercase; */
    /* color: black; */
}

div.cgrid h3.dj {
    margin-top: 50pt;
}

div.cgrid h3.djA {
    /* margin-left: 40pt; */
}

div.cgrid h3.djB {
    /* margin-left: 60pt; */
}

div.cgrid h3.djC {
    /* margin-left: 80pt; */
}

div.cgrid p.dj img {
    max-width: 500pt;
    box-shadow: 0pt 0pt 8pt rgba(0, 0, 0, 0.2);
}

div.cgrid p.dj {
    margin-top: 0pt;
    margin-bottom: 0pt;
}

div.cgrid p.djcp {
    margin-top: 10pt;
}

div.cgrid p {
    line-height: 160%;
    margin: 16pt 20pt 16pt 20pt;
}

div.programm {
    display: grid;
    grid-template-columns: 20% 79%;
    grid-template-columns: 100%;
}

div.programm div.dayname {
    grid-column: 1;
    width: 94%;
    margin: 40pt auto 20pt auto;
    padding: 10pt;
    text-transform: uppercase;
    font-size: 220%;
    font-weight: bold;
    text-align: center;
    border: 6pt solid black;
    border-radius: 12pt;
}

.programm .dayname span {
    font-size: 40%;
    line-height: 10pt;
}

.dayname.col1 {
    background-color: rgb(239, 255, 208);
}

.dayname.col2 {
    background-color: rgb(255, 236, 255);
}

.dayname.col3 {
    background-color: rgb(255, 243, 190);
}

div.programm div.daydesc {
    grid-column: 1;
}

div.programm div.daydesc.brd {
    width: 96%;
    margin: 20pt auto 0 auto;
    border: 2pt solid black;
    border: 6pt solid black;
    border-radius: 12pt;
}

div.programm div.daydesc.brd h3 {
    margin: 20pt 20pt 10pt 20pt;
    font-size: 200%;
    font-weight: bold;
    font-style: normal;
}

div.programm p {
    line-height: 150%;
    margin: 14pt 20pt 16pt 20pt;
}

div.programm div.dayname p {
    font-weight: bold;
}

div.programm ul {
    margin-left: 25pt;
}

div.programm p.shortdesc {
    font-weight: bold;
    font-size: 140%;
}

.contents ul {
    margin-left: 30pt;
}

.contents ul li {
    margin-top: 7pt;
    line-height: 140%;
}

.contents ol {
    margin-left: 30pt;
}

.contents ol li {
    margin-top: 7pt;
    line-height: 140%;
}

div.cgrid p.package-desc {
    margin-top: 30pt;
    font-size: 140%;
    font-weight: bold;
    /* text-transform: uppercase; */
}

div.cgrid p.package-notemark {
    margin-top: 46pt;
    font-size: 120%;
    font-weight: bold;
}

div.pricetag {
    margin-top: 7pt;
    font-weight: bold;
    font-size: 90%;
}

div.videodiv {
    margin: 20pt auto 20pt auto;
    width: 90%;
}

.flyers {
    width: 94%;
    margin: 10pt auto 10pt auto;
    display: grid;
    grid-template-columns: 25% 25% 25% 25%;
    gap: 4pt;
}

.flyers .flyer img {
    width: 100%;
}

div.anmeldungbuttonouter {
    display: none;
    position: relative;
    /* border: 2pt solid yellow; */
}

div.anmeldungbutton {
    position: absolute;
    width: 200pt;
    height: 200pt;
    /* top: 0; */
    right: 0%;
    /* border: 4pt solid red; */
}

.cgrid .toplogo div.anmeldungbutton img {
    margin: 0;
    padding: 0;
    width: 100%;
}

div.programm li a.taster-more {
    /* font-weight: bold; */
    font-size: 80%;
    margin-left: 4pt;
}

.programm .daydesc .tastertime {
    padding-left: 30pt;
    margin-top: 40pt;
    margin-bottom: 2pt;
}

div.cgrid h2.taster-title {
    margin-top: 60pt;
}