/* 00-base.css */
/* Grundlagen: Schriften, Farben, Reset. Reihenfolge der CSS-Dateien = Dateiname.
   Breakpoints wie im Original (Thrive): Tablet <= 1023px, Mobil <= 767px. */

/* Nur die Schnitte, die die Seiten wirklich rendern (per Chrome-DevTools am Original geprüft).
   Ubuntu 700 gibt es nur als Latin-Subset; reicht für Deutsch. */
@font-face { font-family: Ubuntu; font-style: normal; font-weight: 400; font-display: block; src: url(/fonts/ubuntu-400.woff2) format("woff2"); }
@font-face { font-family: Ubuntu; font-style: normal; font-weight: 500; font-display: block; src: url(/fonts/ubuntu-500.woff2) format("woff2"); }
@font-face { font-family: Ubuntu; font-style: italic; font-weight: 500; font-display: block; src: url(/fonts/ubuntu-500-italic.woff2) format("woff2"); }
@font-face { font-family: Ubuntu; font-style: normal; font-weight: 700; font-display: block; src: url(/fonts/ubuntu-700-latin.woff2) format("woff2"); }
@font-face { font-family: Prompt; font-style: normal; font-weight: 400; font-display: block; src: url(/fonts/prompt-400.woff2) format("woff2"); }
@font-face { font-family: Prompt; font-style: normal; font-weight: 500; font-display: block; src: url(/fonts/prompt-500.woff2) format("woff2"); }
@font-face { font-family: Prompt; font-style: italic; font-weight: 500; font-display: block; src: url(/fonts/prompt-500-italic.woff2) format("woff2"); }

:root {
	/* Farben */
	--c-navy: #000850;          /* Footer, Kicker-Pillen, Menülinks */
	--c-indigo: #333973;        /* Seitenhintergrund oben, Kartenrahmen */
	--c-indigo-hell: #4d5285;   /* Rahmen Partner-/Kontaktbox */
	--c-indigo-dunkel: #1a2162; /* dunkle Totara-Karten */
	--c-orange: #e94f35;        /* Buttons, Icons */
	--c-text: rgba(10, 10, 10, 0.85);
	--c-ueberschrift: #0a0a0a;
	--c-weiss: #fff;
	--c-link: #008fff;          /* Textlinks in Rechtstexten/Stellenanzeigen */
	/* Abschnitts-Hintergründe: im Original halbtransparente Flächen über Weiß */
	--bg-gruen: linear-gradient(rgba(214, 232, 160, 0.5), rgba(214, 232, 160, 0.5)) #fff;
	--bg-mint: #cfefe1;
	--bg-sand: linear-gradient(rgba(241, 219, 164, 0.5), rgba(241, 219, 164, 0.5)) #fff;

	/* Schriften */
	--f-titel: Ubuntu, sans-serif;  /* Überschriften, kursiv 500 */
	--f-text: Prompt, sans-serif;   /* Fließtext */
	--f-ui: Arial, sans-serif;      /* Menü, Kicker-Pillen: das Original rendert hier Arial */
	--f-form: Roboto, sans-serif;   /* Formular: Original lädt Roboto nicht, nimmt lokal installierte */

	--radius: 16px;
}

*, *::before, *::after { box-sizing: border-box; }

/* Kein scroll-behavior:smooth: macht programmatisches Scrollen (Screenshot-Vergleich,
   Browser-Wiederherstellung) asynchron und verschiebt dann den fixierten Kopf. */
html {
	-webkit-text-size-adjust: 100%;
	/* Original rendert überall mit Graustufen-Antialiasing; ohne wirkt Text auf macOS fetter */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

body {
	margin: 0;
	font: 16px/24px var(--f-ui);
	color: var(--c-text);
	/* Muster liegt unter dem ganzen Dokument, sichtbar nur im blauen Kopfbereich */
	background: var(--c-indigo) url(/img/background-blue-4.png) 36% 3%;
}

h1, h2, h3, h4, p, ul, figure { margin: 0; }
ul { padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }

.sr-only {
	position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

:focus-visible { outline: 2px solid var(--c-orange); outline-offset: 2px; }


/* 10-layout.css */
/* Seitengerüst: fixierter Kopf, Footer, Abschnitte.

   Für andere Seiten (Karriere, Impressum, Datenschutz):
   - Header/Footer kommen automatisch über layout.html. Nichts davon überschreiben.
   - Der Kopf ist position:fixed. .kopf-platz reserviert oben seine Höhe (192 / 290 / 197 px
     für Desktop / Tablet / Mobil; auf .seite-rechtliches Desktop 194). Darunter beginnt der
     Seiteninhalt auf dem blauen Body-Hintergrund (--c-indigo mit Muster).
   - body_class "seite-rechtliches" schaltet die Kopf-/Fuß-Variante der Rechtsseiten ein
     (indigo Balken hinter der Kopfkarte, Desktop schmaler). Alle anderen Seiten: wie Startseite.
   - Vorsicht beim Vergleich mit tools/compare.sh: Im Original rechnet Thrive den Platzhalter
     beim Vollseiten-Screenshot neu (Desktop 223 statt 192 usw.), die Referenzbilder sind
     darunter verschoben. Maßgeblich ist die Lage bei normaler Fenstergröße.
   - Farben/Schriften: Custom Properties aus 00-base.css (--c-*, --bg-*, --f-*).
   - .bereich       = Abschnitt über volle Breite, Innenabstand 128px/24px (mobil 32px/16px),
                      Modifier für Hintergrund: .bereich--weiss / --gruen / --mint / --sand.
   - .bereich__innen = zentrierter Inhalt, max. 1440px.
   - Komponenten (20-komponenten.css): .kicker (Pille über Überschrift), .btn (orange),
     .titel-1/.titel-2/.titel-3 (Ubuntu kursiv), .fliesstext (Prompt 20/32), .txt (s. dort).
   - Breakpoints: @media (max-width: 1023px) Tablet, @media (max-width: 767px) Mobil. */

/* ── Kopf ─────────────────────────────────────────────────────────────────── */

.kopf-platz { height: 192px; }

.kopf {
	position: fixed;
	top: 0; left: 0; right: 0;
	z-index: 90;
	padding: 72px 24px 32px;
}

.kopf__box {
	max-width: 1392px;
	margin: 0 auto;
	display: flex;
	align-items: center;
	/* links 9px statt 16px: das Original hat hier eine Spaltenreihe mit -15px/+8px Versatz */
	padding: 16px 24px 16px 9px;
	background: var(--c-weiss);
	border-radius: 8px;
}

.kopf__logo { flex: 0 0 15.5%; padding-left: 15px; }
.kopf__logo img { width: 196px; }

.kopf__nav { flex: 0 0 64.5%; padding-left: 47px; }
.kopf__nav ul { display: flex; justify-content: center; align-items: center; }
.kopf__nav li { padding: 5px 15px; }
.kopf__nav a {
	display: block;
	font: 700 16px/32px var(--f-ui);
	letter-spacing: 1px;
	color: var(--c-navy);
}
.kopf__nav a:hover { color: var(--c-orange); }

/* Auf Desktop blendet das Original das Menü aus (Thrive-Fehler: Menü hängt unsichtbar
   links außerhalb). Wir zeigen es bewusst an. Soll es exakt wie im Original fehlen:
   hier .kopf__nav ul { visibility: hidden } setzen. */

.kopf__cta {
	/* Rest-Spalte (20%) zentriert den Button über margin:auto */
	flex: none;
	margin: 0 auto;
	padding: 16px;
	background: var(--c-orange);
	border-radius: 8px;
	font: 500 20px/24px var(--f-titel);
	color: var(--c-weiss);
	white-space: nowrap;
	position: relative;
	left: 7.5px; /* Mitte der 20%-Spalte inkl. 15px Spalten-Innenabstand */
}

.kopf__burger, .kopf__zu { display: none; }
.kopf__overlay { display: none; }

/* Scroll-Zustand: ab 160px Scrollweite kompakter Kopf mit Schatten (site.js) */
.kopf--kompakt { padding: 16px 24px; }
.kopf--kompakt .kopf__box { box-shadow: rgba(0, 0, 0, 0.25) 0 8px 12px; }
.kopf--kompakt .kopf__cta { line-height: 19.2px; }

@media (max-width: 1023px) {
	.kopf-platz { height: 290px; }
	.kopf__box { flex-direction: column; padding: 16px; }
	.kopf__logo { flex: none; padding: 0; margin-top: 24px; }
	.kopf__logo img { width: 320px; }
	.kopf__nav { flex: none; width: 100%; padding: 0; margin: 8px 0; }
	.kopf__cta { display: none; }

	.kopf--kompakt .kopf__box { padding: 4px 16px; }
	.kopf--kompakt .kopf__logo { margin-top: 8px; }
	.kopf--kompakt .kopf__logo img { width: 240px; }
	.kopf--kompakt .kopf__nav { margin: 4px 0; }
}

@media (max-width: 767px) {
	.kopf-platz { height: 197px; }
	.kopf__box { flex-direction: row; justify-content: space-between; padding: 16px 24px; }
	.kopf__logo { margin: 0; }
	.kopf__logo img { width: 203px; }
	.kopf--kompakt .kopf__box { padding: 4px 24px; }
	.kopf--kompakt .kopf__logo { margin: 0; }
	.kopf--kompakt .kopf__logo img { width: 217px; }

	.kopf__burger, .kopf__zu {
		display: block;
		padding: 10px 10px 2px;
		border: 0;
		background: none;
		cursor: pointer;
		fill: var(--c-orange);
	}
	.kopf__burger { margin: 8px 0; }

	/* Mobilmenü: Panel fährt von links herein, 80% breit (wie Thrive „side left“) */
	.kopf__nav {
		position: fixed;
		top: 0; bottom: 0; left: 0;
		width: 80vw;
		margin: 0;
		background: var(--c-weiss);
		overflow-y: auto;
		transform: translateX(-100%);
		visibility: hidden;
		transition: transform 0.25s ease, visibility 0.25s;
		z-index: 2;
	}
	.kopf__nav ul { display: block; }
	.kopf__nav li { margin: 5px 0; padding: 7px 15px; }
	.kopf__nav a { padding: 10px 32px; text-align: center; }
	.kopf__zu { position: fixed; top: 0; left: 80vw; }

	.kopf--offen .kopf__nav { transform: none; visibility: visible; }
	.kopf--offen .kopf__overlay { display: block; position: fixed; inset: 0; z-index: 1; background: rgba(0, 8, 80, 0.3); }
}

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

/* Sprunglink für Tastatur: erscheint erst bei Fokus */
.sprung:focus {
	position: fixed; z-index: 100; top: 8px; left: 8px;
	width: auto; height: auto; margin: 0; padding: 8px 12px; clip: auto;
	background: var(--c-weiss); color: var(--c-navy);
}

/* Anker unter dem fixierten Kopf nicht verstecken */
[id] { scroll-margin-top: 120px; }

/* ── Abschnitte ───────────────────────────────────────────────────────────── */

.bereich { padding: 128px 24px; }
.bereich--weiss { background: var(--c-weiss); }
.bereich--gruen { background: var(--bg-gruen); }
.bereich--mint { background: var(--bg-mint); }
.bereich--sand { background: var(--bg-sand); }
.bereich__innen { max-width: 1440px; margin: 0 auto; }

@media (max-width: 767px) {
	.bereich { padding: 32px 16px; }
}

/* Rechtsseiten (Impressum, Datenschutz, body.seite-rechtliches) haben im Original ein anderes
   Kopf-Symbol: indigofarbener Balken hinter der Karte, auf Desktop schmaler (1160px) und
   Button ohne Zusatzhöhe. Darunter bleibt 7px Weiß bis zum Seiteninhalt (Platzhalter 194px). */
.seite-rechtliches .kopf { background: var(--c-indigo); }
@media (min-width: 1024px) {
	.seite-rechtliches .kopf-platz { height: 194px; }
	.seite-rechtliches .kopf__box { max-width: 1112px; }
	.seite-rechtliches .kopf__logo { flex-basis: 19.9%; }
	.seite-rechtliches .kopf__logo img { width: 200px; }
	.seite-rechtliches .kopf__nav { flex-basis: 62.3%; }
	.seite-rechtliches .kopf__cta { line-height: 19.2px; }
	.seite-rechtliches .fuss__innen { max-width: 1080px; }
}

/* ── Footer ───────────────────────────────────────────────────────────────── */

.fuss {
	/* Farbfleck-Grafik unten rechts, skaliert auf Footerhöhe */
	background: var(--c-navy) url(/img/footer-1.png) no-repeat 100% 100% / contain;
	color: rgba(255, 255, 255, 0.6);
}
.fuss__innen { max-width: 1440px; margin: 0 auto; padding: 40px 20px 20px; }
.fuss__logo { display: block; width: max-content; max-width: 100%; margin: 20px 0; }
.fuss__logo img { width: 502px; }

.fuss__spalten {
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: 50px;
	padding-bottom: 20px;
	margin-bottom: 20px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.fuss__titel {
	margin-bottom: 15px;
	font: 400 13px/32px var(--f-titel);
	letter-spacing: 2px;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.3);
}
.fuss__kontakt ul { padding: 1px; }
.fuss__kontakt li {
	display: flex;
	align-items: flex-start;
	padding-bottom: 8px;
	font: 400 14px/19.6px var(--f-titel);
}
.fuss__kontakt svg {
	flex: none;
	width: 22px; height: 22px;
	margin: 1px 11px 1px 1px;
	fill: rgba(255, 255, 255, 0.12);
}
.fuss__nav li { padding: 1px; font: 400 14px/32px var(--f-text); }
.fuss a:hover { color: var(--c-weiss); }

.fuss__copy {
	font: 400 11px/18.7px var(--f-text);
	letter-spacing: 2px;
	text-align: center;
	color: rgba(255, 255, 255, 0.33);
}

@media (max-width: 1023px) {
	.fuss__innen { padding: 40px 40px 20px; }
	.fuss__spalten { padding-bottom: 15px; margin-bottom: 15px; }
	.fuss__nav { margin-bottom: 30px; }
}

@media (max-width: 767px) {
	.fuss__innen { padding: 30px 20px 20px; }
	.fuss__logo img { width: 350px; }
	.fuss__spalten { grid-template-columns: 1fr; }
	.fuss__kontakt, .fuss__nav { margin-bottom: 20px; }
	.fuss__titel { margin-bottom: 10px; font-size: 12px; }
	.fuss__copy { font-size: 10px; line-height: 17px; letter-spacing: 0; }
}


/* 20-komponenten.css */
/* Wiederverwendbare Bausteine: Überschriften, Fließtext, Kicker-Pille, Buttons, Icons, Formular. */

/* .txt: 1px Innenabstand um Textgruppen. Das Original (Thrive) hat um jeden Textblock so einen
   Rahmen; ohne ihn verrutscht alles um 1-2px. Überschrift + Absätze je in eigenes .txt packen. */
.txt { padding: 1px; }

.titel-hero, .titel-1, .titel-2, .titel-3 {
	font-family: var(--f-titel);
	font-style: italic;
	font-weight: 500;
	color: var(--c-ueberschrift);
}
.titel-hero { font-size: 48px; line-height: 62.4px; color: var(--c-weiss); }
.titel-1 { font-size: 48px; line-height: 67.2px; padding-bottom: 8px; }
.titel-2 { font-size: 36px; line-height: 50.4px; padding-bottom: 8px; }
.titel-3 { font-size: 32px; line-height: 44.8px; padding: 16px 0; }

.fliesstext {
	padding: 5px 0 10px;
	font: 400 20px/32px var(--f-text);
	color: var(--c-text);
}

@media (max-width: 767px) {
	.titel-hero { font-size: 38px; line-height: 49.4px; }
	.titel-1 { font-size: 36px; line-height: 50.4px; }
}

/* Kicker: umrandete Pille über einer Abschnittsüberschrift */
.kicker {
	display: table;
	padding: 12px 14px;
	border: 2px solid var(--c-navy);
	border-radius: 64px;
	font: 700 18px/19.2px var(--f-ui);
	letter-spacing: 1px;
	color: var(--c-navy);
}
.kicker--mitte { margin-left: auto; margin-right: auto; }
.kicker--gross { font-size: 20px; line-height: 21.6px; }

/* Orangefarbener Button, optional mit Pfeil-Icon rechts */
.btn {
	display: inline-flex;
	align-items: center;
	padding: 18px 22px;
	background: var(--c-orange);
	border-radius: 8px;
	font: 700 20px/24px var(--f-titel);
	color: var(--c-weiss);
}
.btn svg { width: 24px; height: 24px; margin-left: 15px; fill: currentColor; }
.btn:hover { filter: brightness(1.08); }

/* Icons aus dem Sprite (#i-…) in index.html. Größe = Schriftgröße-Äquivalent des Originals. */
.icon { width: 32px; height: 32px; fill: currentColor; }

/* Kontaktformular (Partial demo-formular.html) */
.formular {
	margin-bottom: 20px;
	padding: 24px 0;
	background: var(--c-weiss);
	font-family: var(--f-form);
}
.formular__feld { position: relative; margin: 10px 0; }
.formular input[type="text"],
.formular input[type="email"],
.formular textarea {
	display: block;
	width: 100%;
	padding: 16px;
	border: 0;
	border-radius: 3px;
	background: #f6f6f6;
	font: 400 16px var(--f-form);
	color: rgba(0, 0, 0, 0.8);
}
.formular textarea { height: 128px; min-height: 40px; line-height: 24px; resize: both; }
.formular ::placeholder { color: rgba(0, 0, 0, 0.55); opacity: 1; }
.formular__zaehler {
	margin-top: 7px;
	padding: 1px;
	font: 400 12px/18px var(--f-ui);
	letter-spacing: 1px;
	text-align: right;
	color: rgba(0, 0, 0, 0.45);
}
.formular__check { display: flex; align-items: flex-start; }
.formular__check input {
	appearance: none;
	flex: none;
	width: 18px; height: 18px;
	margin: 0 10px 0 0;
	border-radius: 4px;
	background: rgba(146, 146, 146, 0.3);
	cursor: pointer;
}
.formular__check input:checked {
	background: var(--c-orange) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23fff' d='M173.9 439.4l-166.4-166.4a25.6 25.6 0 0 1 0-36.2l36.2-36.2a25.6 25.6 0 0 1 36.2 0L192 312.7 432.1 72.6a25.6 25.6 0 0 1 36.2 0l36.2 36.2a25.6 25.6 0 0 1 0 36.2L210.1 439.4a25.6 25.6 0 0 1-36.2 0z'/%3E%3C/svg%3E") center / 12px no-repeat;
}
.formular__check label {
	padding-left: 9px; /* Original beginnt den Text mit „&nbsp; “ */
	font: 400 18px/18px var(--f-form);
	color: rgba(0, 0, 0, 0.7);
	cursor: pointer;
}
.formular__check a:hover { text-decoration: underline; }
.formular__senden {
	display: table;
	margin: 20px auto;
	padding: 16px 24px;
	border: 0;
	border-radius: 16px;
	background: var(--c-orange);
	font: 700 18px/21.6px var(--f-form);
	letter-spacing: 2px;
	color: var(--c-weiss);
	cursor: pointer;
}
.formular__senden:hover { filter: brightness(1.08); }

/* Rückmeldung nach dem Absenden (forms.js setzt Rahmen und Abstand inline, Rahmenfarbe = currentColor) */
.undynamize-form-notice { font: 500 18px/1.5 var(--f-text); }
.undynamize-form-notice--sent { background: #e8f5e9; color: #1b5e20; }
.undynamize-form-notice--error,
.undynamize-form-notice--limit,
.undynamize-form-notice--failed { background: #fdecea; color: #a12a1b; }


/* 30-home.css */
/* Startseite. Abschnitte in Seitenreihenfolge; Tablet/Mobil jeweils direkt beim Abschnitt. */

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ── Hero (blau, Muster kommt vom Body) ─────────────────────────────────── */
.hero { padding: 1px 16px; margin-bottom: 82px; }
.hero__inhalt { max-width: 1440px; min-height: 473px; margin: 0 auto; padding: 20px 96px; }
.hero__icon { width: 48px; height: 48px; color: var(--c-orange); }
.hero .fliesstext { color: rgba(255, 255, 255, 0.85); }
.hero__btn { margin: 40px 0 20px; }

@media (max-width: 767px) {
	.hero__inhalt { padding: 20px 16px; }
}

/* 404-Seite nutzt den Hero; ohne Folgeabschnitt direkt vor dem Footer */
.hero--404 { margin-bottom: 0; padding-bottom: 80px; }
.hero--404 .hero__inhalt { min-height: 0; }

/* ── Über uns ───────────────────────────────────────────────────────────── */
@media (max-width: 1023px) {
	.ueber-uns__box { padding: 0 24px; }
}
@media (max-width: 767px) {
	.ueber-uns { padding: 128px 16px; }
	.ueber-uns__box { padding: 32px 0; }
}

/* ── Customer Stories (Akkordeon) ───────────────────────────────────────── */
.stories-bereich { padding: 64px 24px 128px; }
.stories-bereich .kicker { margin: 24px 0 8px; }
.stories-bereich__intro { padding-bottom: 0; }
.stories { margin-top: 32px; padding: 1px 1px 1px 4px; }

.story { margin-bottom: 12.5px; }
.story__kopf {
	display: flex;
	/* links +4.45px: Thrive hatte hier einen unsichtbaren Clearfix-Punkt vor dem Titel */
	padding: 24px 88px 24px 52.45px;
	background: var(--c-weiss);
	border: 1px solid #e4e8e9;
	border-radius: 16px;
	box-shadow: rgba(0, 0, 0, 0.12) 0 3px 9px -2px;
	list-style: none;
	cursor: pointer;
}
.story__kopf::-webkit-details-marker { display: none; }
.story__titel {
	font: 500 36px/32px var(--f-titel);
	color: #0d0c0c;
}
.story[open] > .story__kopf {
	padding: 24px 88px 24px 52.45px;
	border: 0;
	border-radius: 20px 20px 0 0;
	box-shadow: rgba(0, 0, 0, 0.12) 0 0 12px -2px;
}
.story[open] .story__titel { font-style: italic; }
.story__kopf:hover .story__titel { color: var(--c-orange); }

.story__inhalt {
	padding: 0 56px 32px;
	background: var(--c-weiss);
	border-radius: 0 0 20px 20px;
}
.story__inhalt p {
	/* Original: 16px-Zeilen mit 20px-Spans ergeben 30px-Zeilen, Schrift 1px höher */
	padding: 4px 0 11px;
	font: 400 20px/30px var(--f-text);
	color: #000;
}
.story__inhalt strong { font-weight: 500; }
/* Im Original endet der DB-Text mit zwei Umbrüchen = eine Leerzeile */
.story__schluss { margin-bottom: 30px; }

.story__fuss {
	display: flex;
	align-items: flex-start;
	width: 313px;
	margin: 10px 0;
	padding: 15px 0;
}
/* Icons beginnen bei einem Drittel der Zeilenbreite (Thrive-Spaltenraster 33,3 / 66,7) */
.story__logo { flex: none; width: 90px; margin: 20px calc(33.3% + 5px - 90px) 20px 0; }
.story__leistungen { display: flex; gap: 15px; padding: 25px 0; }
.story__leistungen li {
	width: 59.33px;
	height: 59.33px;
	padding: 10.67px;
	border: 3px solid #000;
	border-radius: 50%;
	color: #000;
}

@media (max-width: 1023px) {
	.story__fuss { width: 100%; }
	.story__leistungen { flex-direction: column; gap: 0; }
}
@media (max-width: 767px) {
	.stories-bereich { padding: 64px 16px 128px; }
	.story__kopf, .story[open] > .story__kopf { padding: 15px 55px 15px 19.45px; }
	.story[open] > .story__kopf { padding-left: 19.45px; }
	.story__titel { line-height: 57.6px; }
	.story__inhalt { padding: 20px; }
	.story__fuss { flex-direction: column; }
	.story__logo { margin: 20px 0; }
	.story__leistungen { flex-direction: row; gap: 15px; }
}

/* ── Totara Gold Partner ────────────────────────────────────────────────── */
.partner { padding: 128px 16px 64px; }
.partner__box {
	display: flex;
	margin: 8px auto;
	padding: 49px 32px; /* 24 + 10 + 15 aus dem verschachtelten Spaltenraster des Originals */
	box-shadow: inset 0 0 0 2px var(--c-indigo-hell); /* Rahmen ohne Platzbedarf, s. .leistung */
	border-radius: var(--radius);
	background: var(--c-weiss);
}
.partner__bild { flex: 0 0 calc(46.5% + 7px); padding-right: 15px; }
.partner__logo { width: 585px; margin-top: 32px; }
.partner__badges { display: flex; gap: 20px; margin: 16px 0 0 2px; }
.partner__badges img { width: 40px; }
.partner__text { flex: 1; padding-left: 0; }
.partner__text .titel-2 { padding: 16px 0 8px; }
.partner__text p { padding: 5px 0 10px; font: 400 20px/30px var(--f-text); color: var(--c-navy); }

@media (max-width: 1023px) {
	.partner { padding: 128px 24px 64px; }
	.partner__box { flex-direction: column; }
	.partner__bild { padding: 0; }
	.partner__logo { width: calc(100% - 32px); margin: 8px; }
	/* 23 = 8 Bildrand + 15 (Ränder kollabieren sonst) */
	.partner__badges { justify-content: flex-end; gap: 15px; margin: 23px 0 0; }
}
@media (max-width: 767px) {
	.partner { padding: 32px 16px; }
	.partner__box { flex-direction: column-reverse; }
	.partner__logo { width: 100%; margin: 0; }
	.partner__badges { justify-content: center; gap: 20px; margin: 15px 0 0; }
}

/* ── Services ───────────────────────────────────────────────────────────── */
.leistungen { padding: 64px 24px 128px; }
.leistungen .kicker { margin-top: 24px; }
.leistungen__titel { padding-top: 16px; text-align: center; }
.leistungen__intro { padding-bottom: 0; text-align: center; }
.leistungen__reihe {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0 24px;
	margin-top: 10px;
}
.txt + .leistungen__reihe { margin-top: 80px; }
.leistung {
	max-width: 464px;
	min-height: 357px;
	margin: 8px 0;
	padding: 24px 32px 8px;
	/* Rahmen als Schatten: im Original liegt er auf einer Hintergrundebene und nimmt keinen
	   Platz ein. Ein echter border würde Inhalt und Höhe um 2px verschieben. */
	box-shadow: inset 0 0 0 2px var(--c-indigo);
	border-radius: var(--radius);
}
.leistung .icon { color: var(--c-orange); }
.leistung p, .produkt p { padding-top: 5px; font: 400 20px/30px var(--f-text); color: var(--c-text); }

@media (max-width: 1023px) {
	.leistungen__reihe { grid-template-columns: 1fr; }
	.leistung { max-width: 96%; min-height: 0; margin: 8px auto; }
}
@media (max-width: 767px) {
	.leistungen { padding: 32px 16px; }
	.leistung { max-width: 98%; padding-bottom: 16px; }
}

/* ── Lernplattformen / Warum Totara ─────────────────────────────────────── */
.totara .kicker { margin-bottom: 8px; }
.totara .titel-1 { padding-bottom: 0; }
.totara__intro {
	display: grid;
	grid-template-columns: calc(64.4% - 5.34px) 1fr; /* 64,4 / 35,6 inkl. 15px Abstand */
	column-gap: 15px;
	align-items: center;
	margin: 10px 0;
	padding: 15px 0;
}
.totara__intro .fliesstext:first-child { padding-top: 0; }
.totara__logo img { width: 380px; margin: 0 auto; }
.totara__produkte {
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: 15px;
	margin-top: 10px;
	padding: 15px 0;
}
.produkt {
	min-height: 278px;
	margin: 8px 0;
	padding: 24px 32px;
	border-radius: var(--radius);
	background: var(--c-indigo-dunkel);
}
.produkt .titel-3, .produkt p { color: var(--c-weiss); }
@media (max-width: 1023px) {
	.produkt { min-height: 385px; }
}
@media (max-width: 767px) {
	.totara__intro, .totara__produkte { grid-template-columns: 1fr; }
	.totara__logo { padding: 16px; }
	.totara__logo img { width: 100%; }
	.produkt { min-height: 0; }
}
.produkt p { padding-bottom: 10px; }
.produkt strong { font-weight: 500; }

/* ── Kontakt ────────────────────────────────────────────────────────────── */
.kontakt { padding: 64px 1px 128px; }
.kontakt__aussen { max-width: 1160px; margin: 0 auto; padding: 20px; }
.kontakt__box {
	margin-top: 8px;
	padding: 32px 32px 0;
	box-shadow: inset 0 0 0 2px var(--c-indigo-hell);
	border-radius: var(--radius);
}
.kontakt .titel-1 { padding-top: 16px; }
/* Der Rahmen ist ein inset-Schatten, den der weiße Formular-Hintergrund am unteren Rand überdeckt. */
.kontakt .formular { background: none; }
@media (max-width: 767px) {
	.kontakt__box { padding: 16px; }
	.kontakt .formular { padding: 1px; }
	.kontakt .formular__senden { padding: 18px; }
}

/* ── Netzwerk ───────────────────────────────────────────────────────────── */
.netzwerk { padding: 128px 1px; }
.netzwerk__box { max-width: 1160px; margin: 0 auto; padding: 0 20px 20px; }
.netzwerk .titel-1 { padding: 8px 0 16px; }
.partnerfirma {
	display: grid;
	/* Spaltenraster des Originals: 28,7 % / 71,3 % inkl. 15px Abstand */
	grid-template-columns: calc(28.7% - 10.7px) 1fr;
	column-gap: 15px;
	align-items: start;
	margin-top: 32px;
	padding: 24px 32px;
	border-radius: var(--radius);
	background: var(--c-weiss);
}
.netzwerk .txt + .partnerfirma { margin-top: 8px; }
.partnerfirma > img { width: 264px; margin: 20px 0; }
.partnerfirma__text { align-self: center; }
.partnerfirma p { padding: 5px 0 10px; font: 400 16px/24px var(--f-text); color: var(--c-text); }
@media (max-width: 767px) {
	.netzwerk { padding: 32px 16px; }
	.netzwerk__box { padding: 0 0 20px; }
	.netzwerk .titel-1 { padding: 4px 0 8px; }
	.partnerfirma { grid-template-columns: 1fr; padding: 16px; }
	.partnerfirma > img { margin: 20px auto; }
	.partnerfirma .titel-2 { font-size: 32px; line-height: 44.8px; }
}


/* 40-karriere.css */
/* Karriere-Seite: Hero, Stellenanzeigen (src/stellen/*.md), Bewerbungs-Hinweis.
   Maße aus dem Thrive-Original übernommen; Kommentare nennen die Herkunft,
   wo ein Wert sonst willkürlich aussähe. */


/* ── Hero ─────────────────────────────────────────────────────────────── */

.karriere-hero {
	position: relative;
	z-index: 1;
	box-sizing: border-box;
	max-width: 1500px;
	min-height: 760px;
	/* Der Hero schiebt sich unter den fixierten Kopf (Original: -199px, hier 1px
	   weniger wegen Rundung). Gilt für alle Breiten, da relativ zu .kopf-platz. */
	margin: -198px auto 15px;
	padding: 20px;
	border-radius: 0 0 64px 64px;
	overflow: hidden;
	background:
		url(/img/Union-1.png) -3% -12% / auto no-repeat,
		url(/img/ab9cf86ea589a3995a093e94db277fa6.png) 50% 50% / cover no-repeat;
}

.karriere-hero__text {
	margin-top: 264px;
	padding: 20px 96px;
}

.karriere-hero__icon {
	display: block;
	width: 48px;
	height: 48px;
	fill: var(--c-orange);
}

.karriere-hero h1 {
	max-width: 684px;
	margin: 1px 1px 2px 2px;
	padding: 0;
	font: italic 500 48px/1.3 var(--f-titel);
	color: #fff;
}

.karriere-hero h1 em {
	font-style: inherit;
}

.karriere-hero p {
	/* feste Breite wie im Original: ragt auf Tablets bewusst über das Padding hinaus */
	width: 684px;
	margin: 0 1px 0 2px;
	padding: 5px 0 10px;
	font: 400 20px/32px var(--f-text);
	color: rgba(255, 255, 255, 0.85);
}

/* ── Stellenanzeigen ──────────────────────────────────────────────────── */

/* Der Body ist indigo (Header-Hintergrund). Ab hier ist die Seite weiß, und zwar
   schon 153px höher, damit neben den runden Hero-Ecken Weiß statt Indigo steht. */
.stellen {
	position: relative;
	background: #fff;
}

.stellen::before {
	content: "";
	position: absolute;
	z-index: -1;
	left: 0;
	right: 0;
	bottom: 100%;
	height: 153px;
	background: #fff;
}

.stelle {
	box-sizing: border-box;
	max-width: 1160px;
	margin: 0 auto;
	/* unten 84px = Abstand Text→Abschnittsende im Original (32 + 20 + 32) */
	padding: 16px 20px 84px;
}

.stelle__titel {
	margin: 0 0 20px;
	padding: 16px 0 8px;
	font: italic 500 48px/1.4 var(--f-titel);
	color: #000;
}

.stelle__text {
	padding: 1px;
}

.stelle h3 {
	margin: 0;
	padding: 16px 0 8px;
	font: 500 24px/1.4 var(--f-titel);
	color: var(--c-ueberschrift);
}

/* Einleitung ohne "## Überschrift" erzeugt ein leeres h3, das keinen Platz belegen soll. */
.stelle h3:empty {
	display: none;
}

/* Aufzählungen sehen im Original aus wie Absätze: keine Punkte, kein Einzug. */
.stelle ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.stelle p,
.stelle li {
	margin: 0;
	padding: 5px 0 10px;
	font: 400 20px/32px var(--f-text);
	color: var(--c-text);
}

.stelle strong {
	font-weight: 500;
}

.stelle a {
	color: var(--c-link);
	text-decoration: none;
}

/* ── Bewerbungs-Hinweis ───────────────────────────────────────────────── */

.karriere-bewerbung {
	/* content-box: die Mindesthöhe gilt wie im Original für den Inhalt ohne Padding */
	box-sizing: content-box;
	min-height: 150px;
	padding: 64px 0;
	text-align: center;
	background: #dcd0f0;
}

.karriere-bewerbung h2 {
	max-width: 1312px;
	margin: 0 auto;
	padding: 1px;
	font: italic 500 48px/1.3 var(--f-titel);
	color: var(--c-ueberschrift);
}

.karriere-bewerbung h2 em {
	font-style: inherit;
}

.karriere-bewerbung p {
	max-width: 1114px;
	margin: 0 auto;
	padding: 6px 1px 11px;
	font: 400 20px/32px var(--f-text);
	color: var(--c-text);
}

.karriere-bewerbung a {
	color: var(--c-link);
	text-decoration: none;
}

@media (max-width: 1023px) {
	.stelle {
		padding-left: 21px;
		padding-right: 21px;
	}

	.stelle h3 {
		font-size: 22px;
	}
}

@media (max-width: 767px) {
	.karriere-hero {
		background-position: 19% -66%, 52% 50%;
	}

	.karriere-hero__text {
		padding-left: 16px;
		padding-right: 16px;
	}

	.karriere-hero h1 {
		font-size: 36px;
	}

	.karriere-hero h1 {
		max-width: none;
	}

	.karriere-hero p {
		width: auto;
	}

	.stelle__titel {
		font-size: 36px;
	}
}

/* Subpixel-Ausgleich: Das Original landet hier auf anderen Bruchteil-Positionen,
   sonst runden einzelne Textzeilen 1px anders (nur für den Pixelvergleich relevant). */
@media (min-width: 768px) and (max-width: 1023px) {
	.stelle__titel {
		margin-bottom: 20.3px;
	}
}

@media (max-width: 767px) {
	.stellen {
		margin-top: -0.2px;
	}
}


/* 50-rechtliches.css */
/* Impressum und Datenschutzerklärung: roter Titelbalken + Fließtext.
   Werte aus dem Thrive-Theme-Template des Originals. */

/* Der rote Balken sitzt direkt unter .kopf-platz (10-layout.css). */
.rechtliches {
	background: #fff;
}

/* Die 7px zwischen Kopf (187px) und Platzhalter (194px) blau füllen, sonst blitzt
   ein weißer Streifen über dem roten Balken. */
.seite-rechtliches .kopf-platz {
	background: var(--c-indigo);
}

.rechtliches-kopf {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: 128px;
	padding: 16px 20px;
	text-align: center;
	background: var(--c-orange);
	border-top: 1px solid #e6e6e6;
	border-bottom: 1px solid #e6e6e6;
}

.rechtliches-kopf h1 {
	margin: 0;
	padding: 0 1px 1px;
	font: 500 48px/1.3 var(--f-titel);
	color: #fff;
}

.rechtstext {
	box-sizing: border-box;
	max-width: 1080px;
	margin: 0 auto;
	padding: 40px 20px;
}

/* Ersetzt das leere <p>&nbsp;</p> am Ende des Originals (47px). */
.rechtstext--datenschutz {
	padding-bottom: 87px;
}

.rechtstext p {
	margin: 0;
	padding: 5px 0 10px;
	font: 400 20px/32px var(--f-text);
	color: var(--c-text);
}

.rechtstext strong {
	font-weight: 500;
}

.rechtstext a {
	color: var(--c-link);
}

.rechtstext h2,
.rechtstext h3,
.rechtstext h4 {
	margin: 0;
	padding: 16px 0 8px;
	font-family: var(--f-titel);
	font-weight: 500;
	color: var(--c-ueberschrift);
}

.rechtstext h2 {
	font-size: 32px;
	line-height: 1.4;
}

.rechtstext h3 {
	font-size: 24px;
	line-height: 1.4;
}

.rechtstext h4 {
	padding-bottom: 18px;
	font-size: 24px;
	line-height: 1.6;
}

/* Im Original hatte h5 keine Theme-Schrift und fiel auf Arial zurück. Bewusst beibehalten. */
.rechtstext h5 {
	margin: 0;
	padding: 0;
	font: 600 24px/1.75 Arial, sans-serif;
	color: var(--c-ueberschrift);
}

/* Ersetzt die leeren <h6>&nbsp;</h6>-Abstandhalter des Originals. */
.rechtstext .abstand-oben {
	margin-top: 42px;
}

.rechtstext ul {
	margin: 10px 0 16px;
	padding-left: 40px;
	list-style: disc outside;
}

.rechtstext li {
	margin: 0 0 0 30px;
	font: 400 20px/35px var(--f-titel);
	color: var(--c-text);
}

.rechtstext li strong {
	font-weight: 700;
}

@media (max-width: 1023px) {
	.rechtliches-kopf {
		padding: 40px;
	}

	/* Subpixel-Ausgleich: Im Original beginnt der Text auf Tablet an einer anderen
	   Bruchteil-Position; ohne die 0.3px runden einzelne Zeilen 1px anders. */
	.rechtliches-kopf h1 {
		padding-bottom: 0.3px;
	}

	.rechtstext {
		max-width: none;
		padding: 40px;
	}

	.rechtstext--datenschutz {
		padding-bottom: 87px;
	}

	.rechtstext h3 {
		font-size: 22px;
	}
}

@media (max-width: 767px) {
	/* Das Original hat mobil 224px Weiß zwischen Kopf und Balken (Thrive-Fehler).
	   Bewusst NICHT übernommen (Michael, 2026-10-01): Rechtsseiten mobil sind daher
	   224px kürzer als das Original, compare.sh meldet das als Höhenabweichung. */

	.rechtliches-kopf {
		padding: 25px 20px;
	}

	/* Nur der Text wird kleiner, die Zeilenhöhe bleibt die der 48px-Überschrift
	   (so war es im Original; ändert die vertikale Lage im Balken). */
	.rechtliches-kopf h1 span {
		font-size: 32px;
	}

	.rechtstext {
		padding: 30px 20px;
		/* Subpixel-Ausgleich wie auf Tablet (s.o.) */
		margin-top: -0.2px;
	}

	.rechtstext--datenschutz {
		padding-bottom: 77px;
	}
}


/* 60-animation.css */
/* Animationen wie im Thrive-Original (tve_anim_*): Einblenden beim Scrollen, Zoom bei Hover.
   Werte 1:1 aus dem Original. Versteckt wird nur, wenn site.js läuft (html.anim),
   ohne JS bleibt alles sichtbar. */
main { overflow-x: clip; } /* rechts einfliegende Elemente sollen keine Querscroll-Leiste erzeugen */

.anim [data-anim] { opacity: 0; }
.anim [data-anim="unten"] { transform: translateY(200px); }
.anim [data-anim="links"] { transform: translateX(-200px); }
.anim [data-anim="rechts"] { transform: translateX(200px); }
.anim [data-anim="auftauchen"] { transform: scale(0.1); }
.anim [data-anim].anim--da { opacity: 1; transform: none; transition: 0.5s ease-out; }

.story__leistungen li, .leistung { transition: transform 0.2s ease-out; }
.story__leistungen li:hover { transform: scale(1.1); }
.leistung:hover { transform: scale(0.9); }

/* Tooltip rechts neben den Story-Icons (Thrive tve_ui_tooltip, Stil „dark“, Position „right“).
   Statt title-Attribut, sonst käme zusätzlich der Browser-Tooltip. */
.story__leistungen li { position: relative; }
/* scale() macht das Icon zum eigenen Stacking-Context, ohne z-index malt das Nachbar-Icon über den Tooltip */
.story__leistungen li:hover { z-index: 1; }
.story__leistungen li[data-tipp]::after,
.story__leistungen li[data-tipp]::before {
	position: absolute;
	top: 50%;
	pointer-events: none;
	opacity: 0;
	visibility: hidden;
}
.story__leistungen li[data-tipp]::after {
	content: attr(data-tipp);
	left: calc(100% + 10px);
	z-index: 2;
	padding: 10px;
	border-radius: 7px;
	background: #494949;
	box-shadow: 0 0 5px rgba(0, 0, 0, 0.25);
	color: #c9c9c9;
	font: 400 16px/1.2 var(--f-form);
	white-space: nowrap;
	transform: translate(20px, -50%);
	transition: opacity 0.3s ease-in, transform 0.3s ease-in, visibility 0.3s;
}
.story__leistungen li[data-tipp]::before {
	content: "";
	left: calc(100% + 3px);
	z-index: 3;
	border: 7px solid transparent;
	border-right-color: #494949;
	border-left: 0;
	transform: translateY(-50%);
	transition: opacity 0.3s ease-in, visibility 0.3s;
}
.story__leistungen li[data-tipp]:hover::after,
.story__leistungen li[data-tipp]:hover::before { opacity: 1; visibility: visible; }
.story__leistungen li[data-tipp]:hover::after { transform: translate(0, -50%); }

@media (prefers-reduced-motion: reduce) {
	.anim [data-anim] { opacity: 1; transform: none; }
	.story__leistungen li, .leistung { transition: none; }
	.story__leistungen li:hover, .leistung:hover { transform: none; }
}