/*
 * talent2maker — Gestaltung auf GeneratePress
 *
 * Übernommen aus dem Custom-CSS des alten Themes Superio. Die Werte sind
 * an der laufenden Seite gemessen, nicht geraten:
 *
 *   Kopfbereich   weißes Band 120px, darunter ein weißer Bogen (SVG, 200px)
 *   Logo          230px breit, 15px von oben
 *   Menü          Signika 17px fett, Großbuchstaben, rechtsbündig
 *   Seitengrund   Grasbild, gekachelt
 *   Inhaltskarte  1320px breit, weiß, 2px schwarz, Schatten 4px 4px 0
 *   Überschriften LuckiestGuy, Fließtext Signika 15/26.25
 *   Fußbereich    #e9e8eb, Innenbreite 1300px
 *
 * Die Seiten des Jobmesse-Plugins bringen ihre eigene Gestaltung mit und
 * werden hier bewusst nicht angefasst.
 */

/* ------------------------------------------------------------- Grundlage */

:root {
	--t2m-ink: #202124;
	--t2m-muted: #77838f;
	--t2m-line: #000;
	--t2m-accent: #f07e26;
	--t2m-shadow: 4px 4px 0 0 #000;
	--t2m-display: 'LuckiestGuy', 'Signika', Verdana, Arial, sans-serif;
	--t2m-text: 'Signika', Verdana, Arial, sans-serif;
	--t2m-breite: 1320px;
}

body {
	font-family: var(--t2m-text);
	font-size: 15px;
	line-height: 26.25px;
	color: var(--t2m-ink);
	background-image: url('/wp-content/plugins/otbt/bg_grass.jpg');
	background-position: center top;
	background-repeat: repeat;
}

/* --------------------------------------------------------- Kopfbereich */

/*
 * Das weiße Band und der Bogen liegen hinter dem Inhalt des Kopfbereichs.
 * Der Bogen ist ein SVG, das per Hook eingefügt wird (functions.php) und
 * gespiegelt wird, damit die Kurve nach rechts ansteigt.
 */
.site-header {
	position: relative;
	background: transparent;
	padding: 0;
	z-index: 5;
}

.site-header::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	/* Muss mit dem Startpunkt des Bogens übereinstimmen, sonst bleibt
	   dazwischen ein grüner Streifen als gerade Kante stehen. */
	height: 120px;
	background: #fff;
	z-index: -10;
}

.t2m-bogen {
	position: absolute;
	top: 120px;
	left: 0;
	width: 100vw;
	overflow: hidden;
	pointer-events: none;
	z-index: 4;
}

.t2m-bogen svg {
	display: block;
	position: relative;
	height: 200px;
	width: 140%;
	overflow: hidden;
	transform: rotateY(180deg) scaleY(-1) scaleX(-1.5);
}

.t2m-bogen .t2m-bogen-fill {
	fill: #fff;
	transform-origin: center;
}

.site-header .inside-header {
	max-width: 1300px;
	padding: 0 10px;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	min-height: 200px;
}

.site-logo { padding: 15px 0 0; }

.site-logo img,
.site-header .header-image {
	width: 230px;
	max-width: 230px;
	height: auto;
}

/*
 * Menü: rechtsbündig, auf Höhe des Logos.
 *
 * Ausdrücklich #site-navigation und nicht .main-navigation — die Klasse
 * tragen bei GeneratePress zwei Elemente, auch der (verborgene) Umschalter
 * für das Mobilmenü. Ohne die Einschränkung bekäme der dieselben Abstände.
 */
#site-navigation {
	background: transparent;
	margin-top: 40px;
	margin-right: 10px;
	flex: 0 1 auto;
}

#site-navigation .inside-navigation { padding: 0; max-width: none; }

/*
 * Der Aufklapp-Pfeil steckt als <span> im Link. Ohne flex bricht er in
 * eine zweite Zeile und macht die betroffenen Einträge 80px hoch statt 54
 * — die Punkte ohne Untermenü standen dadurch tiefer.
 */
#site-navigation .main-nav > ul > li > a {
	font-family: var(--t2m-text);
	font-size: 17px;
	line-height: 29.75px;
	font-weight: 700;
	text-transform: uppercase;
	color: var(--t2m-ink);
	/* Kein seitliches Polster — Superio hatte hier 12px 0. Der Abstand
	   zwischen den Punkten steht darunter als Rand. */
	padding: 12px 0;
	background: transparent;
	display: flex;
	align-items: center;
	white-space: nowrap;
}

#site-navigation .main-nav > ul > li + li { margin-left: 23px; }

/*
 * Der Zeilenumbruch zwischen </a> und dem Untermenü erzeugt im <li> eine
 * leere Textzeile von 26px. Die Einträge mit Untermenü waren dadurch 80px
 * hoch statt 54, und die ohne standen tiefer. Die Zeilenhöhe des <li> auf
 * null zu setzen entfernt sie; der Link bringt seine eigene mit.
 */
#site-navigation .main-nav > ul > li { line-height: 0; }

/*
 * Der Pfeil von GeneratePress ist breiter als der von Superio (25px statt
 * 16px). Weil das Menü rechtsbündig sitzt, verschob sich dadurch die
 * ganze Reihe nach links. Auf Superios Maß gebracht: Zeichen 12px,
 * Abstand 4px.
 */
#site-navigation .dropdown-menu-toggle {
	display: inline-flex;
	align-items: center;
	/* Alle Seiten ausdruecklich: GeneratePress bringt eigenes Polster mit. */
	padding: 0 0 0 4px;
	margin: 0;
	line-height: 1;
}

#site-navigation .dropdown-menu-toggle .gp-icon svg {
	width: 12px;
	height: 12px;
}

/* Gemessen: Superio dunkelt beim Überfahren nur ab (#0a0a0a), es wird
   nicht orange. Das Orange war meine Erfindung. */
#site-navigation .main-nav > ul > li > a:hover,
#site-navigation .main-nav > ul > li.current-menu-item > a {
	color: #0a0a0a;
	background: transparent;
}

/* Untermenüs: weiße Karte im Stil der Seite */
#site-navigation .main-nav ul ul {
	background: #fff;
	border: 2px solid var(--t2m-line);
	box-shadow: var(--t2m-shadow);
	border-radius: 0;
	padding: 10px 0;
	/* So breit wie der längste Eintrag (statt fest 240px, wo lange Namen
	   wie „Menschenfreundin/Menschenfreund“ über den Rand ragten). */
	width: max-content;
	min-width: 240px;
	max-width: 360px;
	overflow: visible; /* Sprechblasen-Spitze oben nicht abschneiden */
}

#site-navigation .main-nav ul ul li a {
	font-family: var(--t2m-text);
	font-size: 15px;
	font-weight: 400;
	text-transform: none;
	color: var(--t2m-ink);
	padding: 7px 20px;
	background: transparent;
	white-space: nowrap;
}

/*
 * Sprechblasen-Spitze am oberen Rand des Untermenüs.
 *
 * Zwei Dreiecke: ein schwarzes außen (wie der 2px-Rahmen der Karte) und ein
 * weißes darüber (wie die Kartenfüllung) — so bekommt die Spitze denselben
 * Rand wie die Box und das Menü sieht aus wie eine Sprechblase. Ersetzt die
 * kaputte Superio-Regel .sub-menu:before, deren border-color auf die nicht
 * mehr definierte Variable --superio-theme-color zeigte und deshalb als
 * schwarzes Kästchen statt als Dreieck erschien.
 */
#site-navigation .main-nav ul ul::before,
#site-navigation .main-nav ul ul::after {
	content: '';
	position: absolute;
	bottom: 100%;
	width: 0;
	height: 0;
	border-style: solid;
}

#site-navigation .main-nav ul ul::before {
	left: 24px;
	border-width: 0 9px 9px 9px;
	border-color: transparent transparent var(--t2m-line) transparent;
}

#site-navigation .main-nav ul ul::after {
	left: 27px;
	border-width: 0 6px 6px 6px;
	border-color: transparent transparent #fff transparent;
}

/* Untermenü: laut altem CSS grau, nicht orange. */
#site-navigation .main-nav ul ul li a:hover { color: #aaa; background: transparent; }

/* ------------------------------------------------------------- Inhalt */

.site-content { padding-top: 0; }

#page.site {
	max-width: none;
	padding: 0;
}

.site-content .content-area {
	max-width: var(--t2m-breite);
	margin: 0 auto;
	padding: 0;
	float: none;
	width: 100%;
}

/*
 * Die weiße Karte.
 *
 * Sie sitzt am Inhaltsbereich, nicht am einzelnen Artikel: Im alten Theme
 * war das Bootstraps .container, und der umschloss die gesamte Auflistung.
 * Am Artikel befestigt bekäme auf Archivseiten jeder Eintrag seine eigene
 * Karte — dort steht aber eine Karte um die ganze Liste.
 */
.site-content .content-area {
	background: #fff;
	border: 2px solid var(--t2m-line);
	box-shadow: var(--t2m-shadow);
	padding: 0;
	margin-bottom: 50px;
	overflow: hidden;
}

.site-main { margin-top: 0; }
.inside-article { padding: 0; }

/* Erstes Element (z. B. trenner_ausbildung.png) bündig an die obere Kante. */
.content-area .entry-content > *:first-child { margin-top: 0; }

/*
 * 30px Luft zwischen Kopf und Inhaltskarte. Der Kopfbereich liegt vor #page,
 * der Abstand am Seitenrahmen wirkt also zwischen Kopf und Karte. Auf der
 * Startseite (feste Karte, kein Scrollen) ausdrücklich 0.
 */
.site.grid-container { margin-top: 30px; }
body.home .site.grid-container { margin-top: 0; }

.entry-content > *:last-child { margin-bottom: 0; }

/* Beitragsköpfe von GeneratePress brauchen wir auf Seiten nicht */
.page .entry-header { display: none; }

/* ------------------------------------------------------- Typografie */

/*
 * Alle Werte an der alten Seite gemessen, nicht aus dem Custom-CSS
 * abgeschrieben — dort standen teils Regeln, die gar nicht zum Zug kamen.
 *
 * Sämtliche Überschriften im Seiteninhalt stammen aus dem Blockeditor
 * (geprüft über alle elf Seiten). Eine Sonderbehandlung für blanke
 * <h2> braucht es deshalb nicht.
 */

.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-content h5,
.entry-content h6 {
	color: var(--t2m-ink);
}

.entry-content h1 {
	font-family: var(--t2m-display);
	font-size: 39px;
	line-height: 50.7px;
	letter-spacing: 1.17px;
	font-weight: 500;
	margin: 28px 0;
}

.entry-content h2 {
	font-family: var(--t2m-display);
	font-size: 32px;
	line-height: 41.6px;
	letter-spacing: 0.96px;
	font-weight: 500;
	margin: 28px 0;
}

.entry-content h3 {
	font-family: var(--t2m-display);
	font-size: 26px;
	line-height: 33.8px;
	letter-spacing: 0.78px;
	font-weight: 500;
	margin: 28px 0;
}

.entry-content h4 {
	font-family: var(--t2m-display);
	font-size: 19px;
	line-height: 24.7px;
	letter-spacing: 0.57px;
	font-weight: 500;
	margin: 26px 0 21px;
}

.entry-content h5 {
	font-family: var(--t2m-display);
	font-size: 15px;
	line-height: 19.5px;
	letter-spacing: 0.45px;
	font-weight: 500;
	margin: 26px 0 21px;
}

.entry-content p {
	font-size: 15px;
	line-height: 26.25px;
	color: var(--t2m-muted);
	margin: 0 0 20px;
}

.entry-content li {
	font-size: 15px;
	line-height: 26.25px;
	color: var(--t2m-muted);
}

/*
 * Links im Inhalt: ohne Unterstreichung (GeneratePress unterstreicht
 * standardmäßig, Superio nicht) und beim Überfahren nur abgedunkelt.
 */
.entry-content a { color: var(--t2m-ink); text-decoration: none; }
.entry-content a:hover { color: #0a0a0a; text-decoration: none; }

/* --------------------------------------------------------- Fußbereich */

.site-footer {
	position: relative;
	background: #e9e8eb;
	padding: 0;
}

.t2m-footer { position: relative; padding: 60px 0 0; }

.t2m-footer-inner {
	width: 1300px;
	max-width: 100%;
	margin: 0 auto;
	padding: 0 20px;
	overflow: hidden;
}

.t2m-footer h2 {
	margin-top: 0;
	font-family: var(--t2m-text);
	text-transform: uppercase;
	font-size: 19px;
	font-weight: 700;
	color: var(--t2m-ink);
}

.t2m-footer ul { list-style: none; padding-left: 0; margin: 0; }
.t2m-footer li { margin-bottom: 10px; font-size: 16px; }
.t2m-footer a { color: var(--t2m-ink); text-decoration: none; }
.t2m-footer a:hover { color: #0a0a0a; }

.t2m-footer table,
.t2m-footer td { border: 0 !important; }

.t2m-footer table { margin-bottom: 80px; width: 100%; }
.t2m-footer td { display: block; }

.t2m-footer-logos { padding-top: 50px; padding-right: 50px; }
.t2m-footer td img { float: right; height: 80px; width: auto; margin-left: 20px; }
.t2m-footer .footer-logo-fuerth { height: 90px !important; margin-bottom: 30px; }

.t2m-footer-unten {
	position: relative;
	padding-bottom: 30px;
	font-size: 14px;
	color: var(--t2m-ink);
}

@media screen and (min-width: 600px) {
	.t2m-footer td { display: table-cell; }
}

/* GeneratePress' eigene Fußzeile brauchen wir nicht */
.site-info { display: none; }

/* -------------------------------------------------------- Schmaler */

@media (max-width: 1024px) {
	.site-header .inside-header {
		min-height: 0;
		padding: 10px;
		flex-wrap: wrap;
	}
	.site-header::before { height: 100%; }
	.t2m-bogen { display: none; }
	#site-navigation { margin-top: 0; }
	.site-content .content-area { padding: 0 16px; }
	.inside-article { padding: 24px 20px; }
}

/* ========================================================== Startseite */

/*
 * Die Startseite trägt keine Inhaltskarte: die Karte (mapplic) liegt
 * bildschirmfüllend hinter allem, der Kopfbereich schwebt darüber. Die
 * Verweise auf Impressum & Co. sitzen als Pillen am unteren Rand.
 *
 * Übernommen aus dem Custom-CSS von Superio (.home #main-container,
 * .mapplic-element, .elementor-widget-container-main-page).
 */

.home .inside-article,
.home .site-main > .page-header {
	background: transparent;
	border: 0;
	box-shadow: none;
	padding: 0;
	margin: 0;
}

.home .site-content .content-area { max-width: none; }
.home .site-content { padding: 0; }

/*
 * Der Kopfbereich schwebt über der Karte, statt sie nach unten zu drücken.
 * position: fixed (nicht absolute), damit er beim geringsten Scrollen NICHT
 * mitwandert — auf der Startseite ist der Kopf fest, der Rest ist Karte.
 * Der Bogen (z-index 4) liegt bereits über der festliegenden Karte
 * (z-index 0); der Kopf mit z-index 10 darüber, damit das Logo frei bleibt.
 */
.home .site-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 10;
}

/*
 * Startseite: kein Scrollen, keine Bildlaufleiste. Karte, Kopf und Pillen
 * liegen alle fest (position: fixed) — es gibt nichts zu scrollen, ein durch
 * Rundungen entstehender Pixel-Überhang würde den Kopf sonst leicht
 * wegschieben. Viewport hart auf 100vh deckeln.
 */
html:has(body.home),
body.home {
	height: 100vh;
	max-height: 100vh;
	overflow: hidden;
}

.home .mapplic-element {
	position: fixed !important;
	top: 0 !important;
	left: 0 !important;
	width: 100vw !important;
	height: 100vh !important;
}

.home .elementor-widget-container-main-page {
	position: fixed;
	bottom: 15px;
	width: 100%;
	z-index: 10;
}

/* Die Pillen stehen rechts, nicht links. */
.home .popup_box__top-section { justify-content: right !important; }

.home .popup_box__right-section {
	display: flex !important;
	justify-content: flex-end;
	padding-right: 10%;
}

.home .popup_box__top-section a {
	color: #000 !important;
	background-color: #eee;
	padding: 5px 15px;
	border-radius: 15px;
	text-decoration: none;
	/* Ohne feste Zeilenhöhe erbt die Pille 26.25px und wird 36px hoch
	   statt 28 — gemessen an der alten Seite. */
	line-height: 17.5px;
}

.home .popup_box__top-section a:hover { color: #e57824 !important; }

/* Die Karte liegt fest; ohne Mindesthöhe hätte die Seite gar keine. */
.home #page.site { min-height: 100vh; }

/* Auf schmalen Bildschirmen blendete das alte Theme die Pillen aus. */
@media (max-width: 1024px) {
	.home .elementor-widget-container-main-page { display: none; }
	.home .site-header { position: relative; }
}

/* ============================ Kollisionen mit dem GP-Markup auflösen */

/*
 * Das übernommene CSS stammt aus einer Bootstrap-Umgebung. Einige
 * Klassennamen bedeuten unter GeneratePress etwas anderes und müssen
 * zurückgesetzt werden, sonst greifen alte Regeln an falscher Stelle.
 */

/*
 * .container war bei Superio der innere Inhaltskasten. GeneratePress
 * vergibt denselben Namen an den äußeren Seitenrahmen #page — die alte
 * Regel machte daraus eine zweite weiße Karte um die gesamte Seite,
 * mitsamt Rahmen, Schatten und 40px Innenabstand.
 */
#page.container,
.site.container {
	background: transparent;
	border: 0;
	box-shadow: none;
	padding: 0;
	margin: 0;
	overflow: visible;
	max-width: none;
}

/*
 * Das übernommene CSS hängt an jeden Menüpunkt mit Untermenü ein ::after
 * mit dem Zeichen \e64b aus der Schriftart "themify". Die gehörte zu
 * Superio und wird hier nicht geladen — übrig blieb ein Ersatzkästchen
 * unter dem Menüpunkt. GeneratePress bringt seinen eigenen Pfeil als SVG
 * mit, der alte wird also nicht gebraucht.
 *
 * Bewusst ohne Einschraenkung auf #site-navigation: die Klasse taucht auch
 * in Untermenues und im Mobilmenue auf, und die Schriftart fehlt ueberall.
 */
.menu-item-has-children::after { content: none; }

/*
 * Das übernommene CSS setzt body { width: 100vw; height: 100vh }. Beides
 * ist schädlich: 100vw rechnet die Bildlaufleiste mit und erzeugt einen
 * waagerechten Überlauf, 100vh deckelt die Seitenhöhe. Unter Superio fiel
 * es nicht auf, hier schon — auf schmalen Geräten wurde der Ansichts-
 * bereich auf 454px statt 390px aufgezogen.
 */
body {
	width: auto;
	height: auto;
	min-height: 100vh;
	overflow-x: hidden;
}

/*
 * Lange, nicht umbrechbare Zeichenketten (Adressen, E-Mails) zogen auf
 * schmalen Geräten die Seite auf — das Impressum kam auf 454px statt 390.
 */
.entry-content { overflow-wrap: anywhere; }
.entry-content a { overflow-wrap: anywhere; }

/* ============================ Klaro Cookie-Consent im Seitenstil */

/*
 * Klaro liefert sein CSS per JavaScript nach — es landet also NACH diesem
 * Stylesheet im Kopf. Deshalb sind die Selektoren mit body{} eine Stufe
 * spezifischer als Klaros eigene (.klaro .cookie-notice .cm-btn…), damit sie
 * unabhängig von der Ladereihenfolge greifen. Farben zusätzlich über Klaros
 * eigene Variablen, das wirkt ohnehin reihenfolgeunabhängig.
 */
.klaro {
	--button-text-color: #fff;
	--green1: var(--t2m-accent);
	--green2: var(--t2m-accent);
	--dark2: var(--t2m-ink);
	font-family: var(--t2m-text);
}

body .klaro .cookie-notice,
body .klaro .cookie-modal .cm-modal,
body .klaro .context-notice {
	border-radius: 0;
	font-family: var(--t2m-text);
}

/* Alle Buttons: eckig, Seitenschrift, fett. */
body .klaro .cookie-notice .cm-btn,
body .klaro .cookie-modal .cm-btn,
body .klaro .context-notice .cm-btn {
	border-radius: 0;
	font-family: var(--t2m-text);
	font-weight: 700;
}

/* Primär „Das ist ok“: orange. */
body .klaro .cookie-notice .cm-btn.cm-btn-success,
body .klaro .cookie-modal .cm-btn.cm-btn-success,
body .klaro .cookie-notice .cm-btn.cm-btn-success-var,
body .klaro .cookie-modal .cm-btn.cm-btn-success-var {
	background-color: var(--t2m-accent);
}
body .klaro .cookie-notice .cm-btn.cm-btn-success:hover,
body .klaro .cookie-modal .cm-btn.cm-btn-success:hover {
	background-color: #d96c1a;
}

/* Sekundär „Ich lehne ab“ / neutrale Buttons: dunkel statt rot/grau. */
body .klaro .cookie-notice .cm-btn.cm-btn-danger,
body .klaro .cookie-modal .cm-btn.cm-btn-danger,
body .klaro .cookie-notice .cm-btn:not(.cm-btn-success):not(.cm-btn-success-var),
body .klaro .cookie-modal .cm-btn:not(.cm-btn-success):not(.cm-btn-success-var) {
	background-color: var(--t2m-ink);
}
body .klaro .cookie-notice .cm-btn.cm-btn-danger:hover,
body .klaro .cookie-modal .cm-btn.cm-btn-danger:hover {
	background-color: #000;
}

/* „Einstellungen“-Link. */
body .klaro .cookie-notice .cm-link,
body .klaro .cookie-modal .cm-link {
	color: var(--t2m-ink);
}
body .klaro .cookie-notice .cm-link:hover,
body .klaro .cookie-modal .cm-link:hover {
	color: var(--t2m-accent);
}