/*
meyermisginmedia.com
Hamburger Kunsthalle CSS.

Mobile bis max. 1600px
*/

/*
.site-footer {
background-color: rgb(62, 62, 164) !important;
}
*/
:root {
--varscale1024:0.8;
    --fs-body-verysmall: 1rem !important;
    --fs-body-midsmall: 1.25rem !important;
    --fs-body-small: 1.375rem !important;
    --fs-body: 1.625rem !important;
    --fs-h1: 6.5rem !important;
    --fs-h1255: 4rem !important;
    --fs-h15: 3.5rem !important;
    --fs-h2: 3rem !important;
    --fs-h3: 2.375rem !important;
    --fs-h35: 2rem !important;
    --fs-h4: 1.625rem !important;
--spacing-default: 7rem;
--spacing-small: 4rem;
}

html{
font-size: 100% !important;
}

.schmal {
padding: 0 1.5rem !important;
width: 100%;
margin-left: 0 !important;
}

.hkhTextMitMarginal {
display: block;
padding: 0 1.5rem;
}

.hkhTextMitMarginal .textMarginal {
padding: 0;
}

/*Header*/
#hkhPageHeader {
grid-template-columns: 1fr 4fr 1fr;
padding: .125rem 1.5rem .625rem 0;
}
#block-hkh-barrio-leichtesprachelink{
display: grid;
justify-content: flex-end;
}
#block-hkh-barrio-leichtesprachelink a:first-child {
  margin-left: 0;
}
#block-hkh-barrio-leichtesprachelink p{
	line-height: 100%;
}
#hkhTop {
margin-bottom: 5rem;
}

#block-hkh-barrio-offnungszeiten .office-hours__item-slots,
#block-hkh-barrio-offnungszeiten .office-hours__item-comments,
#block-hkh-barrio-topnavigation,
#block-hkh-barrio-mobilelupedersucheimheadbereich {
display: none;
}

.region-top-header {
grid-template-columns: 1fr 1fr !important;
padding-right: 1rem;
}

#hkhPageHeader {
margin-bottom: 1.5rem;
}

#block-hkh-barrio-cheesburgermenuausloser {
margin-top: -5px;
text-align: right;
margin-right: 1rem;
}
#block-hkh-barrio-offnungszeiten .openingHours{
background: url(../images/arrow_down.svg) no-repeat right 7px;
}

#block-hkh-barrio-offnungszeiten .field--name-field-oeffnungszeiten {
display: flex;
margin: 1.125rem 0 0 1.5rem;
justify-content: left;
gap: .25rem;
}
#block-hkh-barrio-offnungszeiten .office-hours #officeHoursDot {
margin-top: 1px;
}
#block-hkh-barrio-leichtesprachelink, #block-hkh-barrio-sprachumschalter {
margin-top: .8125rem;
margin-bottom: .0625rem;
}
.hkhBuehneImage .buehneGradient {
 height: calc(100% - 36px);
 }




/*Burgermenu*/
.cheeseburger-menu__main-navigation-area {
display: block !important;
}
#block-hkh-barrio-cheesburgermenuausloser .content button{
display: inline-block;
}

.block-cheeseburgermenu-container--with-navigation {
padding-left: 1.5rem;
}

#header #block-hkh-barrio-cheeseburgermenu ul.cheeseburger-menu__mainmenu li a span {
font-size: 3rem;
line-height: 120%;
letter-spacing: 0.06rem;
}


div[data-cheeseburger-id="menu-main"] .cheeseburger-menu__mainmenu > .menu-link:nth-child(n+5) > .cheeseburger-menu__item-label span{
	line-height: 190% !important;
}

#header #block-hkh-barrio-cheeseburgermenu ul.cheeseburger-menu__mainmenu li a,
#header #block-hkh-barrio-cheeseburgermenu ul.cheeseburger-menu__submenu li a,
.cheeseburger-menu__mainmenu .footer-2__item li a {
margin-bottom: .5rem;
display: block;
}

#header #block-hkh-barrio-cheeseburgermenu ul.cheeseburger-menu__submenu li a span {
font-size: 1.5rem;
line-height: 120%;
letter-spacing: 0.03rem;
}

#header #block-hkh-barrio-cheeseburgermenu .cheeseburger-menu__mainmenu .footer-2__item:first-child a span,
#header #block-hkh-barrio-cheeseburgermenu .cheeseburger-menu__mainmenu .footer-2__item:nth-child(3) a span {
font-size: 1.5rem;
line-height: 120%;
letter-spacing: 0.03rem;
}

#header #block-hkh-barrio-cheeseburgermenu .cheeseburger-menu__mainmenu .footer-3__item,
#burgerIconhkhAdresse,
div[data-cheeseburger-id="menu-footer-3"] .nav-item {
display: none;
}
div[data-cheeseburger-id="menu-footer-3"] .nav-item a{
	padding-left: 0;
}
div[data-cheeseburger-id="menu-footer-3"] .nav-item:first-child,
div[data-cheeseburger-id="menu-footer-3"] .nav-item:nth-child(3),
div[data-cheeseburger-id="menu-footer-3"] .nav-item:nth-child(5),
div[data-cheeseburger-id="menu-footer-3"] .nav-item:nth-child(7),
div[data-cheeseburger-id="menu-footer-3"] .nav-item:nth-child(9) {
display: block !important;
}

div[data-cheeseburger-id="menu-footer-3"] .nav-item:first-child a span,
div[data-cheeseburger-id="menu-footer-3"] .nav-item:nth-child(3) a span,
div[data-cheeseburger-id="menu-footer-3"] .nav-item:nth-child(5) a span,
div[data-cheeseburger-id="menu-footer-3"] .nav-item:nth-child(7) a span,
div[data-cheeseburger-id="menu-footer-3"] .nav-item:nth-child(9) a span{
font-size: 1.5rem !important;
line-height: 120% !important;
letter-spacing: 0.03rem !important;
}
.cheeseburger-menu__main-navigation-area div:nth-child(3) ul {
display: block !important;
}

.body--has-active-cheese #block-hkh-barrio-leichtesprachelink{
display: block;
position: absolute;
top: 4.375rem;
left: 1.5rem;
z-index: 20000;
}
.body--has-active-cheese #header #block-hkh-barrio-leichtesprachelink a {
color: var(--clr-weiss) !important;
}
.body--has-active-cheese #block-hkh-barrio-leichtesprachelink a:first-child {
background:url(../images/leichtesprache-weiss.svg) no-repeat;
}
.body--has-active-cheese #block-hkh-barrio-leichtesprachelink a:nth-child(2) {
background: url(../images/gebaerdensprache-weiss.svg) no-repeat;
}
.toolbar-fixed .block-cheeseburgermenu-container {
top: 3rem;
}
.body--has-active-cheese #block-hkh-barrio-cheesburgermenuausloser {
margin-right: 0;
margin-top: .5rem !important;
right: 1.875rem !important;
}
.body--has-active-cheese #block-hkh-barrio-mobilelupedersucheimheadbereich {
right: 5.5rem !important;
margin-top: 2.5rem !important;
}






/*Footer*/
#block-hkh-barrio-footer1 a {
font-size: 2.5rem;
line-height: 120%;
letter-spacing: 0.05rem;
}

#block-hkh-barrio-footer2 a,
.site-footer ul.nav a,
.site-footer p {
font-size: 1.25rem;
letter-spacing: 0.025rem;
margin-bottom: .5rem;
}

.site-footer p {
margin-bottom: 3rem;
}
.site-footer p:first-child {
margin-bottom: 1.38rem;
}

.region-footer-first {
display: block !important;
}

#block-hkh-barrio-footer1 {
margin-bottom: 4rem;
}

#block-hkh-barrio-footer2,
#block-hkh-barrio-footer3,
#block-hkh-barrio-footer4 {
padding-bottom: 2rem;
margin-bottom: 2.75rem;
border-bottom: 3px solid #404040;
}

#block-hkh-barrio-footer4 .nav {
display: block;
}

#block-hkh-barrio-footerkontakt .field--name-body {
display: block;
}







.ckeditor-accordion-container>dl dt>a>.ckeditor-accordion-toggle::before {
top: -17px;
}

.ckeditor-accordion-container dl dt.active .ckeditor-accordion-toggle:after {
content: none;
}

/*Paragraphs*/
.paragraph {
margin-bottom:var(--spacing-default); 
}
.paragraph--type--links {
margin: 0;
width: 100%;
padding: 0 1.5rem;
}
.paragraph--type--eintrittspreise {
margin-bottom: 0 !important;
}
.paragraph--type--eintrittspreise .field--name-field-text-linke-spalte {
padding-left: 1.5rem;
}
.paragraph--type--eintrittspreise .hkhTooltip .hkhTooltipText .hkhTooltipTextInside {
width: 92%;
}
.hkhTooltip img {
margin-top: .125rem;
}
.hkhTooltip img {
width: 1.75rem;
}
.eintrittRechts {
justify-content: flex-end;
}


.paragraph--type--eintrittspreise .field--name-field-text-rechte-spalte {
text-align: right;
}

.paragraph--type--eintrittspreise .paragraphInside {
display: flex;
}

.rechtsTooltip {
order: 1;
min-width: 30px;
}
.eintrittRechtsTooltip {
order: 2;
}
.teaserTextBildHorizontalHero .bild {
bottom: 12% !important;
top:auto !important;
right: 2rem;
width: 74%;
}
.paragraph--view-mode--horizontal .teaserTextBildHorizontal,
.paragraph--view-mode--horizontal-gespiegelt .teaserTextBildHorizontalGespiegelt {
gap: 2rem;
}
.paragraph--view-mode--masonry {
margin: 0;
}

.paragraph--view-mode--masonry .blazy--field-bild.blazy--field-bild--masonry{
column-count: 2;
column-gap: 1.5rem;
}
.paragraph--view-mode--masonry .b-flex > .grid, .item-list > .b-flex > .grid {
margin: 0 0 1rem 0;
padding: 0 0rem 4rem 2rem;
}
.paragraph--view-mode--masonry .item-list > .b-column > .grid {
margin: 0 0 1.5rem 0;
}
.paragraph--view-mode--masonry {
padding:0 1.5rem 1.5rem 1.5rem;
}

.paragraph--view-mode--zweispalter .hkhBilder2Spalter {
margin: 0 1.5rem;
}
.paragraph--view-mode--zweispalter .hkhBilder2Spalter .field--name-field-bild {
display: block;
}
.paragraph--view-mode--zweispalter .field__item{
margin-bottom: 2rem;
}
.hkhSponsoren {
display: grid;
grid-template-columns: inherit;
grid-template-rows: auto auto;
width: 100%;
padding: 0 .75rem;
}
.paragraph--type--sponsoren {
margin: 4rem 1.5rem 2rem 1.5rem;
}
.hkhSponsoren {
display: block;
}
.hkhSponsoren h4 {
  margin-bottom: 0rem;
}
.hkhSponsorenKooperation{
	margin-bottom: 2rem;
}
.vierSpalter {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.paragraph--type--zitat {
margin-left: 2rem;
}
.paragraph--type--zitat .zitat {
width: 92%;
}
.paragraph--type--zitat blockquote span {
  font-size: 5.25rem;
}
.paragraph--type--zitat blockquote p {
  text-indent: 3rem;
}
.hkhKontakt {
display: block !important;
padding: 1.5rem 1.5rem 2.5rem 1.5rem !important;
border-top: 5px solid var(--clr-hkhcolordark);
border-left: 0;
margin: 0 1.5rem !important;
}

.hkhKontakt .hkhKontaktImage {
padding-right: 0;
margin-bottom: 1.5rem;
}

.hkhKontakt .hkhKontaktImage img {
width: 100%;
height: auto;
}
.zweiSpalter .hkhKontakt,
.dreiSpalter .hkhKontakt {
padding: 1.5rem 1.5rem 2.5rem 1.5rem !important;
}
.zweiSpalter .hkhKontakt .hkhKontaktImage,
.dreiSpalter .hkhKontakt .hkhKontaktImage {
width: 100%;
}
.paragraph--type--container-teaser-2{
margin-right: 0;
}
.paragraph--type--container-teaser-2 .teaser2Spalten {
display: block;
}
.paragraph--type--container-teaser-2 .teaserMultiple{
margin: 0 1.5rem;
}
.paragraph--type--container-teaser-2 .field--name-field-text {
width: auto;
padding-left: 1.5rem;
}
.paragraph--type--container-teaser-2 .khhHeadline *, .paragraph--type--teaser-quer .headline * {
width: 100%;
}
.field--name-field-container-teaser-3-card{
  grid-template-columns: 1fr 1fr;
}
.paragraph--type--container-teaser-3 .containerTeaser3 {
margin: 0 1.5rem;
}
.hkhKontaktBody p{
margin-bottom: 1.5rem;
}

.paragraph--type--teaser-quer .teaserTextBild {
display: grid;
padding: 3rem 1.5rem;
gap:0rem;
grid-template-columns: 1fr;
}
.paragraph--type--teaser-quer .teaserTextBild.bildRechtsTextLinks {
gap:2rem;
}
.paragraph--type--teaser-quer .teaserTextBild img{
margin-bottom: 1.5rem;
}
.paragraph--type--teaser-quer .teaserTextBild p{
margin-bottom: 0;
letter-spacing:.025rem; 
}
.paragraph--type--teaser-quer .headline * {
margin-bottom: .5rem;
}
.paragraph--type--kontakt .nebeneinander {
margin: 0 1.5rem 0 1.5rem !important;
}
.nebeneinander .hkhKontakt {
padding: 1.5rem !important;
}
.nebeneinander .hkhKontaktImage img {
margin: 0 0 1.5rem 0;
}
.hkhInfoBox {
padding: 2.75rem 1.5rem !important;
margin: 0 1.5rem 0 1.5rem;
}
.hkhAudio {
width: 100%;
}
.hkhAudio .hkhAudio {
margin: 0;
}
.paragraph--type--audio{
display: block;
margin-left:0;
margin-right:0;
}
.hkhAudio .iru-tiny-player .song-progress::after {
  top: -12px;
}
.hkhAudioBild .field--name-field-media-image{
	width: 50%;
	height:auto;
}
.hkhDownload {
grid-template-columns: 50% 50%;
gap: 3rem;
margin-left:1.5rem;
margin-right:1.5rem;
}
.hkhDownload .btn.btn-primary{
white-space: nowrap;
}
.hkhAudioBildWrapper{
width:100%;	
}
.paragraph--type--audio .hkhAudioBild {
width: 100%;
margin-top: 0rem;
padding: 0 1.5rem 0 1.5rem;
}
.hkhDownload .hkhDownloadText {
width: auto;
}

/*Marginalspalte*/

/*
.textMarginal{
background:#c5bcbc;
}
*/
.field--name-field-marginalspalte .paragraph--type--text p, .field--name-field-text-marginalspalte p {
width: 100%;
padding-right: 1.5rem;
}
.paragraph--type--text-marginalspalte p{
font-size: var(--fs-body-verysmall);
line-height: 130%;
letter-spacing: 0.04rem; 
}
.textMarginal .paragraph--type--links {
width: 100%;
padding: 0;
margin: 0 0 3rem 0 !important;
}
.textMarginal .field--name-field-marginalspalte .paragraph--view-mode--einzelbild {
margin: 0 0rem 1rem 0 !important;
}
.paragraph--type--text .hkhText .textMarginal {
margin-right: 0;
margin-left: 0;
width: auto !important; 
width: 100%;
padding-left: 0;
padding-top:0.625rem;
order: 1;
}
.field--name-field-marginalspalte .paragraph--view-mode--einzelbild {
width: 100%;
height: auto;
}
.textMarginal .paragraph--type--links .field--name-field-link .field__item:nth-child(n+2) a {
margin-top: 0;
}
.paragraph--type--audio .hkhAudio {
width: 100%;
padding: 0 .75rem;
}
.paragraph--type--video{
padding: 0 1.5rem;
width: 100%; 	
} 
.paragraph--type--teaser-quer .teaserTextBild.als_contentelement_verwenden {
margin-left: 1.5rem;
width:95%;
}
.paragraph--type--teaser-quer .teaserTextBild.als_contentelement_verwenden .bild {
margin-top: 4.75rem;
}
  
  
/*Ausstellungen*/
.hkhAusstellung .ausstellungHeaderBild img,
.paragraph--type--kuma-buehne img {
min-height: 46rem;
width: auto;
object-fit: cover;
}
.hkhAusstellungHeader #nodeTitle h1 {
hyphens:auto;
-ms-hyphens: auto;
-moz-hyphens: auto;
-webkit-hyphens: auto;
}
#bodyAusstellung {
margin: 0 1.5rem 0rem 1.5rem;
width: 100%;
}
/*Termine - Kurse*/
.page-node-type-termin .hkhTerminContentTop {
display: grid;
grid-template-columns: auto 13rem;
padding: 5rem 1.5rem 4rem 1.5rem;
gap: 2rem;
}
.page-node-type-termin .bodyTermin {
margin: 2rem 2rem 0 2rem;
}
.page-node-type-termin #viewRelatedTermine .view-kurslink {
  margin: 0 2rem 3rem 1.5rem;
}
.page-node-type-termin .datum span {
  margin-left: 0;
  display: block;
}
.page-node-type-termin .terminSub{
display: block;
}
.page-node-type-termin .terminSub span{
display: none !important;
}

/*Pressemitteilungen*/
.page-node-type-pressemitteilung .hkhPMschmal {
padding: 0 1.5rem 0 13rem !important;
width: 100%;
}
.hkhPM #nodeTitle {
bottom: 0.5rem;
}
.page-node-type-pressemitteilung .hkhPMschmal {
padding: 0 1.5rem 0 1.5rem !important;
}
#consentform {
width: 100%;
padding-right: 1.5rem;
padding-left: 1.5rem;
}
.kommendeAusstellungen .slick-dots button.slide-prev,
.kommendeAusstellungen .slick-dots button.slide-next{
	display:none;
}
/*News / Artikel*/
#hkhArticleHeader {
display: block;
}
.page-node-type-article #block-hkh-barrio-content{
margin: 0 1.5rem;
}
#hkhArticledate .field--name-field-datum {
margin-left: 0;
}
.page-node-type-article  .paragraph--type--text .textMarginal,
.paragraph--type--text .textContent,
.page-node-type-article .field--name-field-marginalspalte .paragraph--type--text p {
width: 100% !important;
padding: 0 !important;
}
.page-node-type-article .paragraph--type--text .hkhText {
display: block;
margin-left: 0;
}
.paragraph--type--text .hkhText {
display: grid;
grid-template-columns: 1fr;
margin-right: 1.5rem;
margin-left: 1.5rem;
gap:1.5rem;
}

.textMarginal .field--name-field-marginalspalte .field__item{
width: 48.5%;
}

.textMarginal .field--name-field-marginalspalte .field__item .field__item{
width: 100%;
}

.page-node-type-article .field--name-field-marginalspalte .paragraph--type--text p{
font-size: var(--fs-body-verysmall);
}
.page-node-type-article .field--name-field-marginalspalte .paragraph--type--text{
margin-bottom: 0;
}
.paragraph--type--text-bild .teaserBildText{
display: block;
margin-left: 1.5rem;
margin-right: 1.5rem;
width: 95%;
}
.paragraph--type--text-bild .teaserBildText.bildRechtsTextLinks {
  grid-template-columns: 1fr;
}
.paragraph--type--text{
	margin-bottom: 4rem !important;
}

/*Views*/
.view-header h2 {
width: 100%;
}
/*Termine/Kalender*/
.kalenderBlock .hkhTerminZeile {
padding: 0 1.5rem 0 1.5rem !important;
}

.paragraph--type--node-referenz .hkhTerminZeile {
padding: 2rem 1.5rem 2rem 1.5rem !important;
}

.kalenderBlock .hkhTerminZeile,
.paragraph--type--node-referenz .hkhTerminZeile {
grid-template-columns: 1rem 9rem auto auto 12rem;
}

.page-node-type-termin .hkhTermin .subTitle {
width: 100%;
}

.hkhTerminZeileContent {
width: 100%;
}

.kalenderBlock .rowGroupTitle {
padding: 2.5rem 0 2.5rem 1.5rem;
}
.kalenderBlock .rowGroupTitle {
  top: 5.75rem !important;
}
.kalenderBlock.relatedKalender .rowGroupTitle:first-child {
padding: 0 0 1.75rem 13rem;
}
.ausstellungsTermine .rowGroupTitle, 
.hkhPressetermine .rowGroupTitle{
padding-left: 14rem !important;
}
.fuehrungen .rowGroupTitle {
padding-left: 13.5rem !important;
}
.todayKalender .rowGroupTitle{
  padding-left: 13.5rem !important;
}
/*Ausstellungsarchiv*/
.view-archiv-hkh .ui-accordion-content {
grid-template-columns: repeat(3, minmax(0, 1fr));
}

.view-archiv-hkh h3 {
font-size: 1.75rem !important;
}

/*Aktuelle Ausstellungen*/
/*Aktuelle Ausstelllungen*/

.aktuelleAusstellungen {
padding-top: 10.13rem;
padding-bottom: 10.13rem;
}
.aktuelleAusstellungen .slick-dots {
bottom: -8rem;
}
.aktuelleAusstellungen .view-content {
margin-top: 3rem;
}
.aktuelleAusstellungen .view-header h2{
line-height: 90%;
font-size: var(--fs-h2) !important;
hyphens: none;
-ms-hyphens: none;
-moz-hyphens: none;
-webkit-hyphens: auto;
}
.slick--view--ausstellungen-block-block-1{
padding-left: .13rem !important;
}
.aktuelleAusstellungen .slick-dots {
  padding-right: 0 !important;
}
/*News*/
.hkhNewsOverview ul .views-field-field-subheadline,
.hkhNewsOverview ul .views-field-field-datum {
line-height: 130%;
font-size: var(--fs-body-small) !important;
}
.view-header .btn.btn-primary {
padding: .25rem 1.5rem;
margin-top: 0;
}
.hkhNewsList .view-header a {
display: none;
}

.hkhNewsList .view-footer a {
display: block;
}

.hkhNewsList .view-footer{
margin-left: 4rem;
}




/*Blöcke*/
#block-hkh-barrio-webformular,
#block-hkh-barrio-webformular-2,
#block-hkh-barrio-webformular-3,
#block-hkh-barrio-webformular-4,
#block-hkh-barrio-webformular-5,
#block-hkh-barrio-webformular-6,
#block-hkh-barrio-webformular-7,
#block-hkh-barrio-webformular-8,
#block-hkh-barrio-webformular-9 {
  margin: 0 1.5rem 0 1.5rem;
}
.paragraph--type--block-referenz #block-offnungszeiten {
margin-bottom: 3rem;
}



#block-hkh-barrio-webformular{
margin: 0 1.5rem;
}

#block-newsletterabo p {
  width: 100%;
}

/*Webform*/
.webform-submission-form .checkboxes--wrapper input {
margin-top: .5rem;
}


/*Slr Suche*/
.view-hkh-suche .views-exposed-form.bef-exposed-form .form-submit {
height: 2.5625rem;
}
.view-hkh-suche .views-exposed-form.bef-exposed-form label {
margin-bottom: 3.31rem;
font-size: var(--fs-h2);
line-height: 120%; /* 2.4rem */ 
}




/*Suche Sammlung Online*/
#hkh-work-paragraph-search-form input#edit-search {
width: 100%;
margin-bottom: 1rem;
}




.body--has-active-cheese #block-hkh-barrio-cheesburgermenuausloser .content button {
  top: .375rem;
  display: block;
}
.body--has-active-cheese 	 .block-cheeseburgermenu__trigger-element span:nth-of-type(1) {
top:.325rem;
}







/*Video Scroll fix für iphone*/
body.page-node-338 #hkhTop{
margin-bottom: 36rem;
}
body.page-node-338:not(.body--has-active-cheese) #hkhTop:after {
position: absolute;
  top: 180px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  content: '';
  z-index: 800;
}