/* CSS Dokument */ @import url('/assets/css/nav.css'); @import url('/assets/css/slick.css'); @import url('/assets/css/slick-theme.css'); @import url('/assets/css/lightcase.css'); @import url('/assets/css/justified.css'); @import url('/assets/css/form.css'); @import url('/assets/css/cookie.css'); @font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 300; font-display: swap; src: url('/assets/fonts/montserrat-300.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, 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: 'Montserrat'; font-style: normal; font-weight: 500; font-display: swap; src: url('/assets/fonts/montserrat-500.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, 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: 'Montserrat'; font-style: normal; font-weight: 800; font-display: swap; src: url('/assets/fonts/montserrat-800.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; } /* ALLGEMEIN */ * { margin: 0; padding: 0; box-sizing: border-box!important; outline: none; } ::selection { background: #890f1f; color: #ffffff; /* WebKit/Blink Browsers */ } ::-moz-selection { background: #890f1f; color: #ffffff; /* Gecko Browsers */ } html { color: #555555; font-family: 'Montserrat', sans-serif; font-size: 16px; font-weight: 300; line-height: 1.5; position: relative; word-spacing: 2px; } h1 { font-size: 3.5rem; font-weight: 300; margin: 0 0 2rem; } h2 { font-size: 1.75rem; font-weight: 500; margin: 0 0 2rem; } h3 { font-size: 1.75rem; font-weight: 500; margin: 0 0 2rem; } h3:after { border-bottom: 0.125rem solid #890f1f!important; content: ""; display: block; margin: 0.25rem 0 0; width: 4rem; } h4 { font-size: 1.375rem; font-weight: 500; line-height: 1.35; margin: 0.25rem 0 1rem; text-transform: uppercase; } h5 { background: #890f1f; color: #ffffff; font-size: 1.125rem; font-weight: 500; margin: 0 0 0.125rem; padding: 0.75rem 0.75rem; text-transform: uppercase; } h6 { color: #890f1f; font-size: 1rem; font-weight: 800; letter-spacing: 1px; margin: 1.5rem 0 1rem; text-transform: uppercase; } img { display: block; max-width: 100%; } a { color: #890f1f; cursor: pointer; display: inline-block; text-decoration: none; } p { font-size: 1.375rem; margin: 0 0 1.5rem; } p a { border-bottom: solid transparent 0.125rem; } p a:hover { border-bottom: solid #890f1f 0.125rem; } hr { border: none; width: 100%; } i, em { font-style: italic; } section { padding: 3rem 0; width: 100%; } strong { font-weight: 500; } table { border-collapse: collapse; cursor: default; margin: 0 0 2rem; width: 100%; } table tr { border: 0.0625rem solid #eeeeee; } table tbody tr:hover { background: #eeeeee; } table tr td { font-size: 1.375rem; padding: 0.25rem 0.5rem; } video { display: block; height: auto; position: relative; width: 100%; } /* GRUNDGERÜST */ .content { margin: 0 auto; max-width: 1590px; width: 96%; } .flex { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: start; width: 100%; } .flx-start { align-items: flex-start; } .flx-end { justify-content: end; } .flx-strech { align-items: stretch; } .flx-center { justify-content: center; } .flx-between { justify-content: space-between; } .flx-a-between { align-content: space-between; } .flx-evenly { justify-content: space-evenly; } .flx-reverse { flex-direction: row-reverse; } .full { width: 100%; } .fourfifth { width: 80%; } .threequarter { width: 75%; } .twothird { width: 66.666%; } .half { width: 50%; } .third { width: 33.333%; } .quarter { width: 25%; } .fifth { width: 20%; } .sixth { width: 16.666%; } .tenth { width: 10%; } .top { order: 1; } .middle { order: 3; } .bottom { order: 2; } .backto { color: #890f1f ; display: block; margin: 1rem 0; text-transform: uppercase; } .backto img { display: inline-block; } .backto span { display: inline-block; font-size: 1.25rem; font-weight: 300; line-height: 1; padding: 0 0.75rem; } .bold { font-size: 1.25rem; } .border { border: 0.0625rem solid #eeeeee; padding: 0.8875rem 1rem; margin: 0 0 1rem; } .category { color: #eeeeee; font-weight: 800; } .centered { text-align: center; } .columns { columns: 2; column-gap: 2rem; } .divider { border-bottom: 0.0625rem solid #eeeeee; display: block; width: 100%; } .fixed { bottom: 0; position: absolute; } .grey { color: #555555; } .height { display: block; height: 100%; } .headline { font-size: 1.75rem; font-weight: 500; margin: 0 0 2rem; } .lightgrey { background: #eeeeee; } .line { border-bottom: 0.0625rem solid #eeeeee; display: block; margin: 0.75rem 0; width: 100%; } .more { background: #890f1f; color: #ffffff ; display: block; font-weight: 500; margin: 1rem 0 0; max-width: 100%; padding: 1rem 1.5rem; text-align: center; text-transform: uppercase; } .more.disabled { background: #555555; color: #eeeeee!important; cursor: default; } .note { border: 1px solid #eeeeee; border-left: 0.25rem solid #890f1f; margin: 0 0 1rem; padding: 1rem; } .note p { font-size: 1.25rem; margin: 0 0 1rem; } .note p:last-child { margin: 0; } .note a { display: inline-block; } .red { color: #890f1f; } .relative { position: relative; padding: 0 0 2rem; } .read { } .right { display: block; margin: 0.5rem 0 0.25rem; text-align: right; text-transform: uppercase; width: 100%; } .right a { font-weight: 500; } .right:hover a { color: #555555; } .right a:before { content: url('/data/site/chevrons-right.svg'); float: left; } .right:hover a:before { filter: invert(32%) sepia(0%) saturate(0%) hue-rotate(199deg) brightness(99%) contrast(89%); } .small { font-size: 1rem!important; line-height: 1.35; } .space { padding: 1rem; } .subline { font-size: 1.125rem; font-weight: 500; text-transform: uppercase; } .upper { text-transform: uppercase; } .video { position: relative; padding-bottom: 56.25%; /* 16:9 */ height: 0; } .video iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } #bgvid { background: url('/data/site/cag-bg-image.jpg'); background-size: cover; position: fixed; top: 50%; left: 50%; min-width: 100%; min-height: 100%; width: auto; height: auto; z-index: -100; -ms-transform: translateX(-50%) translateY(-50%); -moz-transform: translateX(-50%) translateY(-50%); -webkit-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); } #header { background: #ffffff; } #header .logo { max-width: 20%; width: auto; } #header .logo img { min-width: 8rem; padding: 0.75rem 0; } #header .navigation { max-width: 80%; width: auto; } #header .navigation ul { margin: 0; } #teaser { background: #ffffff; padding: 1rem 0; } #teaser .noteslider { position: relative; } #teaser .noteslider .details { bottom: 0; position: absolute; } #events { background: #ffffff; padding: 1rem 0 2rem; } #events .ticketshop { align-items: flex-end; background: #890f1f; color: #ffffff; position: relative; } #events .ticketshop h2 { text-align: left; } #events .ticketshop .details { bottom: 0; padding: 1rem; position: absolute; } #events .ticketshop .more { background: #eeeeee; color: #555555; } #events .eventslider { } #events .eventslider > div { background: #eeeeee; height: 100%; } #events .eventslider .item { color: #555555; height: 100%; } #events .eventslider h3 { margin: 0; } #events .eventslider .item .details { } #events .eventslider .item .poster { } #events .eventslider .item .title { width: 80%; } #events .eventslider .item .icon { padding: 0.5rem 1rem; width: 20%; } #events .eventslider .item .icon img { max-height: 3rem; } #latest { background: transparent; padding: 3rem 0; } #latest h2 { color: #eeeeee; text-align: center; } #latest h3 { color: #555555; } #latest span { display: block; } #latest .entry { background: #ffffff; height: 100%; } #latest .entry p { font-size: 1.125rem; } #latest .entry a { display: block; overflow: hidden; } #latest .entry img { width: 100%; } #info { background: #ffffff; order: 1; } #info h1 { color: #890f1f; } #info a { font-weight: 500; } #info table tr td:first-child { hyphens: auto; width: 40%; } #info ul { font-size: 1.375rem; list-style: none; list-style-position: inside; margin: 0 0 1.5rem; } #info ul li { } #info ul li ul { margin: 0 0 1.5rem 1rem; list-style: circle; } #info ul li ul li { margin: 0 0 0 0.5rem; } #info ol { font-size: 1.375rem; margin: 0 0 1.5rem 2rem; } #info ol li { } #headline { background: transparent; } #headline h1 { color: #ffffff; } #headline .logo a { display: block; } #headline .logo img { margin: 0 auto; max-width: 90%; } #tooltip { position: relative; display: block; visibility: hidden; width: 100%; } #tooltip span { color: #890f1f; display: block; padding: 0.5rem;} #edit { background: #ffffff; } #edit thead { } #footer { background: #eeeeee; padding: 3rem 0 2rem; } #footer p { font-size: 1.125rem; } #footer ul { list-style: none; margin: 0 0 1.5rem; } #footer ul li { font-size: 1.125rem; } #footer a { color: #555555; } #footer a:hover { color: #890f1f; } .grid .half { min-height: 350px; } /*.grid img { border: 10px solid #eeeeee; } .grid p { text-align: justify; } */ .share { margin: 0 0 3rem; } .share a { background: #eeeeee; font-size: 1.125rem; font-weight: 300; margin-left: 0.5rem; max-width: 7rem; padding: 0.5rem; text-align: center; transition: all ease 0.5s; width: 25%; } .share a img { width: 2rem; } .share a:first-child { margin-left: 0; } .share a:hover { transition: all ease 0.5s; } .share a.fb:hover { background: #4267B2; } .share a.tw:hover { background: #1DA1F2; } .share a.wa:hover { background: #25D366; } .share a.mt:hover { background: #555555; } .share a.last { font-size: 1rem; padding: 0.75rem 1rem; text-transform: uppercase; } .share a:hover img { filter: invert(100%) sepia(40%) saturate(100%) hue-rotate(0deg) brightness(150%) contrast(104%); transition: all ease 0.5s; } .projects .visual { } .projects .details { background: #890f1f; color: #eeeeee; padding: 0.5rem; } .event { color: #555555; margin: 0.5rem 0; } .event .date { border-color: #eeeeee; border-width: 12px 2px 2px 2px; border-style: solid; line-height: 1; padding: 0.625rem 0.25rem 0.25rem; position: relative; text-align: center; width: 25%; z-index: 2; } .event .calendar .day { color: #890f1f; font-size: 2rem; margin: 0 0 0.25rem; } .event .calendar .month { display: block; font-size: 0.875rem; text-transform: uppercase; } .event .date .year { border-top: 1px solid #555555; font-size: 0.875rem; padding-top: 0.375rem; } .event .date span { display: inline-block; min-width: 1.5rem; } .event .comment { flex-grow: 2; padding: 0.5rem 1rem; text-align: left; width: 70%; } .event .comment p { margin-bottom: 0; } .event .comment span { display: block; width: 100%; } .event .comment .venue { color: #890f1f; font-size: 0.875rem; } .event .comment .venue a { border-bottom: 1px solid transparent; font-weight: 300!important; } .event .comment .venue a:hover { border-bottom: 1px solid #890f1f; } .member { background: #eeeeee; margin: 1.5rem 1%; overflow: visible; position: relative; width: 23%; } .member img { } .member .details { color: #555555; padding: 1rem; text-align: left; width: 100%; } .member .details p { line-height: 1.125; margin: 0; } .member .details p strong { font-size: 1rem; font-weight: 300; text-transform: uppercase; } .member .details p em { font-size: 0.875rem; } .articles .entry h4 { color: #555555; } .articles .entry span { display: block; } .articles .entry a { display: block; overflow: hidden; } .articles .entry p { font-size: 1.125rem; } .articles .entry img { width: 100%; } .gallery { background: #eeeeee; overflow: auto; } .pager { } .pages .page, .pager .page { background: #eeeeee; display: block; font-size: 1.125rem; font-weight: 500; height: 100%; padding: 1.125rem 1rem; text-align: center; text-transform: uppercase; } .pages a, .pager a { background: #eeeeee; display: block; padding: 1rem; text-align: center; text-transform: uppercase; width: auto; } .pages a.first:before { content: url('/data/site/chevrons-left.svg'); } .pages a.last:after { content: url('/data/site/chevrons-right.svg'); } .pages a.prev:before, .pager a.prev:before { content: url('/data/site/chevron-left.svg'); } .pages a.next:after, .pager a.next:after { content: url('/data/site/chevron-right.svg'); } .pages a.first:hover, .pager a.first:hover, .pages a.prev:hover, .pager a.prev:hover, .pages a.next:hover, .pager a.next:hover, .pages a.last:hover, .pager a.last:hover { color: #555555; filter: invert(32%) sepia(0%) saturate(0%) hue-rotate(199deg) brightness(99%) contrast(89%); } .pages a.first.disabled, .pager a.first.disabled, .pages a.prev.disabled, .pager a.prev.disabled, .pager a.page.disabled, .pages a.next.disabled, .pager a.next.disabled, .pages a.last.disabled, .pager a.last.disabled { background: #efefef; color: #555555; cursor: default; filter: invert(32%) sepia(0%) saturate(0%) hue-rotate(199deg) brightness(99%) contrast(89%); } .casting .entry { margin: 0 0 1.25rem; } .shows div { position: relative; } .shows .upcoming { background: #77D970; bottom: 1rem; color: #ffffff; font-weight: 500; left: 1rem; padding: 0.75rem; position: absolute; right: 1rem; z-index: 99; } .shows a { display: block; } .shows img { height: 100%; object-fit: contain; width: 100%; } .show table tr td { vertical-align: top; } .presskit .entry { border: 0.0625rem solid #eeeeee; border-left: 0.25rem solid #890f1f; padding: 2rem 1.25rem; } .presskit .entry > img { width: 20%; } .presskit .entry > span { padding: 1rem; width: 75%; } .presskit table { } .presskit table thead { cursor: default; font-weight: 500; } .presskit table tbody tr { cursor: pointer; } .presskit table tr td { padding: 0.375rem 0.75rem; } .presskit table tr td:last-child { width: 5%; } .sidebar a { font-weight: 300!important; } .sidebar ul { font-size: 1.25rem; list-style: none; margin: 0; } .sidebar ul li { background: #eeeeee; color: #890f1f; margin: 0 0 0.125rem; } .sidebar ul li a { color: #555555; display: block; padding: 0.75rem 0.5rem 0.75rem; } .sidebar ul li:hover, .sidebar ul li.current { background: #555555; cursor: pointer; } .sidebar ul li:hover a, .sidebar ul li.current a { color: #eeeeee; } .sidebar ul li a:before { content: url('/data/site/chevron-right.svg'); float: left; padding: 0.125rem 0 0; } .sidebar ul li:hover a:before, .sidebar ul li.current a:before { filter: invert(100%) sepia(40%) saturate(100%) hue-rotate(0deg) brightness(150%) contrast(104%); } .sidebar .visual img { width: 100%; } .sidebar .small { font-size: 0.875rem; } .sidebar .media { margin: 1rem 0 0; } .sidebar .media a { width: 15.833%; margin: 0 1% 0.125rem 0; } .sidebar .media a:nth-child(6) { margin: 0 0 0.125rem 0; } .sidebar .media a img { filter: invert(33%) sepia(0%) saturate(2094%) hue-rotate(141deg) brightness(93%) contrast(87%); min-width: 3rem; width: 100%; } .sidebar .media a:hover img { filter: invert(100%) sepia(0%) saturate(1733%) hue-rotate(175deg) brightness(117%) contrast(80%); } .sidebar .text { margin: 1rem 0 0; padding: 0.5rem 0.25rem; } .sidebar .text p { font-size: 1.125rem; } .sidebar .text p:last-child { margin: 0; } .sidebar .entry { color: #555555; display: block; margin: 0.5rem 0; width: 100%; } .sidebar .entry:last-child { } .tab a.tablinks { background: #eeeeee; border: none; color: #555555; font-size: 1rem; outline: none; cursor: pointer; padding: 0.5rem 1.25rem; transition: 0.3s; } .tab a.tablinks:hover, .tab a.active { background: #890f1f; color: #ffffff; transition: 0.3s; } .tabcontent { overflow: auto; width: 100%; } .tags ul { list-style: none; } .tags ul li { background: #eeeeee; color: #555555; cursor: default; display: inline-block; font-size: 1rem; font-weight: 300; margin: 0 0.5rem 0.5rem 0; width: auto; } .tags a { color: #555555; font-weight: 300!important; padding: 0.5rem 0.675rem; } .desktop { display: block; } .mobile { display: none; } .mobile img { margin: 0 0 1rem; } .online { color: #A0C878; display: block; } .pending { color: #FA812F; display: block; } .none { color: #C5172E; display: block; } /* WEBEDITION */ body > div:last-child { background: transparent; padding: 0.5rem 1rem; text-align: center!important; } body > div:last-child a { color: #eeeeee; font-size: 0.625rem; } @media screen and (max-width: 1024px) { .threequarter { width: 60%; } .twothird { width: 70%; } .threequarter .third, .third { width: 33.333%; } .quarter { width: 40%; } .fifth { width: 25%; } #header .logo { max-width: 80%; } #header .logo img { max-width: 25%; } #header .navigation { max-width: 100%; } #header .menu { max-width: 20%; } } @media screen and (max-width: 960px) { .half { width: 100%; } .threequarter { width: 100%; } .twothird { width: 100%; } .threequarter .third, .third { width: 100%; } .quarter { width: 100%; } .pager .third { width: 33.333%; } #teaser .noteslider .details { position: relative; } #events .ticketshop .details { position: relative; } #headline .logo { display: none; } } @media screen and (max-width: 720px) { h1 { font-size: 2.5rem; font-weight: 300; margin: 0 0 1rem; } h1, h2, h3, h4 { hyphens: auto; } .fifth { width: 33.333%; } .sixth { width: 33.333%; } .pager .third { width: 33.333%; } .pager .page { padding: 1.125rem 0.5rem; } .pager a { padding: 1rem 0.5rem; } .share a { margin-left: 1%; width: 24%; } #info table tr td { display: block; width: 100%; } #info table tr td:first-child { font-weight: 500;width: 100%; } #info table tr td:first-child strong { font-weight: 800; } .desktop { display: none; } .mobile { display: block; } } @media screen and (max-width: 520px) { .threequarter { width: 100%; } .twothird { width: 100%; } .third { width: 100%; } .quarter { width: 100%; } .fifth { width: 50%; } .sixth { width: 50%; } #footer p { font-size: 1.25rem; } #footer ul li { font-size: 1.25rem; margin: 0 0 0.25rem; } .video iframe { min-height: 300px; min-width: 100%; } }