/*
 Theme Name:   Sallier Child
 Theme URI:    https://sallier.de
 Description:  Child theme of Divi for sallier.de
 Author:       Sallier
 Author URI:   https://sallier.de
 Template:     Divi
 Version:      1.0.0
 Text Domain:  sallier-child
*/

/* ==========================================================================
   Design Tokens
   ========================================================================== */

:root {
	/* Farben */
	--color-primary: #052453;       /* American Blue */
	--color-accent: #D03E14;        /* Backstein */
	--color-accent-hover: #FF7D4A;  /* Backstein Light */
	--color-surface: #FFFFFF;       /* Weiß */
	--color-canvas: #EBEBED;        /* Marmor */
	--color-text: #2B2A2D;          /* Graphit */
	--border-default: color-mix(in oklch, #2B2A2D 15%, white);

	/* Typografie (Werte entsprechen dem bereits abgenommenen Stand — siehe die
	   Konsumenten-Regeln unten. Absichtlich eigene Tokens für --font-body/--font-heading,
	   obwohl beide aktuell identisch sind: falls Überschriften später doch eine eigene
	   Schriftfamilie (z. B. "Inter 24pt") bekommen sollen, genügt eine Änderung hier. */
	--font-body: 'Inter 18pt', sans-serif;
	--font-heading: 'Inter 18pt', sans-serif;
	--font-display: 'Inter 28pt', sans-serif;
	/* Nur für h1 (siehe unten) — bewusst ein eigener Token statt "--font-heading"
	   umzudefinieren, damit h2-h6 und die vielen bestehenden Headline-Klassen (Footer,
	   Mitarbeiter, Portfolio-Grids, Karussells), die alle "--font-heading" nutzen, unverändert
	   bei Inter 18pt bleiben. */
	--font-h1: 'Inter 24pt', sans-serif;
	--weight-light: 300;
	--weight-semibold: 600;
	--text-heading: clamp(28px, 4.5vw, 32px);
	--text-h1: clamp(26px, 5.5vw, 40px);
	--text-body: 18px;
	--text-small: 14px;
	--leading-body: 1.6;
	--leading-tight: 1.1;
	--tracking-wide: 0.56px;
	--tracking-tight: -0.01em;

	/* Abstands-Raster (4px-Basis) */
	--space-1: 4px;
	--space-2: 8px;
	--space-3: 12px;
	--space-4: 16px;
	--space-6: 24px;
	--space-8: 32px;
	--space-12: 48px;
	--space-16: 64px;
	--space-24: 96px;
	--space-32: 128px;

	/* Radius */
	--radius: 3px;
	--radius-pill: 999px;

	/* Schatten (nur für Karten/Formularfelder) */
	--shadow-soft: 0 2px 12px rgba(5, 36, 83, 0.08);
	/* Verstärkte Variante von "--shadow-soft" (größerer Versatz/Weichzeichnung, etwas mehr
	   Deckkraft) — für Hover-Zustände, bei denen sich eine Karte zusätzlich per "transform"
	   anhebt (Grids/Karussells) und der Schatten diese Anhebung optisch unterstützen soll. */
	--shadow-hover: 0 8px 24px rgba(5, 36, 83, 0.14);

	/* Motion */
	--transition-fast: 160ms ease;
}

/* ==========================================================================
   Typografie: Inter (lokal, Light 300 + SemiBold 600)
   ========================================================================== */

@font-face {
	font-family: 'Inter 18pt';
	src: url('/wp-content/uploads/fonts/Inter_18pt-Light.ttf') format('truetype');
	font-weight: 300;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Inter 18pt';
	src: url('/wp-content/uploads/fonts/Inter_18pt-SemiBold.ttf') format('truetype');
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Inter 24pt';
	src: url('/wp-content/uploads/fonts/Inter_24pt-Light.ttf') format('truetype');
	font-weight: 300;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Inter 24pt';
	src: url('/wp-content/uploads/fonts/Inter_24pt-SemiBold.ttf') format('truetype');
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Inter 28pt';
	src: url('/wp-content/uploads/fonts/Inter_28pt-Light.ttf') format('truetype');
	font-weight: 300;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Inter 28pt';
	src: url('/wp-content/uploads/fonts/Inter_28pt-SemiBold.ttf') format('truetype');
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}

/* Sanftes Scrollen zu Anker-Links (z. B. Kontakt-Button "#kontakt") statt hartem Sprung. */
html {
	scroll-behavior: smooth;
}

/* Mobil: Anker-Ziel "#kontakt" um die Höhe der sticky Navigation (67px) plus 8px Puffer
   nach oben verschieben, damit der Inhalt nicht unter der Nav versteckt landet. */
@media screen and (max-width: 600px) {
	#kontakt {
		scroll-margin-top: 75px;
	}


}

body {
	overflow-x: hidden;
}

body {
	font-family: var(--font-body);
	font-weight: var(--weight-light);
	font-size: var(--text-body);
	line-height: var(--leading-body);
	color: var(--color-text);
	/* Divis eigenes Basis-CSS setzt hier "-webkit-font-smoothing: antialiased", wodurch leichte
	   Schriftschnitte (Weight 300) sichtbar dünner wirken als im Entwurf, der diese Regel nicht
	   hat. Hier site-weit auf Browser-Standard zurückgesetzt. */
	-webkit-font-smoothing: auto;
	-moz-osx-font-smoothing: auto;
}

p, li, td, th, .et_pb_text, .et_pb_module_content {
	font-family: var(--font-body);
	font-weight: var(--weight-light);
	font-size: var(--text-body);
}

/* Normaler Fließtext (p/span) — Feinschliff über die Basiswerte oben hinaus. */
p, span {
	margin: 0;
	font-family: var(--font-body);
	font-weight: var(--weight-light);
	letter-spacing: var(--tracking-wide);
	text-transform: none;
	color: var(--color-text);
}

/* Divis eigene Textfarbe-/Schriftstärke-Einstellung pro Modul setzt Farbe und Gewicht (mit
   "!important") auf ".et_pb_text_inner" — die Regel oben ("p, span") greift aber direkt auf das
   "p"/"span" darin zu und schlägt damit die Vererbung vom Wrapper, egal was am Modul eingestellt
   ist. Nur innerhalb der Fakten-Zeile ("projekt-fakten", im Builder vergeben) zurück auf
   "inherit" gestellt, statt global für alle Divi-Textmodule — vermeidet Nebenwirkungen anderswo. */
.projekt-fakten .et_pb_text_inner p,
.projekt-fakten .et_pb_text_inner span {
	color: inherit;
	font-weight: inherit;
}

/* Gleicher Grund wie ".projekt-fakten" oben, diesmal für den Footer: seit "Lass mich den footer
   einfach selber bauen" ist der Theme-Builder-Footer ein freier Divi-Canvas (siehe
   subsite-header-footer.css) — die dort im Design-Panel gewählte Textfarbe (von Divi mit
   "!important" auf ".et_pb_text_inner" gesetzt) soll auch für Fließtext (p/span) greifen,
   statt von der globalen "p, span"-Regel überschrieben zu werden. */
.et-l--footer .et_pb_text_inner p,
.et-l--footer .et_pb_text_inner span {
	color: inherit;
}

/* Divis eigene Fallback-Typografie (Theme-Optionen "Heading Font") steht auf dem generischen
   Google Font "Inter" statt unserer lokalen Font-Dateien — hier site-weit auf das bereits auf
   der Team-Seite bewährte Überschriften-Styling umgestellt (".abteilung-headline
   .et_pb_module_header" in mitarbeiter.css).
   "!important": Divis eigene, PRO SEITE neu generierte CSS-Datei (et-core-unified/
   et-divi-dynamic) setzt denselben Selektor mit gleicher Spezifität — je nach Seite lädt sie
   nach unserer Regel und gewinnt sonst die Kaskade (beobachtet z. B. auf /karriere/, obwohl
   dieselbe Regel auf anderen Seiten schon korrekt griff). */
h2, h4, h5, h6 {
	margin: 0 !important;
	font-family: var(--font-heading) !important;
	font-weight: var(--weight-light) !important;
	font-size: var(--text-heading) !important;
	/* Navy (--color-primary), passend zu beiden Referenz-Vorlagen. Bereiche mit dunklem
	   Hintergrund (z. B. Footer) haben eine eigene, spezifischere Farbregel mit ebenfalls
	   "!important" und bleiben davon unberührt (siehe footer.css). */
	color: var(--color-primary) !important;
}

/* h1 bewusst separat, mit eigener (größerer/kräftigerer) Display-Type statt der übrigen
   Überschriften: Inter 24pt Semibold statt Inter 18pt Light, engere Zeilenhöhe/Laufweite für den
   großen Schriftgrad. "!important" aus demselben Grund wie oben (Divis pro Seite neu generierte
   CSS kann denselben Selektor sonst mit gleicher Spezifität überschreiben). */
h1 {
	margin: 0 !important;
	font-family: var(--font-h1) !important;
	font-weight: var(--weight-semibold) !important;
	font-size: var(--text-h1) !important;
	line-height: var(--leading-tight) !important;
	letter-spacing: var(--tracking-tight) !important;
	color: var(--color-primary) !important;
	text-wrap: pretty;
}

/* h3 bewusst separat, im Stil von ".vakanzen-liste-jobtitel" (siehe vakanzen-liste.css):
   schlanker/kleiner als h1/h2 und semibold statt light — passend für Karten-/Listentitel statt
   große Seitenüberschriften. */
h3 {
	margin: 0 !important;
	font-family: var(--font-heading) !important;
	font-weight: var(--weight-semibold) !important;
	font-size: 24px !important;
	color: var(--color-primary) !important;
}

/* Überschriften INNERHALB von Fließtext (z. B. "Beschreibung"/"Lage" auf Projektseiten,
   "Passion"/"Werte & Unternehmertum" auf /ueber-uns/): Divis Text-Modul setzt auf allen
   Elementen (Absätze wie Überschriften) einheitlich "margin:0" und nur ein gleich großes
   "padding-bottom" — dadurch wirkte der Abstand vor einer neuen Überschrift genauso groß wie
   zwischen zwei normalen Absätzen, ohne den "neuer Abschnitt beginnt hier"-Effekt aus der
   Vorlage. Zusätzlicher Abstand DAVOR, außer wenn die Überschrift das erste Element im
   Textblock ist (dort keine vorangehenden Inhalte, von denen sie sich absetzen müsste).
   ".et_pb_code_inner" zusätzlich zu ".et_pb_text_inner": WYSIWYG-Inhalte, die per Dynamic
   Content in ein Divi-"Code"-Modul statt in ein "Text"-Modul gerendert werden (z. B. die
   Vakanz-Beschreibung), haben denselben Wrapper-Aufbau, nur eine andere Modul-Klasse — ohne
   diese Ergänzung blieb es dort beim reinen Divi-Standardabstand (0px zwischen Überschrift und
   Inhalt, live nachgemessen). */
.et_pb_text_inner h1,
.et_pb_text_inner h2,
.et_pb_text_inner h3,
.et_pb_text_inner h4,
.et_pb_code_inner h1,
.et_pb_code_inner h2,
.et_pb_code_inner h3,
.et_pb_code_inner h4 {
	margin-top: 48px !important;
	/* Divi setzt hier bereits ein eigenes "padding-bottom" (Grund für den kleinen, bestehenden
	   Abstand zum Text danach) — statt eines neuen "margin-bottom" (das keine sichtbare Wirkung
	   zeigte) wird hier genau dieser bereits wirksame Mechanismus vergrößert. Deutlich kleiner
	   als der Abstand davor (48px), damit Überschrift und Text als zusammengehöriger Block
	   wirken statt selbst wie eine neue Trennung. */
	padding-bottom: 20px !important;
}

.et_pb_text_inner h1:first-child,
.et_pb_text_inner h2:first-child,
.et_pb_text_inner h3:first-child,
.et_pb_text_inner h4:first-child,
.et_pb_code_inner h1:first-child,
.et_pb_code_inner h2:first-child,
.et_pb_code_inner h3:first-child,
.et_pb_code_inner h4:first-child {
	margin-top: 0 !important;
}

/* Divis Standard-Listenabstand (Code-/Text-Modul): Listenpunkte innerhalb DERSELBEN Liste haben
   von Haus aus 30px Abstand zueinander (live nachgemessen an der Vakanz-Beschreibung) — deutlich
   mehr, als für zusammengehörige Punkte einer Aufzählung sinnvoll ist, und ohne erkennbaren
   Bezug zu einem unserer Design-Tokens. Auf einen kompakten, aber noch klar lesbaren Abstand
   reduziert. */
.et_pb_text_inner li,
.et_pb_code_inner li {
	margin-bottom: var(--space-2) !important;
}

/* Navigation / Labels / Badges */
#top-menu li a {
	font-family: 'Inter 18pt', sans-serif;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

/* ==========================================================================
   Layout / Abstände
   ========================================================================== */

.et_pb_section {
	padding-top: var(--space-16);   /* 64px */
	padding-bottom: var(--space-16);
}

/* Divi setzt die Row-Breite nicht direkt, sondern über die CSS-Variable "--content-width"
   (an ":root", von der Customizer-Einstellung "Gutter-Breite der Website" abgeleitet — dort
   aber nur in groben Stufen wählbar, kein exakter Prozentwert). Hier direkt auf 90% überschrieben
   (vorher Divis Standard 80%) — betrifft dadurch automatisch jede Row site-weit, ohne jede
   Section einzeln im Builder anfassen zu müssen. Auf schmalen Screens war der so entstehende
   Leerraum links/rechts neben dem Inhalt (z. B. bei den Grids) unverhältnismäßig groß, weil
   "max-width" (1440px, siehe unten) dort ohnehin nie greift. */
:root {
	--content-width: 90%;
}

.et_pb_row {
	max-width: 1440px !important;
}

/* Header- und Footer-Zeilen tragen im Theme Builder jeweils eine eigene, feste
   "Maximale Breite" (1200px), die Divi als eigene, pro Zeile generierte Regel mit hoher
   Spezifität ausgibt (Beispiel: ".et-db #et-boc .et-l .et_pb_row_0_tb_header { max-width:
   1200px !important; }", 1 ID + 3 Klassen) — hier gezielt überschrieben, statt die Einstellung
   an jeder einzelnen Zeile im Builder manuell zu ändern. Eigene Regel bewusst mit MEHR Klassen
   (1 ID + 4 Klassen: ".et-l--header.et-l" zählt als zwei), um Divis Regel sicher zu schlagen,
   unabhängig von der Ladereihenfolge im Kopfbereich. */
.et-db #et-boc .et-l--header.et-l .et_pb_row,
.et-db #et-boc .et-l--footer.et-l .et_pb_row {
	max-width: 1440px !important;
}

/* ==========================================================================
   Ecken, Schatten, Rahmen
   ========================================================================== */

input, textarea, select, button, .et_pb_button {
	border-radius: var(--radius);
}

input, textarea, select {
	border: 1px solid var(--color-canvas);
	box-shadow: var(--shadow-soft);
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
.et_pb_button:focus-visible {
	outline: 2px solid var(--color-primary);
	outline-offset: 2px;
}

/* ==========================================================================
   Buttons
   ========================================================================== */

/* Basiert auf dem Absenden-Button des Kontaktformulars (formular.css, .wpcf7-submit) —
   als globaler Standard-Button-Stil vereinheitlicht, zusätzlich in Versalien. */
.et_pb_button {
	background-color: var(--color-accent);
	/* Divi generiert dynamisch ".et_pb_bg_layout_light.et_pb_module.et_pb_button{color:...}"
	   (3 verkettete Klassen, Spezifität höher als unser einfaches ".et_pb_button") sowie
	   "padding:.3em 1em" und "line-height:1.7em" per !important auf ".et_pb_button" selbst —
	   beides nur mit ebenfalls !important zuverlässig zu überschreiben. */
	color: var(--color-surface) !important;
	font-family: var(--font-body);
	font-size: 15px;
	font-weight: var(--weight-semibold);
	text-transform: uppercase;
	padding: 12px 28px !important;
	line-height: 1.2 !important;
	border: none;
	border-radius: 0;
	/* "!important": seit die globale "a"-Regel oben "text-decoration:underline" setzt, muss
	   der Button das explizit zurücksetzen statt sich (wie bisher) auf Divis eigenes
	   Basis-Reset zu verlassen. */
	text-decoration: none !important;
	cursor: pointer;
	transition: background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}

.et_pb_button:hover {
	background-color: var(--color-accent-hover) !important;
	color: var(--color-surface) !important;
	/* Divis eigene Hover-Regeln verschieben zusätzlich das Padding asymmetrisch (Platz für ein
	   einblendendes Pfeil-Icon) und fügen einen unsichtbaren 2px-Rand hinzu (lässt den Button
	   ohne festes width/height sichtbar wachsen) — hier auf die Werte der Grundregel fixiert. */
	padding: 12px 28px !important;
	border: none !important;
}

/* Divis "Pfeil blendet beim Hover ein"-Effekt (ETmodules-Icon-Font über ::before/::after)
   passt nicht zum schlichten Formular-Button-Design — hier deaktiviert. */
.et_pb_button:before,
.et_pb_button:after {
	display: none !important;
}

.btn-secondary {
	display: inline-block;
	background-color: transparent;
	color: var(--color-accent);
	border: 1px solid var(--color-accent);
	border-radius: 0;
	padding: var(--space-3) var(--space-6);
	transition: background-color var(--transition-fast), color var(--transition-fast);
}

.btn-secondary:hover {
	background-color: var(--color-accent);
	color: var(--color-surface);
}

/* ==========================================================================
   Links
   ========================================================================== */

a {
	color: var(--color-primary);
	text-decoration: underline;
	transition: color var(--transition-fast);
}

a:hover {
	color: var(--color-accent);
}

#wpadminbar a,
#wpadminbar a:hover,
#wpadminbar a:focus {
	color: inherit !important;
	text-decoration: none !important;
	transition: none !important;
}

.et_pb_bg_layout_dark a {
	color: rgba(255, 255, 255, 0.85);
}

.et_pb_bg_layout_dark a:hover {
	color: var(--color-surface);
}

/* "Normale Verlinkungen im Body" heißt in Divi praktisch immer: ein Link innerhalb eines
   Text-Moduls. Die einfache globale "a"-Regel oben verliert auf hellem Hintergrund gegen
   Divis eigene, per Preset-System gesetzte Link-Farbe (derselbe wiederkehrende Kaskade-Grund
   wie bei der globalen h1-h6-Regel) — hier deshalb gezielt mit "!important" verstärkt, aber
   bewusst NUR auf Text-Module beschränkt (nicht global auf "a"), damit Navigation und Buttons
   mit ihren eigenen, spezifischeren Link-Farben unberührt bleiben. */
/* ":not(.et_pb_button)" — Divis Button-Modul liegt teils selbst innerhalb eines
   ".et_pb_module_content"-Wrappers, sonst hätte die Regel auch Buttons unterstrichen. */
.et_pb_text a:not(.et_pb_button),
.et_pb_module_content a:not(.et_pb_button) {
	text-decoration: underline !important;
	font-size: 18px !important;
}

/* Im Footer auf Wunsch ohne Unterstreichung — gleiche Ausnahme wie bei der Farbe oben. */
.et-l--footer .et_pb_text a:not(.et_pb_button),
.et-l--footer .et_pb_module_content a:not(.et_pb_button) {
	text-decoration: none !important;
}

/* Farbe bewusst als EIGENE Regel, ausgenommen für alles innerhalb ".et-l--footer" (Divis
   Wrapper um jedes Theme-Builder-Footer-Layout): der Footer ist seit "Lass mich den footer
   einfach selber bauen" ein freier Divi-Builder-Canvas (siehe subsite-header-footer.css) — dort
   generiert Divi pro Text-Modul eine eigene Farb-Regel aus dem Design-Panel (z. B.
   ".et_pb_text_0_tb_footer .et_pb_text_inner a{color:#fff}"), aber OHNE "!important". Ohne diese
   Ausnahme gewinnt hier immer die globale Navy-Farbe und die im Builder gewählte Link-Farbe im
   Footer hat sichtbar keinerlei Effekt. */
.et_pb_text a:not(.et_pb_button):not(.et-l--footer *),
.et_pb_module_content a:not(.et_pb_button):not(.et-l--footer *) {
	color: var(--color-primary) !important;
}

.et_pb_text a:not(.et_pb_button):hover:not(.et-l--footer *),
.et_pb_module_content a:not(.et_pb_button):hover:not(.et-l--footer *) {
	color: var(--color-accent) !important;
}

/* Auf dunklem Hintergrund UND gleichzeitig einem Text-Modul (Divi setzt "et_pb_bg_layout_dark"
   und "et_pb_text" als Geschwister-Klassen auf demselben Element) muss die Dark-Variante die
   Regel oben zuverlässig schlagen — ohne Klassen-Kombination (statt Leerzeichen) läge die
   Spezifität gleichauf und die Text-Modul-Regel würde je nach Dateireihenfolge gewinnen. */
.et_pb_text.et_pb_bg_layout_dark a,
.et_pb_module_content.et_pb_bg_layout_dark a {
	color: rgba(255, 255, 255, 0.85) !important;
	text-decoration: none !important;
}

/* Links innerhalb von h3 (z. B. verlinkte Karten-Titel) sollen nie wie normale Fließtext-Links
   aussehen — Farbe von der Überschrift geerbt, keine Unterstreichung außer bei Hover. Analog zu
   ".vakanzen-liste-jobtitel a" (siehe vakanzen-liste.css), hier aber global für alle h3.
   Die mit ".et_pb_module_content"/".et_pb_text" verschachtelten Varianten sind nötig, um die
   Regel oben (".et_pb_text a:not(.et_pb_button)", höhere Spezifität + "!important") zu
   schlagen, da h3-Links in Divi so gut wie immer innerhalb eines dieser Wrapper liegen. */
h3 a,
.et_pb_module_content h3 a,
.et_pb_text h3 a {
	color: inherit !important;
	text-decoration: none !important;
}

h3 a:hover,
.et_pb_module_content h3 a:hover,
.et_pb_text h3 a:hover {
	text-decoration: underline !important;
}

.et_pb_text.et_pb_bg_layout_dark a:hover,
.et_pb_module_content.et_pb_bg_layout_dark a:hover {
	color: var(--color-surface) !important;
}

/* ==========================================================================
   Icons (kleine Inline-SVGs, z. B. Telefon/E-Mail/vCard) — siehe sallier_icon() in
   includes/post_types/mitarbeiter.php. Genutzt von der Mitarbeiter-Karte und den
   Kontakt-Shortcodes im Footer.
   ========================================================================== */

.sallier-icon {
	display: inline-flex;
	flex-shrink: 0;
	vertical-align: middle;
	color: var(--color-accent-hover);
}

.sallier-icon svg {
	width: 20px;
	height: 20px;
}

/* ==========================================================================
   Eyebrow (kleines Label über/unter einer Headline)
   ========================================================================== */

/* Gilt sowohl für direkt gesetzte Elemente als auch für Divi-Textmodule, bei denen der Text in
   ".et_pb_text_inner p" verschachtelt ist — Divis eigenes Preset-System setzt dort teils direkt
   eigene Font-Regeln, die eine nur vererbte Regel vom äußeren ".eyebrow"-Wrapper überstimmen. */
.eyebrow,
.eyebrow .et_pb_text_inner,
.eyebrow .et_pb_text_inner p {
	margin: 0;
	font-family: var(--font-body);
	font-weight: var(--weight-semibold);
	font-size: 18px;
	letter-spacing: var(--tracking-wide);
	text-transform: uppercase;
	color: var(--color-accent-hover);
}

/* Logo, per "[sallier_logo]"-Shortcode innerhalb eines Text-Moduls eingefügt (siehe
   includes/general/rechtstexte.php) — Standardgröße für den Fall, dass niemand im Builder eine
   eigene Breite einstellt. "display:block": vermeidet den sonst üblichen ~8px "Leerraum" unter
   Bildern, die als reines "<img>" ohne Block-Kontext in einem Textfluss stehen. "margin:0 auto"
   nötig, weil "display:block" das Bild sonst aus dem Einfluss von "text-align:center" des
   umgebenden Absatzes herausnimmt (zentriert nur Inline-Inhalt, kein Block-Element) — ohne das
   stand das Logo im Footer sichtbar links statt zentriert. */
.sallier-logo-shortcode {
	display: block;
	max-width: 180px;
	height: auto;
	margin: 0 auto;
}