@charset "UTF-8";
/* CSS Document */

/* [Claude 2026-08-17] "Share on"-Element (Add Element/Multi Content, Typ "Share"): Text links,
   Shariff-Buttons rechts, "space between" - analog zum Aufbau der "Follow us on..."-Zeile. */
.ShareWrap{
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.78125vw;
}
.ShareWrap blockquote{
	margin: 0;
}

.modul-multi-content{
	position: relative;
	width: 100%;
	height: auto;
	margin: 0;
	margin-left: auto;
	margin-right: auto;
	padding: 0;
}

.modul-multi-content .MultiGrid{
	position: relative;
	width: 100%;
	height:auto;
	margin: 0;
	margin-left: auto;
	margin-right: auto;
	padding: 0;
	background-color: transparent;
	display: grid;
	grid-template-columns: 50% auto;
	grid-template-rows: auto;
}


.modul-multi-content .MultiGridElm{
	position: relative;
	width: 100%;
	height: auto;
	/*width: calc((100% - (1.5625vw * 2)) / 3);
	height: 30vw;*/
	margin: 0;
	padding: 0px;
	/*margin-left: 1.5625vw;*/
	background-color: transparent;

}


/* [Claude 2026-08-17] Von ".modul-multi-content .ModulVideo" auf unskopiert geaendert - diese
   Klasse wird jetzt auch vom "Add Element"-System (Artist/Akteur/Programmpunkt, siehe
   inc/render-element-content.php + inc/element-video.php) genutzt, das nicht in .modul-multi-content
   liegt. Keine Kollision: .ModulVideo wird sonst nirgends im Theme definiert. */
.ModulVideo{
	position: relative;
	width: 100%;
	/* height:calc((100vw / 16) * 9); */
	/*width: calc((100% - (1.5625vw * 2)) / 3);
	height: 30vw;*/
	margin: 0;
	padding: 0px;
	/*margin-left: 1.5625vw;*/
	background-color: transparent;;
	overflow: hidden;

}
/*
.faq-answer {
  display: none;
}

.faq-question {
  cursor: pointer;
}

.faq-question::after {
  content: '+';
  float: right;
}

.faq-question.active::after {
  content: '-';
}
*/

.faq-question {
	position: relative;
	cursor: pointer;
	margin: 0;
	padding: 0;
	width: 100%;
	height: auto;
	overflow: hidden;
}

.question {
	position: relative;
	margin: 0;
	padding: 0;
	
	padding-top:calc(var(--pad-desk) * 0.5vw);
	padding-bottom:calc(var(--pad-desk) * 0.5vw);
	
	width: 100%;
	height: auto;
	
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -moz-flex;
	display: -webkit-flex;
	display: flex;
  	justify-content:space-between;
	align-content: center;
	align-items: center;
	gap:calc(var(--pad-desk) * 1vw);
}

.PadBox {
}

/* [Claude 2026-09-01] Element-Typ "Linie" (Multi Content, s. render-element-content.php) - reine
   Trennlinie. Zwei verschachtelte Elemente: ".MultiLine" (aussen, = #ID-x) traegt nur Layout/
   Padding, KEINE eigene Breite/Farbe - bleibt dadurch ein ganz normaler Block (100% des Elternteils
   MINUS eigenem Padding, kein Overflow). ".MultiLineBar" (innen) ist der tatsaechlich sichtbare,
   farbige Balken (Hoehe inline, Farbe aus der per-row <style> in block-multi-content.php,
   ".MultiLineBar{background-color:...}") - 100% von .MultiLine's Content-Box, wird also bei
   aktivem Padding sichtbar schmaler statt vom Padding nur unsichtbar "aufgeblaeht" zu werden
   (Bugfix: vorher sass die Farbe direkt auf dem gepolsterten Element selbst, background-color
   faerbt aber den Padding-Bereich mit - Padding hatte dadurch nie eine sichtbare Wirkung). Kein
   eigenes margin/padding auf .MultiLine per Default - Kundenwunsch war ausdruecklich KEIN
   automatischer Abstand zu benachbarten Elementen. */
.MultiLine{
	margin: 0;
	padding: 0;
	display: block;
}
/* [Claude 2026-09-01, Bugfix] Schalter "Padding" wirkte beim Typ "Linie" ueberhaupt nicht (fehlende
   Klasse, s. render-element-content.php). Jetzt verdrahtet, aber bewusst auf links/rechts
   beschraenkt - oben/unten wuerde den o.g. Kundenwunsch (kein automatischer Abstand) wieder
   aushebeln. Hoehere Spezifitaet als ".AddElmPad{padding:...}" (zwei Klassen statt einer) gewinnt
   unabhaengig vom Breakpoint, kein !important noetig. */
.MultiLine.AddElmPad{
	padding-top: 0;
	padding-bottom: 0;
}
/* [Claude 2026-09-03, Kundenwunsch] Gleiches Muster wie bei .MultiLine oben - beim Button-Element
   (.ElmPos, s. render-element-content.php) soll der Schalter "Padding" (Tab Settings) nur
   links/rechts wirken, oben/unten bleibt 0, damit der Button nicht zusaetzlich vom umgebenden
   Element wegrueckt (der Button selbst hat bereits eigenes Innen-Padding, s. .MultiBtn). Hoehere
   Spezifitaet als ".AddElmPad{padding:...}" gewinnt unabhaengig vom Breakpoint, kein !important
   noetig. */
.ElmPos.AddElmPad{
	padding-top: 0;
	padding-bottom: 0;
}
.MultiLineBar{
	width: 100%;
	display: block;
}

/* [Claude 2026-08-17] Innenabstand fuer das "Add Element"-System (Artist/Akteur/Programmpunkt,
   siehe inc/render-element-content.php). Eigener Klassenname statt der dort schon existierenden
   Seiten-eigenen ".pad"-Utility-Klasse (kollidierte sonst, siehe Kommentar in
   render-element-content.php) - bewusst simpel gehalten (1x Multiplikator an jedem Breakpoint,
   kein modul-eigenes An/Aus wie Multi Contents "#<id> .pad", da es dafuer auf den Post-Templates
   keine entsprechenden Felder gibt). */
.AddElmPad{
	padding: calc(var(--pad-desk) * 1vw);
}
@media screen and (max-width: 956px) {
.AddElmPad{
	padding: calc(var(--pad-pad) * 1vw);
}
}
@media screen and (max-width: 720px) {
.AddElmPad{
	padding: calc(var(--pad-phone) * 1vw);
}
}

/* [Claude 2026-08-17] Fallback-Farbe fuers FAQ-Auf/Zu-Icon (.PathCol, reine SVG-Linien - siehe
   block-element-btn.php/.css). Multi Content setzt die Farbe normalerweise individuell pro Zeile
   ueber sein Farbsystem (per-row <style>, siehe block-multi-content.php); "Add Element" hat dieses
   System bewusst nicht (siehe Absprache mit Kunde). Ohne JEDE Farbzuweisung ist eine SVG-<line>
   unsichtbar (stroke ist bei <line> das einzig wirksame Attribut, Default-Wert "none" - anders als
   bei fill, dessen CSS-Standard "black" waere). #ID-... .question .PathCol (Multi Contents
   eigene, ID-skopierte Regel) hat hoehere Spezifitaet und gewinnt dort weiterhin gegen diesen
   Fallback. */
.question .BlockBtnIcon .PathCol{
	fill: var(--font-color);
	stroke: var(--font-color);
}

/* [Claude 2026-09-02, Kundenwunsch] Icon-Groesse fuer Button- und FAQ-Icon (render-element-
   content.php, .MultiBtnIcon-scaled-Wrapper um BtnIconGrid) - dieselbe Skala wie beim Card-Footer-
   Icon (card-footer.css .ElementFooterIcon-scaled) und beim Menu-Icon (navibar.css .MenuIcon):
   M = Standard = Faktor 1 = identisch zur bisherigen sitesweiten Fixgroesse aus
   css/buttons/block-element-btn.css/-chevron-btn.css, XS/S kleiner, L/XL groesser. Ersetzt die
   fruehere, 2026-08-17 entfernte eigene FAQ-Groesse - jetzt aber pro Element frei waehlbar statt
   fest auf den Theme-Standard vereinheitlicht. */
.MultiBtnIcon-scaled{
	display: flex;
	align-items: center;
	justify-content: center;
}
.MultiBtnIcon-scaled .BtnIconGrid{
	width: calc(var(--pad-desk) * var(--icon-size-factor, 1) * 1vw);
	height: calc(var(--pad-desk) * var(--icon-size-factor, 1) * 1vw);
}
@media screen and (max-width: 956px) {
.MultiBtnIcon-scaled .BtnIconGrid{
	width: calc(var(--pad-pad) * var(--icon-size-factor, 1) * 1vw);
	height: calc(var(--pad-pad) * var(--icon-size-factor, 1) * 1vw);
}
}
@media screen and (max-width: 720px) {
.MultiBtnIcon-scaled .BtnIconGrid{
	width: calc(var(--pad-phone) * var(--icon-size-factor, 1) * 1vw);
	height: calc(var(--pad-phone) * var(--icon-size-factor, 1) * 1vw);
}
}
/* [Claude 2026-08-17] Rotation auf das neue Chevron-Icon (block-element-chevron-btn.php) umgestellt
   - zeigt in Ruheposition bereits von Haus aus nach unten (kein rotate(90deg) mehr noetig wie
   beim vorherigen Nordost-Pfeil-Icon). Bei geoeffneter Antwort dreht es auf 180deg (zeigt nach
   oben) statt der alten -90deg-Formel. */
.faq-question.active  .BlockBtnIcon{
	transform: rotate(180deg);
}
.faq-question.active .question{
}


.faq-answer {
  position: relative;
  max-height: 0; /* Startzustand */
  overflow: hidden; /* Versteckt den Inhalt */
  transition: max-height 0.3s ease; /* Sanfte Animation */
}
.answer{
	 position: relative;
}
.faq-answer.active {
  max-height: 4000px; /* Setzen Sie hier eine ausreichend große Maximalhöhe */
}






/* [Claude 2026-08-17] Von ".modul-multi-content .ContentSlider/.ContentSlide/.ElmPos" auf
   unskopiert geaendert - werden jetzt auch vom "Add Element"-System (Gallery-/Button-Typ, siehe
   inc/render-element-content.php + inc/element-gallery.php) genutzt, das nicht in
   .modul-multi-content liegt. Ohne diese Aenderung hatte .ContentSlider/.ContentSlide dort keine
   Groesse (0px hoch), der Gallery-Typ rendierte technisch korrekt ins DOM, blieb aber unsichtbar.
   Keine Kollision mit block-content-slider.css: dessen ".modul-content-slider .ContentSlide"
   (Spezifitaet 0,2,0) gewinnt weiterhin gegen dieses unskopierte ".ContentSlide" (0,1,0), falls
   beide Bloecke je auf derselben Seite vorkommen. */
.ContentSlider{
	position: relative;
	width: 100%;
	height: auto;
	margin: 0;
	margin-left: auto;
	margin-right: auto;
	padding: 0;
	background-color: transparent;

	object-fit: cover;
}


.ContentSlide{
	position: relative;
	width: auto;
	height: auto;
	margin: 0;
	padding: 0px;
	background-color: transparent;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
}


.ElmPos{
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -moz-flex;
	display: -webkit-flex;
	display: flex;
	align-content: center;

}


/* [Claude 2026-08-17] Padding 1:1 auf die Werte von .itemBox (Stage/Date-Kaesten, siehe
   single-artist.css) abgestimmt, als vom Kunden bestaetigte Referenz: 1vw Desktop, 3.125vw
   Pad/Phone (links/rechts) mit 2.34375vw oben/unten - Pad und Phone teilen sich denselben Wert,
   genau wie bei .itemBox (dort ebenfalls kein eigener Phone-Wert). */
.MultiBtn{
	position: relative;
	width:auto;
	height:auto;
	margin: 0;
	padding: 1vw;
	display:flex;
	justify-content: center;
	align-content: center;
	align-items: center;
	gap: 1.5625vw;
	cursor: pointer;
	overflow: hidden;

	/* [Claude 2026-09-01, Kundenwunsch] Rund-zu-eckig-Animation bei Hover (umgekehrt zur
	   vorherigen "eckig zu rund"-Variante, analog zum Card-Footer-Kasten in card-footer.css) -
	   Normalzustand jetzt rund, Hover-Regel s. u. setzt auf 0. Breakpoint-Werte in den Media
	   Queries weiter unten. */
	border-radius: calc(var(--cor-desk) * 2vw);
	border: none;
	outline-style: none;
  	box-shadow: none;
  	text-decoration: none;
	background: transparent;
	
	/* [Claude 2026-08-17] Von 0.6s auf 0.3s vereinheitlicht - gleiche Geschwindigkeit wie
	   .BtnOver in block-content-slider.css/block-content-grid.css, damit sich Hover-Uebergaenge
	   ueberall im Theme gleich schnell anfuehlen. */
	transition:all .3s ease-in-out;
	transform: rotateX(0deg);
} 

/* [Claude 2026-08-17] Padding sitzt jetzt direkt auf .BtnText (nicht mehr auf dem ganzen
   .MultiBtn) - halb so gross wie das umgebende .MultiBtn-Padding (hier 1vw Desktop -> 0.5vw).
   Icon links -> BtnText bekommt Padding rechts, Icon rechts -> BtnText bekommt Padding links. */
.MultiBtn-IconLeft .BtnText{
	padding-right: 0.5vw;
}
.MultiBtn-IconRight .BtnText{
	padding-left: 0.5vw;
}

.MultiBtn:hover{
	transform: rotateX(0deg);
	border-radius: 0;
}

/* ===================================================================================================================== */
/* ================================================= **** MOBILE **** ================================================== */
/* ===================================================================================================================== */

@media screen and (max-width: 956px) {
.modul-multi-content .MultiGrid{
	grid-template-columns:100% !important;
}
.MultiBtn {
	padding: 3.125vw;
	padding-top: 2.34375vw;
	padding-bottom: 2.34375vw;
	gap: 3.125vw;
	border-radius: calc(var(--cor-pad) * 2vw);
}
.MultiBtn:hover{
	border-radius: 0;
}
.MultiBtn-IconLeft .BtnText{
	padding-right: 1.5625vw;
}
.MultiBtn-IconRight .BtnText{
	padding-left: 1.5625vw;
}

.modul-multi-content .ContentSlide{
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
}
/* ===================================================================================================================== */
/* ================================================= **** MOBILE **** ================================================== */
/* ===================================================================================================================== */
}

@media screen and (max-width: 720px) {

.modul-multi-content .ContentSlide{
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
}

.MultiBtn {
	padding: 3.125vw;
	padding-top: 2.34375vw;
	padding-bottom: 2.34375vw;
	gap: 3.125vw;
	border-radius: calc(var(--cor-phone) * 2vw);
}
.MultiBtn:hover{
	border-radius: 0;
}
.MultiBtn-IconLeft .BtnText{
	padding-right: 1.5625vw;
}
.MultiBtn-IconRight .BtnText{
	padding-left: 1.5625vw;
}
/* ------------------------------------------------------------------------ */

}