/*  ==================================================================
	HIER KOMMEN DEINE AUSGELAGERTEN CSS BEFEHLE REIN =================
	==================================================================  */


/*  ==================================================================
	A/S SAUER HYDRAULIK — PROJEKT-CSS
	------------------------------------------------------------------
	Angelegt 30.08.2026

	GRUNDREGEL
	CSS gehoert hierher, NICHT in die Module. Im Builder steht bei
	jedem betroffenen Modul die passende CSS-Klasse unter
	Erweitert > CSS-ID & Klassen. Ueber diese Klasse greift die Regel.

	CACHE
	Nach jeder Aenderung an dieser Datei die Zeile "Version:" im Kopf
	der style.css hochzaehlen. Sonst liefert der Browser die alte Datei.

	FARBEN
	Immer als var(--gcid-..., #FALLBACK). Divi gibt nur Farben als
	CSS-Variable aus, die im Builder auch benutzt werden.
	==================================================================  */


/*  ------------------------------------------------------------------
	1 · HERO — .sh-hero-titel
	Startseite, Sektion 1, Textmodul mit H1.
	Das <em> in der H1 wird gruen statt kursiv.
	------------------------------------------------------------------  */

.sh-hero-titel h1 em {
	color: var(--gcid-sh-gruen-hell, #57A972);
	font-style: normal;
}


/*  ------------------------------------------------------------------
	2 · PRODUKTKACHELN — .sh-kachel
	Startseite, Sektion Produktgruppen, Textmodul je Kachel.

	Der Textblock wird zur Flex-Spalte in voller Hoehe. Damit kann der
	letzte Absatz per margin-top:auto nach unten gedrueckt werden, und
	"Zur Baureihe" fluchtet ueber alle Kacheln, egal wie lang der Text
	ist. Wichtig: height:100% funktioniert hier NICHT, weil der
	Elternteil keine definierte Hoehe hat. Es muss flex:1 1 auto sein.
	------------------------------------------------------------------  */

.sh-kachel {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
}

.sh-kachel .et_pb_text_inner {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
}

.sh-kachel .et_pb_text_inner > p:last-child {
	margin-top: auto;
	margin-bottom: 0;
	padding-top: 14px;
}

.sh-kachel h3 {
	margin: 0 0 6px;
	min-height: 2em;
	min-height: 2lh;
}

.sh-kachel .sh-nw {
	margin: 0 0 10px;
	font-size: 13.5px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--gcid-sh-gruen-dunkel, #275C39);
}

.sh-kachel .sh-more {
	display: inline-block;
	font-weight: 600;
	color: var(--gcid-sh-gruen-dunkel, #275C39);
}


/*  ------------------------------------------------------------------
	3 · MERKMALSLISTE — .sh-merkmale
	Startseite, Sektion Sonderkonstruktionen.
	Haken vor jedem Punkt, gebaut aus zwei Rahmenkanten.
	------------------------------------------------------------------  */

.sh-merkmale ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

.sh-merkmale ul li {
	position: relative;
	padding-left: 30px;
	margin-bottom: 13px;
	line-height: 1.55em;
}

.sh-merkmale ul li::before {
	content: '';
	position: absolute;
	left: 0;
	top: .42em;
	width: 12px;
	height: 7px;
	border-left: 2.4px solid var(--gcid-sh-gruen-hell, #57A972);
	border-bottom: 2.4px solid var(--gcid-sh-gruen-hell, #57A972);
	transform: rotate(-45deg);
}


/*  ------------------------------------------------------------------
	4 · ZEITLEISTE — .sh-zeitleiste
	Startseite, Sektion Ueber uns. Jahreszahlen als Chips.
	------------------------------------------------------------------  */

.sh-zeitleiste ul {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.sh-zeitleiste ul li {
	background: var(--gcid-sh-gruen-flaeche, #E9F3EC);
	color: var(--gcid-sh-gruen-dunkel, #275C39);
	border-radius: 6px;
	padding: 9px 15px;
	font-size: 15px;
	line-height: 1.3;
}

.sh-zeitleiste ul li b {
	font-weight: 700;
	margin-right: 7px;
}


/*  ------------------------------------------------------------------
	5 · BRANCHENKARTEN — .sh-branchen
	Startseite, Sektion Einsatzbereiche.
	------------------------------------------------------------------  */

.sh-branchen h3 {
	margin: 0 0 14px;
}

.sh-branchen ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

.sh-branchen ul li {
	padding: 9px 0;
	border-bottom: 1px solid var(--gcid-sh-linie, #DCE5EB);
}

.sh-branchen ul li:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}


/*  ------------------------------------------------------------------
	6 · STELLENLISTE — .sh-stellen
	Startseite, Sektion Karriere.
	------------------------------------------------------------------  */

.sh-stellen ul {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.sh-stellen ul li {
	border: 1px solid var(--gcid-sh-linie, #DCE5EB);
	border-radius: 10px;
	padding: 22px 26px;
	transition: border-color .2s;
}

.sh-stellen ul li:hover {
	border-color: var(--gcid-sh-gruen, #357A4C);
}

.sh-stellen ul li h3 {
	margin: 0 0 5px;
	font-size: 18px;
	line-height: 1.35;
}

.sh-stellen ul li .sh-meta {
	margin: 0 0 10px;
	font-size: 15px;
	color: var(--gcid-sh-text-leise, #5E7079);
}

.sh-stellen ul li a {
	font-weight: 600;
	color: var(--gcid-sh-gruen-dunkel, #275C39);
}


/*  ------------------------------------------------------------------
	7 · KONTAKTDATEN — .sh-kontaktdaten
	Startseite, Sektion Kontakt, linke Spalte.
	------------------------------------------------------------------  */

.sh-kontaktdaten ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

.sh-kontaktdaten ul li {
	padding: 14px 0;
	border-bottom: 1px solid var(--gcid-sh-dunkel-linie, #2E4354);
}

.sh-kontaktdaten ul li:last-child {
	border-bottom: 0;
}

.sh-kontaktdaten ul li b {
	display: block;
	margin-bottom: 5px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--gcid-sh-gruen-hell, #57A972);
}

.sh-kontaktdaten ul li a {
	color: #fff;
}


/*  ------------------------------------------------------------------
	8 · FOOTER-LINKS — .sh-footer-links
	Theme Builder, Footer, die vier Linkspalten.

	HINWEIS: Die Zeilenhoehe der Liste steht NICHT hier, sondern im
	Preset "SH Footer Linkliste" unter Text > Listen (1.05em).
	------------------------------------------------------------------  */

.sh-footer-links h4 {
	margin: 0 0 14px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .11em;
	text-transform: uppercase;
	color: var(--gcid-sh-gruen-hell, #57A972);
}

.sh-footer-links ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

.sh-footer-links ul li {
	margin: 0 0 2px;
}

.sh-footer-links ul li a,
.sh-footer-links p a {
	color: rgba(255, 255, 255, .78);
	text-decoration: none;
	transition: transform .18s ease, color .18s ease;
}

.sh-footer-links ul li a {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 3px 0;
}

.sh-footer-links ul li a::before {
	content: '';
	flex: none;
	width: 5px;
	height: 5px;
	border-top: 1.6px solid var(--gcid-sh-gruen-hell, #57A972);
	border-right: 1.6px solid var(--gcid-sh-gruen-hell, #57A972);
	transform: rotate(45deg);
	transition: border-color .18s ease;
}

.sh-footer-links ul li a:hover,
.sh-footer-links p a:hover {
	color: #fff;
}

.sh-footer-links ul li a:hover {
	transform: translateX(4px);
}

.sh-footer-links ul li a:hover::before {
	border-color: #fff;
}


/*  ==================================================================
	9 · ANFRAGEFORMULAR — .sh-formular
	------------------------------------------------------------------
	Startseite, Sektion Kontakt, rechte Spalte, Textmodul mit dem
	Shortcode [gravityform id="1"].

	GRUNDLAGE
	Aufbau und Selektorlogik uebernommen aus dem FLS-GF-Styler, nur
	Farben auf die dunkle Karte umgestellt. Wie dort durchgaengig mit
	!important, weil die style.css dieses Child-Themes eigene
	GF-Regeln mit sehr hoher Spezifitaet mitbringt.

	WICHTIG ZU EDGE
	Edge und Chromium faerben Dropdown-Listen nicht ueber das select,
	sondern nur ueber select option. Deshalb sind option und
	option:checked getrennt gesetzt, letzteres mit dem
	linear-gradient-Trick, weil background-color dort ignoriert wird.
	==================================================================  */

.sh-formular {
	--sh-gf-bg:          var(--gcid-sh-dunkel, #16232E);
	--sh-gf-bg-fokus:    var(--gcid-sh-dunkel-2, #1F3241);
	--sh-gf-border:      var(--gcid-sh-dunkel-linie, #2E4354);
	--sh-gf-border-fokus: var(--gcid-sh-gruen-hell, #57A972);
	--sh-gf-text:        #ffffff;
	--sh-gf-placeholder: rgba(255, 255, 255, .45);
	--sh-gf-btn:         var(--gcid-sh-gruen, #357A4C);
	--sh-gf-btn-hover:   var(--gcid-sh-gruen-dunkel, #275C39);
	--sh-gf-dropdown-bg: var(--gcid-sh-dunkel-2, #1F3241);
	--sh-gf-dropdown-aktiv: var(--gcid-sh-gruen-dunkel, #275C39);
	--sh-gf-fehler:      #E88B84;

	/*	Zusaetzlich die Variablennamen aus dem :root-Block der style.css
		ueberschreiben. Damit liefern auch die dort bereits vorhandenen
		GF-Regeln (hohe Spezifitaet, greifen z. B. beim Fokus-Rahmen)
		die dunklen Werte, statt Blau und Weiss.  */
	--accent-color:       var(--gcid-sh-dunkel-linie, #2E4354);
	--accent-color-light: var(--gcid-sh-gruen-hell, #57A972);
	--background-gray:    var(--gcid-sh-dunkel, #16232E);
	--text-color:         #ffffff;
	--placeholder-color:  rgba(255, 255, 255, .45);
	--error-color:        #E88B84;
}

/*  LABELS  */
.sh-formular .gform_wrapper .gform_body .gform_fields .gfield .gfield_label,
.sh-formular .gform_wrapper .gform_body .gform_fields .gfield .ginput_complex label {
	color: var(--sh-gf-text) !important;
	font-weight: 600 !important;
	font-size: 15px !important;
	margin-bottom: 6px !important;
	display: inline-block !important;
}

/*  PFLICHTFELD-STERNE
	Nur die Legende "Felder mit * sind Pflichtfelder" bleibt aus, die
	Sternchen selbst sind sichtbar und weiss.

	WARUM WEISS UND NICHT GRUEN
	Gemessener Kontrast auf der Karte (#1F3241):
	  Weiss   #FFFFFF  = 13,2 : 1
	  Gruen   #57A972  =  4,6 : 1
	Gruen besteht WCAG AA knapp, aber der AA-Wert ist fuer Textbloecke
	gedacht, nicht fuer ein 2 mm grosses Glyph. Dazu kommt: Gruen liest
	sich in Formularen als "ausgefuellt, gueltig", das ist fuer
	"Pflichtfeld" das falsche Signal.

	UMSTELLEN AUF GRUEN: in der Regel unten die color-Zeile ersetzen
	durch  color: var(--gcid-sh-gruen-hell, #57A972) !important;  */

.sh-formular .gform_required_legend {
	display: none !important;
}

.sh-formular .gfield_required,
.sh-formular .gfield_required_asterisk,
.sh-formular .gform_wrapper .gform_body .gform_fields .gfield .gfield_label .gfield_required {
	display: inline !important;
	color: #ffffff !important;
	font-size: 1em !important;
	font-weight: 400 !important;
	opacity: 1 !important;
	/*	Abstand zum Label. Gravity Forms verschachtelt zwei span mit
		.gfield_required ineinander und gibt BEIDEN padding-left: 3px,
		in Summe also 6 px. Deshalb hier beide auf 0 und der Abstand
		wird einmal gezielt am inneren Stern gesetzt.  */
	padding-left: 2px !important;
	margin-left: 0 !important;
}

/*	Der innere Stern erbt die 2 px sonst ein zweites Mal, deshalb hier
	auf 0. Ergebnis: genau 2 px zwischen Labeltext und Sternchen.  */
.sh-formular .gfield_required .gfield_required_asterisk,
.sh-formular .gform_wrapper .gform_body .gform_fields .gfield .gfield_label .gfield_required .gfield_required_asterisk {
	padding-left: 0 !important;
	margin-left: 0 !important;
}

/*  EINGABEFELDER, alle Typen  */
.sh-formular .gform_wrapper .gform_body .gform_fields .gfield input[type="text"],
.sh-formular .gform_wrapper .gform_body .gform_fields .gfield input[type="email"],
.sh-formular .gform_wrapper .gform_body .gform_fields .gfield input[type="tel"],
.sh-formular .gform_wrapper .gform_body .gform_fields .gfield input[type="url"],
.sh-formular .gform_wrapper .gform_body .gform_fields .gfield input[type="number"],
.sh-formular .gform_wrapper .gform_body .gform_fields .gfield input[type="date"],
.sh-formular .gform_wrapper .gform_body .gform_fields .gfield select,
.sh-formular .gform_wrapper .gform_body .gform_fields .gfield textarea {
	background-color: var(--sh-gf-bg) !important;
	color: var(--sh-gf-text) !important;
	border: 1px solid var(--sh-gf-border) !important;
	border-radius: 6px !important;
	font-size: 16px !important;
	font-weight: 400 !important;
	padding: 10px 15px !important;
	margin-bottom: 5px !important;
	box-shadow: none !important;
	-webkit-appearance: none !important;
	-moz-appearance: none !important;
	appearance: none !important;
}

/*  EINHEITLICHE HOEHE  */
.sh-formular .gform_wrapper .gform_body .gform_fields .gfield input[type="text"],
.sh-formular .gform_wrapper .gform_body .gform_fields .gfield input[type="email"],
.sh-formular .gform_wrapper .gform_body .gform_fields .gfield input[type="tel"],
.sh-formular .gform_wrapper .gform_body .gform_fields .gfield input[type="url"],
.sh-formular .gform_wrapper .gform_body .gform_fields .gfield input[type="number"],
.sh-formular .gform_wrapper .gform_body .gform_fields .gfield input[type="date"],
.sh-formular .gform_wrapper .gform_body .gform_fields .gfield select {
	height: 45px !important;
}

.sh-formular .gform_wrapper .gform_body .gform_fields .gfield textarea {
	min-height: 180px !important;
	resize: vertical !important;
}

/*  FOKUS, gilt fuer ALLE Feldtypen, nicht nur die Textarea  */
.sh-formular .gform_wrapper .gform_body .gform_fields .gfield input[type="text"]:focus,
.sh-formular .gform_wrapper .gform_body .gform_fields .gfield input[type="email"]:focus,
.sh-formular .gform_wrapper .gform_body .gform_fields .gfield input[type="tel"]:focus,
.sh-formular .gform_wrapper .gform_body .gform_fields .gfield input[type="url"]:focus,
.sh-formular .gform_wrapper .gform_body .gform_fields .gfield input[type="number"]:focus,
.sh-formular .gform_wrapper .gform_body .gform_fields .gfield input[type="date"]:focus,
.sh-formular .gform_wrapper .gform_body .gform_fields .gfield select:focus,
.sh-formular .gform_wrapper .gform_body .gform_fields .gfield textarea:focus {
	background-color: var(--sh-gf-bg-fokus) !important;
	color: var(--sh-gf-text) !important;
	border: 1px solid var(--sh-gf-border-fokus) !important;
	outline: none !important;
	box-shadow: none !important;
}

/*  PLATZHALTER  */
.sh-formular .gform_wrapper .gform_body .gform_fields .gfield input::placeholder,
.sh-formular .gform_wrapper .gform_body .gform_fields .gfield textarea::placeholder {
	color: var(--sh-gf-placeholder) !important;
	opacity: 1 !important;
}

/*  DROPDOWN, eigener Pfeil in Weiss  */
.sh-formular .gform_wrapper .gform_body .gform_fields .gfield select {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath fill='%23ffffff' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important;
	background-position: right 15px center !important;
	background-size: 8px !important;
	padding-right: 40px !important;
}

/*  DROPDOWN-EINTRAEGE, das ist der Teil, den Edge sonst hell laesst  */
.sh-formular .gform_wrapper .gform_body .gform_fields .gfield select option {
	background-color: var(--sh-gf-dropdown-bg) !important;
	color: var(--sh-gf-text) !important;
}

/*  AUSGEWAEHLTER EINTRAG, Gradient-Trick fuer Chromium und Edge  */
.sh-formular .gform_wrapper .gform_body .gform_fields .gfield select option:checked,
.sh-formular .gform_wrapper .gform_body .gform_fields .gfield select option:hover {
	background: var(--sh-gf-dropdown-aktiv) linear-gradient(0deg, var(--sh-gf-dropdown-aktiv) 0%, var(--sh-gf-dropdown-aktiv) 100%) !important;
	color: var(--sh-gf-text) !important;
}

/*  ABSENDE-BUTTON
	ACHTUNG: Die style.css setzt den Button mit der Kette
	html body article .et-l .et_pb_section .et_pb_module ... input.button
	und !important. Ohne dieselbe Kette gewinnt sie. Deshalb sind die
	langen Selektoren hier Absicht, nicht Faulheit.  */
html body article .et-l .et_pb_section .et_pb_module .sh-formular .gform_wrapper .gform_footer input.button,
html body article .et-l .et_pb_section .et_pb_module .sh-formular .gform_wrapper .gform_footer button.gform_button,
html body article .et-l .et_pb_section .sh-formular .gform_wrapper .gform_footer button.gform_button,
footer .et_pb_section .et_pb_module .sh-formular .gform_wrapper .gform_footer button.gform_button,
.sh-formular .gform_wrapper .gform_footer button.gform_button,
.sh-formular .gform_wrapper .gform_footer button.button,
.sh-formular .gform_wrapper .gform_footer button[type="submit"],
.sh-formular .gform_wrapper .gform_page_footer button[type="submit"],
.sh-formular .gform_wrapper .gform_footer input.button,
.sh-formular .gform_wrapper .gform_footer input[type="submit"],
.sh-formular .gform_wrapper .gform_page_footer input[type="submit"],
.sh-formular .gform_wrapper .gform_page_footer input[type="button"] {
	width: 100% !important;
	color: #ffffff !important;
	font-size: 16px !important;
	font-weight: 600 !important;
	background: var(--sh-gf-btn) !important;
	border: 1px solid var(--sh-gf-btn) !important;
	border-radius: 6px !important;
	padding: 14px 30px !important;
	cursor: pointer !important;
	text-transform: none !important;
	transition: all .3s ease !important;
	-webkit-appearance: none !important;
	-moz-appearance: none !important;
	appearance: none !important;
}

html body article .et-l .et_pb_section .et_pb_module .sh-formular .gform_wrapper .gform_footer button.gform_button:hover,
.sh-formular .gform_wrapper .gform_footer button.gform_button:hover,
.sh-formular .gform_wrapper .gform_footer button[type="submit"]:hover,
.sh-formular .gform_wrapper .gform_footer input[type="submit"]:hover,
.sh-formular .gform_wrapper .gform_page_footer input[type="submit"]:hover,
.sh-formular .gform_wrapper .gform_page_footer input[type="button"]:hover {
	color: #ffffff !important;
	background: var(--sh-gf-btn-hover) !important;
	border-color: var(--sh-gf-btn-hover) !important;
	transform: translateY(-2px) !important;
	box-shadow: 0 4px 12px rgba(0, 0, 0, .25) !important;
}

/*  HINWEISTEXT UNTER EINEM FELD, z. B. Spamschutz  */
.sh-formular .gform_wrapper .gform_body .gform_fields .gfield .gfield_description {
	color: rgba(255, 255, 255, .62) !important;
	font-size: 14px !important;
	line-height: 1.5 !important;
	padding-top: 6px !important;
}

/*  RADIO UND CHECKBOX, falls spaeter gebraucht  */
.sh-formular .gform_wrapper .gform_body .gform_fields .gfield .gchoice input[type="radio"],
.sh-formular .gform_wrapper .gform_body .gform_fields .gfield .gchoice input[type="checkbox"] {
	-webkit-appearance: none !important;
	-moz-appearance: none !important;
	appearance: none !important;
	width: 18px !important;
	height: 18px !important;
	border: 2px solid var(--sh-gf-border-fokus) !important;
	background-color: transparent !important;
	cursor: pointer !important;
	position: relative !important;
	margin-right: 8px !important;
	vertical-align: middle !important;
	flex-shrink: 0 !important;
}

.sh-formular .gform_wrapper .gform_body .gform_fields .gfield .gchoice input[type="radio"] {
	border-radius: 50% !important;
}

.sh-formular .gform_wrapper .gform_body .gform_fields .gfield .gchoice input[type="checkbox"] {
	border-radius: 3px !important;
}

.sh-formular .gform_wrapper .gform_body .gform_fields .gfield .gchoice input[type="radio"]:checked,
.sh-formular .gform_wrapper .gform_body .gform_fields .gfield .gchoice input[type="checkbox"]:checked {
	border-color: var(--sh-gf-btn) !important;
	background-color: var(--sh-gf-btn) !important;
}

.sh-formular .gform_wrapper .gform_body .gform_fields .gfield .gchoice input[type="radio"]:checked::before {
	content: "" !important;
	position: absolute !important;
	top: 50% !important;
	left: 50% !important;
	transform: translate(-50%, -50%) !important;
	width: 7px !important;
	height: 7px !important;
	border-radius: 50% !important;
	background-color: #ffffff !important;
}

/*  FEHLERZUSTAND  */
.sh-formular .gform_wrapper .gform_body .gform_fields .gfield.gfield_error input,
.sh-formular .gform_wrapper .gform_body .gform_fields .gfield.gfield_error select,
.sh-formular .gform_wrapper .gform_body .gform_fields .gfield.gfield_error textarea {
	border: 2px solid var(--sh-gf-fehler) !important;
	background-color: rgba(232, 139, 132, .12) !important;
}

.sh-formular .gform_wrapper .gform_body .gform_fields .gfield .validation_message {
	color: var(--sh-gf-fehler) !important;
	background: transparent !important;
	border: 0 !important;
	font-size: 14px !important;
	margin-top: 5px !important;
	padding: 0 !important;
}

.sh-formular .gform_wrapper .gform_validation_errors {
	background: rgba(232, 139, 132, .12) !important;
	border: 1px solid rgba(232, 139, 132, .5) !important;
	border-radius: 6px !important;
	color: #ffffff !important;
	box-shadow: none !important;
}

.sh-formular .gform_wrapper .gform_confirmation_message {
	color: #ffffff !important;
	font-size: 17px !important;
	line-height: 1.6 !important;
}

/*  ABSTAND ZWISCHEN DEN FELDERN  */
.sh-formular .gform_wrapper .gform_fields {
	row-gap: 14px !important;
}

.sh-formular .gform_wrapper .gform_footer {
	margin-top: 20px !important;
	padding: 0 !important;
	border-top: 0 !important;
}


/*  ------------------------------------------------------------------
	10 · FOOTER, ZWEITE PRODUKTSPALTE — .sh-footer-fortsetzung
	Angelegt 04.10.2026 nach Seobility-Audit.
	Vorher stand dort eine leere Ueberschrift <h4>&nbsp;</h4>, nur damit
	die Liste auf Hoehe der ersten Produktliste beginnt. Seobility wertet
	das als leere Ueberschrift auf jeder Seite. Jetzt: kein h4, der
	Abstand kommt hierher (Hoehe h4 25,6 px plus 14 px Abstand).
	Auf dem Handy stehen die Spalten untereinander, dort kein Abstand.
	------------------------------------------------------------------  */

.et-l--footer .sh-footer-fortsetzung {
	padding-top: 39.6px;
}

@media (max-width: 767px) {
	.et-l--footer .sh-footer-fortsetzung {
		padding-top: 0;
	}
}


/*  ------------------------------------------------------------------
	11 · FOOTER-SPALTENTITEL — .sh-footer-titel
	Angelegt 04.10.2026 nach Seobility-Crawl 6.
	Die Spaltentitel im Footer waren h4. Auf Seiten ohne h3 (Stellen,
	Kontakt) springt die Gliederung dadurch von h2 auf h4, Seobility
	meldet "schlechte Ueberschriftenstruktur", auf der Startseite "zu viele
	Ueberschriften". Jetzt <p class="sh-footer-titel">, Optik 1:1 wie
	vorher (gemessen am h4): Archivo 13 px, 700, Versalien, 0,11em
	Laufweite, Gruen hell, 10 px Innenabstand plus 14 px Abstand unten.
	------------------------------------------------------------------  */

.et-l--footer .et_pb_text_inner p.sh-footer-titel {
	font-family: 'Archivo', Helvetica, Arial, sans-serif;
	font-size: 13px;
	font-weight: 700;
	line-height: 15.6px;
	letter-spacing: 0.11em;
	text-transform: uppercase;
	color: var(--gcid-sh-gruen-hell, #57A972);
	margin: 0 0 14px;
	padding: 0 0 10px;
}


/*  ------------------------------------------------------------------
	12 · STELLENTITEL OHNE UEBERSCHRIFT — .sh-stelle-titel
	Angelegt 04.10.2026 nach Seobility-Crawl 8 (Startseite: zu viele
	Ueberschriften, 26). Auf der Startseite stehen die drei Stellentitel
	als p.sh-stelle-titel statt h3, Optik 1:1 wie das h3 der Stellenliste
	(gemessen): Archivo 18 px, 700, Zeilenhoehe 24,3 px, Laufweite
	-0,018em, dunkel, 5 px Abstand plus 10 px Innenabstand.
	Auf der Karriere-Seite bleiben die Titel h3.
	------------------------------------------------------------------  */

.sh-stellen .et_pb_text_inner p.sh-stelle-titel {
	font-family: 'Archivo', Helvetica, Arial, sans-serif;
	font-size: 18px;
	font-weight: 700;
	line-height: 24.3px;
	letter-spacing: -0.018em;
	color: var(--gcid-sh-dunkel, #16232E);
	margin: 0 0 5px;
	padding: 0 0 10px;
}