/* ============================================================
Bavaria Klassik — Moderner Design-Layer (nach template.css laden)
Header-Regeln sind auf .bklm gescoped (nur bkl-Site),
Spielplan-/Filter-Regeln gelten global fuer das Event-Plugin.
============================================================ */
/* ---------- Header: Microbar ---------- */
.bklm-microbar { background: #7a1522; color: #f0d8dc; font-size: 15px; }
.bklm-microbar .bklm-wrap {
max-width: 1200px; margin: 0 auto; padding: 0;
display: flex; align-items: center; justify-content: flex-end; gap: 20px; height: 38px;
}
.bklm-microbar a { color: #f0d8dc; text-decoration: none; }
.bklm-microbar a:hover { color: #fff; }
.bklm-hours { color: #fff; opacity: 1; }
.bklm-microbar .mp_fanartikel { color: #e2c183 !important; font-weight: 600; background: none !important; padding: 0 !important; border-radius: 0; }
.bklm-microbar .bklm-lang div { display: inline-block; padding: 0 4px; }
.bklm-microbar .bklm-lang a { padding: 2px 7px; border-radius: 6px; }
.bklm-microbar .bklm-lang .current a { color: #fff; background: rgba(255,255,255,.12); font-weight: 600; }
.bklm-hotline { color: #fff !important; font-weight: 600; }
/* ---------- Header: Hauptleiste ---------- */
.bklm { float: none !important; }
header .bklm-main {
background: #fff;
-webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
border-bottom: 1px solid rgba(122,21,34,.08);
box-shadow: 0 10px 30px -22px rgba(90,16,26,.35);
position: relative; z-index: 900;
}
header .bklm-main .bklm-wrap {
max-width: 1200px; margin: 0 auto; padding: 0;
display: flex; align-items: center; gap: 20px; height: 84px;
}
header .bklm #header_logo {
position: static !important; left: auto; margin: 0; width: auto; float: none;
display: flex; align-items: center; flex: 0 0 auto;
}
header .bklm #header_logo img { height: 50px !important; width: auto !important; max-width: none; }
/* Hinweis: Das Bordeaux-Logo wird direkt im Template referenziert (PageObjects.html).
Frueher wurde es hier per content:url() getauscht - das haette auf den Landing Pages
aber auch die eigenen Markenlogos (Klassik fuer alle, IMASS) ueberschrieben. */
header .bklm #main_menu {
display: flex !important; align-items: center; margin-left: auto;
padding: 0; float: none; width: auto; flex: 0 1 auto;
}
.bklm #main_menu > ul { float: none; display: flex; align-items: center; gap: 0; }
.bklm #main_menu li.nav1 { position: relative; }
.bklm #main_menu li.nav1 > a, .bklm #main_menu li.nav1.last > a {
color: #141414; font-size: 15px; font-weight: 500; text-shadow: none;
height: auto; line-height: 1.2; padding: 12px 11px; white-space: nowrap;
border-radius: 12px; position: relative;
transition: color .2s;
}
.bklm #main_menu li.nav1 > a::after {
content: ""; position: absolute; left: 11px; right: 11px; bottom: 4px; height: 2px;
background: #d3a245; border-radius: 2px; transform: scaleX(0); transform-origin: left;
transition: transform .25s ease;
}
.bklm #main_menu li.nav1:hover > a { color: #c38f2e; }
.bklm #main_menu li.nav1:hover > a::after,
.bklm #main_menu li.nav1.active > a::after,
.bklm #main_menu li.nav1.act > a::after { transform: scaleX(1); }
/* Mobile-Pfeile im Desktop-Menue ausblenden */
.bklm #main_menu .open_sub { display: none; }
/* Dropdown-Panels */
.bklm #main_menu ul ul {
display: none; position: absolute; left: 50%; transform: translateX(-50%);
background: #fff; border: 1px solid rgba(122,21,34,.06);
border-radius: 16px; padding: 8px; width: 280px; top: calc(100% + 8px);
box-shadow: 0 24px 60px -18px rgba(90,16,26,.35), 0 2px 8px rgba(90,16,26,.08);
}
/* Unsichtbare Hover-Bruecke ueber der Luecke zwischen Menuepunkt und Panel,
damit das Dropdown beim Runterfahren der Maus nicht zuklappt. */
.bklm #main_menu ul ul::before {
content: ""; position: absolute; left: 0; right: 0; top: -10px; height: 10px;
}
.bklm #main_menu li.nav1:last-child ul { left: auto; right: 0; transform: none; }
.bklm #main_menu ul ul:has(> li:nth-child(9)) { width: 580px; column-count: 2; column-gap: 4px; }
.bklm #main_menu ul ul li.nav2 { break-inside: avoid; }
.bklm #main_menu ul ul li.nav2 { border-bottom: 0; display: block; }
.bklm #main_menu ul ul li.nav2 a, .bklm #main_menu ul ul li.nav2.last a {
color: #2b2b33; font-size: 14.5px; font-weight: 400; border-radius: 10px;
padding: 10px 14px; transition: background .15s, color .15s, padding-left .15s;
}
.bklm #main_menu ul ul li.nav2:hover a, .bklm #main_menu ul ul li.nav2.active a {
background: #f7f2e9; color: #7a1522; padding-left: 18px;
}
/* Tickets-Button */
.bklm-tickets {
display: inline-flex; align-items: center; gap: 8px; flex: 0 0 auto;
background: linear-gradient(135deg, #d3a245, #c38f2e);
color: #fff !important; font-weight: 700; font-size: 15px; letter-spacing: .02em;
padding: 11px 22px; border-radius: 999px; text-decoration: none;
box-shadow: 0 10px 24px -10px rgba(195,143,46,.65);
transition: transform .2s, box-shadow .2s;
}
.bklm-tickets:hover { transform: translateY(-2px); box-shadow: 0 16px 30px -10px rgba(195,143,46,.75); color: #fff; }
.bklm-tickets svg { flex: 0 0 auto; }
/* ============================================================
Mobile-Header (Burger)
============================================================ */
header #header_container.bklm { position: relative; }
/* Burger-Icon (CSS-Hamburger, ersetzt das alte ![]()
) */
header .bklm .icon_mobile-menu {
display: none; margin: 0; float: none; width: 46px; height: 46px; flex: 0 0 auto;
align-items: center; justify-content: center; cursor: pointer;
border-radius: 12px; background: rgba(122,21,34,.06); transition: background .2s;
-webkit-tap-highlight-color: transparent;
}
header .bklm .icon_mobile-menu:hover { background: rgba(122,21,34,.11); }
header .bklm .icon_mobile-menu img { display: none; }
.bklm .bklm-burger, .bklm .bklm-burger::before, .bklm .bklm-burger::after {
content: ""; display: block; width: 23px; height: 2.5px; border-radius: 3px;
background: #7a1522; transition: transform .25s ease, opacity .2s ease;
}
.bklm .bklm-burger { position: relative; }
.bklm .bklm-burger::before { position: absolute; left: 0; top: -7px; }
.bklm .bklm-burger::after { position: absolute; left: 0; top: 7px; }
.bklm .icon_mobile-menu.active .bklm-burger { background: transparent; }
.bklm .icon_mobile-menu.active .bklm-burger::before { transform: translateY(7px) rotate(45deg); }
.bklm .icon_mobile-menu.active .bklm-burger::after { transform: translateY(-7px) rotate(-45deg); }
/* Slide-Down-Panel */
.bklm #menu_mobile {
position: absolute; left: 0; right: 0; top: 100%; z-index: 950;
background: #fff; border-top: 1px solid rgba(122,21,34,.08);
box-shadow: 0 30px 50px -24px rgba(90,16,26,.5);
overflow-y: auto; -webkit-overflow-scrolling: touch;
}
.bklm .menu_mobile_inner { padding: 6px 5% 26px; }
.bklm #menu_mobile ul { list-style: none; margin: 0; padding: 0; }
.bklm #menu_mobile ul li { position: relative; float: none; width: auto; }
.bklm #menu_mobile ul ul { display: none; padding: 2px 0 10px; }
.bklm #menu_mobile li.nav1 > a {
display: flex; align-items: center; min-height: 54px; height: auto;
padding: 8px 54px 8px 4px; font-size: 16.5px; font-weight: 600;
color: #7a1522; text-transform: none; text-decoration: none; line-height: 1.25;
border-bottom: 1px solid rgba(122,21,34,.09);
}
.bklm #menu_mobile li.nav1.active > a { color: #c38f2e; }
/* Kein Strich nach dem letzten Hauptpunkt (sonst Doppellinie vor den Zusatzlinks) */
.bklm #menu_mobile .menu_mobile_inner > ul > li.nav1:last-child > a { border-bottom: 0 !important; }
.bklm #menu_mobile li.nav2 a {
display: block; padding: 11px 4px 11px 18px; font-size: 15px; font-weight: 400;
color: #4a4560; text-transform: none; text-decoration: none; line-height: 1.35;
border-bottom: 1px solid rgba(122,21,34,.05);
}
.bklm #menu_mobile li.nav2:last-child a { border-bottom: 0; }
/* Aufklapp-Pfeil als CSS-Chevron (altes ![]()
ausgeblendet) */
.bklm #menu_mobile .open_sub {
position: absolute; top: 0; right: 0; width: 54px; height: 54px;
display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 0;
}
.bklm #menu_mobile .open_sub img { display: none; }
.bklm #menu_mobile .open_sub::after {
content: ""; width: 9px; height: 9px; margin-top: -3px;
border-right: 2px solid #c38f2e; border-bottom: 2px solid #c38f2e;
transform: rotate(45deg); transition: transform .2s;
}
.bklm #menu_mobile li.open > .open_sub::after { transform: rotate(-135deg); margin-top: 3px; }
/* Zusatzlinks im Panel (Newsletter / Fan-Artikel) */
.bklm-mobextra {
display: flex; flex-wrap: wrap; gap: 8px 22px; align-items: center;
margin-top: 14px; padding: 18px 4px 0; border-top: 1px solid rgba(122,21,34,.12);
}
.bklm-mobextra a { text-decoration: none; font-size: 15px; font-weight: 600; color: #7a1522; }
.bklm-mobextra a:hover { color: #c38f2e; }
.bklm-mobextra .bklm-mobextra__fan { color: #c38f2e; }
@media only screen and (min-width: 1101px) {
/* Legacy-Regel (template.css @1200) darf den Burger hier nicht einblenden */
header .bklm .icon_mobile-menu { display: none !important; }
}
@media only screen and (max-width: 1100px) {
header .bklm #main_menu { display: none !important; }
header .bklm .icon_mobile-menu { display: flex; }
/* Auf Mobil etwas Rand, damit Logo/Telefon/Burger nicht am Bildschirmrand kleben */
.bklm-microbar .bklm-wrap { padding: 0 16px; gap: 14px; font-size: 14px; justify-content: flex-end; }
header .bklm-main .bklm-wrap { padding: 0 16px; height: 68px; gap: 12px; }
header .bklm .bklm-tickets { margin-left: auto; padding: 9px 16px; font-size: 14px; }
/* Landing Pages haben keinen Tickets-Button -> Burger selbst nach rechts schieben */
header .bklm-main .bklm-wrap:not(:has(.bklm-tickets)) .icon_mobile-menu { margin-left: auto; }
.bklm-hours, .bklm-microbar .mp_nl, .bklm-microbar .mp_fanartikel { display: none; }
header .bklm #header_logo img { height: 42px !important; }
}
@media only screen and (max-width: 480px) {
.bklm-microbar .bklm-wrap { padding: 0 12px; }
header .bklm-main .bklm-wrap { padding: 0 12px; gap: 8px; }
header .bklm #header_logo img { height: 36px !important; }
header .bklm .bklm-tickets { padding: 9px 13px; font-size: 13px; gap: 6px; }
header .bklm .icon_mobile-menu { width: 42px; height: 42px; }
}
/* ============================================================
Spielplan — Filter (selectBoxIt) + Event-Karten (global)
============================================================ */
.concertlist_header { margin-bottom: 8px; }
/* Event-Karten */
.concert_list .concert_single {
background: #fff; border: 1px solid rgba(122,21,34,.07); border-top: 1px solid rgba(122,21,34,.07);
border-radius: 20px; box-shadow: 0 6px 18px -10px rgba(90,16,26,.25);
margin-bottom: 18px; padding: 20px 22px 20px 22px;
transition: transform .25s, box-shadow .25s;
}
.concert_list .concert_single:hover { transform: translateY(-3px); box-shadow: 0 18px 44px -20px rgba(90,16,26,.35); }
.concert_col1 { position: relative; padding: 0 3% 0 0; }
.concert_col2 { padding: 4px 0 0 2%; }
/* Datum als Navy-Chip auf dem Bild */
.concert_list .concert_date {
position: absolute; top: 10px; left: 10px; z-index: 5; width: auto;
background: rgba(90,16,26,.88); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
border-radius: 12px; padding: 8px 13px; font-size: 13.5px;
box-shadow: 0 8px 18px -8px rgba(0,0,0,.5);
}
.concert_list .concert_date span { font-size: 14.5px; font-weight: 700; }
.concert_list .concert_picture { margin-bottom: 0; }
.concert_list .concert_picture img { border-radius: 14px; width: 100%; }
/* Veranstaltungsort als Gold-Overline */
.concert_list .concert_room h5 {
color: #c38f2e; font-size: 12px; font-style: normal; font-weight: 700;
text-transform: uppercase; letter-spacing: .18em; margin-bottom: 6px;
display: flex; align-items: center; gap: 8px;
}
.concert_list .concert_room h5::before { content: ""; width: 22px; height: 1.5px; background: #d3a245; }
.concert_list .concert_title h3 { font-size: 22px; font-weight: 700; }
.concert_list .concert_subtitle { font-size: 15.5px; color: #56525c; font-weight: 400; }
/* Buttons als Pills */
.concert_buttons { width: 150px; bottom: 18px; right: 18px; }
.concert_button_ticket, .concert_button_detail {
height: auto; border-radius: 999px; width: 100%;
transition: transform .2s, box-shadow .2s;
}
.concert_button_ticket {
background: linear-gradient(135deg, #d3a245, #c38f2e);
box-shadow: 0 10px 22px -10px rgba(195,143,46,.6);
}
.concert_button_ticket:hover { background: linear-gradient(135deg, #c38f2e, #b3801f); border: 0; transform: translateY(-2px); }
.concert_button_ticket:hover a { color: #fff; }
.concert_button_detail { background: #fff; border: 1.5px solid rgba(122,21,34,.22); }
.concert_button_detail a { color: #7a1522 !important; }
.concert_button_detail:hover { border-color: #7a1522; background: #fff; }
.concert_button_detail:hover a { color: #7a1522; }
.concert_button_ticket a, .concert_button_detail a {
text-align: center; padding: 8px 0 !important; line-height: 1.3; font-weight: 700; min-width: 0;
}
/* Expander ("mehr") */
.expander_back { background: linear-gradient(180deg, rgba(255,255,255,0), #fff 70%); }
.expander_icon { color: #c38f2e; font-weight: 600; }
/* "weitere Konzerte" */
.concertlist_showmore { text-align: center; margin-top: -44px; }
.concertlist_showmore .morebutton {
background: #fff; border: 1.5px solid #d3a245; color: #c38f2e; font-weight: 700;
border-radius: 999px; width: auto; padding: 12px 34px; margin: 6px auto 80px;
display: inline-block; float: none; transition: background .2s, color .2s;
}
.concertlist_showmore .morebutton:hover {
background: linear-gradient(135deg, #d3a245, #c38f2e); color: #fff; border-color: #c38f2e;
}
@media only screen and (max-width: 767px) {
.concert_list .concert_date { position: static; display: inline-block; margin-bottom: 10px; }
.concert_buttons { position: static; width: 100%; margin-top: 12px; }
.concert_list .concert_single { padding: 16px; }
}
/* ============================================================
Layout-Angleichung ans Mockup (nur Seiten mit neuem Header)
============================================================ */
/* Fixiertes Theater-Hintergrundbild (Cuvillies) mit 60% weissem Overlay,
passt sich in den Viewport ein und bleibt beim Scrollen fixiert. */
body:has(#header_container.bklm) { background: transparent; }
body:has(#header_container.bklm)::before {
content: ""; position: fixed; inset: 0; z-index: -2;
background: #faf8f5 url('/intertaintemplates_Public/images/cuvillies-theater-bg.jpg') center center / cover no-repeat;
}
body:has(#header_container.bklm)::after {
content: ""; position: fixed; inset: 0; z-index: -1;
background: rgba(255, 255, 255, 0.4); /* weisser Overlay, 60% transparent */
}
/* Sticky-Header: laeuft beim Scrollen mit */
body:has(#header_container.bklm) header { background: none; position: sticky; top: 0; z-index: 1000; height: auto; }
header #header_container.bklm { max-width: none; }
body:has(#header_container.bklm) section.stage { padding-top: 26px; }
body:has(#header_container.bklm) .page_container_content {
width: 100%; max-width: 1200px; margin: 0 auto 60px; float: none;
}
/* Startseite: Content-Bloecke (Aktions-Teaser, Spielplan, Galerie) exakt
auf Hero-Breite (1200px, buendig) statt der 2%-Seiteneinrueckung. */
@media only screen and (min-width: 768px) {
body:has(section.stage) .page_container_content { padding-left: 0; padding-right: 0; }
}
/* Aktions-Teaser: Abstand nach unten = Abstand Hero->Teaser (section.content padding-top: 50px) */
body:has(section.stage) .bkl-notice-wrap { padding-bottom: 50px; }
/* Multi-Teaser-Hero: unteren Text-Abstand entfernt */
body:has(#header_container.bklm) .bkl-hero__overlay { padding-bottom: 0; }
/* Abgerundete Ecken der Hero-Kacheln absichern (unabhaengig vom Content-Block-Asset) */
/* Goldener Rahmen wie beim Aktions-Teaser darunter (5px) */
body:has(#header_container.bklm) .bkl-hero__tile {
border-radius: 18px; overflow: hidden;
border: 5px solid #d3a245;
}
/* Newsletter-Button (schwebend) von Blau auf Bordeaux */
body:has(#header_container.bklm) .nl_button { background: #7a1522; }
body:has(#header_container.bklm) .nl_button:hover { background: #5c101c; }
/* Stage-Unterseite: abgerundete Ecken und goldener Rahmen wie die Hero-Teaser */
body:has(#header_container.bklm) .stagesubpage {
border-radius: 18px; overflow: hidden;
border: 5px solid #d3a245;
}
/* Slides selbst ohne Rundung - die Kante kommt vom Rahmen des Sliders
(border-radius + overflow:hidden dort beschneidet die Slides ohnehin). */
body:has(#header_container.bklm) .stagesubpage .stagesubpage_slider,
body:has(#header_container.bklm) .stagesubpage .stagesubpage_slider li,
body:has(#header_container.bklm) .stagesubpage .stagesubpage_slider li img { border-radius: 0; }
/* ============================================================
Inhalte auf weissen Karten (lesbar ueber dem Theater-Hintergrund);
Theater bleibt in den Zwischenraeumen sichtbar.
============================================================ */
/* Generische Text-Content-Bloecke (TTH etc.) auf weisser Karte;
ausgenommen Bloecke mit eigenem Karten-Look (Aktions-Teaser, Galerie, Accordeon) */
body:has(#header_container.bklm) section.content > .page_container_content:not(.bkl-notice-wrap):not(.artists):not(.accordeon) {
background: #fff; border-radius: 18px; padding: 30px 34px;
box-shadow: 0 22px 55px -30px rgba(90,16,26,.45);
overflow: hidden; /* gefloatete Inhalte einschliessen, sonst laeuft Text aus der Karte */
}
/* Innere Floats des Textteasers aufloesen, damit der Text komplett in der Karte liegt */
body:has(#header_container.bklm) section.content > .page_container_content:not(.bkl-notice-wrap):not(.artists):not(.accordeon) .content_container,
body:has(#header_container.bklm) section.content > .page_container_content:not(.bkl-notice-wrap):not(.artists):not(.accordeon) .teaser_text {
float: none; width: 100%;
}
/* Galerie-/Vimeo-Ueberschrift + Text auf weisser Karte (nur wenn Inhalt vorhanden) */
body:has(#header_container.bklm) .artists.gallery .teaser_text:has(*:not(:empty)) {
background: #fff; border-radius: 16px; padding: 22px 26px; margin-bottom: 22px;
box-shadow: 0 20px 50px -32px rgba(90,16,26,.4);
}
body:has(#header_container.bklm) .artists.gallery .teaser_text:not(:has(*:not(:empty))) { display: none; }
/* Slider-Pfeile (bxSlider) besser sichtbar: runde Buttons mit Chevron */
body:has(#header_container.bklm) .bx-wrapper .bx-prev,
body:has(#header_container.bklm) .bx-wrapper .bx-next {
width: 48px !important; height: 48px !important; margin-top: -24px !important;
border-radius: 50%; background: rgba(255,255,255,.92) !important;
box-shadow: 0 8px 22px -6px rgba(90,16,26,.55);
display: flex; align-items: center; justify-content: center; text-indent: 0;
transition: background .2s, transform .2s, box-shadow .2s;
}
body:has(#header_container.bklm) .bx-wrapper .bx-prev { left: 18px; }
body:has(#header_container.bklm) .bx-wrapper .bx-next { right: 18px; }
body:has(#header_container.bklm) .bx-wrapper .bx-prev::before,
body:has(#header_container.bklm) .bx-wrapper .bx-next::before {
content: ""; width: 12px; height: 12px;
border-right: 3px solid #7a1522; border-bottom: 3px solid #7a1522; border-radius: 1px;
}
body:has(#header_container.bklm) .bx-wrapper .bx-prev::before { transform: rotate(135deg); margin-left: 4px; }
body:has(#header_container.bklm) .bx-wrapper .bx-next::before { transform: rotate(-45deg); margin-right: 4px; }
body:has(#header_container.bklm) .bx-wrapper .bx-prev:hover,
body:has(#header_container.bklm) .bx-wrapper .bx-next:hover {
background: #c38f2e !important; transform: scale(1.08);
box-shadow: 0 12px 26px -6px rgba(195,143,46,.7);
}
body:has(#header_container.bklm) .bx-wrapper .bx-prev:hover::before,
body:has(#header_container.bklm) .bx-wrapper .bx-next:hover::before { border-color: #fff; }
/* ============================================================
Teaser Vimeo + Bewertungen: volle Content-Breite, buendige Kacheln
============================================================ */
/* Wrapper buendig auf Hero-Breite (auch auf Seiten ohne Stage) */
body:has(#header_container.bklm) .page_container_content.artists.gallery { padding-left: 0; padding-right: 0; }
/* Teaser Vimeo: weissen Haupthintergrund hinter den Videos entfernen */
body:has(#header_container.bklm) .artists.gallery .sounds .concert_soundcloud { background: transparent; }
/* Video-Kacheln als sauberes 2-Spalten-Raster, links/rechts buendig zum Content */
body:has(#header_container.bklm) .artists.gallery .highlights:has(.gallerypic_single.video) {
display: grid; grid-template-columns: repeat(2, 1fr); gap: 34px 24px; align-items: start; float: none;
}
body:has(#header_container.bklm) .artists.gallery .highlights:has(.gallerypic_single.video) > .teaser_text { grid-column: 1 / -1; }
body:has(#header_container.bklm) .artists.gallery .gallerypic_single.video {
padding: 0; margin: 0; width: auto; float: none;
}
/* Goldener Rahmen als box-shadow (kein Layout-/Aspect-Einfluss) -> Video fuellt die
Box exakt, keine Letterbox. border wuerde die padding-bottom-Aspect verschieben. */
body:has(#header_container.bklm) .artists.gallery .gallerypic_single.video .concert_soundcloud {
box-shadow: 0 0 0 5px #d3a245; border-radius: 14px; overflow: hidden;
/* Box exakt 16:9 (Vimeo) statt 56.75% -> keine Balken oben/unten mehr */
padding-bottom: 56.25%; background: #000;
}
/* Bewertungen: Seiten-Einrueckung raus -> Kacheln buendig auf Content-Breite */
body:has(#header_container.bklm) .section--zitate3col > div { padding-left: 0; padding-right: 0; }
/* Weisser Haupthintergrund weg -> nur die Bewertungskacheln selbst sind weiss */
body:has(#header_container.bklm) .section--zitate3col > div.bg-white { background: transparent; }
/* ============================================================
Konzert-Detailansicht: Floats einschliessen + Abstand zum Footer
============================================================ */
body:has(#header_container.bklm) .page_container.show {
overflow: hidden; padding: 30px 34px 60px;
background: #fff; border-radius: 18px;
box-shadow: 0 22px 55px -30px rgba(90,16,26,.45);
}
body:has(#header_container.bklm) .page_container.show .button_back { clear: both; margin-top: 10px; }
/* Detail-Vorschaubilder: volle Breite, einheitlicher Abstand, NICHT beschnitten */
body:has(#header_container.bklm) .page_container.show .concert_picture > a,
body:has(#header_container.bklm) .page_container.show .concert_picture > .thumb {
display: block; float: none; width: 100%; height: auto !important;
max-height: none !important; overflow: visible; margin: 0 0 16px;
}
body:has(#header_container.bklm) .page_container.show .concert_picture > a:last-child,
body:has(#header_container.bklm) .page_container.show .concert_picture > .thumb:last-child { margin-bottom: 0; }
/* Bildlink = Positionskontext (fuer Zoom-Lupe), inneren Float von bild1 aufloesen */
body:has(#header_container.bklm) .page_container.show .concert_picture .gallery_elements {
display: block; position: relative; overflow: hidden; border-radius: 14px; height: auto;
}
body:has(#header_container.bklm) .page_container.show .concert_picture .gallery_elements > .size1of1 { float: none; width: 100%; }
/* Bild vollstaendig und proportional (kein Crop) */
body:has(#header_container.bklm) .page_container.show .concert_picture img {
width: 100%; height: auto !important; display: block; object-fit: contain; border-radius: 14px;
}
/* Einheitliche Zoom-Lupe auf JEDEM Bild (ersetzt die Markup-Lupe von bild1) */
body:has(#header_container.bklm) .page_container.show .concert_picture .zoomimage { display: none; }
body:has(#header_container.bklm) .page_container.show .concert_picture .gallery_elements::after {
content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
opacity: 0; transition: opacity .25s;
background: rgba(90,16,26,.32) url('data:image/svg+xml;utf8,') center no-repeat;
}
body:has(#header_container.bklm) .page_container.show .concert_picture .gallery_elements:hover::after { opacity: 1; }
/* Detail-Datum/Uhrzeit: prominenter Bordeaux-Badge (wie neues Spielplan-Design) */
body:has(#header_container.bklm) .page_container.show .concert_date {
display: inline-block; background: #7a1522; color: #fff;
font-size: 20px; font-weight: 700; line-height: 1.2;
padding: 9px 16px; border-radius: 12px; margin-bottom: 18px; float: none;
}
body:has(#header_container.bklm) .page_container.show .concert_date span { font-size: 20px; font-weight: 700; color: #fff; }
/* Rest-Blau (#27205f aus template.css) in Content/Detail auf Bordeaux umstellen */
body:has(#header_container.bklm) .concert_container h1,
body:has(#header_container.bklm) .concert_content h1,
body:has(#header_container.bklm) .concert_content h2,
body:has(#header_container.bklm) .concert_content h3,
body:has(#header_container.bklm) .concert_content h4,
body:has(#header_container.bklm) .concert_content h5,
body:has(#header_container.bklm) .concert_subtitle,
body:has(#header_container.bklm) .subtitel_links,
body:has(#header_container.bklm) .content_text h1,
body:has(#header_container.bklm) .content_text h2,
body:has(#header_container.bklm) .content_text h3,
body:has(#header_container.bklm) .teaser_text h1,
body:has(#header_container.bklm) .teaser_text h2,
body:has(#header_container.bklm) .teaser_text h3,
body:has(#header_container.bklm) .teaser_text .headline h1,
body:has(#header_container.bklm) .teaser_text .subline h2,
body:has(#header_container.bklm) .section--zitate3col h2 { color: #7a1522; }
/* Bewertungen: Titel/Intro auf weisser Karte (Text nicht frei auf dem Hintergrund) */
body:has(#header_container.bklm) .section--zitate3col .flex.flex-wrap:has(h2) {
margin-left: 0; margin-right: 0;
background: #fff; border-radius: 16px; padding: 24px 28px; margin-bottom: 24px;
box-shadow: 0 20px 50px -32px rgba(90,16,26,.4);
}
@media only screen and (max-width: 600px) {
body:has(#header_container.bklm) .page_container_content.artists.gallery { padding-left: 4%; padding-right: 4%; }
body:has(#header_container.bklm) .artists.gallery .highlights:has(.gallerypic_single.video) { grid-template-columns: 1fr; }
body:has(#header_container.bklm) .section--zitate3col > div { padding-left: 15px; padding-right: 15px; }
}
/* ============================================================
Events-Plugin (Spielplan): immer unter vorherige (ggf. gefloatete)
Elemente wie das Accordeon setzen, nicht daneben.
============================================================ */
body:has(#header_container.bklm) .frame-type-intertainevents_events { clear: both; }
/* ============================================================
Accordeon (Content-Element) — modernes Design
============================================================ */
/* Float aufloesen (sonst kollabiert der Wrapper auf Hoehe 0) */
body:has(#header_container.bklm) .accordeon .content_container {
float: none; width: 100%; margin-bottom: 0; overflow: visible;
}
/* Abstand nach unten als Padding am Wrapper (Margin wird durch Float/Collapse geschluckt) */
body:has(#header_container.bklm) .page_container_content.accordeon { padding-bottom: 55px; }
/* Farbgebung wie der Aktions-Teaser (bkl-notice), damit es mehr auffaellt */
body:has(#header_container.bklm) .accordeon .item {
position: relative; float: none; width: 100%; margin-bottom: 14px;
background: linear-gradient(135deg, #fdf9f1, #f7edda);
border: 1px solid rgba(211, 162, 69, .35); border-radius: 16px;
overflow: hidden; box-shadow: 0 20px 46px -30px rgba(195, 143, 46, .55);
transition: box-shadow .2s, transform .2s;
}
body:has(#header_container.bklm) .accordeon .item:hover {
transform: translateY(-2px); box-shadow: 0 26px 50px -28px rgba(195, 143, 46, .65);
}
/* Goldener Akzentbalken links (wie beim Aktions-Teaser) */
body:has(#header_container.bklm) .accordeon .item::before {
content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; z-index: 1;
background: linear-gradient(180deg, #d3a245, #c38f2e);
}
/* Kopfzeile: Label links, Chevron rechts */
body:has(#header_container.bklm) .accordeon .button_content {
display: flex; align-items: center; width: 100%; padding: 0;
background: transparent; cursor: pointer; transition: background .2s;
}
body:has(#header_container.bklm) .accordeon .button_content:hover,
body:has(#header_container.bklm) .accordeon .button_content.open { background: rgba(211, 162, 69, .14); }
body:has(#header_container.bklm) .accordeon .button_content .item-label {
order: 1; flex: 1 1 auto; width: auto; float: none;
padding: 17px 10px 17px 26px; text-align: left;
}
body:has(#header_container.bklm) .accordeon .button_content .item-label p {
color: #7a1522; font-size: 17px; font-weight: 700; line-height: 1.35;
margin: 0; text-align: left; font-family: inherit;
}
body:has(#header_container.bklm) .accordeon .button_content .item-icon {
order: 2; flex: 0 0 54px; width: 54px; height: auto; margin: 0;
display: flex; align-items: center; justify-content: center;
}
/* Chevron per CSS statt SVG */
body:has(#header_container.bklm) .accordeon .button_content .item-icon span { display: none; }
body:has(#header_container.bklm) .accordeon .button_content .item-icon::after {
content: ""; width: 10px; height: 10px; margin-top: -3px;
border-right: 2px solid #c38f2e; border-bottom: 2px solid #c38f2e;
transform: rotate(45deg); transition: transform .25s;
}
body:has(#header_container.bklm) .accordeon .button_content.open .item-icon::after {
transform: rotate(-135deg); margin-top: 3px;
}
body:has(#header_container.bklm) .accordeon .content_inner {
padding: 18px 26px 22px; color: #4d4a45; font-size: 15.5px; line-height: 1.65;
border-top: 1px solid rgba(211, 162, 69, .35);
}
body:has(#header_container.bklm) .accordeon .content_inner a { color: #c38f2e; font-weight: 600; }
body:has(#header_container.bklm) .accordeon .content_inner p:last-child { margin-bottom: 0; }
/* ============================================================
Spielplan-Kopf: Titel + Filter-Pills (native Selects)
============================================================ */
/* Titel-Reihe oben (zentriert), Dropdowns darunter in eigener zentrierter Reihe */
.concertlist_header.bklsp-head {
display: flex; flex-direction: column; align-items: center; text-align: center;
gap: 20px; margin-bottom: 26px; padding: 26px 28px 24px;
background: #fff; border-radius: 18px;
border: 5px solid #d3a245; /* goldener Rahmen */
box-shadow: 0 22px 55px -30px rgba(90,16,26,.45);
}
.bklsp-title { width: 100%; text-align: center; }
.bklsp-title h2 { font-size: 32px; color: #7a1522; font-weight: 700; margin: 0; }
.bklsp-sub { color: #7a7a85; font-size: 15.5px; margin-top: 4px; }
.bklsp-filters { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; align-items: flex-start; width: 100%; }
.bklsp-filters .selectmonth,
.bklsp-filters .selectveranstaltungsart,
.bklsp-filters .selectveranstaltungsort { padding: 0; width: auto; float: none; }
.bklsp-filters select {
appearance: none; -webkit-appearance: none; font: inherit; font-size: 14.5px; font-weight: 700; color: #7a1522;
background: #fff url('data:image/svg+xml;utf8,') no-repeat right 16px center;
border: 1px solid rgba(122,21,34,.14); border-radius: 999px;
padding: 11px 42px 11px 18px; max-width: 280px;
box-shadow: 0 6px 18px -10px rgba(90,16,26,.25); cursor: pointer;
transition: border-color .2s;
}
.bklsp-filters select:hover { border-color: #d3a245; }
.bklsp-filters .uncheck { text-align: center; margin-top: 6px; font-size: 12px; }
/* ============================================================
Spielplan-Karten (Mockup-Struktur)
============================================================ */
.concert_list .concert_single.bklev {
display: grid; grid-template-columns: 300px 1fr 190px; gap: 0;
padding: 0; overflow: hidden; position: relative;
border: 5px solid #d3a245; /* goldener Rahmen */
}
.bklev__media { position: relative; min-height: 210px; max-height: 254px; overflow: hidden; align-self: start; height: 254px; background: #ece9f4; border-radius: 0; }
.bklev__media > a { display: block; position: absolute; inset: 0; }
.bklev__media img {
position: absolute; inset: 0; width: 100%; height: 100%;
object-fit: cover; border-radius: 0;
}
.bklev__date {
position: absolute; left: 14px; top: 14px; z-index: 2;
background: rgba(90,16,26,.9); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
color: #fff; border-radius: 12px; padding: 8px 15px; line-height: 1.1;
display: flex; align-items: baseline; gap: 8px; white-space: nowrap;
box-shadow: 0 8px 18px -8px rgba(0,0,0,.5);
}
/* Datum + Uhrzeit einzeilig und gross (fuer aeltere Nutzer gut lesbar) */
.bklev__day { font-size: 22px; font-weight: 800; }
.bklev__month { font-size: 22px; font-weight: 700; text-transform: none; letter-spacing: 0; color: #f0d0a8; }
.bklev__time { font-size: 22px; font-weight: 700; opacity: 1; }
.bklev__time::before { content: "·"; color: #f0d0a8; margin-right: 7px; }
.bklev__body { padding: 24px 26px 46px; min-width: 0; font-size: 15px; line-height: 1.55; hyphens: manual; }
.bklev__venue {
font-size: 12px; text-transform: uppercase; letter-spacing: .2em;
color: #c38f2e; font-weight: 700; margin-bottom: 7px;
display: flex; align-items: center; gap: 8px;
}
.bklev__venue::before { content: ""; width: 22px; height: 1.5px; background: #d3a245; flex: 0 0 auto; }
.bklev__titlelink { text-decoration: none; }
.bklev__title { font-size: 22.5px; color: #7a1522; font-weight: 700; line-height: 1.25; margin: 0; }
.bklev__titlelink:hover .bklev__title { color: #c38f2e; }
.bklev__subtitle { font-size: 15px; color: #56525c; margin-top: 5px; }
.bklev__program { margin-top: 13px; font-size: 16px; color: #66626b; line-height: 1.6; }
.bklev__program b, .bklev__program strong { color: #2b2b33; }
.bklev__program p { margin: 0 0 6px; width: auto; float: none; hyphens: manual; font-size: 16px; }
.bklev__prices { margin-top: 8px; font-weight: 600; color: #2b2b33; }
.bklev__side {
border-left: 1px dashed rgba(122,21,34,.12);
padding: 34px 22px; display: flex; flex-direction: column; justify-content: flex-start; gap: 10px;
background: linear-gradient(180deg, #fdfcfa, #f8f5ef);
}
.bklev__btn {
display: block; text-align: center; font-weight: 700; font-size: 14.5px;
border-radius: 999px; padding: 12px 10px; text-decoration: none;
transition: transform .2s, box-shadow .2s;
}
.bklev__btn--gold {
background: linear-gradient(135deg, #d3a245, #c38f2e); color: #fff !important;
box-shadow: 0 10px 22px -10px rgba(195,143,46,.6);
}
.bklev__btn--gold:hover { transform: translateY(-2px); color: #fff; }
.bklev__btn--ghost { border: 1.5px solid rgba(122,21,34,.22); color: #7a1522 !important; background: #fff; }
.bklev__btn--ghost:hover { border-color: #7a1522; }
/* Expander "Programm ansehen" */
.concert_single.bklev.expandable { height: 254px; padding-bottom: 0; }
.bklev .expander { left: 300px; right: 190px; width: auto; }
.bklev .expander_back { background: linear-gradient(180deg, rgba(255,255,255,0), #fff 60%); width: 100%; }
.bklev .expander_icon {
margin: 44px 0 12px 26px; color: #c38f2e; font-weight: 700; font-size: 16.5px;
background: none; width: auto; height: auto; white-space: nowrap;
padding: 4px 0; display: inline-flex; align-items: center; gap: 9px;
}
.bklev .expander_icon::after {
content: ""; width: 10px; height: 10px; margin-top: -3px;
border-right: 2.5px solid #c38f2e; border-bottom: 2.5px solid #c38f2e;
transform: rotate(45deg); border-radius: 1px; transition: transform .2s;
}
.bklev .expander_icon.open {
font-size: 16.5px; transform: none; color: #c38f2e; margin: 0 0 12px 26px;
}
.bklev .expander_icon.open::after { transform: rotate(225deg); margin-top: 4px; }
.bklev .expander_back.open { background: none; }
@media only screen and (max-width: 900px) {
.concert_list .concert_single.bklev { grid-template-columns: 1fr; }
.bklev__media { height: 200px; min-height: 0; }
.bklev__side { border-left: 0; border-top: 1px dashed rgba(122,21,34,.12); flex-direction: row; }
.bklev__side .bklev__btn { flex: 1; }
.bklev .expander { left: 0; right: 0; }
.concert_single.bklev.expandable { height: 480px; }
.concertlist_header.bklsp-head { padding: 22px 18px; }
.bklsp-filters { flex-direction: column; align-items: stretch; }
.bklsp-filters select { max-width: none; width: 100%; }
}
/* ============================================================
Nachtrag: Künstler-Profil, Logo, Galerie 3:2, Aktions-Teaser, Mobil-Rand
============================================================ */
/* Künstler-Profil (Bild + Bio) auf weisser Teaser-Karte */
body:has(#header_container.bklm) .bkl-profile__inner {
background: #fff; border-radius: 18px; padding: 30px 34px;
box-shadow: 0 22px 55px -30px rgba(90,16,26,.45);
}
body:has(#header_container.bklm) .bkl-profile__body h1,
body:has(#header_container.bklm) .bkl-profile__body h2,
body:has(#header_container.bklm) .bkl-profile__body h3 { color: #7a1522; }
/* Logo etwas nach rechts einruecken */
body:has(#header_container.bklm) header .bklm #header_logo { padding-left: 24px; }
/* Galerie-Teaser: festes 3:2-Verhaeltnis -> Bilder passen sauber (kein Verzerren/Abschneiden je nach Spaltenbreite) */
body:has(#header_container.bklm) .artists.gallery .gallery_picture {
height: auto !important; display: block; position: relative;
background: none !important; /* doppeltes, unrundes Hintergrundbild entfernen (blitzte an den Ecken durch) */
}
body:has(#header_container.bklm) .artists.gallery .gallery_picture .gallery_elements {
display: block; width: 100%; aspect-ratio: 3 / 2; overflow: hidden; border-radius: 0; position: relative;
}
body:has(#header_container.bklm) .artists.gallery .gallery_picture .gallery_elements > img {
width: 100%; height: 100%; max-height: none; min-height: 0; object-fit: cover; display: block;
}
/* Aktions-Teaser: Text zentriert, Ueberschrift bordeaux, ohne Icon, ohne linken Balken, Hauptrahmen 5px */
body:has(#header_container.bklm) .bkl-notice {
flex-direction: column; align-items: center; text-align: center;
border-width: 5px; border-style: solid; border-color: rgba(211,162,69,.6);
padding: 26px 30px;
}
body:has(#header_container.bklm) .bkl-notice::before { display: none; }
body:has(#header_container.bklm) .bkl-notice__icon { display: none; }
body:has(#header_container.bklm) .bkl-notice__body { text-align: center; }
body:has(#header_container.bklm) .bkl-notice__body p,
body:has(#header_container.bklm) .bkl-notice__body h1,
body:has(#header_container.bklm) .bkl-notice__body h2,
body:has(#header_container.bklm) .bkl-notice__body h3 { text-align: center; }
body:has(#header_container.bklm) .bkl-notice__body p:first-child,
body:has(#header_container.bklm) .bkl-notice__body h1,
body:has(#header_container.bklm) .bkl-notice__body h2,
body:has(#header_container.bklm) .bkl-notice__body h3 { color: #7a1522; }
body:has(#header_container.bklm) .bkl-notice__more { color: #7a1522; justify-content: center; }
/* Mobil: Content generell 10px vom Rand einruecken (nicht bis zum Bildschirmrand) */
@media only screen and (max-width: 767px) {
body:has(#header_container.bklm) section.content { padding-left: 10px; padding-right: 10px; }
body:has(#header_container.bklm) section.stage { padding-left: 10px; padding-right: 10px; }
body:has(#header_container.bklm) header .bklm #header_logo { padding-left: 10px; }
}
/* Tablet/schmales Fenster (768–1219px): hier fehlte bisher die Seiten-Einrueckung,
Inhalt (inkl. Videos/Text) lief bis zum Rand. */
@media only screen and (min-width: 768px) and (max-width: 1219px) {
body:has(#header_container.bklm) section.content { padding-left: 16px; padding-right: 16px; }
body:has(#header_container.bklm) section.stage { padding-left: 16px; padding-right: 16px; }
}
/* ============================================================
Fliesstext generell schwarz (Basis war grau #555); Footer/Header unberuehrt.
Ueberschriften (bordeaux), Links (gold) und Weiss-auf-Bild bleiben erhalten.
============================================================ */
body:has(#header_container.bklm) section.content,
body:has(#header_container.bklm) section.stage { color: #141414; }
/* explizit gesetzte Grautoene im Content ebenfalls schwarz */
body:has(#header_container.bklm) .bklev__subtitle,
body:has(#header_container.bklm) .bklev__program,
body:has(#header_container.bklm) .bklev__program p,
body:has(#header_container.bklm) .bklev__prices,
body:has(#header_container.bklm) .bklsp-sub,
body:has(#header_container.bklm) .accordeon .content_inner,
body:has(#header_container.bklm) .bkl-notice,
body:has(#header_container.bklm) .bkl-notice__body p { color: #141414; }
/* Ausnahme: Aktions-Teaser-Ueberschrift bleibt bordeaux */
body:has(#header_container.bklm) .bkl-notice__body p:first-child,
body:has(#header_container.bklm) .bkl-notice__body h1,
body:has(#header_container.bklm) .bkl-notice__body h2,
body:has(#header_container.bklm) .bkl-notice__body h3 { color: #7a1522; }