/* --------------------------------------------|
|                                              |
| Component Header                             |
|                                              |
| Band, Logo, Slogan, Ort/Datum.               |
| Markup: site/snippets/inc/header.inc.php     |
| Die Meta-Zeile darüber gehört zu             |
| component.metanav.css.                       |
|                                              |
|-------------------------------------------- */

.header {
	margin-top: var(--admin-bar--height, 0);
}

/* Das Band: läuft über die volle Viewport-Breite (Legacy-Look), die Farbe
   kommt aus dem Event-Tab (headerbgcolor → --color-band-bg, gilt auch für
   .nav--main), Fallback ist
   das halbtransparente Legacy-Weiß über dem Body-Muster. Die Meta-Zeile
   darüber bleibt bewusst außerhalb des Bands (Pill-Optik).
   align-items: baseline richtet die ersten Textzeilen von Slogan und
   Ort/Datum an einer gemeinsamen Baseline aus. */
.header__inner {
	width: 100%;
	display: grid;
	/* Spaltenraster: [Rand] [linke Seitenhälfte] [rechte Seitenhälfte] [Rand].
	   Die Kante zwischen Rand und Seitenhälfte IST die linke Pagekante der
	   1200px-Spalte: Das Logo steht im Rand und endet dort (justify-self: end),
	   der Slogan beginnt dort linksbündig. Auf schmalen Viewports weitet der
	   Logo-Inhalt die Randspalte — dann sitzt die Kante entsprechend weiter
	   innen. */
	grid-template-columns:
		minmax(var(--padding-primary-horizontal-px), 1fr)
		minmax(0, calc(var(--layout-page-maxwidth) / 2))
		minmax(0, calc(var(--layout-page-maxwidth) / 2))
		minmax(var(--padding-primary-horizontal-px), 1fr);
	align-items: baseline;
	background-color: var(--color-band-bg, rgba(255, 255, 255, 0.9));
	padding: 20px 0 20px 0;
}

/* Beginnt linksbündig an der Pagekante; die Breite kommt aus der Grid-Spalte.
   Den Zeilenumbruch setzt die Redaktion wie in Legacy selbst, als responsives
   <br data-hide="smartphone phablet"> im eventslogan-Feld (bis 768px
   unsichtbar, entspricht Legacys br.d-none.d-md-block). */
.header__inner__slogan {
	grid-column: 2;
	text-align: left;
	container-type: inline-size;
	margin-left: var(--padding-primary-horizontal-px);
}

@media screen and (max-width: 900px) {
	.header__inner__slogan .h2 {
		font-size: 16px;
	}
}

@media screen and (max-width: 768px) {
	.header__inner__slogan .h2 {
		font-size: 12px;
	}
}

@media screen and (max-width: 560px) {
	.header__inner__slogan .h2 {
		font-size: 10px;
	}
}

@media screen and (max-width: 420px) {
	.header__inner__slogan {
		display: none;
	}
}

/* Rechtsbündig an der rechten Pagekante; text-align kommt per .style-right
   im Markup. Typo beider Blöcke liefern die h2-Klassen im Panel-Content
   (eventlocation/eventperiod) — Ort → Datum stapelt nativ. */
.header__inner__locationperiod {
	grid-column: 3;
	justify-self: end;
}

/* CTA-Blocks der Region "Header" nehmen nicht an der Baseline teil. */
.header__inner > .region--ctablocks {
	grid-column: 4;
	justify-self: start;
	align-self: center;
}

/* --------------------------------------------|
|                                              |
| Logo                                         |
|                                              |
|-------------------------------------------- */

/* Steht in der linken Randspalte und endet 20px vor der Pagekante — dem
   Abstand zum Slogan. Bild-Baseline wäre die Bildunterkante, deshalb nimmt
   das Logo nicht an der Baseline-Ausrichtung teil. Feinausrichtung: Follow-up. */
.header__inner__logo {
	grid-column: 1;
	justify-self: end;
	align-self: center;
	display: flex;
	align-items: center;
}

.logo {
	width: 300px;
}

@media screen and (max-width: 900px) {
	.logo {
		width: 240px;
	}
}

@media screen and (max-width: 768px) {
	.logo {
		width: 200px;
	}
}

@media screen and (max-width: 550px) {
	.logo {
		width: 160px;
	}
	.header__inner {
		padding-top: 10px;
		padding-bottom: 10px;
	}
}