/* ==========================================================================
   IBW Termine – Darstellung der Bausteine auf der Website
   --------------------------------------------------------------------------
   Gestaltungswerte stehen gesammelt als Variablen ganz oben. Für die meisten
   Anpassungen (Farben, Rundungen, Abstände) reicht es, dort einen Wert zu
   ändern. Farben kommen aus den Astra-Farbslots, damit eine Änderung im
   Customizer auch hier ankommt.
   Buttons nutzen die Button-Klassen des Themes und sehen daher aus wie alle
   anderen Buttons der Website. Größe, Schrift und Innenabstand kommen
   ausschließlich aus dem Customizer (Global → Buttons) – hier wird bewusst
   nichts davon überschrieben.
   ========================================================================== */

:root {
	/* Farben (Astra-Slots: 0 Marke, 1 Salbei, 2 Überschrift, 3 Text, 4 Creme, 5 Sand, 6 Weiß) */
	--ibw-farbe-marke: var(--ast-global-color-0, #C56B4F);
	--ibw-farbe-akzent: var(--ast-global-color-1, #9CAF9A);
	--ibw-farbe-ueberschrift: var(--ast-global-color-2, #2E2A26);
	--ibw-farbe-text: var(--ast-global-color-3, #4A453F);
	--ibw-farbe-karte: var(--ast-global-color-4, #F7F4EF);
	--ibw-farbe-rand: var(--ast-global-color-5, #E6DCCF);
	--ibw-farbe-box: var(--ast-global-color-6, #FFFFFF);

	/* Schriftgrößen: Fließtext erbt die Grundschrift des Themes (18 px),
	   alles Kleinere (Kennzeilen, Hinweise, Details in Listen) nutzt EINE Größe. */
	--ibw-schrift-klein: 16px;

	/* Schrift für Datumsangaben (wie die Überschriften) */
	--ibw-schrift-akzent: "DM Serif Display", Georgia, serif;

	/* Form */
	--ibw-radius: 12px;
	--ibw-radius-klein: 8px;
	--ibw-schatten: 0 4px 12px rgba(46, 42, 38, 0.08);

	/* Abstände */
	--ibw-innen: 32px 24px;
	--ibw-innen-mobil: 24px 20px 28px;
	--ibw-luft: 12px;

	/* Bildformat der Beitragsbilder (wie die Social-Media-Vorschau) */
	--ibw-bildformat: 1200 / 630;
}

/* --------------------------------------------------------------------------
   Gemeinsames
   ----------------------------------------------------------------------- */

.ibw-karte p,
.ibw-box p,
.ibw-liste p {
	margin: 0;
}

.ibw-bild {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: var(--ibw-bildformat);
	object-fit: cover;
}

.ibw-button {
	margin: 0;
}

/* Ausrichtung per Shortcode-Parameter, z. B. [ibw_anmelden ausrichtung="mitte"].
   Nötig, weil der Button-Rahmen die volle Breite einnimmt und der Button
   darin sonst links steht – unabhängig von der Container-Einstellung. */
.ibw-button--mitte {
	display: flex;
	justify-content: center;
}

.ibw-button--rechts {
	display: flex;
	justify-content: flex-end;
}

.ibw-hinweis {
	color: var(--ibw-farbe-marke);
	font-size: var(--ibw-schrift-klein);
	line-height: 1.4;
}

.ibw-em {
	color: var(--ibw-farbe-marke);
	font-weight: 600;
}

.ibw-em--zart {
	color: var(--ibw-farbe-akzent);
	font-style: normal;
}

/* --------------------------------------------------------------------------
   Karte  [ibw_termine]
   Die Karten stehen direkt im Spectra-Container, der Spalten und Abstände
   bestimmt. flex-basis sorgt dafür, dass sie auf schmalen Bildschirmen
   untereinander rutschen.
   ----------------------------------------------------------------------- */

.ibw-karte {
	display: flex;
	flex-direction: column;
	flex: 1 1 280px;
	min-width: 0;
	max-width: 100%;
	background: var(--ibw-farbe-karte);
	border: 1px solid var(--ibw-farbe-rand);
	border-radius: var(--ibw-radius);
	box-shadow: var(--ibw-schatten);
	color: var(--ibw-farbe-text);
}

/* Bewusst kein overflow:hidden an der Karte: Bei untereinander stehenden
   Karten (mobil) kann das den unteren Rand abschneiden. Die oberen Ecken
   des Bildes werden stattdessen direkt gerundet. */
.ibw-karte__bild {
	display: block;
}

.ibw-karte__bild .ibw-bild {
	border-radius: calc(var(--ibw-radius) - 1px) calc(var(--ibw-radius) - 1px) 0 0;
}

.ibw-karte .ibw-karte__inhalt {
	display: flex;
	flex-direction: column;
	flex: 1;
	gap: var(--ibw-luft);
	padding: var(--ibw-innen);
}

.ibw-karte .ibw-karte__kicker {
	margin-bottom: -6px; /* rückt näher an den Titel als die übrigen Abstände */
	font-size: var(--ibw-schrift-klein);
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.ibw-karte .ibw-karte__titel {
	margin: 0;
	color: var(--ibw-farbe-marke);
	line-height: 1.25;
}

.ibw-karte__untertitel {
	font-style: italic;
}

.ibw-karte__termin,
.ibw-karte__preis {
	line-height: 1.4;
}

/* Standard-Karte: Terminblock unter einer feinen Linie, Textlink statt Button */
.ibw-karte .ibw-karte__terminblock {
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin-top: auto;
	padding-top: 14px;
	border-top: 1px solid var(--ibw-farbe-rand);
	line-height: 1.45;
}

.ibw-karte__label {
	margin-bottom: 2px;
	font-size: var(--ibw-schrift-klein);
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.ibw-karte__datum {
	color: var(--ibw-farbe-ueberschrift);
	font-weight: 600;
}

.ibw-karte__details {
	font-size: inherit; /* Grundschrift */
}

.ibw-karte.ibw-karte--standard .ibw-karte__aktion {
	margin-top: 0;
	padding-top: 4px;
}

/* Textlink mit dünnem Pfeil, Pfeil rutscht beim Hover leicht nach rechts */
.ibw-link,
.ibw-link:visited {
	display: inline-flex;
	align-items: center;
	gap: 0.35em;
	color: var(--ibw-farbe-marke);
	font-weight: 600;
	text-decoration: none;
}

.ibw-link:hover,
.ibw-link:focus {
	color: var(--ibw-farbe-marke);
}

.ibw-link:hover .ibw-link__text,
.ibw-link:focus-visible .ibw-link__text {
	text-decoration: underline;
	text-underline-offset: 4px;
	text-decoration-thickness: 1px;
}

.ibw-link__pfeil {
	width: 0.9em;
	height: 0.9em;
	flex: 0 0 auto;
	transition: transform 0.2s ease;
}

.ibw-link:hover .ibw-link__pfeil {
	transform: translateX(3px);
}

@media (prefers-reduced-motion: reduce) {
	.ibw-link__pfeil {
		transition: none;
	}
}

/* Button immer unten, auch wenn die Karten unterschiedlich viel Text haben (klassische Variante) */
.ibw-karte .ibw-karte__aktion {
	margin-top: auto;
	padding-top: 8px;
}

/* --------------------------------------------------------------------------
   Box „Nächster Termin“  [ibw_naechster_termin]
   ----------------------------------------------------------------------- */

.ibw-box {
	background: var(--ibw-farbe-box);
	border-radius: var(--ibw-radius);
	box-shadow: var(--ibw-schatten);
	color: var(--ibw-farbe-text);
}

.ibw-box__bild .ibw-bild {
	border-radius: var(--ibw-radius) var(--ibw-radius) 0 0;
}

.ibw-box__inhalt {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 24px 28px 28px;
}

.ibw-box__titel {
	font-size: var(--ibw-schrift-klein);
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.ibw-box__format {
	color: var(--ibw-farbe-marke);
	font-weight: 600;
}

.ibw-box__datum {
	color: var(--ibw-farbe-ueberschrift);
	font-family: var(--ibw-schrift-akzent);
	font-weight: 400; /* DM Serif Display hat nur einen Schnitt */
	font-size: 1.6em;
	line-height: 1.15;
}

.ibw-box .ibw-button {
	margin-top: 6px;
}

.ibw-box .wp-block-button__link {
	display: block;
	width: 100%;
	text-align: center;
	box-sizing: border-box;
}

/* --------------------------------------------------------------------------
   Terminliste  [ibw_weitere_termine], [ibw_termine darstellung="liste"]
   ----------------------------------------------------------------------- */

.ibw-liste {
	display: flex;
	flex-direction: column;
	width: 100%;
	color: var(--ibw-farbe-text);
}

.ibw-liste .ibw-liste__titel {
	margin: 0 0 16px;
}

.ibw-liste__monat {
	padding: 14px 0 6px;
	font-size: var(--ibw-schrift-klein);
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.ibw-liste__zeile {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 12px 0;
	border-bottom: 1px solid var(--ibw-farbe-rand);
}

.ibw-liste__kachel {
	display: flex;
	flex: 0 0 56px;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: 58px;
	background: var(--ibw-farbe-karte);
	border-radius: var(--ibw-radius-klein);
	line-height: 1;
}

.ibw-liste__tag {
	color: var(--ibw-farbe-marke);
	font-family: var(--ibw-schrift-akzent);
	font-weight: 400;
	font-size: 1.5em;
}

.ibw-liste__monatskuerzel {
	margin-top: 4px;
	font-size: var(--ibw-schrift-klein);
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.ibw-liste__text {
	flex: 1 1 auto;
	min-width: 0;
}

.ibw-liste__name {
	color: var(--ibw-farbe-ueberschrift);
	font-weight: 600;
}

.ibw-liste__details {
	font-size: var(--ibw-schrift-klein);
}

.ibw-liste__aktion {
	flex: 0 0 auto;
}

.ibw-liste__zeile--abgesagt .ibw-liste__kachel,
.ibw-liste__zeile--abgesagt .ibw-liste__text {
	opacity: 0.6;
}

.ibw-liste__abgesagt {
	color: var(--ibw-farbe-marke);
	font-size: var(--ibw-schrift-klein);
	font-weight: 600;
}

/* --------------------------------------------------------------------------
   Mobil
   ----------------------------------------------------------------------- */

@media (max-width: 544px) {
	.ibw-karte .ibw-karte__inhalt {
		padding: var(--ibw-innen-mobil);
	}

	.ibw-liste__zeile {
		flex-wrap: wrap;
	}

	.ibw-liste__aktion {
		flex-basis: 100%;
		padding-left: 72px; /* bündig unter dem Text, neben der Datumskachel */
	}
}