/**
 * Gemeinsame Komponenten: Textfarbe im Investors-Bereich, Button-Variante
 * fuer die neuen Seiten, Stoerer auf der Startseite.
 *
 * Bewusst klein gehalten. Die Seite stylt praktisch jedes Widget einzeln
 * ueber Elementor - diese Datei ergaenzt nur, was dort fehlt, und darf
 * bestehende Einstellungen nicht ueberschreiben.
 */

/*
 * Grundfarbe im Investors-Inhalt.
 *
 * Das Elementor-Kit setzt fuer h1-h6 nur Schriftart und -groesse, KEINE Farbe.
 * Ein Widget ohne eigene Farbeinstellung erbt sie deshalb von weiter oben -
 * und wird im schlimmsten Fall unlesbar. Die Farbe wird hier auf den Container
 * gesetzt, nicht auf die Widgets: geerbte Farbe verliert gegen JEDE Regel, die
 * ein Element direkt anspricht. Die Karten (investment-highlights.css) und alle
 * in Elementor gesetzten Farben bleiben dadurch unberuehrt.
 *
 * .site-main grenzt auf den Inhalt ein - Header, Subnavigation, Footer und die
 * Disclaimer-Popups liegen ausserhalb und behalten ihre eigene Gestaltung.
 */
.kgf-investors main.site-main {
	color: var(--e-global-color-secondary, #032F35);
}

/*
 * Button-Variante fuer Links auf die neuen Anleihe-/Umtausch-Seiten.
 *
 * Die Standard-Buttons sind hellgruen mit dunkler Schrift. Diese Variante
 * dreht das um, damit sich die Verweise auf die neuen Seiten von den
 * Dokument-Downloads absetzen (Anmerkung Kirchmann: "andere Buttonfarbe?").
 * Kontrast hellgruen auf dunkelgruen: rund 10:1, also deutlich ueber AA.
 */
.kgf-btn--neu .elementor-button,
.kgf-btn--neu .elementor-button:visited {
	background-color: var(--e-global-color-secondary, #032F35);
	color: var(--e-global-color-primary, #B6ED3E);
	fill: var(--e-global-color-primary, #B6ED3E);
}

.kgf-btn--neu .elementor-button:hover,
.kgf-btn--neu .elementor-button:focus {
	background-color: var(--e-global-color-accent, #10664F);
	color: var(--e-global-color-primary, #B6ED3E);
	fill: var(--e-global-color-primary, #B6ED3E);
}

.kgf-btn--neu .elementor-button:hover svg,
.kgf-btn--neu .elementor-button:focus svg {
	fill: var(--e-global-color-primary, #B6ED3E);
}

/*
 * Stoerer: durchgehendes Band ueber dem Hero.
 *
 * Hellgruenes Band, dunkelgruene Schrift; beim Hover dreht sich das Paar um.
 * Der Button traegt keine eigene Flaeche - das Band IST die Flaeche, der Button
 * fuellt es komplett aus, damit der ganze Streifen klickbar ist.
 *
 * !important bei background/display/width: .elementor-button bringt aus
 * Elementors frontend.css eine eigene Flaeche und display:inline-block mit,
 * und dieses Stylesheet wird VOR Elementor geladen (Position 6 vs. 8). Ohne
 * !important bliebe der Button eine graue Box im Band.
 */
.kgf-stoerer {
	background-color: var(--e-global-color-primary, #B6ED3E);
	padding: 0 !important;
}

/*
 * Sticky direkt unter dem Header (Anmerkung Kirchmann).
 *
 * Doppelter Klassenselektor mit Absicht: Elementor bringt aus frontend.css
 * `.elementor-section { position: relative }` mit - gleiche Spezifitaet wie
 * `.kgf-stoerer`, aber Elementors Stylesheet laedt spaeter als dieses hier
 * (Position 9 vs. 7). Bei Gleichstand gewinnt das spaetere, und `sticky`
 * kaeme nie an. `.elementor-section.kgf-stoerer` ist (0,2,0) und damit
 * unabhaengig von der Ladereihenfolge.
 *
 * Der Header (.header-main) ist Elementor-sticky bei top:0; seine Hoehe liegt
 * als --kgf-header-h an, gesetzt von js/main-menu.js. --kgf-subnav-h ist 0,
 * solange keine Subnavigation im Stapel liegt - so greift die gleiche Regel
 * auch, falls das Band spaeter auf /investors/ auftaucht. Dieselbe Rechnung
 * benutzt style.css schon fuer #header-close-btn-section.
 *
 * z-index 96: unter Subnavigation (98) und Marquee-Band (97), aber ueber dem
 * Hero, der sich per negativem margin-top darueberzieht.
 */
.elementor-section.kgf-stoerer {
	position: sticky;
	top: calc(var(--kgf-header-h, 80px) + var(--kgf-subnav-h, 0px));
	z-index: 96;
}

/*
 * style.css setzt `body { overflow-x: hidden }` - damit wird der Body zum
 * Scroll-Container und position:sticky oben greift nicht mehr. `clip`
 * schneidet identisch ab, ohne einen Scroll-Container zu erzeugen.
 *
 * investors-subnav.css macht das schon fuer body.kgf-investors. Hier per
 * :has() genau auf den Seiten, die das Band tatsaechlich tragen - so muss
 * die Regel nicht angefasst werden, wenn das Band weitere Seiten bekommt.
 * Ohne :has()-Unterstuetzung bleibt das Band schlicht mitscrollend.
 */
@supports (overflow-x: clip) and selector(body:has(*)) {
	body:has(.kgf-stoerer) {
		overflow-x: clip;
	}
}

.kgf-stoerer > .elementor-container {
	padding: 0;
}

.kgf-stoerer .elementor-widget-button,
.kgf-stoerer .elementor-widget-button > .elementor-widget-container,
.kgf-stoerer .elementor-button-wrapper {
	display: block;
	width: 100%;
}

.kgf-stoerer .elementor-button,
.kgf-stoerer .elementor-button:visited {
	display: flex !important;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100% !important;
	padding: 15px 20px !important;
	background-color: transparent !important;
	border-radius: 0 !important;
	color: var(--e-global-color-secondary, #032F35) !important;
	fill: var(--e-global-color-secondary, #032F35) !important;
	letter-spacing: 0.02em;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.kgf-stoerer .elementor-button:hover,
.kgf-stoerer .elementor-button:focus {
	background-color: var(--e-global-color-secondary, #032F35) !important;
	color: var(--e-global-color-primary, #B6ED3E) !important;
	fill: var(--e-global-color-primary, #B6ED3E) !important;
}


/*
 * Zeilenumbrueche in Buttons.
 *
 * Die Beschriftungen sind lang ("Alle Infos zum Anleihe-Umtausch 2026") und
 * stehen in schmalen Spalten. Ohne Trennung rutscht ein langes Wort als Ganzes
 * in die naechste Zeile und reisst eine Luecke auf.
 *
 * hyphens:auto nutzt das Trennwoerterbuch des Browsers - die Seite ist als
 * lang="de-DE" ausgezeichnet, also wird deutsch getrennt. Bestehende
 * Bindestriche ("Anleihe-Umtausch") bleiben bevorzugte Trennstellen.
 * overflow-wrap ist nur die Notbremse, falls ein Wort breiter als der Button
 * ist und sonst herauslaufen wuerde.
 *
 * Das Layout der Reihen bleibt wie gehabt bei den Elementor-Einstellungen.
 */
.kgf-btn-row .elementor-button-text {
	hyphens: auto;
	-webkit-hyphens: auto;
	overflow-wrap: break-word;
}

/*
 * Gleiche Button-Hoehen innerhalb einer Reihe.
 *
 * Die Spalten sind durch Flexbox ohnehin gleich hoch - nur der Button darin
 * ist so hoch wie sein Text. Bei unterschiedlich langen Beschriftungen stehen
 * die Oberkanten dadurch versetzt.
 *
 * align-content:stretch laesst die Flex-Zeile im Spalteninhalt auf die volle
 * Hoehe wachsen, der Rest der Kette gibt diese Hoehe an den Button weiter.
 * Der Text wird darin mittig gesetzt.
 *
 * Breiten, Abstaende und die Elementor-Ausrichtung bleiben unangetastet.
 */
.kgf-btn-row .elementor-column > .elementor-widget-wrap {
	align-content: stretch;
}

.kgf-btn-row .elementor-widget-button {
	display: flex;
}

.kgf-btn-row .elementor-widget-button > .elementor-widget-container,
.kgf-btn-row .elementor-widget-button .elementor-button-wrapper {
	display: flex;
	width: 100%;
}

.kgf-btn-row .elementor-button-wrapper > .elementor-button {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	text-align: center;
}

/*
 * PDF-Links in Tabellen sehen aus wie die Dokument-Buttons daneben.
 *
 * Gleiche Farben, gleiche Schrift, gleiches Download-Icon rechts - damit ein
 * Dokumentverweis in der Tabelle als dasselbe erkennbar ist wie ein Button
 * im Dokumente-Block. Werte stammen aus den bestehenden Buttons (Inter bold,
 * Hintergrund primary, Text secondary, 15px Innenabstand).
 */
.kgf-pdf-link,
.kgf-pdf-link:visited {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 15px;
	background-color: var(--e-global-color-primary, #B6ED3E);
	color: var(--e-global-color-secondary, #032F35);
	font-family: "Inter", Sans-serif;
	font-weight: bold;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
}

.kgf-pdf-link:hover,
.kgf-pdf-link:focus {
	background-color: var(--e-global-color-primary, #B6ED3E);
	color: var(--e-global-color-secondary, #032F35);
	text-decoration: none;
}

/* Download-Icon wie bei den Dokument-Buttons, rechts neben dem Text. */
.kgf-pdf-link::after {
	content: "";
	width: 1em;
	height: 1em;
	flex: 0 0 auto;
	background-color: currentColor;
	-webkit-mask: var(--kgf-dl-icon) center / contain no-repeat;
	mask: var(--kgf-dl-icon) center / contain no-repeat;
	--kgf-dl-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M7.25 1h1.5v7.19l2.22-2.22 1.06 1.06L8 11.06 3.97 7.03l1.06-1.06 2.22 2.22V1zM2.5 12.5h11V14h-11z'/%3E%3C/svg%3E");
}

/*
 * Infokaesten.
 *
 * Auf der Anleihe-Seite stehen die beiden Zeichnungswege und die Schritt-fuer-
 * Schritt-Anleitung als eigene Kaesten - Anmerkung Kirchmann: "alle
 * Informationen sauber von einander getrennt, zugaenglich und gut sichtbar"
 * bzw. "Als zusaetzlicher Infokasten?".
 *
 * Getrennt wird ueber eine farbige Oberkante, bewusst ohne Hintergrundflaeche -
 * der Seitenhintergrund bleibt durchgehend sichtbar.
 * Die Auszeichnung liegt am .elementor-container, nicht an der Section - sonst
 * liefe der Kasten ueber die volle Fensterbreite statt ueber die Inhaltsbreite.
 */
.kgf-infobox > .elementor-container {
	padding: 24px 0 28px;
	border-top: 6px solid var(--e-global-color-secondary, #032F35);
}

/* Etwas Luft zwischen zwei aufeinanderfolgenden Kaesten. */
.kgf-infobox {
	margin-bottom: 20px;
}

@media (max-width: 767px) {
	.kgf-infobox > .elementor-container {
		padding: 18px 0 22px;
	}
}

/*
 * Hover fuer alle Buttons.
 *
 * In den Widget-Einstellungen ist der Hover mit denselben Farben hinterlegt wie
 * der Ruhezustand (25 Buttons betroffen) - sichtbar passiert beim Ueberfahren
 * also nichts. Statt das an 25 Stellen einzeln zu korrigieren, liegt der Hover
 * hier zentral.
 *
 * Prinzip: das Farbpaar dreht sich um. Heller Button wird dunkel, dunkler
 * Button wird hell. Das gilt fuer beide Varianten und bleibt dadurch als
 * System erkennbar.
 *
 * !important, weil die wirkungslosen Hover-Regeln aus den Widget-Einstellungen
 * mit hoeherer Spezifitaet und spaeter geladen werden. Fokus ist bewusst
 * mitgenommen (:focus-visible), damit die Tastaturbedienung dieselbe
 * Rueckmeldung bekommt.
 */
.elementor-button,
.kgf-pdf-link {
	transition: background-color 0.18s ease, color 0.18s ease, fill 0.18s ease;
}

.elementor-button:hover,
.elementor-button:focus-visible,
.kgf-pdf-link:hover,
.kgf-pdf-link:focus-visible {
	background-color: var(--e-global-color-secondary, #032F35) !important;
	color: var(--e-global-color-primary, #B6ED3E) !important;
	fill: var(--e-global-color-primary, #B6ED3E) !important;
}

.elementor-button:hover svg,
.elementor-button:focus-visible svg,
.kgf-pdf-link:hover::after,
.kgf-pdf-link:focus-visible::after {
	fill: var(--e-global-color-primary, #B6ED3E) !important;
	background-color: var(--e-global-color-primary, #B6ED3E);
}

/* Dunkle Variante dreht in die Gegenrichtung. */
.kgf-btn--neu .elementor-button:hover,
.kgf-btn--neu .elementor-button:focus-visible {
	background-color: var(--e-global-color-primary, #B6ED3E) !important;
	color: var(--e-global-color-secondary, #032F35) !important;
	fill: var(--e-global-color-secondary, #032F35) !important;
}

.kgf-btn--neu .elementor-button:hover svg,
.kgf-btn--neu .elementor-button:focus-visible svg {
	fill: var(--e-global-color-secondary, #032F35) !important;
}

/* Der Stoerer bleibt bei seinem eigenen Wechsel (ganzes Band). */
.kgf-stoerer .elementor-button:hover,
.kgf-stoerer .elementor-button:focus-visible {
	background-color: var(--e-global-color-secondary, #032F35) !important;
	color: var(--e-global-color-primary, #B6ED3E) !important;
	fill: var(--e-global-color-primary, #B6ED3E) !important;
}

/*
 * Textlinks im Inhalt.
 *
 * Ausgangslage war uneinheitlich: hello-elementor setzt global
 * "a { text-decoration: none }", waehrend ".page-content a" die Unterstreichung
 * wieder einschaltet - je nach Umfeld war ein Link also unterstrichen oder
 * nicht und dadurch teils gar nicht als Link erkennbar.
 *
 * Einheitlich: dunkelgruen wie der Fliesstext, mit zurueckhaltender
 * Unterstreichung (etwas abgesetzt, damit Unterlaengen nicht durchgestrichen
 * wirken). Beim Ueberfahren wird die Linie kraeftiger und die Farbe wechselt
 * ins Markengruen - dieselbe Logik wie bei den Buttons, nur in der fuer
 * Fliesstext angemessenen Staerke.
 *
 * Ausgenommen sind Buttons, der PDF-Link (sieht aus wie ein Button) und
 * Navigationen - die bringen ihre eigene Gestaltung mit.
 */
.elementor-widget-text-editor a:not(.elementor-button):not(.kgf-pdf-link),
.elementor-widget-html a:not(.elementor-button):not(.kgf-pdf-link),
.elementor-tab-content a:not(.elementor-button):not(.kgf-pdf-link) {
	color: var(--e-global-color-secondary, #032F35);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	text-decoration-color: rgba(3, 47, 53, 0.45);
	transition: color 0.18s ease, text-decoration-color 0.18s ease;
}

.elementor-widget-text-editor a:not(.elementor-button):not(.kgf-pdf-link):hover,
.elementor-widget-text-editor a:not(.elementor-button):not(.kgf-pdf-link):focus-visible,
.elementor-widget-html a:not(.elementor-button):not(.kgf-pdf-link):hover,
.elementor-widget-html a:not(.elementor-button):not(.kgf-pdf-link):focus-visible,
.elementor-tab-content a:not(.elementor-button):not(.kgf-pdf-link):hover,
.elementor-tab-content a:not(.elementor-button):not(.kgf-pdf-link):focus-visible {
	color: var(--e-global-color-accent, #10664F);
	text-decoration-thickness: 2px;
	text-decoration-color: currentColor;
}

/*
 * Zeichnungswege A und B auf der Anleihe-Seite.
 *
 * Vorher lag ueber jedem der drei Abschnitte eine 6px-Linie (.kgf-infobox).
 * Anmerkungen Kirchmann: "Die harte Trennung passt hier eigentlich nicht, weil
 * es eine Gegenueberstellung von A und B ist", "Option und Bereiche staerker
 * voneinander absetzen" und zur Schritt-Anleitung "Linie passt hier nicht, wie
 * besprochen" samt "Die 'Schritte im Detail' gehoeren zu Option B!".
 *
 * Eine Linie trennt, sie stellt nicht gegenueber. Stattdessen zwei Karten auf
 * heller Flaeche: gleich aufgebaut und dadurch als Alternativen lesbar,
 * unterscheidbar ueber die Farbe der Oberkante (A Primaergruen, B Dunkelgruen).
 *
 * Die Auszeichnung liegt am .elementor-container, nicht an der Section - sonst
 * liefe die Karte ueber die volle Fensterbreite statt ueber die Inhaltsbreite.
 * Der doppelte Klassenselektor ist noetig, weil Elementor
 * `.elementor-section { position: relative }` mitbringt und spaeter laedt.
 */
.elementor-section.kgf-option > .elementor-container {
	background: #fff;
	padding: 26px 28px 30px;
	border-top: 6px solid var(--e-global-color-secondary, #032F35);
}

.elementor-section.kgf-option--a > .elementor-container {
	border-top-color: var(--e-global-color-primary, #B6ED3E);
}

.elementor-section.kgf-option {
	margin-bottom: 28px;
}

/*
 * Abschnitt, der zur Karte darueber gehoert - die Schritt-Anleitung und der
 * Hinweis zum Erklaervideo gehoeren beide zu Option B. Gleiche Flaeche, keine
 * eigene Oberkante, und der negative Abstand hebt den Abstand der Karte
 * darueber exakt auf, sodass eine durchgehende Flaeche entsteht.
 */
.elementor-section.kgf-option__tail > .elementor-container {
	background: #fff;
	padding: 0 28px 30px;
}

.elementor-section.kgf-option__tail {
	margin-top: -28px;
	margin-bottom: 28px;
}

@media (max-width: 767px) {
	.elementor-section.kgf-option > .elementor-container {
		padding: 20px 18px 24px;
	}

	.elementor-section.kgf-option__tail > .elementor-container {
		padding: 0 18px 24px;
	}
}

/*
 * FAQ-Block farblich absetzen - Anmerkung Kirchmann: "DIe FAQs koennte man
 * z.B. alle farblich von dem restlichen Seitencontent absetzen".
 *
 * Der Ton ist Primaergruen zu 20 % auf dem Seitenbeige (#EEF0E4 -> #E3EFC3) und
 * bleibt damit in der Palette, ohne eine fuenfte Farbe einzufuehren. Die
 * Klapptitel darin sind dunkelgruen und heben sich weiterhin klar ab.
 * Kontrast Fliesstext #032F35 auf #E3EFC3: 11,9:1.
 *
 * Das Band besteht aus zwei Sections - Ueberschrift boxed, Klappliste ueber die
 * volle Breite. Beide tragen die Farbe, --start und --end setzen die Raender.
 */
.elementor-section.kgf-faq-band {
	background-color: #E3EFC3;
}

.elementor-section.kgf-faq-band--start {
	margin-top: 48px;
	padding-top: 40px;
}

/*
 * Kein Innenabstand nach unten: die Farbflaeche soll mit der letzten
 * Klappzeile enden, sonst steht ein leerer farbiger Streifen darunter.
 */
.elementor-section.kgf-faq-band--end {
	margin-bottom: 48px;
	padding-bottom: 0;
}

/*
 * Feine Trennlinie ueber einem Abschnitt.
 *
 * Auf den beiden Umtausch-Seiten laufen "Dokumente" und der Verweis auf das
 * jeweils andere Umtauschangebot ohne sichtbare Grenze ineinander. Eine
 * Haarlinie auf Inhaltsbreite gliedert, ohne wie ein Kasten zu wirken -
 * bewusst 1px und transparent statt der 6px-Kante der Options-Karten, damit
 * sie gliedert und nicht trennt.
 *
 * Die Linie sitzt am .elementor-container, damit sie die Inhaltsbreite hat und
 * nicht ueber das ganze Fenster laeuft.
 */
.elementor-section.kgf-rule-top {
	margin-top: 40px;
}

.elementor-section.kgf-rule-top > .elementor-container {
	padding-top: 40px;
	border-top: 1px solid rgba(3, 47, 53, 0.2);
}

/*
 * Einstieg unter dem Hero.
 *
 * Der Hero schliesst ohne Innenabstand ab, der Untertitel klebte deshalb am
 * Bild. 40px ist der Abstand, der auf diesen Seiten ueberall sonst verwendet
 * wird - Trennlinien, Karten, FAQ-Band.
 */
.elementor-section.kgf-lead {
	padding-top: 40px;
}

@media (max-width: 767px) {
	.elementor-section.kgf-rule-top {
		margin-top: 24px;
	}

	.elementor-section.kgf-rule-top > .elementor-container {
		padding-top: 24px;
	}

	.elementor-section.kgf-lead {
		padding-top: 24px;
	}
}