@import url(https://use.typekit.net/txf4ywj.css); :root {
--blue-dark: #16103f; 
--blue-main: #0B3F63; 
--blue-lightest: #e5eaef;
--blue-lighter: #4AA4AF;
--blue-light: #448196; 
--yellow: #F8E83C; 
--red: #EE3E43;
--h1: 48px;
--h2: 32px;
--h3: 28px;
--h4: 24px;
--h5: 20px;
--h6: 18px;
--font-nav: 20px;
--font-normal: 16px;
--medium: 16px;
--small: 14px;
--std: 30px;
--font-primary: "neuzeit-grotesk", Arial, sans-serif;
}
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, img, ins, kbd, q, s, samp,
small, strike, tt, var, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
} article, details, figcaption, figure, 
header, hgroup, menu, nav,  {
display: block;
}
body{
color: var(--blue-dark);
background: white;
font-size: var(--font-normal);
font-family: var(--font-primary);
line-height: 1.2;
-webkit-animation-name: fontfix;
-webkit-animation-duration: 0.2s;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: linear;
font-stretch: ultra-expanded !important;
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
}
p {font-size: var(--font-normal);
line-height: 1.2;
margin: 0 0 20px 0;
padding: 0 }
img {display: inline-block;}
h1, h2, h3, h4, h5, h6 {
color: var(--blue-dark);
font-family: var(--font-primary);
font-weight: bold;
line-height: 1;
} 
ol, ul {list-style: none;}
p ul { margin-bottom: 20px;}
P li:before {
content: "• ";
margin: 0 5px 0 25px;}
::selection, ::-moz-selection { background: var(--accent-light); color: #fff; }
table {border-collapse: collapse;
border-spacing: 0;}
*{ -webkit-hyphens: none;
-moz-hyphens: none;
hyphens: none; }
.row .row{margin: 0;}
.four.columns + .eight.columns,
.eight.columns + .four.columns{
padding: 0 0 0 30px
}
hr {border-top: 1px solid #efefef; margin: 50px 0;}
iframe{
width: 100%;
max-width: 1120px;
height: 600px;
margin: 0 auto;
overflow: hidden;
display: block;
}  .flex {
display: flex;
align-items: center;
justify-content: space-between;
}
.padding-std {margin: var(--std) 0;}
.container {position: relative;text-align: center;color: white;}
.centered {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
.grid {display: grid; grid-gap: 20px;}
.grid-4-4, .grid-4-3, .grid-4-2, .grid-4-1 {grid-template-columns: repeat(4, 1fr);}
.grid-3-3, .grid-3-2, .grid-3-1 {grid-template-columns: repeat(3, 1fr);}
.grid-2-2, .grid-2-1, .grid-container-2 {grid-template-columns: repeat(2, 1fr);}
.columns-1-2 {column-count: 1;column-gap: 10px;} 
.columns-3-1, .columns-3-2, .columns-3-3 {column-count: 3;column-gap: 10px;} 
.columns-4-1, .columns-4-2, .columns-4-3, .columns-4-4 {column-count: 4;column-gap: 10px;} 
.desktop-only {}
.mobile-only, #mobile {display: none !important;} #site-header {background: var(--blue-main);}
header .flex {padding: 15px 20px;}
.logo {height: 60px !important;} #site-nav ul {display: flex;list-style: none;gap: 35px;}
#site-nav a {text-decoration: none; font-weight: bold; font-size: var(--font-nav);color: white; transition: color 0.2s ease;}
#site-nav a:hover { color: var(--red);}
#site-nav li.ticket a {color: var(--yellow);}
#site-nav li.ticket a:hover {color: var(--red);} .menu-toggle {
display: none;
flex-direction: column;
gap: 5px;
background: none;
border: none;
cursor: pointer;
}
.menu-toggle span {width: 25px; height: 3px; background: white; display: block; transition: all 0.3s ease;} .menu-toggle.active span:nth-child(1) {transform: rotate(45deg) translate(5px, 5px);}
.menu-toggle.active span:nth-child(2) {opacity: 0;}
.menu-toggle.active span:nth-child(3) {transform: rotate(-45deg) translate(6px, -6px);} .old img {filter: grayscale(100);}
.old img:hover {filter: grayscale(0);}
.event-scroll-wrapper {width: 100%; position: relative; padding: 20px 0;}
.event-scroll-container { display: flex; overflow-x: auto; gap: 20px; padding: 0 5%; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; scroll-behavior: smooth; }
.event-scroll-container::-webkit-scrollbar {display: none;}
.scroll-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 45px; height: 45px; border-radius: 50%; background: rgba(255, 255, 255, 0.9); border: none; box-shadow: 0 4px 10px rgba(0,0,0,0.2); cursor: pointer; z-index: 10; display: flex; align-items: center; justify-content: center; font-size: 20px; transition: all 0.2s ease;}
.scroll-nav:hover {background: #fff; transform: translateY(-50%) scale(1.1);}
.scroll-nav.prev { left: 15px; }
.scroll-nav.next { right: 15px; } @media (pointer: coarse) {.scroll-nav { display: none; }} .event-card { flex: 0 0 340px; scroll-snap-align: center; position: relative; border-radius: 12px; overflow: hidden; transition: transform 0.3s ease;}
.event-card:hover {transform: translateY(0px);}
.event-card .thumbnail-container {position: relative;aspect-ratio: 1/1;}
.event-card img { width: 100%; height: 100%; object-fit: cover; display: block;}
.overlay-content { position: absolute; bottom: 0; left: 0; right: 0; padding: 20px; background: linear-gradient(transparent, rgba(0,0,0,0.8)); color: white; display: flex; flex-direction: column;}
.event-title {font-size: 1.5rem; font-weight: bold; margin: 0px 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.event-date {font-size: 0.85rem;opacity: 0.9; color: var(--yellow);}
.event-artist {font-size: 0.9rem;opacity: 1; margin: 0;}
.copyright-tag {position: absolute; top: 10px; right: 10px; color: #fff; font-size: 9px;} #sponsoren {
display: table;
text-align: center;
margin: 0 auto;
}
.partner {background: white; 
display: inline-block; 
vertical-align: middle; 
padding: 10px 20px;
}
.partner img {filter: grayscale(100%);}
.partner img:hover {filter: grayscale(0%);}
#footer {
background: var(--blue-lighter);
color: white;}
#footer h4 {color: white;}
#footer .socialmedia {text-align: right; font-weight: 700; text-transform: uppercase; font-size: 14px;}
#footer .socialmedia a {color: white; font-size: var(--h2);}
#footer .socialmedia a:hover {color: var(--blue-dark); text-decoration: none;}
#footer ul#navigation {font-family: var(--font-primary); font-size: var(--h4); display: inline-block;}
#footer ul#navigation li {display: inline-block;padding-right: 20px;}
#footer ul#navigation li a {color: white;} .hero-img-desktop {object-fit: cover;}
#hero {
background: url(//parktheater-luenen.de/wp-content/themes/parktheater-2026/img/global/circle.png) no-repeat 60% 70%, url(//parktheater-luenen.de/wp-content/themes/parktheater-2026/img/global/parkdeck.png) no-repeat top center, url(//parktheater-luenen.de/wp-content/themes/parktheater-2026/img/global/sky.jpg) no-repeat center center;
-webkit-background-size: 400px, contain, cover;
background-blend-mode: hard-light, hard-light;
-moz-background-size: 400px, contain, cover;
-o-background-size: 400px, contain, cover;
background-size: 400px, contain, cover;
padding: 20px;
text-align: center;
height: 700px;
display: table;
width: 100%;
vertical-align:center;
text-transform: uppercase;
font-family: var(--font-primary);
font-size: var(--h4);
}
#hero img {max-width: 600px; padding: 0px 50px;}
#hero .row {
display: table-cell;
vertical-align: middle;
}
#main .home {padding: 0 150px !important; }
#main {margin-top: 50px;}
#main .container {position: relative;}
#main .container .circle {
position: absolute;
top: 100px;
right: -50px;
background: var(--yellow); height: 100px; width: 100px; border-radius: 100px;}
#yellow {background: var(--yellow); padding: 80px 0;}
section .image  {text-align: center;}
section .image img {max-height: 60vh; width: auto;}
section .image .copy {color: var(--blue-dark); font-size: 8px;}
section .content {
display: flex;
align-items: center;
text-align: center;
}
section .content > div e{width: 100%;}
section .content h1 {font-size: 72px; text-transform: uppercase;}
section .content .timing {padding: 10px 0;}
section .content .detail {display: block; margin: 20px 0; padding: 10px 0; border-top: 1px solid var(--blue-dark); border-bottom: 1px solid var(--blue-dark);}
section .content a.button {background: var(--blue-dark); color: white; border-radius: 0;}
section .content a.button:hover {background: var(--red); color: white;}
.bottom-left {
position: absolute;
bottom: 0px;
left: 0px;
padding: 10px;
background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.5));
width: 100%;
}
.copyright {position: absolute; top: 2px; right: 2px; color: white; font-size: 8px; text-shadow: 0px 0px 3px rgba(0,0,0,.7); } .centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.red {color: var(--red);}
.redbg {background: var(--red); color: white; padding: 2px 6px; border-radius: 3px;}
.soldout {background: var(--red); color: white; margin-bottom: 25px; 
width: 100px;
height: 100px;
line-height: 100px;
border-radius: 50%;
font-size: 16px;
text-align: center;}
.small {font-size: var(--small);} .event {display: flex; width: 100%; border-radius: 0px; margin: 30px 0; gap: 40px;}
.event div {display: block;}
.box-1 {flex: 0 0 200px;}
.box-2 {flex: 0 0 300px;}
.box-3 {flex: 1;}
.event p {padding: 15px 0;display: block;}
.event .day {font-size: var(--h2); font-weight: bold;}
.event .date {font-size: var(--h2);}
.event .time {}
.event .title {font-size: var(--h2); font-weight: bold; line-height: 1;}
.event .artist {font-size: var(--h3); line-height: 1;}
.event img {width: 100% !important; background: red; display: block;}
.event .bottom-left {
position: absolute;
bottom: 0px;
left: 0px;
padding: 30px 10px 10px 10px;
background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.7));
width: 100%;
border-radius: 5px;
text-align: left;
} .welcome{
width: 100%;
margin: 0 0 0 0;
padding: 0 0px 10px 0;}
.row.full{width: 100%;margin: 0 0 10px 0;}
.four.columns.vertical .room_intro{
margin: 0 0 10px 0;
}
blockquote{
font-size: 15px !important;
text-align: center;
margin: 0;
float: inline-block;
max-height: 10px !important;
}
dl dt{
display: block;
float: left;
width: 100%;   
padding: 20px 0 0 0;
}
dl dd{
display: block;
float: right;    
width: 100%;
} ::-webkit-input-placeholder{color: #686868;}
:-moz-placeholder{color: #686868;}
input[placeholder], [placeholder], *[placeholder]{color:#686868!important} .entry{float: left;width: 100%;}
.center {text-align: center !important;}
.divider{
display:block;
clear: both;
float: left;
width: 100%;
height: 50px;
}
div.pagination{
clear: both;
float: left;
width: 100%;   
padding: 10px 0 0 0;
}
div.pagination div.centered{
width: 340px
}
div.pagination span {
float: left;
width: 24px;
height: 24px;
margin: 0px 5px 0 0;
text-align: center;
}
#paging, .pagination { margin-bottom: 50px; font-size: 12px; } ul#gallery {column-count: 5; column-gap: 7px;}
ul#gallery li {} .alignnone {margin: 5px 20px 20px 0;}
.aligncenter, div.aligncenter {display: block;margin: 5px auto 5px auto;}
.alignright {float:right;margin: 5px 0 20px 20px;}
.alignleft {float: left;margin: 5px 20px 20px 0;}
.aligncenter {display: block;margin: 5px auto 5px auto;}
a img.alignright {float: right;margin: 5px 0 20px 20px;}
a img.alignnone {margin: 5px 20px 20px 0;}
a img.alignleft {float: left;margin: 5px 20px 20px 0;}
a img.aligncenter {display: block;margin-left: auto;margin-right: auto}
.wp-caption {
max-width: 100%; padding: 0px 0px 0px;
text-align: left;
background: var(--accent-light);
color: white;
}
.wp-caption.alignnone {margin: 5px 20px 20px 0;}
.wp-caption.alignleft {margin: 5px 20px 20px 0;}
.wp-caption.alignright {margin: 5px 0 20px 20px;}
.wp-caption img {
border: 0 none;
height: auto;
margin: 0;
padding: 0;
width: 100%;
} .search404 {
margin-right: 5px;
text-align: center;margin: 0 auto;
display: inline-block}
.search404 input{
font-size: 18px;
padding: 10px 0px;
background: none;
color: white !important; 
border-bottom: 3px solid white;
border-left: none;
border-right: none;
border-top: none;
outline: none;
height: auto;
width: 100%;}
.search404 input:focus{
background:none;
border-bottom: 3px solid var(--blue-dark);
}
.search404 input::placeholder {
color: white;
}
.search404 input.searchsubmit{display: none;}
#search input#s {
max-width: 500px; margin: 0 auto;
border-bottom: 3px solid var(--blue-dark);
border-left: none;
border-right: none;
border-top: none;
font-size: var(--h3);
padding: 10px 20px;
height: 60px;
color: var(--blue-dark);
}
input[type=button], input[type=submit], input[type=reset] {
background: var(--accent-light);
color: #fff;
padding: 10px 20px 10px 20px;
border: 0px;
text-decoration: none;
cursor: pointer;
font-size: 14px;
font-weight: bold;
border: 1px solid var(--accent-light);
}
input:hover[type=button], input:hover[type=submit], input:hover[type=reset] {
background: #fff;
color: var(--accent-light);
text-decoration: none;
}  .text-yellow {color: var(--yellow);}
.text-red {color: var(--red);}
.text-blue {color: var(--blue-main);}
.text-center {text-align: center;}
h1{font-size: var(--h1); margin: 0 0 10px 0; padding: 0;}
h2{font-size: var(--h2); margin: 0 0 10px 0; padding: 0;}
h3{font-size: var(--3); margin: 0 0 15px 0; color: var(--red);}
h4{font-size: var(--h4); margin: 0 0 20px 0;}
h5{font-size: var(--h5); margin: 0 0 15px 0;}
h6 {font-size: 14px; font-weight: bold; width: 100%; padding: 5px 3px 5px 3px; margin: 0 0 5px 0;} .table_container{
float: left;
width: 100%;
margin: 20px 0;    
}
table{
float: left;
width: 94%;
font-size: 13px;
margin: 20px 3%;
}
th{
border-bottom: 1px solid #686868;
border-right: 1px solid #DEDCD3;
color: #444;
font-weight: normal;
padding: 2%;
}
td{
border-bottom: 1px solid #d7d7d7;
border-right: 1px solid #DEDCD3;
text-align: center;
padding: 5px;
}
th:last-child, td:last-child{border-right: none;}
tr:last-child td{border-bottom: none;} .img_left {float: left; margin: 0 30px 30px 0;}
.img_center {float: none; display: block; margin: 0 auto 30px;} a {text-decoration: none; transition: text-decoration .2s ease; color: var(--blue-main);}
a:hover, li.selected a{
text-decoration: none;
color: var(--red);
transition: text-decoration .2s ease;
}
p a {color: var(--accent-strong);}
a.button{
display: inline-block;
color: var(--blue-dark);
font-size: var(--h5);
font-weight: bold;
padding: 10px 20px;
cursor: pointer;
-webkit-transition: all .2s linear;
-moz-transition: all .2s linear;
-o-transition: all .2s linear;
transition: all .2s linear;
border-radius: 3px;
background: var(--blue-lightest);
}
a.button:hover{
text-decoration: none;
color: white;
-webkit-transition: all .2s linear;
-moz-transition: all .2s linear;
-o-transition: all .2s linear;
transition: all .2s linear;
background: var(--red);
}
}