/**
 * Investment-Highlights.
 *
 * Karten-Komponente fuer die 3-5 Investmenthighlights im Abschnitt "Ueber uns"
 * (Inhaltskonzept Nextbite). Bewusst als wiederverwendbare Klassen statt als
 * Einzel-Styling pro Spalte: die Karten sollen auch auf der Seite zur neuen
 * Anleihe 26/31 identisch aussehen, und fuenf per Hand gestylte Elementor-
 * Spalten laufen erfahrungsgemaess auseinander.
 *
 * Verwendung im Editor (CSS-Klassen im Reiter "Erweitert"):
 *   Spalte           -> kgf-highlight kgf-highlight--1  (…--2 bis --5)
 *   Ueberschrift Nr. -> kgf-highlight__num
 *   Ueberschrift     -> kgf-highlight__title
 *   Text             -> kgf-highlight__text
 */

.kgf-highlight {
	/* Farben aus dem Elementor-Kit, damit die Karten zur Seite passen. */
	--kgf-hl-accent: var(--e-global-color-secondary, #032F35);
	--kgf-hl-numbg: var(--e-global-color-primary, #B6ED3E);
	--kgf-hl-numfg: var(--e-global-color-secondary, #032F35);
	--kgf-hl-title: #032F35;
	--kgf-hl-text: #2A3B38;
	--kgf-hl-rule: #D7DED9;
	--kgf-hl-surface: #fff;
	--kgf-hl-gap: 9px;
}

/*
 * Frueher bekam jede Karte einen eigenen Farbton aus der Agentur-Vorlage
 * (Marineblau, Tuerkis, Braun, Violett). Keiner davon steht im Kit - auf der
 * Seite standen vier fremde Farben neben Gruen und Beige. Anmerkung
 * Kirchmann: "Passt optisch nicht zum Rest der Seite".
 *
 * Jetzt tragen alle Karten dieselbe Markenfarbe: Balken in Dunkelgruen,
 * Ziffernkreis in Primaergruen - genau die Kombination aus dem Entwurf im
 * Inhaltskonzept. Die Karten bleiben ueber die Ziffer unterscheidbar, ohne
 * dafuer Farben einzufuehren, die es auf der Seite sonst nicht gibt.
 *
 * Ziffer #032F35 auf #B6ED3E: 10,4:1 - deutlich ueber WCAG AA.
 *
 * Die Klassen kgf-highlight--1 bis --5 bleiben im Markup und sind der Haken,
 * falls einzelne Karten doch wieder abgesetzt werden sollen.
 */

/*
 * Elementor haengt die CSS-Klasse an die Spalte, sichtbar ist aber der innere
 * Wrapper. height:100% laesst alle Karten einer Reihe gleich hoch werden.
 */
/*
 * Elementor setzt zwischen Widgets standardmaessig 20px margin-bottom. Die
 * addieren sich zu den Abstaenden hier - der Abstand vor dem Fliesstext war
 * dadurch rund dreimal so gross wie gewollt. Abstaende kommen ausschliesslich
 * aus dieser Datei.
 */
.kgf-highlight .elementor-widget:not(:last-child) {
	margin-bottom: 0;
}

.kgf-highlight > .elementor-element-populated {
	height: 100%;
	margin: 0 var(--kgf-hl-gap);
	padding: 22px 18px 24px;
	background: var(--kgf-hl-surface);
	border-top: 6px solid var(--kgf-hl-accent);
}

/*
 * Elementors Spaltenabstand ist Innenabstand des Wrappers - die weissen
 * Flaechen stossen dadurch aneinander und die Reihe wirkt wie ein einziger
 * Block. Die Karten brauchen echten Aussenabstand, damit sie als einzelne
 * Karten lesbar sind. Aussen buendig mit dem Abschnitt.
 */
/*
 * Zwischen Tablet und kleinem Desktop sind vier Spalten zu schmal - die
 * Titel brauchen dort drei Zeilen und die Karten wirken gequetscht. Zwei
 * nebeneinander ist lesbarer, und die Titel passen wieder in zwei Zeilen.
 * Bewusst in der Komponente statt in den Elementor-Einstellungen, damit das
 * Verhalten nicht davon abhaengt, dass jemand es je Seite nachpflegt.
 */
@media (min-width: 768px) and (max-width: 1024px) {
	.kgf-highlights .elementor-container {
		flex-wrap: wrap;
	}

	.kgf-highlights .kgf-highlight {
		width: 50%;
	}
}

/*
 * Nur solange die Karten nebeneinander stehen: gestapelt wuerde die erste
 * Karte links und die letzte rechts buendig sitzen, alle anderen eingerueckt.
 */
@media (min-width: 768px) {
	.kgf-highlight:first-child > .elementor-element-populated {
		margin-left: 0;
	}

	.kgf-highlight:last-child > .elementor-element-populated {
		margin-right: 0;
	}
}

/*
 * Nummernkreis.
 *
 * Die Selektoren wiederholen bewusst die Spaltenklasse: Elementors globale
 * Kit-Typografie (.elementor-widget-heading .elementor-heading-title) hat
 * dieselbe Spezifitaet wie eine Kombination aus zwei Klassen und wird spaeter
 * geladen - sie wuerde Farbe und Schrift sonst wieder ueberschreiben.
 * font-family: inherit haelt die Display-Schrift (CooperBTBlackHeadline) aus
 * den Karten heraus, die Vorlage nutzt dort eine schlichte Grotesk.
 */
.kgf-highlight .kgf-highlight__num .elementor-heading-title {
	font-family: inherit;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	margin: 0 0 24px;
	border-radius: 50%;
	background: var(--kgf-hl-numbg);
	color: var(--kgf-hl-numfg);
	font-size: 15px;
	font-weight: 700;
	line-height: 1;
}

/* Titel mit Trennlinie darunter. */
.kgf-highlight .kgf-highlight__title .elementor-heading-title {
	font-family: inherit;
	/*
	 * Elementor setzt global border-box. Damit wuerde die reservierte Hoehe
	 * weiter unten den Innenabstand mitzaehlen und der laengste Titel liefe
	 * trotzdem ueber. content-box laesst min-height genau die Textzeilen
	 * messen, die Trennlinien liegen dadurch auf einer Hoehe.
	 */
	box-sizing: content-box;
	margin: 0;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--kgf-hl-rule);
	color: var(--kgf-hl-title);
	font-size: 18px;
	font-weight: 700;
	line-height: 1.25;
}

/*
 * Nebeneinander sollen die Trennlinien auf einer Hoehe liegen, auch wenn ein
 * Titel nur eine Zeile braucht. Zwei Zeilen werden deshalb reserviert -
 * untereinander (Mobile) ist das unnoetig.
 */
@media (min-width: 768px) {
	.kgf-highlight .kgf-highlight__title .elementor-heading-title {
		min-height: 2.5em;
	}
}

/*
 * Vier nebeneinander sind die Spalten so schmal, dass der laengste Titel
 * ("SEHR GUTER KAPITALMARKT-TRACK-RECORD") drei Zeilen braucht. Ohne
 * reservierte Hoehe rutscht dessen Trennlinie unter die der Nachbarn und die
 * Reihe wirkt schief. Drei Zeilen reservieren kostet bei den kuerzeren Titeln
 * etwas Weissraum, haelt die Linien dafuer auf einer Hoehe.
 */
@media (min-width: 1025px) {
	.kgf-highlight .kgf-highlight__title .elementor-heading-title {
		min-height: 3.75em;
	}
}

/*
 * Fliesstext. Greift auch ohne eigene CSS-Klasse auf jedem Text-Editor in der
 * Karte - eine Handgriff weniger im Editor und damit eine Fehlerquelle weniger.
 */
.kgf-highlight .kgf-highlight__text,
.kgf-highlight .elementor-widget-text-editor {
	padding-top: 8px;
	color: var(--kgf-hl-text);
	font-family: inherit;
	font-size: 14px;
	line-height: 1.45;
}

.kgf-highlight .kgf-highlight__text p,
.kgf-highlight .elementor-widget-text-editor p {
	margin-bottom: 0;
	font-size: inherit;
	line-height: inherit;
}