/* =========================================================================
   Fahnenmasten Shop – Magazin Design Layer  v8
     Schrift  Roboto Condensed (selbst gehostet, nur Regular -> Bold synthetisch)
     Raster   1140px
     Palette  (Vorgabe des Users, 2026-07-16)
              Marineblau #0D1B2A | Himmelblau #4BA3D3 | Signalrot  #D7262E
              Reinweiss  #FFFFFF | Stahlgrau  #6B7280 | Sandgold   #D4B483
   Vorgabe des Users: durchgehend eckig (border-radius 0).

   Kontrast-Budget der Palette (deshalb sind die Rollen so verteilt):
     Marineblau/Weiss 17.4:1 · Signalrot/Weiss 5.1:1 · Stahlgrau/Weiss 4.8:1
     -> diese drei duerfen Text tragen.
     Himmelblau/Weiss 2.3:1 und Sandgold/Weiss 1.8:1 tragen NIE Text auf Hell.
     Himmelblau/Marineblau ist 5.8:1 -> Himmelblau ist die Akzentfarbe auf Navy,
     Sandgold bleibt reine Dekoration (Kicker-Striche, Trenner).

   v3 = Ziel "Blog, der verkauft": Sticky-Header mit Shop-CTA, CTA-Block unter
        jedem Artikel.
   v4 = Header marineblau eingefaerbt (war weiterhin nur ein Layer drueber).
   v5 = Header GELOESCHT und neu gebaut: das mu-plugin verwirft Elementors
        Header-Ausgabe und rendert eigenes Markup (.fh-hdr__*), einzeilig.
   v6 = Footer genauso (.fh-ftr__*) – im alten Template waren Impressum, AGB &
        Co. Text OHNE <a>. Dazu Hero der Startseite ueberarbeitet.
   Details jeweils im Kommentar des betreffenden Abschnitts.
   ========================================================================= */

/* Wie auf der Hauptseite: gleiche Datei, gleiche Domain -> kein CORS, kein CDN. */
@font-face {
	font-family: 'Roboto Condensed';
	src: url('/fonts/RobotoCondensed-Regular.woff2') format('woff2'),
	     url('/fonts/RobotoCondensed-Regular.woff') format('woff');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

.fh-mag {
	/* --- Palette (Vorgabe) --- */
	--fh-navy: #0D1B2A;   /* Marineblau */
	--fh-sky: #4BA3D3;    /* Himmelblau – Akzent NUR auf Navy */
	--fh-red: #D7262E;    /* Signalrot – CTA */
	--fh-gold: #D4B483;   /* Sandgold – Dekor */
	--fh-steel: #6B7280;  /* Stahlgrau */
	--fh-surface: #FFFFFF;

	/* --- Abgeleitete Toene (aus der Palette gemischt, keine neuen Farben) --- */
	--fh-navy-600: #1B3550; /* Navy aufgehellt: Hover-Flaechen im Flyout */
	--fh-navy-h2: #16293D;
	--fh-red-dark: #B01D24;
	--fh-red-tint: #FDF0F0;
	--fh-sky-tint: #EEF6FB;
	/* Seitenhintergrund: Navy stark entsaettigt. Exakt so hell gewaehlt, dass
	   Stahlgrau darauf noch AA schafft – #F4F6F8 waere schoener gewesen, ergab
	   aber nur 4.46:1. Bei #F8F9FB sind es 4.59:1. */
	--fh-bg: #F8F9FB;
	--fh-ink: #16202B;      /* Fliesstext: Navy, minimal aufgehellt */
	--fh-muted: #6B7280;    /* = Stahlgrau, 4.8:1 auf Weiss */
	--fh-line: #E3E7EB;
	--fh-line-strong: #CFD6DD;

	/* Fliesstext-Links: Signalrot ist der CTA und waere inline zu laut,
	   Himmelblau reisst auf Weiss den Kontrast (2.3:1) -> mittleres Navy + Unterstrich. */
	--fh-navy-700: #1B3550;
	/* War #8A96A6 und lag mit 3:1 unter AA. Jetzt Stahlgrau (4.8:1) – die
	   Meta-Zeilen sind ueber die Schriftgroesse zurueckgenommen, nicht ueber Kontrast. */
	--fh-muted-2: #6B7280;

	--fh-maxw: 1140px;
	--fh-stripe: linear-gradient(90deg, #000 0 33.33%, #dd0000 33.33% 66.66%, #ffce00 66.66% 100%);
	--fh-shadow: 0 1px 2px rgba(13, 27, 42, .06), 0 8px 24px rgba(13, 27, 42, .07);

	/* Elementor-Kit-Globals umbiegen (inkl. der drei Custom-Globals des Kits) */
	--e-global-color-primary: #0D1B2A;
	--e-global-color-secondary: #6B7280;
	--e-global-color-text: #16202B;
	--e-global-color-accent: #D7262E;
	--e-global-color-2c7c96c: #D7262E;
	--e-global-color-f65a766: #E3E7EB;
	--e-global-color-2dc6389: #0D1B2A;
}

/* ---------- Grundlagen -------------------------------------------------- */
.fh-mag,
.fh-mag body {
	background: var(--fh-bg);
}

.fh-mag {
	color: var(--fh-ink);
	font-family: 'Roboto Condensed', sans-serif;
	font-size: 16px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

/* Elementor/Hello setzen die Schrift per Kit auf Roboto -> mitziehen */
.fh-mag.fh-mag.fh-mag,
.fh-mag.fh-mag.fh-mag button,
.fh-mag.fh-mag.fh-mag input,
.fh-mag.fh-mag.fh-mag select,
.fh-mag.fh-mag.fh-mag textarea,
.fh-mag.fh-mag.fh-mag h1,
.fh-mag.fh-mag.fh-mag h2,
.fh-mag.fh-mag.fh-mag h3,
.fh-mag.fh-mag.fh-mag h4,
.fh-mag.fh-mag.fh-mag .elementor-heading-title,
.fh-mag.fh-mag.fh-mag .elementor-widget-theme-post-content,
.fh-mag.fh-mag.fh-mag .elementor-post__title,
.fh-mag.fh-mag.fh-mag .elementor-post__excerpt {
	font-family: 'Roboto Condensed', sans-serif;
}

/* Eckig, wie vom User vorgegeben (die Hauptseite rundet stellenweise – hier bewusst nicht) */
.fh-mag *,
.fh-mag *::before,
.fh-mag *::after {
	border-radius: 0 !important;
}

.fh-mag h1,
.fh-mag h2,
.fh-mag h3,
.fh-mag h4 {
	color: var(--fh-navy);
	font-weight: 800;
	line-height: 1.2;
	margin: 0 0 .5em;
}

.fh-mag a {
	color: var(--fh-navy-700);
	text-decoration: none;
	transition: color .15s ease, background-color .15s ease, border-color .15s ease;
}

.fh-mag a:hover {
	color: var(--fh-red);
}

.fh-mag :focus-visible {
	outline: 2px solid var(--fh-red);
	outline-offset: 2px;
}

.fh-mag img {
	max-width: 100%;
	height: auto;
}

/* 1140er-Raster wie die Hauptseite */
.fh-mag .elementor-section.elementor-section-boxed > .elementor-container {
	max-width: var(--fh-maxw);
}

/* =========================================================================
   HEADER  (v5 – komplett eigener Header)

   Bis v4 lag hier nur ein CSS-Layer ueber dem Elementor-Header-Template. Dessen
   Struktur blieb dadurch immer dieselbe: Topbar + Logo-Zeile + Menue-Zeile,
   235px hoch. Der User wollte den Header geloescht und neu gebaut.

   Jetzt: das mu-plugin verwirft Elementors Header-Ausgabe und rendert eigenes
   Markup (.fh-hdr__*). Neu ist vor allem die STRUKTUR:
     - EINE Hauptzeile statt drei: Logo | Menue | Suche | roter CTA, ~64px
       (vorher: Logo-Zeile und Menue-Zeile untereinander)
     - schmale Kontaktzeile darueber (Telefon/Mail links, Shop-Links rechts)
     - Werbebanner (570x90) ersatzlos raus
   Ergebnis: ~100px statt 235px, und der Shop ist aus jeder Zeile erreichbar.

   Sticky ohne JavaScript: .fh-hdr__top und .fh-hdr__main sind GESCHWISTER
   direkt in <body> (dort rendert hello-elementor den Header-Standort). Ein
   sticky Element klebt nur innerhalb seiner Elternbox – als Kind von <body>
   ist die Elternbox die ganze Seite. v3/v4 brauchten dafuer noch ein Messscript.

   Farbrollen (alle gegen Marineblau #0D1B2A geprueft):
     Weiss 17.4:1 · Himmelblau 5.8:1 (Hover/Akzent) · Sandgold 8.6:1
     Signalrot nur als Knopfflaeche mit weisser Schrift (5.1:1).
   ========================================================================= */

.fh-mag .fh-hdr__wrap {
	max-width: var(--fh-maxw);
	margin: 0 auto;
	padding: 0 20px;
	display: flex;
	align-items: center;
	gap: 18px;
}

/* ---------- Kontaktzeile ------------------------------------------------ */
.fh-mag .fh-hdr__top {
	background: var(--fh-navy);
	border-bottom: 1px solid rgba(255, 255, 255, .09);
	font-size: 12px;
}

.fh-mag .fh-hdr__top .fh-hdr__wrap {
	min-height: 36px;
	justify-content: space-between;
}

.fh-mag .fh-hdr__contact {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0;
}

.fh-mag.fh-mag.fh-mag .fh-hdr__contact a {
	color: rgba(255, 255, 255, .82);
	font-weight: 600;
}

.fh-mag.fh-mag.fh-mag .fh-hdr__contact a:hover {
	color: var(--fh-sky);
}

.fh-mag .fh-hdr__sep {
	width: 1px;
	height: 12px;
	background: rgba(255, 255, 255, .22);
}

.fh-mag .fh-hdr__toplinks {
	display: flex;
	align-items: center;
	gap: 20px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.fh-mag.fh-mag.fh-mag .fh-hdr__toplinks a {
	color: rgba(255, 255, 255, .82);
	font-weight: 600;
}

.fh-mag.fh-mag.fh-mag .fh-hdr__toplinks a:hover {
	color: var(--fh-sky);
}

/* ---------- Hauptzeile (klebt) ------------------------------------------ */
.fh-mag .fh-hdr__main {
	background: var(--fh-navy);
	position: sticky;
	top: 0;
	z-index: 500;
	box-shadow: 0 2px 14px rgba(13, 27, 42, .3);
}

/* Signatur: 4px Schwarz/Rot/Gold schliessen den Header ab. */
.fh-mag .fh-hdr__main::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -4px;
	height: 4px;
	background: var(--fh-stripe);
}

.fh-mag .fh-hdr__main .fh-hdr__wrap {
	min-height: 64px;
}

.fh-mag .fh-hdr__logo {
	flex: 0 0 auto;
	display: block;
	line-height: 0;
}

.fh-mag .fh-hdr__logoimg {
	display: block;
	width: auto;
	height: 34px;
}

/* ---------- Menue ------------------------------------------------------- */
/* Das Panel fasst Menue + Suche zusammen: mobil klappt genau dieser Block auf. */
.fh-mag .fh-hdr__panel {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	align-items: center;
	gap: 18px;
}

.fh-mag .fh-hdr__nav {
	flex: 0 1 auto;
	min-width: 0;
}

.fh-mag .fh-hdr__menu {
	display: flex;
	align-items: center;
	list-style: none;
	margin: 0;
	padding: 0;
}

.fh-mag .fh-hdr__menu li {
	position: relative;
}

.fh-mag.fh-mag.fh-mag .fh-hdr__menu a {
	display: block;
	color: rgba(255, 255, 255, .88);
	font-size: 12.5px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .04em;
	line-height: 64px;
	padding: 0 14px;
	white-space: nowrap;
	position: relative;
}

/* Himmelblauer Unterstrich faehrt aus der Mitte auf. */
.fh-mag .fh-hdr__menu > li > a::after {
	content: "";
	position: absolute;
	left: 50%;
	right: 50%;
	bottom: 0;
	height: 2px;
	background: var(--fh-sky);
	transition: left .2s, right .2s;
}

.fh-mag .fh-hdr__menu > li:hover > a::after,
.fh-mag .fh-hdr__menu > li.current-menu-item > a::after {
	left: 0;
	right: 0;
}

.fh-mag.fh-mag.fh-mag .fh-hdr__menu a:hover,
.fh-mag.fh-mag.fh-mag .fh-hdr__menu .current-menu-item > a {
	color: #fff;
	background: rgba(255, 255, 255, .06);
}

/* Untermenue */
.fh-mag .fh-hdr__menu .sub-menu {
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 210px;
	background: var(--fh-navy-600);
	box-shadow: 0 14px 32px rgba(0, 0, 0, .38);
	padding: 6px 0;
	margin: 0;
	list-style: none;
	opacity: 0;
	visibility: hidden;
	transform: translateY(4px);
	transition: opacity .15s ease, transform .15s ease, visibility .15s;
	z-index: 10;
}

.fh-mag .fh-hdr__menu > li:hover > .sub-menu,
.fh-mag .fh-hdr__menu > li:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: none;
}

.fh-mag.fh-mag.fh-mag .fh-hdr__menu .sub-menu a {
	font-size: 13px;
	font-weight: 600;
	text-transform: none;
	letter-spacing: 0;
	line-height: 1.4;
	padding: 9px 18px;
	border-left: 3px solid transparent;
}

.fh-mag .fh-hdr__menu .sub-menu a::after {
	display: none;
}

.fh-mag.fh-mag.fh-mag .fh-hdr__menu .sub-menu a:hover {
	background: rgba(255, 255, 255, .08);
	border-left-color: var(--fh-sky);
}

/* ---------- Suche ------------------------------------------------------- */
.fh-mag .fh-hdr__search {
	flex: 1 1 auto;
	min-width: 0;
	max-width: 260px;
	margin-left: auto;
	display: flex;
	align-items: center;
	background: rgba(255, 255, 255, .08);
	border: 1px solid rgba(255, 255, 255, .18);
	transition: border-color .15s ease, background-color .15s ease;
}

.fh-mag .fh-hdr__search:focus-within {
	background: rgba(255, 255, 255, .13);
	border-color: var(--fh-sky);
	box-shadow: 0 0 0 3px rgba(75, 163, 211, .22);
}

/* Label bleibt fuer Screenreader, verschwindet optisch. */
.fh-mag .fh-hdr__srlabel {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

.fh-mag.fh-mag.fh-mag .fh-hdr__search input {
	flex: 1 1 auto;
	min-width: 0;
	background: transparent;
	border: 0;
	color: #fff;
	font-size: 13.5px;
	padding: 8px 10px;
	outline: 0;
}

/* Platzhalter: .62 Deckkraft ergibt auf Navy ~5.6:1 – darunter reisst AA. */
.fh-mag.fh-mag.fh-mag .fh-hdr__search input::placeholder {
	color: rgba(255, 255, 255, .62);
	opacity: 1;
}

.fh-mag.fh-mag.fh-mag .fh-hdr__search button {
	flex: 0 0 auto;
	background: transparent;
	border: 0;
	color: rgba(255, 255, 255, .8);
	padding: 8px 11px;
	cursor: pointer;
	display: flex;
	align-items: center;
}

.fh-mag.fh-mag.fh-mag .fh-hdr__search button:hover {
	background: var(--fh-sky);
	color: var(--fh-navy);
}

/* ---------- Shop-CTA ---------------------------------------------------- */
/* Der einzige rote Knopf im Chrome -> Signalrot bleibt eindeutig "hier kaufen". */
.fh-mag.fh-mag.fh-mag .fh-hdr__cta {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	background: var(--fh-red);
	color: #fff;
	font-size: 12.5px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .04em;
	line-height: 1;
	padding: 13px 18px;
	white-space: nowrap;
}

.fh-mag.fh-mag.fh-mag .fh-hdr__cta:hover,
.fh-mag.fh-mag.fh-mag .fh-hdr__cta:focus-visible {
	background: #fff;
	color: var(--fh-navy);
}

.fh-mag .fh-hdr__arrow {
	transition: transform .15s ease;
}

.fh-mag .fh-hdr__cta:hover .fh-hdr__arrow {
	transform: translateX(3px);
}

/* ---------- Umschalter (nur mobil sichtbar) ----------------------------- */
.fh-mag .fh-hdr__burger {
	display: none;
	flex: 0 0 auto;
	width: 42px;
	height: 42px;
	margin-left: auto;
	background: transparent;
	border: 1px solid rgba(255, 255, 255, .18);
	cursor: pointer;
	position: relative;
}

/* Drei Balken aus einem Element: der mittlere ist der Balken selbst. */
.fh-mag .fh-hdr__burgerbar,
.fh-mag .fh-hdr__burgerbar::before,
.fh-mag .fh-hdr__burgerbar::after {
	position: absolute;
	left: 50%;
	width: 18px;
	height: 2px;
	margin-left: -9px;
	background: #fff;
	transition: transform .2s ease, opacity .2s ease;
}

.fh-mag .fh-hdr__burgerbar {
	top: 50%;
	margin-top: -1px;
}

.fh-mag .fh-hdr__burgerbar::before,
.fh-mag .fh-hdr__burgerbar::after {
	content: "";
	left: 0;
	margin-left: 0;
}

.fh-mag .fh-hdr__burgerbar::before {
	top: -6px;
}

.fh-mag .fh-hdr__burgerbar::after {
	top: 6px;
}

.fh-mag .fh-hdr__burger[aria-expanded="true"] .fh-hdr__burgerbar {
	background: transparent;
}

.fh-mag .fh-hdr__burger[aria-expanded="true"] .fh-hdr__burgerbar::before {
	transform: translateY(6px) rotate(45deg);
}

.fh-mag .fh-hdr__burger[aria-expanded="true"] .fh-hdr__burgerbar::after {
	transform: translateY(-6px) rotate(-45deg);
}


/* =========================================================================
   BREADCRUMBS
   ========================================================================= */
.fh-mag #breadcrumbs {
	font-size: 12.5px;
	color: var(--fh-muted);
	margin: 0;
	padding: 14px 0 2px;
}

/* --fh-muted statt --fh-muted-2: letzteres reisst auf Weiss die 4.5:1 (nur 3:1). */
.fh-mag #breadcrumbs a {
	color: var(--fh-muted);
}

.fh-mag #breadcrumbs a:hover {
	color: var(--fh-red);
}

.fh-mag #breadcrumbs .breadcrumb_last {
	color: var(--fh-navy);
	font-weight: 700;
}

/* =========================================================================
   STARTSEITE: EINLEITUNG / TRUST / SHOP-BRUECKE   (v7)

   Der Inhalt bestand nur aus Hero + einer Ueberschrift + Kachelraster. Keine
   H1, keine Vertrauenssignale, kein Weg ins Sortiment. Ergaenzt (alles per
   mu-plugin an bestehende Widgets gehaengt, keine Template-/DB-Edits):
     .fh-intro   H1 + Lead   (an die Breadcrumb)
     .fh-trust   Trust-Leiste (vor die Ueberschrift) – Wortlaut vom Shop
     .fh-bridge  Sortiments-Bruecke (hinter die Kacheln)
   ========================================================================= */

/* ---------- Einleitung mit H1 ------------------------------------------- */
.fh-mag .fh-intro {
	padding: 6px 0 22px;
}

.fh-mag.fh-mag.fh-mag .fh-intro__title {
	color: var(--fh-navy);
	font-size: clamp(28px, 3.4vw, 40px);
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: -0.015em;
	margin: 0 0 12px;
	position: relative;
	padding-left: 16px;
}

/* Roter Balken statt Unterstreichung – gleiche Sprache wie der Hero-Akzent. */
.fh-mag .fh-intro__title::before {
	content: "";
	position: absolute;
	left: 0;
	top: .12em;
	bottom: .12em;
	width: 4px;
	background: var(--fh-red);
}

.fh-mag .fh-intro__lead {
	color: var(--fh-muted);
	font-size: 17px;
	line-height: 1.65;
	margin: 0;
	max-width: 76ch;
	padding-left: 16px;
}

/* ---------- Trust-Leiste ------------------------------------------------ */
.fh-mag .fh-trust {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 0;
	list-style: none;
	margin: 26px 0 34px;
	padding: 0;
	background: var(--fh-surface);
	border: 1px solid var(--fh-line);
	box-shadow: var(--fh-shadow);
}

.fh-mag .fh-trust__item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 16px 18px;
	min-width: 0;
}

.fh-mag .fh-trust__item + .fh-trust__item {
	border-left: 1px solid var(--fh-line);
}

/* Signalrot als Akzent – hier reine Ikonografie, kein CTA. */
.fh-mag .fh-trust__icon {
	flex: 0 0 auto;
	color: var(--fh-red);
}

.fh-mag .fh-trust__text {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.fh-mag .fh-trust__text strong {
	color: var(--fh-navy);
	font-size: 13.5px;
	font-weight: 800;
	line-height: 1.25;
}

.fh-mag .fh-trust__text span {
	color: var(--fh-muted);
	font-size: 12.5px;
	line-height: 1.3;
}

/* ---------- Sortiments-Bruecke ------------------------------------------ */
.fh-mag .fh-bridge {
	margin: 44px 0 8px;
	padding-top: 34px;
	border-top: 1px solid var(--fh-line);
}

.fh-mag .fh-bridge__head {
	margin-bottom: 20px;
}

/* Sandgold auf Hell waere 1.8:1 – der Kicker traegt darum Signalrot. */
.fh-mag .fh-bridge__kicker {
	color: var(--fh-red);
	font-size: 11.5px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .09em;
	margin: 0 0 6px;
}

.fh-mag.fh-mag.fh-mag .fh-bridge__title {
	color: var(--fh-navy);
	font-size: 24px;
	font-weight: 800;
	margin: 0;
}

.fh-mag .fh-bridge__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
}

.fh-mag.fh-mag.fh-mag .fh-bridge__tile {
	display: flex;
	flex-direction: column;
	background: var(--fh-surface);
	border: 1px solid var(--fh-line);
	padding: 20px 18px;
	transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.fh-mag.fh-mag.fh-mag .fh-bridge__tile:hover {
	border-color: var(--fh-navy);
	box-shadow: var(--fh-shadow);
	transform: translateY(-2px);
}

.fh-mag .fh-bridge__tiletitle {
	color: var(--fh-navy);
	font-size: 17px;
	font-weight: 800;
	line-height: 1.2;
	margin-bottom: 7px;
}

.fh-mag .fh-bridge__tiletext {
	color: var(--fh-muted);
	font-size: 13.5px;
	line-height: 1.5;
	margin-bottom: 16px;
}

.fh-mag .fh-bridge__tilelink {
	margin-top: auto;
	color: var(--fh-red);
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .04em;
}

.fh-mag .fh-bridge__tile:hover .fh-bridge__tilelink span {
	display: inline-block;
	transform: translateX(3px);
	transition: transform .15s ease;
}

/* Konfigurator-Zeile: der eine starke Weg fuer Unentschlossene. */
.fh-mag.fh-mag.fh-mag .fh-bridge__cta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	background: var(--fh-navy);
	padding: 22px 26px;
	margin-top: 16px;
	position: relative;
}

.fh-mag .fh-bridge__cta::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 3px;
	background: var(--fh-stripe);
}

.fh-mag .fh-bridge__ctatext {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.fh-mag .fh-bridge__ctatext strong {
	color: #fff;
	font-size: 18px;
	font-weight: 800;
	line-height: 1.3;
}

.fh-mag .fh-bridge__ctatext span {
	color: rgba(255, 255, 255, .78);
	font-size: 14px;
	line-height: 1.45;
}

.fh-mag .fh-bridge__ctabtn {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	background: var(--fh-red);
	color: #fff;
	font-size: 12.5px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .04em;
	line-height: 1;
	padding: 14px 20px;
	white-space: nowrap;
	transition: background-color .15s ease, color .15s ease;
}

.fh-mag.fh-mag.fh-mag .fh-bridge__cta:hover .fh-bridge__ctabtn {
	background: #fff;
	color: var(--fh-navy);
}

/* =========================================================================
   STARTSEITE
   ========================================================================= */
/* -------------------------------------------------------------------------
   HERO (Section d7d7b75)  – v8, komplett neu

   Vorher: ZWEI Werbeflaechen nebeneinander – links das Elementor-Slides-Widget
   ("Beliebte ZA/ZD Serie", Foto `test.jpg`), rechts ein Shop-Banner. v3–v7
   haben das linke Panel immer nur umgefaerbt, Struktur/Foto/Text blieben gleich.

   Jetzt fuehrt der Inhalt, wie es sich fuer ein Magazin gehoert:
     links  .fh-hero   = neuester Artikel mit seinem echten Beitragsbild
     rechts .fh-promo  = Shop-Panel (bleibt, ist die kommerzielle Brueckenzeile)
   Das Slides-Widget wird vom mu-plugin ersetzt -> dessen CSS ist entfallen.
   ------------------------------------------------------------------------- */
.fh-mag.fh-mag.fh-mag .elementor-element-d7d7b75 > .elementor-container {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 260px;
	grid-template-rows: 360px;
	gap: 16px;
	align-items: stretch;
	max-width: var(--fh-maxw);
}

/* width:100% ist Pflicht – in der Flex-Spalte wuerde width:auto die Spalte
   auf die Inhaltsbreite kollabieren (Falle aus dem alten Swiper-Aufbau). */
.fh-mag .elementor-element-d7d7b75 .elementor-column,
.fh-mag .elementor-element-d7d7b75 .elementor-widget-wrap,
.fh-mag .elementor-element-d7d7b75 .elementor-widget,
.fh-mag .elementor-element-d7d7b75 .elementor-widget-container {
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
}

/* ---- Aufmacher ---- */
.fh-mag .fh-hero {
	position: relative;
	display: flex;
	align-items: flex-end;
	height: 100%;
	overflow: hidden;
	background: var(--fh-navy);
	border: 1px solid var(--fh-line);
	box-shadow: 0 10px 26px rgba(13, 27, 42, .12);
}

.fh-mag .fh-hero__media {
	position: absolute;
	inset: 0;
}

.fh-mag.fh-mag.fh-mag .fh-hero__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
	transition: transform 6s ease;
}

.fh-mag .fh-hero:hover .fh-hero__img {
	transform: scale(1.05);
}

/* Scrim: das Beitragsbild ist frei waehlbar, der Text muss trotzdem immer
   lesbar sein -> kraeftiger Verlauf von unten-links statt Vertrauen aufs Motiv. */
.fh-mag .fh-hero__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(105deg, rgba(13, 27, 42, .94) 0%, rgba(13, 27, 42, .72) 42%, rgba(13, 27, 42, .3) 100%),
		linear-gradient(to top, rgba(13, 27, 42, .8) 0%, rgba(13, 27, 42, 0) 55%);
}

/* Fuellt die ganze Karte, nicht nur den Textblock. Das ist Absicht: der
   Stretched-Link (.fh-hero__btn::after) rechnet gegen den naechsten
   positionierten Vorfahren – das ist dieses Element. Waere es nur so gross wie
   der Text, waere die obere Bildhaelfte nicht klickbar.
   Die Textbreite begrenzen darum die Kinder selbst, nicht dieser Kasten. */
.fh-mag .fh-hero__body {
	position: relative;
	z-index: 2;
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	align-items: flex-start;
	padding: 34px 40px;
}

.fh-mag .fh-hero__kicker,
.fh-mag.fh-mag.fh-mag .fh-hero__title,
.fh-mag .fh-hero__text {
	max-width: 620px;
}

/* Sandgold auf Navy = 8.6:1 – hier als Text zulaessig. */
.fh-mag .fh-hero__kicker {
	display: flex;
	align-items: center;
	gap: 9px;
	color: var(--fh-gold);
	font-size: 11.5px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .09em;
	margin: 0 0 12px;
}

.fh-mag .fh-hero__kicker::before {
	content: "";
	width: 22px;
	height: 2px;
	background: var(--fh-red);
	flex: 0 0 auto;
}

.fh-mag.fh-mag.fh-mag .fh-hero__title {
	color: #fff;
	font-size: clamp(26px, 2.9vw, 36px);
	font-weight: 800;
	line-height: 1.12;
	letter-spacing: -0.015em;
	margin: 0 0 12px;
}

.fh-mag .fh-hero__text {
	color: rgba(255, 255, 255, .84);
	font-size: 15.5px;
	line-height: 1.55;
	margin: 0 0 22px;
	max-width: 54ch;
}

.fh-mag.fh-mag.fh-mag .fh-hero__btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: var(--fh-red);
	color: #fff;
	font-size: 12.5px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .05em;
	line-height: 1;
	padding: 13px 22px;
}

/* Ganze Flaeche klickbar, ohne das Markup in einen Riesen-Link zu packen:
   der Knopf spannt sich unsichtbar ueber die Karte. Der Link bleibt damit
   semantisch am Knopf (und die Ueberschrift eine echte Ueberschrift). */
.fh-mag .fh-hero__btn::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 3;
}

.fh-mag.fh-mag.fh-mag .fh-hero:hover .fh-hero__btn {
	background: #fff;
	color: var(--fh-navy);
}

.fh-mag .fh-hero__btn span {
	transition: transform .15s ease;
}

.fh-mag .fh-hero:hover .fh-hero__btn span {
	transform: translateX(3px);
}

/* ---- Rechtes Promo-Panel (.fh-promo, per mu-plugin statt des alten JPG) ----
   War ein 180x307-Bild, auf 203x338 hochskaliert = unscharf, Text eingebrannt,
   "SHOP" gelb, Knopf rund. Jetzt Text auf Navy: scharf, on-palette, eckig. */
.fh-mag .elementor-element-e40b747 {
	background: var(--fh-navy);
	border: 1px solid var(--fh-line);
	box-shadow: 0 10px 26px rgba(13, 27, 42, .12);
	overflow: hidden;
}

.fh-mag.fh-mag.fh-mag .fh-promo {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	height: 100%;
	padding: 26px 22px;
	color: #fff;
}

/* Sandgold auf Navy = 8.6:1, hier also als Text erlaubt. */
.fh-mag .fh-promo__kicker {
	color: var(--fh-gold);
	font-size: 11.5px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .09em;
	padding-bottom: 12px;
	border-bottom: 1px solid rgba(255, 255, 255, .16);
	width: 100%;
}

.fh-mag .fh-promo__list {
	list-style: none;
	margin: 18px 0 0;
	padding: 0;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.45;
}

.fh-mag .fh-promo__list li {
	position: relative;
	padding-left: 16px;
}

.fh-mag .fh-promo__list li + li {
	margin-top: 8px;
}

/* Himmelblauer Punkt – auf Navy 5.8:1, als Dekor ohnehin unkritisch. */
.fh-mag .fh-promo__list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .62em;
	width: 6px;
	height: 6px;
	background: var(--fh-sky);
}

/* Knopf sitzt unten – `margin-top:auto` haelt ihn am Panelboden, egal wie
   lang die Liste wird. */
.fh-mag.fh-mag.fh-mag .fh-promo__btn {
	margin-top: auto;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	background: var(--fh-red);
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .04em;
	line-height: 1;
	padding: 12px 16px;
}

.fh-mag.fh-mag.fh-mag .fh-promo:hover .fh-promo__btn {
	background: #fff;
	color: var(--fh-navy);
}

.fh-mag .fh-promo__arrow {
	transition: transform .15s ease;
}

.fh-mag .fh-promo:hover .fh-promo__arrow {
	transform: translateX(3px);
}

/* ---- Hero auf schmalen Viewports ----
   Die Section traegt `elementor-hidden-mobile`, mobile Leser sahen also gar
   keinen Hero. Grund dafuer war das starre 180px-Promo-Bild; seit rechts ein
   Textpanel steht, faellt der Grund weg -> Hero einblenden und stapeln. */
@media (max-width: 1023px) {
	.fh-mag.fh-mag.fh-mag .elementor-element-d7d7b75 > .elementor-container {
		grid-template-columns: minmax(0, 1fr);
		/* Aufmacher fix, Promo waechst mit dem Inhalt. */
		grid-template-rows: 340px auto;
	}

	.fh-mag .fh-hero__body {
		padding: 26px 24px;
	}
}

@media (max-width: 767px) {
	/* Elementors `elementor-hidden-mobile` setzt display:none -> hier gezielt
	   zuruecknehmen. Das !important ist noetig, weil Elementors Regel es selbst
	   fuehrt; ohne waere die Section weiterhin weg. */
	.fh-mag .elementor-element-d7d7b75.elementor-hidden-mobile {
		display: block !important;
	}

	.fh-mag.fh-mag.fh-mag .elementor-element-d7d7b75 > .elementor-container {
		grid-template-rows: 300px auto;
		gap: 12px;
	}

	.fh-mag .fh-hero__body {
		padding: 20px;
	}

	.fh-mag .fh-hero__text {
		font-size: 14.5px;
		margin-bottom: 16px;
	}

	.fh-mag.fh-mag.fh-mag .fh-promo {
		padding: 20px 18px;
	}

	.fh-mag .fh-promo__list {
		margin-top: 14px;
	}

	.fh-mag.fh-mag.fh-mag .fh-promo__btn {
		margin-top: 18px;
	}
}

/* Deutschland-Streifen als gemeinsamer Sockel unter dem Hero */
.fh-mag .elementor-element-d7d7b75::after {
	content: "";
	display: block;
	height: 3px;
	margin-top: 14px;
	background: var(--fh-stripe);
}

/* Abstand zur Sektions-Ueberschrift */
.fh-mag .elementor-element-d7d7b75 {
	margin-bottom: 8px;
}

/* Sektions-Ueberschrift mit Rot-Balken */
.fh-mag .elementor-location-single .elementor-widget-heading .elementor-heading-title {
	color: var(--fh-navy);
	font-weight: 800;
}

.fh-mag.home .elementor-location-single .elementor-widget-heading .elementor-heading-title {
	position: relative;
	padding-bottom: 12px;
	font-size: 26px;
}

.fh-mag.home .elementor-location-single .elementor-widget-heading .elementor-heading-title::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 56px;
	height: 3px;
	background: var(--fh-red);
}

/* ---------- Artikel-Karten --------------------------------------------- */
.fh-mag .elementor-posts--skin-cards .elementor-posts-container {
	grid-column-gap: 22px;
	grid-row-gap: 22px;
}

.fh-mag .elementor-posts--skin-cards .elementor-post__card {
	background: var(--fh-surface);
	border: 1px solid var(--fh-line);
	box-shadow: none;
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	transition: box-shadow .18s ease, transform .18s ease;
}

.fh-mag .elementor-posts--skin-cards .elementor-post__card:hover {
	box-shadow: 0 12px 26px rgba(13, 27, 42, .13);
	transform: translateY(-3px);
}

/* Bild oben, darunter der Deutschland-Streifen als Marken-Klammer */
.fh-mag .elementor-posts--skin-cards .elementor-post__thumbnail__link {
	position: relative;
	display: block;
	border-bottom: 3px solid transparent;
	border-image: var(--fh-stripe) 1;
}

.fh-mag .elementor-posts--skin-cards .elementor-post__thumbnail {
	padding-bottom: 60%;
}

.fh-mag .elementor-posts--skin-cards .elementor-post__text {
	padding: 18px 18px 20px;
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	margin: 0;
}

.fh-mag .elementor-posts--skin-cards .elementor-post__title {
	margin: 0 0 8px;
	font-size: 18px;
	line-height: 1.3;
	font-weight: 800;
}

.fh-mag .elementor-posts--skin-cards .elementor-post__title a {
	color: var(--fh-navy);
}

.fh-mag .elementor-posts--skin-cards .elementor-post__card:hover .elementor-post__title a {
	color: var(--fh-red);
}

.fh-mag .elementor-posts--skin-cards .elementor-post__excerpt {
	margin: 0 0 16px;
	flex: 1 1 auto;
}

.fh-mag .elementor-posts--skin-cards .elementor-post__excerpt p {
	color: var(--fh-muted);
	font-size: 14px;
	line-height: 1.55;
	margin: 0;
}

.fh-mag.fh-mag.fh-mag .elementor-posts--skin-cards .elementor-post__read-more {
	align-self: flex-start;
	margin: 0;
	padding: 8px 16px;
	background: var(--fh-navy);
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
}

.fh-mag.fh-mag.fh-mag .elementor-posts--skin-cards .elementor-post__card:hover .elementor-post__read-more,
.fh-mag.fh-mag.fh-mag .elementor-posts--skin-cards .elementor-post__read-more:hover {
	background: var(--fh-red);
	color: #fff;
}

.fh-mag.fh-mag.fh-mag .elementor-posts:not(.elementor-posts--skin-cards) .elementor-post__read-more {
	color: var(--fh-red-dark);
	font-weight: 700;
}

.fh-mag .elementor-posts--skin-cards .elementor-post__meta-data {
	border: 0;
	padding: 0 18px 14px;
	color: var(--fh-muted-2);
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: .04em;
}

/* =========================================================================
   EINZELARTIKEL
   ========================================================================= */
.fh-mag.single-post .elementor-location-single .elementor-widget-theme-post-title .elementor-heading-title {
	font-size: clamp(26px, 3vw, 32px);
	font-weight: 800;
	line-height: 1.18;
	color: var(--fh-navy);
	padding-bottom: 14px;
	position: relative;
}

.fh-mag.single-post .elementor-location-single .elementor-widget-theme-post-title .elementor-heading-title::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 56px;
	height: 3px;
	background: var(--fh-red);
}

.fh-mag .elementor-widget-theme-post-featured-image img {
	display: block;
	border-bottom: 3px solid transparent;
	border-image: var(--fh-stripe) 1;
}

/* Fliesstext */
.fh-mag .elementor-widget-theme-post-content {
	color: var(--fh-ink);
	font-size: 16.5px;
	line-height: 1.7;
}

.fh-mag .elementor-widget-theme-post-content p {
	margin: 0 0 1.1em;
}

.fh-mag .elementor-widget-theme-post-content h2 {
	font-size: 23px;
	font-weight: 800;
	color: var(--fh-navy-h2);
	margin: 1.7em 0 .5em;
	padding-top: 16px;
	border-top: 1px solid var(--fh-line);
}

.fh-mag .elementor-widget-theme-post-content h3 {
	font-size: 19px;
	font-weight: 800;
	color: var(--fh-navy-700);
	margin: 1.4em 0 .4em;
}

.fh-mag .elementor-widget-theme-post-content strong {
	color: var(--fh-navy);
	font-weight: 700;
}

.fh-mag .elementor-widget-theme-post-content a:not(.elementor-button) {
	color: var(--fh-navy-700);
	font-weight: 700;
	box-shadow: inset 0 -1px 0 0 var(--fh-line-strong);
}

.fh-mag .elementor-widget-theme-post-content a:not(.elementor-button):hover {
	color: var(--fh-red);
	box-shadow: inset 0 -2px 0 0 var(--fh-red);
}

.fh-mag .elementor-widget-theme-post-content ul {
	list-style: none;
	padding-left: 0;
	margin: 0 0 1.2em;
}

.fh-mag .elementor-widget-theme-post-content ul > li {
	position: relative;
	padding-left: 20px;
	margin-bottom: .5em;
}

.fh-mag .elementor-widget-theme-post-content ul > li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .6em;
	width: 7px;
	height: 7px;
	background: var(--fh-red);
}

.fh-mag .elementor-widget-theme-post-content ol {
	padding-left: 1.2em;
	margin: 0 0 1.2em;
}

.fh-mag .elementor-widget-theme-post-content ol > li {
	margin-bottom: .5em;
}

.fh-mag .elementor-widget-theme-post-content ol > li::marker {
	color: var(--fh-red);
	font-weight: 700;
}

.fh-mag .elementor-widget-theme-post-content blockquote {
	margin: 1.6em 0;
	padding: 18px 20px;
	background: var(--fh-surface);
	border: 1px solid var(--fh-line);
	border-left: 4px solid var(--fh-red);
	color: var(--fh-navy);
	font-style: normal;
	font-size: 16px;
}

.fh-mag .elementor-widget-theme-post-content blockquote p:last-child {
	margin-bottom: 0;
}

.fh-mag .elementor-widget-theme-post-content img {
	border: 1px solid var(--fh-line);
	display: block;
}

.fh-mag figcaption,
.fh-mag .widget-image-caption {
	color: var(--fh-muted-2);
	font-size: 12.5px;
	padding: 8px 0;
	border-bottom: 1px solid var(--fh-line);
}

/* Tabellen */
.fh-mag .elementor-widget-theme-post-content table,
.fh-mag table.tablepress {
	width: 100%;
	border-collapse: collapse;
	margin: 1.5em 0;
	background: var(--fh-surface);
	border: 1px solid var(--fh-line);
	font-size: 15px;
}

.fh-mag .elementor-widget-theme-post-content th,
.fh-mag table.tablepress thead th {
	background: var(--fh-navy);
	color: #fff;
	font-weight: 700;
	text-align: left;
	padding: 11px 13px;
	border: 0;
}

.fh-mag .elementor-widget-theme-post-content td,
.fh-mag table.tablepress td {
	padding: 10px 13px;
	border-top: 1px solid var(--fh-line);
}

.fh-mag table.tablepress tbody tr:nth-child(even) td,
.fh-mag .elementor-widget-theme-post-content tbody tr:nth-child(even) td {
	background: var(--fh-bg);
}

.fh-mag .elementor-widget-theme-post-content .tablepress-scroll-wrapper,
.fh-mag .elementor-widget-theme-post-content .wp-block-table {
	overflow-x: auto;
}

/* ---------- Inhaltsverzeichnis ----------------------------------------- */
.fh-mag .elementor-widget-table-of-contents .elementor-toc__header {
	background: var(--fh-navy);
	border: 0;
	padding: 12px 16px;
}

.fh-mag .elementor-widget-table-of-contents .elementor-toc__header-title {
	color: #fff;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: .08em;
	text-transform: uppercase;
	margin: 0;
}

.fh-mag .elementor-widget-table-of-contents .elementor-toc__toggle-button {
	color: #fff;
}

.fh-mag .elementor-widget-table-of-contents .elementor-toc__body {
	background: var(--fh-surface);
	border: 1px solid var(--fh-line);
	border-top: 0;
	padding: 12px 16px;
	max-height: none;
}

.fh-mag .elementor-widget-table-of-contents .elementor-toc__list-item {
	margin: 0;
}

.fh-mag .elementor-widget-table-of-contents .elementor-toc__list-item-text {
	color: var(--fh-navy-700);
	font-size: 14px;
	font-weight: 600;
	border-bottom: 0;
	display: block;
	padding: 6px 0 6px 11px;
	border-left: 2px solid var(--fh-line);
}

.fh-mag .elementor-widget-table-of-contents .elementor-toc__list-item-text:hover,
.fh-mag .elementor-widget-table-of-contents .elementor-toc__list-item-text-wrapper:hover .elementor-toc__list-item-text {
	color: var(--fh-red);
	border-left-color: var(--fh-red);
	background: transparent;
}

/* ---------- Buttons ----------------------------------------------------- */
.fh-mag .elementor-button,
.fh-mag input[type="submit"] {
	background: var(--fh-navy);
	color: #fff;
	border: 0;
	font-family: 'Roboto Condensed', sans-serif;
	font-weight: 700;
	font-size: 13px;
	letter-spacing: .05em;
	text-transform: uppercase;
	padding: 12px 24px;
}

.fh-mag .elementor-button:hover,
.fh-mag input[type="submit"]:hover {
	background: var(--fh-red);
	color: #fff;
}
/* =========================================================================
   FOOTER  (v6 – komplett eigener Footer)

   Vorher: Elementor-Template 113, hell, 457px hoch, viel Leerraum – und vor
   allem waren Impressum / Datenschutz / AGB / Widerrufsbelehrung / Kontakt /
   Telefon / E-Mail **reiner Text ohne <a>**. Bei Pflichtangaben ein Mangel;
   im Layer war das nicht zu heilen, nur im Neubau.

   Jetzt: das mu-plugin verwirft Elementors Footer-Ausgabe und rendert eigenes
   Markup (.fh-ftr__*): Marineblau wie der Header (rahmt die Seite ein), vier
   Spalten (Marke+Social / Shop / Rechtliches / Kontakt), alles verlinkt,
   darunter eine abgesetzte Zeile mit Copyright. Deutschland-Streifen schliesst
   ab – gleiche Signatur wie unter dem Header.

   Farbrollen wie im Header: Weiss 17.4:1 auf Navy, Himmelblau 5.8:1 als Hover,
   Sandgold 8.6:1 fuer die Spaltenueberschriften.
   ========================================================================= */
.fh-mag .fh-ftr {
	background: var(--fh-navy);
	margin-top: 60px;
	position: relative;
}

.fh-mag .fh-ftr__wrap {
	max-width: var(--fh-maxw);
	margin: 0 auto;
	padding: 0 20px;
}

.fh-mag .fh-ftr__main .fh-ftr__wrap {
	display: grid;
	grid-template-columns: 1.6fr 1fr 1fr 1.2fr;
	gap: 40px;
	padding-top: 52px;
	padding-bottom: 44px;
}

/* ---------- Marke ------------------------------------------------------- */
.fh-mag .fh-ftr__logo {
	display: inline-block;
	line-height: 0;
}

.fh-mag .fh-ftr__logoimg {
	display: block;
	width: auto;
	height: 32px;
}

.fh-mag .fh-ftr__claim {
	color: rgba(255, 255, 255, .72);
	font-size: 14px;
	line-height: 1.6;
	margin: 16px 0 20px;
	max-width: 34ch;
}

.fh-mag .fh-ftr__social {
	display: flex;
	gap: 8px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.fh-mag.fh-mag.fh-mag .fh-ftr__social a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	background: rgba(255, 255, 255, .08);
	color: #fff;
}

.fh-mag.fh-mag.fh-mag .fh-ftr__social a:hover {
	background: var(--fh-red);
	color: #fff;
}

/* ---------- Spalten ----------------------------------------------------- */
/* Sandgold traegt hier Text – auf Navy sind es 8.6:1, das ist erlaubt.
   (Auf Hell waeren es 1.8:1, darum steht Sandgold sonst nur als Dekor.) */
.fh-mag.fh-mag.fh-mag .fh-ftr__head {
	color: var(--fh-gold);
	font-size: 12px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .09em;
	margin: 0 0 16px;
}

.fh-mag .fh-ftr__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.fh-mag .fh-ftr__list li + li {
	margin-top: 9px;
}

.fh-mag.fh-mag.fh-mag .fh-ftr__list a,
.fh-mag.fh-mag.fh-mag .fh-ftr__addr a {
	color: rgba(255, 255, 255, .78);
	font-size: 14px;
}

.fh-mag.fh-mag.fh-mag .fh-ftr__list a:hover,
.fh-mag.fh-mag.fh-mag .fh-ftr__addr a:hover {
	color: var(--fh-sky);
}

.fh-mag .fh-ftr__addr {
	font-style: normal;
	color: rgba(255, 255, 255, .72);
	font-size: 14px;
	line-height: 1.7;
}

.fh-mag .fh-ftr__addr p {
	margin: 0 0 14px;
}

.fh-mag .fh-ftr__addr p:last-child {
	margin-bottom: 0;
}

.fh-mag .fh-ftr__fax {
	color: rgba(255, 255, 255, .72);
}

/* ---------- Schlusszeile ------------------------------------------------ */
.fh-mag .fh-ftr__bottom {
	border-top: 1px solid rgba(255, 255, 255, .09);
}

.fh-mag .fh-ftr__bottom .fh-ftr__wrap {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	min-height: 54px;
	padding-top: 12px;
	padding-bottom: 16px;
}

.fh-mag .fh-ftr__copy,
.fh-mag .fh-ftr__made {
	color: rgba(255, 255, 255, .6);
	font-size: 12.5px;
	margin: 0;
}

.fh-mag.fh-mag.fh-mag .fh-ftr__made a {
	color: rgba(255, 255, 255, .6);
}

.fh-mag.fh-mag.fh-mag .fh-ftr__made a:hover {
	color: var(--fh-sky);
}

/* Signatur: 4px Schwarz/Rot/Gold schliessen die Seite ab. */
.fh-mag .fh-ftr::after {
	content: "";
	display: block;
	height: 4px;
	background: var(--fh-stripe);
}


/* =========================================================================
   ARCHIV / SUCHE
   ========================================================================= */
.fh-mag.archive .site-main,
.fh-mag.search .site-main,
.fh-mag.blog .site-main {
	max-width: var(--fh-maxw);
	margin: 0 auto;
	padding: 34px 20px 50px;
}

.fh-mag.archive .page-header,
.fh-mag.search .page-header {
	border-bottom: 3px solid transparent;
	border-image: var(--fh-stripe) 1;
	padding-bottom: 12px;
	margin-bottom: 28px;
}

.fh-mag.archive article.post,
.fh-mag.search article {
	background: var(--fh-surface);
	border: 1px solid var(--fh-line);
	border-left: 3px solid var(--fh-navy);
	padding: 20px 22px;
	margin-bottom: 18px;
	transition: border-left-color .15s ease, box-shadow .15s ease;
}

.fh-mag.archive article.post:hover,
.fh-mag.search article:hover {
	border-left-color: var(--fh-red);
	box-shadow: 0 10px 22px rgba(13, 27, 42, .10);
}

.fh-mag.archive article.post .entry-title,
.fh-mag.search article .entry-title {
	font-size: 20px;
	font-weight: 800;
	margin-bottom: 6px;
}

.fh-mag .pagination .page-numbers,
.fh-mag .elementor-pagination .page-numbers {
	border: 1px solid var(--fh-line-strong);
	background: var(--fh-surface);
	color: var(--fh-navy);
	padding: 7px 13px;
	margin: 0 3px;
	font-weight: 700;
	font-size: 13px;
}

.fh-mag .pagination .page-numbers.current,
.fh-mag .elementor-pagination .page-numbers.current {
	background: var(--fh-navy);
	border-color: var(--fh-navy);
	color: #fff;
}

.fh-mag .pagination .page-numbers:hover,
.fh-mag .elementor-pagination .page-numbers:hover {
	background: var(--fh-red);
	border-color: var(--fh-red);
	color: #fff;
}

/* Deutsche Komposita ("Galgenmasten:", "Widerrufsbelehrung") schoben Titel in
   schmalen Spalten ein paar Pixel ueber die Kante. */
.fh-mag .elementor-post__title,
.fh-mag .elementor-post__title a,
.fh-mag .elementor-heading-title {
	overflow-wrap: break-word;
	hyphens: auto;
}

/* Beitragsdatum kam als #ADADAD aus dem Kit (2.2:1) – Bestand, den der Layer
   bisher nicht erwischt hat. */
.fh-mag.fh-mag.fh-mag .elementor-post-date,
.fh-mag.fh-mag.fh-mag .elementor-post__meta-data,
.fh-mag.fh-mag.fh-mag .elementor-post-author {
	color: var(--fh-muted);
}

/* =========================================================================
   ARTIKEL-CTA  (.fh-cta, per mu-plugin an den Beitragstext gehaengt)
   Bisher endete jeder Artikel im Nichts. Der Block faengt den Leser genau da
   ab, wo er das Thema verstanden hat, und schickt ihn in den Shop.
   ========================================================================= */
.fh-mag .fh-cta {
	background: var(--fh-navy);
	color: #fff;
	margin: 44px 0 8px;
	padding: 30px 32px;
	position: relative;
	display: flex;
	align-items: center;
	gap: 28px;
}

/* Deutschland-Streifen als Sockel – gleiche Signatur wie unter der Nav. */
.fh-mag .fh-cta::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 4px;
	background: var(--fh-stripe);
}

.fh-mag .fh-cta__body {
	flex: 1 1 auto;
	min-width: 0;
}

/* Kicker: Sandgold ist hier zulaessig – auf Navy sind es 8.6:1. */
.fh-mag .fh-cta__kicker {
	display: flex;
	align-items: center;
	gap: 9px;
	color: var(--fh-gold);
	font-size: 11.5px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .09em;
	margin-bottom: 9px;
}

.fh-mag .fh-cta__kicker::before {
	content: "";
	width: 22px;
	height: 2px;
	background: var(--fh-gold);
	flex: 0 0 auto;
}

.fh-mag.fh-mag.fh-mag .fh-cta__title {
	color: #fff;
	font-size: 24px;
	font-weight: 800;
	line-height: 1.25;
	margin: 0 0 6px;
}

.fh-mag .fh-cta__text {
	color: rgba(255, 255, 255, .84);
	font-size: 15px;
	line-height: 1.55;
	margin: 0;
}

.fh-mag .fh-cta__actions {
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.fh-mag.fh-mag.fh-mag .fh-cta__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	background: var(--fh-red);
	color: #fff;
	font-size: 13.5px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .04em;
	line-height: 1;
	padding: 15px 24px;
	white-space: nowrap;
}

.fh-mag.fh-mag.fh-mag .fh-cta__btn:hover {
	background: var(--fh-red-dark);
	color: #fff;
}

/* Zweitweg (Beratung) – nur Umriss, damit der rote Knopf allein fuehrt.
   Himmelblau auf Navy = 5.8:1, hier also erlaubt. */
.fh-mag.fh-mag.fh-mag .fh-cta__btn--ghost {
	background: transparent;
	border: 1px solid rgba(75, 163, 211, .55);
	color: var(--fh-sky);
}

.fh-mag.fh-mag.fh-mag .fh-cta__btn--ghost:hover {
	background: rgba(75, 163, 211, .12);
	border-color: var(--fh-sky);
	color: #fff;
}

/* =========================================================================
   RESPONSIVE
   ========================================================================= */

/* ---------- Header: unter 900px klappt das Menue auf ------------------- */
/* Breakpoint an der Zeile ausgerichtet, nicht an Geraeten: ab hier wird es fuer
   Logo + 3 Menuepunkte + Suche + CTA nebeneinander zu eng. */
@media (max-width: 899px) {
	.fh-mag .fh-hdr__burger {
		display: block;
		order: 3;
	}

	.fh-mag .fh-hdr__logo {
		order: 1;
	}

	.fh-mag .fh-hdr__cta {
		order: 2;
		margin-left: auto;
	}

	/* Das Panel faellt als eigene Flaeche unter die Zeile. */
	.fh-mag .fh-hdr__panel {
		order: 4;
		display: none;
		width: 100%;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		padding: 6px 0 14px;
		border-top: 1px solid rgba(255, 255, 255, .09);
	}

	.fh-mag .fh-hdr__panel.is-open {
		display: flex;
	}

	.fh-mag .fh-hdr__main .fh-hdr__wrap {
		flex-wrap: wrap;
		gap: 12px;
	}

	.fh-mag .fh-hdr__menu {
		flex-direction: column;
		align-items: stretch;
	}

	.fh-mag.fh-mag.fh-mag .fh-hdr__menu a {
		line-height: 1.4;
		padding: 11px 4px;
	}

	/* Untermenue klappt mit auf, statt zu schweben. */
	.fh-mag .fh-hdr__menu .sub-menu {
		position: static;
		opacity: 1;
		visibility: visible;
		transform: none;
		box-shadow: none;
		background: transparent;
		min-width: 0;
		padding: 0 0 4px 14px;
	}

	.fh-mag .fh-hdr__menu > li > a::after {
		display: none;
	}

	.fh-mag .fh-hdr__search {
		max-width: none;
		margin: 10px 0 0;
	}
}

/* ---------- Startseiten-Bloecke ---------------------------------------- */
@media (max-width: 1023px) {
	/* Vier Trust-Punkte nebeneinander werden zu schmal -> 2x2. Die Trennlinien
	   muessen dabei umziehen, sonst haengt links eine Linie in der Luft. */
	.fh-mag .fh-trust {
		grid-template-columns: 1fr 1fr;
	}

	.fh-mag .fh-trust__item + .fh-trust__item {
		border-left: 0;
	}

	.fh-mag .fh-trust__item:nth-child(2n) {
		border-left: 1px solid var(--fh-line);
	}

	.fh-mag .fh-trust__item:nth-child(n + 3) {
		border-top: 1px solid var(--fh-line);
	}

	.fh-mag .fh-bridge__grid {
		grid-template-columns: 1fr 1fr;
	}
}

@media (max-width: 767px) {
	/* Kontaktzeile weicht mobil komplett. */
	.fh-mag .fh-hdr__top {
		display: none;
	}

	.fh-mag .fh-intro {
		padding-bottom: 16px;
	}

	.fh-mag .fh-trust {
		margin: 20px 0 26px;
	}

	.fh-mag .fh-trust__item {
		padding: 13px 14px;
		gap: 10px;
	}

	.fh-mag .fh-bridge {
		margin-top: 34px;
		padding-top: 26px;
	}

	.fh-mag .fh-bridge__grid {
		grid-template-columns: 1fr;
	}

	/* Knopf unter den Text statt daneben – nebeneinander bliebe kaum Platz. */
	.fh-mag.fh-mag.fh-mag .fh-bridge__cta {
		flex-direction: column;
		align-items: stretch;
		gap: 16px;
		padding: 20px;
	}

	.fh-mag .fh-bridge__ctabtn {
		justify-content: center;
	}

	.fh-mag .fh-hdr__logoimg {
		height: 28px;
	}

	.fh-mag.fh-mag.fh-mag .fh-hdr__cta {
		padding: 11px 13px;
		font-size: 11.5px;
	}

	/* Mobil klebt der Header nicht: bei kleinem Viewport + Adressleiste bliebe
	   zu wenig Artikel stehen. Der CTA sitzt hier ohnehin in der Zeile. */
	.fh-mag .fh-hdr__main {
		position: static;
	}

	.fh-mag .fh-cta {
		flex-direction: column;
		align-items: stretch;
		gap: 20px;
		padding: 24px 20px 26px;
	}

	.fh-mag.fh-mag.fh-mag .fh-cta__title {
		font-size: 21px;
	}

	.fh-mag .fh-cta__btn {
		width: 100%;
	}

	.fh-mag .elementor-posts--skin-cards .elementor-post__text {
		padding: 16px;
	}

	.fh-mag .fh-ftr {
		margin-top: 34px;
	}

	/* Vier Spalten sind mobil nicht zu halten: Marke oben, Listen darunter
	   zweispaltig – ganz gestapelt waere der Footer endlos lang. */
	.fh-mag .fh-ftr__main .fh-ftr__wrap {
		grid-template-columns: 1fr 1fr;
		gap: 30px 24px;
		padding-top: 36px;
		padding-bottom: 32px;
	}

	.fh-mag .fh-ftr__brand {
		grid-column: 1 / -1;
	}

	.fh-mag .fh-ftr__bottom .fh-ftr__wrap {
		flex-direction: column;
		align-items: flex-start;
		gap: 6px;
	}
}

@media (min-width: 768px) and (max-width: 1023px) {
	.fh-mag .fh-ftr__main .fh-ftr__wrap {
		grid-template-columns: 1fr 1fr;
		gap: 36px;
	}

	.fh-mag .fh-ftr__brand {
		grid-column: 1 / -1;
	}
}

@media print {
	.fh-mag .fh-hdr__top,
	.fh-mag .fh-hdr__main,
	.fh-mag .fh-ftr,
	.fh-mag .elementor-widget-table-of-contents,
	.fh-mag .elementor-element-d7d7b75, /* Hero: Aufmacher + Shop-Panel */
	.fh-mag .fh-trust,
	.fh-mag .fh-bridge {
		display: none !important;
	}
}