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

/* [Claude 2026-08-17] Eigene, von single-artist.css unabhaengige Datei fuer den Post Type "News"
   (siehe single-news.php) - bewusst NICHT die geteilte single-artist.css (Artist/Akteur/
   Programmpunkt) mitbenutzt, damit News als eigenstaendiger Strang besteht (Spaltenverhaeltnisse
   etc. koennen hier spaeter frei angepasst werden, ohne Artist/Programmpunkt zu beeinflussen).
   Struktur/Werte 1:1 von single-artist.css uebernommen, aber: Date/Time/Location-Kaesten
   entfernt (bei News nicht vorhanden), .NewsPublishDate neu ergaenzt. */

.NewsGrid{
	position: relative;
	width:100%;
	height:auto;
	margin: 0;

	padding: 0;

	display:grid;
	grid-template-columns: 40% auto;
	grid-auto-rows: auto;
	grid-gap:0;
}
/* [Claude 2026-08-31] Redaktioneller Layout-Schalter (ACF-Feld "news_two_column", Post News) -
   erzwingt auf Desktop dieselbe einspaltige Optik, die ab 956px ohnehin schon automatisch greift
   (s. Media Query unten, "grid-template-columns:100%"). Keine media query noetig - die
   ≤956px-Regel setzt denselben Wert ohnehin bereits unconditional, diese Regel wirkt sich also
   praktisch nur auf Desktop aus. */
#ID-SingelPostNews.News-SingleColumn .NewsGrid{
	grid-template-columns: 100%;
}

/* [Claude 2026-08-31] Beide Regeln nur fuer den neuen Desktop-Layout-Schalter noetig - auf
   Mobile (≤956px) sind .NewsBottomBtnGrid (eigene grid-template-columns:100%-Regel) und
   .News-Effekt-Content (padding bereits auf 0 gesetzt) schon lange unauffaellig/kollabiert, das
   betraf bisher nur den bislang nicht existierenden Desktop-Einspaltig-Fall. */

/* Leere erste Grid-Zelle (Spacer-Div ohne Inhalt) ausblenden, damit der "zurueck"-Button (zweites
   Item) in die erste (linke) Spalte rutscht und dadurch linksbuendig sitzt, statt in der zweiten
   Spalte rechts von einer leeren, aber sichtbar hohen ersten Spalte zu haengen. */
#ID-SingelPostNews.News-SingleColumn .NewsBottomBtnGrid .NewsBottomBtnGrid-Item:first-child{
	display: none;
}

/* .News-Effekt/.News-Effekt-Content sind reine Abstands-/Farbflaechen-Divs ohne Inhalt (je ein
   Rest pro Spalte) - im zweispaltigen Layout sorgen sie fuer vertikales Padding innerhalb jeder
   Spalte, im einspaltig gestapelten Layout erzeugen sie stattdessen einen unerwuenschten
   sichtbaren Abstand zwischen der Content-Info-Spalte und dem Bild darunter. */
#ID-SingelPostNews.News-SingleColumn .News-Effekt,
#ID-SingelPostNews.News-SingleColumn .News-Effekt-Content{
	display: none;
}

/* [Claude 2026-08-31] .News-Effekt fiel als oberer Abstandshalter fuer .News-Content-Infos weg
   (s. Regel oben) - dadurch sass der Titel im Einspaltig-Layout ohne jeden Abstand ganz oben.
   Ersatz-Abstand ausdruecklich NUR fuer die Desktop-Ansicht (min-width-Media-Query) - die
   .News-SingleColumn-Klasse bleibt unabhaengig vom Breakpoint im Markup stehen, ohne die
   Einschraenkung wuerde dieser Abstand also auch bei Mobile-Betrachtung eines "einspaltig"
   gestellten Beitrags zusaetzlich zur bereits vorhandenen .pad-Klasse dazukommen. */
@media screen and (min-width: 957px) {
#ID-SingelPostNews.News-SingleColumn .News-Content-Infos{
	margin-top: 0;
}

/* [Claude 2026-08-31] Schmalere Spaltenbreite im Einspaltig-Layout (Desktop) - #ID-SingelPostNews
   traegt selbst die Klasse "PageWrap" (globale Breite ueber Theme Settings, s.
   general-css-settings.php), hier gezielt fuer den Einspaltig-Fall auf 68,75% verengt (ID+Klasse
   schlaegt die globale reine Klassen-Regel per Spezifitaet). margin:0 auto zur Zentrierung kommt
   weiterhin von der globalen .PageWrap-Regel, hier nicht dupliziert. */
#ID-SingelPostNews.News-SingleColumn{
	width: 100%;
}

/* [Claude 2026-08-31] Titel/News-Datum-Box/Teasertext im Einspaltig-Layout (Desktop) horizontal
   zentriert. .NewsHeader/.NewsTypeBox sind Flex-Container um je ein Element (Name-Box bzw.
   itemBox), die selbst nur so breit wie ihr Inhalt sind ("width:auto") - deshalb justify-content
   statt text-align, sonst bliebe die Box am linken Rand haengen. .NewsSubline ist kein
   Flex-Container (einfacher Block), dort reicht text-align. */
#ID-SingelPostNews.News-SingleColumn .NewsHeader,
#ID-SingelPostNews.News-SingleColumn .NewsTypeBox{
	justify-content: flex-start;
}
#ID-SingelPostNews.News-SingleColumn .NewsSubline{
	text-align: start;
}

/* [Claude 2026-09-05, Kundenwunsch] Content-Spalte (2. Grid-Item) im Einspaltig-Layout auf 68%
   verengt + zentriert - nur Desktop, auf Tablet/Mobile bleibt die Spalte ohnehin schon voll breit
   gestapelt. */
#ID-SingelPostNews.News-SingleColumn .NewsGrid > .GridItem:last-child{
	width: 68%;
	margin-left: auto;
	margin-right: auto;
}
}

.NewsGrid .GridItem{
	position: relative;
	width: 100%;
	max-width:100%;
	height:auto;
	margin: 0;
	padding: 0;
}

.News-Effekt{
	position: relative;
	width:100%;
	height: auto;
	padding: calc(0.78125vw * 0);

}

.News-Effekt-Content{
	position: relative;
	width:100%;
	height: auto;
	padding: calc(0.78125vw * 0);

}

.NewsHeader{
	position: relative;
	width:100%;
	height: auto;
	margin: 0;
	padding: 0;
	display: block;
	background-color:transparent;
	gap: 0.78125vw;
}


.NewsName{
	position: relative;
	width:100%;
	max-width:100%;
	height: 100%;
	margin: 0;
	padding: 0;
}

/* [Claude 2026-08-17] Teasertext/Subline jetzt UNTERHALB der "NEWS / <Datum>"-Box (Reihenfolge:
   Titel -> Box -> Subline). margin-top = doppelter Abstand von .NewsHeader's margin-bottom
   (1.5625vw * 2 = 3.125vw), auf Wunsch des Kunden. */
.NewsSubline{
	position: relative;
	width: 100%;
	max-width: 100%;
	margin: 0;
	padding: 0;
	display: block;
}

.NewsInfo{
	position: relative;
	width:100%;
	height:auto;
	margin: 0;
	padding: 0;
	display:grid;
	grid-auto-columns: 100%;
	grid-auto-rows: auto;
	grid-gap: 0.25vw;
}

.NewsInfo .item{
	position: relative;
	width:100%;
	height:auto;
	margin: 0;
	display: block;
}

/* [Claude 2026-08-17] Flex-Wrapper um die fixe "News"-.itemBox (analog .ArtistDate/.ArtistTime
   bei single-artist.css) - noetig, damit .itemBox als Flex-ITEM statt als eigener
   Flex-Block-Container behandelt wird und dadurch nur so breit wird wie der Text braucht, statt
   auf volle Breite des umgebenden .item-Divs zu strecken. */
.NewsTypeBox{
	position: relative;
	width:100%;
	height:auto;
	margin: 0;
	padding: 0;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	gap: 0vw;
}
/* ----- Design Boxes
.NewsTypeBox .itemBox.pad{
	padding-top:4.6875vw !important;
} --*/

.itemBox{
	position: relative;
	width:100%;
	height:auto;
	margin: 0;
	padding: 0vw;/*
	padding-top:1vw;
	padding-bottom: 1vw; --*/
	border-radius:0vw;

	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 0vw;
	
	
}


.NewsContent{
	position: relative;
	width:100%;
	height:auto;
	margin: 0;

	padding: 0;
	display:grid;
	grid-template-columns: 100%;
	grid-auto-rows: auto;
	grid-gap:0;
}


.NewsCover{
	position: relative;
	width:100%;
	height: 33.635vw;
	margin: 0;
	padding: 0;
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
}


.NewsFollowGrid{
	position: relative;
	width:100%;
	height:auto;
	margin: 0;

	padding: 0;

	display:grid;
	grid-template-columns: 30% auto;
	grid-auto-rows: auto;
	grid-gap:3.125vw
}

.NewsFollowGrid .GridItem{
	position: relative;
	max-width:100%;
	height:auto;
	margin: 0;
	padding: 0;

	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: stretch;
}

.FollowGrid{
	position: relative;
	width:100%;
	height:auto;
	margin: 0;
	padding: 0;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	gap: 0.78125vw;


}

.NewsFollowGrid .GridItem:last-child .FollowGrid{
	justify-content: flex-end;
}


.FollowGrid .item{
	position: relative;
	max-width:100%;
	height:auto;
	margin: 0;
	padding: 0;

	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: stretch;
}


#ID-SingelPostNews .NewsBottomBtnGrid {
	position: relative;
	width:100%;
	height:auto;
	margin: 0;
	padding: 0;
	display: -moz-grid;
	display: -webkit-grid;
	display:grid;
	grid-template-columns: 100%;
	grid-template-rows: auto;
	grid-gap:0vw;
}

#ID-SingelPostNews .NewsBottomBtnGrid .NewsBottomBtnGrid-Item{
	position: relative;
	width: 100%;
	height:100%;
	margin: 0;
	padding: 0;
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -moz-flex;
	display: -webkit-flex;
	display: flex;
	justify-content: flex-start;
	align-content: center;
}
/* [Claude 2026-08-17] first-child muss doppelt so hoch sein wie last-child (identisches Muster
   wie bei single-artist.css) - last-child rechnet die tatsaechliche Button-Hoehe
   (2x .MultiBtn-Padding 1.235vw + Icon-Basisgroesse 3.125vw), first-child das Doppelte davon. */
#ID-SingelPostNews .NewsBottomBtnGrid .NewsBottomBtnGrid-Item:last-child{
	/* height: calc(1.235vw * 2 + 3.125vw);*/
}
#ID-SingelPostNews .NewsBottomBtnGrid .NewsBottomBtnGrid-Item:first-child{
	/* height: calc((1.235vw * 2 + 3.125vw) * 2);*/
}

#ID-SingelPostNews .MultiBtn{
	position: relative;
	width:auto;
	height:auto;
	margin: 0;
	padding: 1.235vw;
	display:flex;
	justify-content: center;
	align-content: center;
	align-items: center;
	gap: 1.5625vw;
	cursor: pointer;
	overflow: hidden;

	border-radius: 0px;
	border: none;
	outline-style: none;
  	box-shadow: none;
  	text-decoration: none;
	background: transparent;

	transition:all .6s ease-in-out;
	transform: rotateX(0deg);
}

#ID-SingelPostNews .MultiBtn .BtnIconGrid{
	transform: rotate(180deg);
	border-radius: 90px;
}


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

#ID-SingelPostNews .NewsBottomBtnGrid {
	position: relative;
	width:90.635%;
	height:auto;
	margin: 0;
	padding: 0;
	margin-left: auto;
	margin-right: auto;
}


.NewsGrid{
	grid-template-columns: 100%;
	grid-gap:0;
}


.News-Effekt{
	position: relative;
	width:100%;
	height: auto;
	padding: calc(0.78125vw * 0);

}

.News-Effekt-Content{
	position: relative;
	width:100%;
	height: auto;
	padding: calc(0.78125vw * 0);

}
.NewsHeader{

}
.NewsInfo{
	grid-gap:0.8vw;
}



.itemBox{
	position: relative;
	width:100%;
	height:auto;
	margin: 0;
	padding: 0vw;
	border-radius:0vw;

	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 0vw;
}


.NewsCover{
	height: 76vw;
}

.NewsFollowGrid{

	grid-template-columns: 36% auto;
	grid-gap:3.125vw;
}

.NewsContent{
	grid-gap:0vw;
}
.padtop{
	padding-top: 3.125vw !important;
	padding-bottom: 3.125vw !important;
}
#ID-SingelPostNews .NewsBottomBtnGrid {
	width: 100%;
	grid-template-columns: 100%;
}
#ID-SingelPostNews .NewsBottomBtnGrid .NewsBottomBtnGrid-Item:first-child{
	height: auto;
}
#ID-SingelPostNews .NewsBottomBtnGrid .NewsBottomBtnGrid-Item:last-child{
	height: auto;
	padding: 0;
}
/* ===================================================================================================================== */
/* ===================================================================================================================== */
/* ===================================================================================================================== */
}
@media screen and (max-width: 720px) {


.NewsGrid{

	grid-template-columns: 100%;
	grid-gap:0vw;
}
.News-Effekt{
	position: relative;
	width:100%;
	height: auto;
	padding: calc(0.78125vw * 0);

}
.NewsHeader{
}

.NewsInfo{
	grid-gap: 1vw;
}

.NewsCover{
	height: 100vw;
}
.NewsContent{
	grid-gap:0vw;
}

.NewsFollowGrid{

	grid-template-columns: 100%;
	grid-gap:3.125vw;
}

#ID-SingelPostNews .NewsBottomBtnGrid .NewsBottomBtnGrid-Item:last-child{
	padding: 0;
}
/* ===================================================================================================================== */
/* ===================================================================================================================== */
/* ===================================================================================================================== */

}