/*
 * fair4Host Theme (Redesign 2026): Schrift, Startseite und Footer.
 * Wird in sites/header_top.php nach Bootstrap/Shards geladen. Bei Aenderungen ?v= dort erhoehen.
 */

/* Poppins lokal (SIL OFL 1.1, siehe fonts/Poppins-LICENSE.txt). Shards nutzt "Poppins" bereits fuer
   Ueberschriften, Buttons und Navbar - die @font-face-Regeln genuegen, um sie seitenweit zu aktivieren. */
@font-face {
	font-family: 'Poppins';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/poppins-latin-400-normal.woff2') format('woff2');
}
@font-face {
	font-family: 'Poppins';
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url('../fonts/poppins-latin-500-normal.woff2') format('woff2');
}
@font-face {
	font-family: 'Poppins';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('../fonts/poppins-latin-600-normal.woff2') format('woff2');
}

:root {
	--f4h-dark: #1b1f23;
	--f4h-darker: #212529; /* = Navbar und Hintergrund von images/Logo.png */
	--f4h-orange: #ff8c00;
	--f4h-orange-light: #ffb366;
	--f4h-orange-text: #b35000;
	--f4h-orange-soft: #fff4e6;
	--f4h-gray-bg: #f5f6f7;
	--f4h-border: #e3e5e8;
	--f4h-text: #1b1f23;
	--f4h-muted: #5b6168;
	--f4h-font: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

/* ---------- Bausteine ---------- */

.f4h-eyebrow {
	display: inline-block;
	font-family: var(--f4h-font);
	font-size: 0.8rem;
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--f4h-orange-text);
	margin-bottom: 0.75rem;
}

.f4h-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.8rem 1.5rem;
	border: 2px solid transparent;
	border-radius: 999px;
	font-family: var(--f4h-font);
	font-size: 1rem;
	font-weight: 500;
	line-height: 1.2;
	text-decoration: none !important;
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.f4h-btn:hover { transform: translateY(-2px); }
.f4h-btn-primary { background: var(--f4h-orange); color: var(--f4h-dark) !important; }
.f4h-btn-primary:hover { background: #ffa033; }
.f4h-btn-dark { background: var(--f4h-dark); color: #fff !important; }
.f4h-btn-dark:hover { background: #33383d; }
.f4h-btn-outline { border-color: #6c737a; color: #fff !important; }
.f4h-btn-outline:hover { border-color: #fff; background: rgba(255, 255, 255, 0.06); }
/* z. B. Senden-Button, solange das Formular unvollstaendig ist (validator.js setzt .disabled) */
.f4h-btn:disabled,
.f4h-btn.disabled { opacity: 0.55; cursor: not-allowed; transform: none; }

/* Linien-Icons (Inline-SVG aus f4h_icon() in index.php): anthrazite Kontur, ein Detail in Orange */
.f4h-ico {
	display: block;
	flex-shrink: 0;
	width: 44px;
	height: 44px;
	margin-bottom: 1.4rem;
	fill: none;
	stroke: var(--f4h-text);
	stroke-width: 1.4;
	stroke-linecap: round;
	stroke-linejoin: round;
	transition: transform 0.25s ease;
}
.f4h-ico .f4h-ico-accent { stroke: var(--f4h-orange); }
.f4h-ico .f4h-ico-dot { fill: var(--f4h-orange); stroke: none; }

.f4h-link {
	font-family: var(--f4h-font);
	font-weight: 500;
	color: var(--f4h-orange-text) !important;
	text-decoration: none !important;
}
.f4h-link .fa { margin-left: 0.35rem; transition: transform 0.2s ease; }
.f4h-link:hover .fa,
a:hover .f4h-link .fa { transform: translateX(4px); }

.f4h-accent { color: var(--f4h-orange); }

/* ---------- Startseite ---------- */

.f4h-home { color: var(--f4h-text); }
.f4h-home picture { display: block; }

/* Hero */
.f4h-hero {
	background: var(--f4h-dark);
	color: #fff;
	padding: 4.5rem 0 4rem;
}
.f4h-hero .f4h-eyebrow { color: var(--f4h-orange-light); }
.f4h-hero h1 {
	font-family: var(--f4h-font);
	font-size: 2.9rem;
	font-weight: 600;
	line-height: 1.15;
	color: #fff;
	margin-bottom: 1.25rem;
}
.f4h-hero h1 em { font-style: normal; color: var(--f4h-orange); }
.f4h-hero-lead {
	font-size: 1.15rem;
	line-height: 1.6;
	color: #b9bec4;
	max-width: 34rem;
	margin-bottom: 2rem;
}
.f4h-hero-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.f4h-trust {
	list-style: none;
	padding: 0;
	margin: 2.25rem 0 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem 1.75rem;
	color: #c9ced3;
	font-size: 0.95rem;
}
.f4h-trust .fa { color: var(--f4h-orange); margin-right: 0.45rem; }
.f4h-hero-media img {
	width: 100%;
	height: 400px;
	object-fit: cover;
	border-radius: 18px;
	border: 1px solid rgba(255, 255, 255, 0.08);
}

/* Abschnitte */
.f4h-section { padding: 5rem 0; }
.f4h-section-alt { background: var(--f4h-gray-bg); }
.f4h-section-head {
	text-align: center;
	max-width: 44rem;
	margin: 0 auto 3rem;
}
.f4h-section-head h1,
.f4h-section-head h2 {
	font-family: var(--f4h-font);
	font-size: 2.2rem;
	font-weight: 600;
	line-height: 1.25;
	color: var(--f4h-text);
	margin-bottom: 0.75rem;
}
.f4h-section-head p { font-size: 1.05rem; color: var(--f4h-muted); margin: 0; }

/* Paketkarten */
.f4h-plan {
	display: flex;
	flex-direction: column;
	height: 100%;
	background: #fff;
	border: 1px solid var(--f4h-border);
	border-radius: 18px;
	padding: 2.25rem;
	transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.f4h-plan:hover {
	transform: translateY(-4px);
	border-color: #ffc680;
	box-shadow: 0 16px 36px rgba(27, 31, 35, 0.1);
}
.f4h-plan h3 {
	font-family: var(--f4h-font);
	font-size: 1.5rem;
	font-weight: 600;
	margin-bottom: 0.4rem;
}
.f4h-plan-intro { color: var(--f4h-muted); margin-bottom: 1.5rem; }
.f4h-price {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.5rem;
	padding-bottom: 1.5rem;
	margin-bottom: 1.5rem;
	border-bottom: 1px solid var(--f4h-border);
}
.f4h-price .f4h-price-from,
.f4h-price .f4h-price-vat { color: var(--f4h-muted); font-size: 0.95rem; }
.f4h-price strong {
	font-family: var(--f4h-font);
	font-size: 2.5rem;
	font-weight: 600;
	line-height: 1;
	color: var(--f4h-text);
}
.f4h-checks { list-style: none; padding: 0; margin: 0 0 2rem; }
.f4h-checks li {
	position: relative;
	padding-left: 1.85rem;
	margin-bottom: 0.7rem;
	color: #33383d;
}
.f4h-checks li::before {
	content: "\f00c";
	font-family: FontAwesome;
	position: absolute;
	left: 0;
	top: 0.05rem;
	color: var(--f4h-orange-text);
}
.f4h-plan .f4h-btn { margin-top: auto; align-self: flex-start; }

/* Info-Band */
.f4h-band {
	display: flex;
	align-items: center;
	gap: 1.5rem;
	margin-top: 1rem;
	padding: 1.5rem 1.75rem;
	background: #fff;
	border: 1px solid var(--f4h-border);
	border-radius: 18px;
}
.f4h-band .f4h-ico { margin-bottom: 0; }
.f4h-band p { margin: 0; color: #33383d; }
.f4h-band .f4h-link { white-space: nowrap; }

/* Service-Kacheln */
.f4h-tile {
	display: flex;
	flex-direction: column;
	height: 100%;
	background: #fff;
	border: 1px solid var(--f4h-border);
	border-radius: 16px;
	padding: 1.85rem;
	transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.f4h-tile:hover {
	transform: translateY(-4px);
	border-color: #ffc680;
	box-shadow: 0 14px 30px rgba(27, 31, 35, 0.08);
}
.f4h-tile h3 {
	font-family: var(--f4h-font);
	font-size: 1.25rem;
	font-weight: 600;
	margin-bottom: 0.6rem;
}
.f4h-tile p { color: var(--f4h-muted); font-size: 0.97rem; margin-bottom: 1.25rem; }
.f4h-tile .f4h-link { margin-top: auto; }

/* Hilfe-Bereich */
.f4h-help { background: var(--f4h-dark); padding: 5rem 0; }
.f4h-help .f4h-eyebrow { color: var(--f4h-orange-light); }
.f4h-help .f4h-section-head h2 { color: #fff; }
.f4h-help .f4h-section-head p { color: #b9bec4; }
.f4h-photo-tile {
	position: relative;
	display: block;
	height: 320px;
	border-radius: 18px;
	overflow: hidden;
	color: #fff !important;
	text-decoration: none !important;
}
.f4h-photo-tile img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s ease;
}
.f4h-photo-tile picture { height: 100%; }
.f4h-photo-tile:hover img { transform: scale(1.05); }
.f4h-photo-body {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding: 1.75rem;
	background: linear-gradient(to top, rgba(10, 12, 14, 0.92) 0%, rgba(10, 12, 14, 0.55) 55%, rgba(10, 12, 14, 0.2) 100%);
}
.f4h-photo-body h3 {
	font-family: var(--f4h-font);
	font-size: 1.4rem;
	font-weight: 600;
	color: #fff;
	margin-bottom: 0.5rem;
}
.f4h-photo-body p { color: #e2e5e8; font-size: 0.95rem; margin-bottom: 1rem; }
.f4h-photo-body .f4h-link { color: var(--f4h-orange-light) !important; }

/* ---------- Auto-News (Startseite + news.php) ---------- */

.f4h-news {
	display: flex;
	flex-direction: column;
	height: 100%;
	background: #fff;
	border: 1px solid var(--f4h-border);
	border-radius: 16px;
	padding: 1.75rem;
}
.f4h-news time {
	font-family: var(--f4h-font);
	font-size: 0.8rem;
	font-weight: 500;
	color: var(--f4h-orange-text);
	margin-bottom: 0.5rem;
}
.f4h-news h2,
.f4h-news h3 {
	font-family: var(--f4h-font);
	font-size: 1.2rem;
	font-weight: 600;
	color: var(--f4h-text);
	margin-bottom: 0.6rem;
}
.f4h-news p { color: var(--f4h-muted); font-size: 0.97rem; margin-bottom: 1.25rem; }
.f4h-news .f4h-link { margin-top: auto; }
.f4h-news-list {
	display: grid;
	gap: 1.25rem;
	max-width: 760px;
	margin: 0 auto;
}
.f4h-news-empty { text-align: center; color: var(--f4h-muted); }
.f4h-section-more { text-align: center; margin-top: 0.5rem; }

/* ---------- Unterseiten-Baukasten ---------- */
/* Seitenkopf: f4h_page_hero() in sites/f4h_components.php */

.f4h-page-hero {
	background: var(--f4h-dark);
	color: #fff;
	padding: 3.75rem 0 3.25rem;
}
.f4h-page-hero .f4h-eyebrow { color: var(--f4h-orange-light); }
.f4h-page-hero h1 {
	font-family: var(--f4h-font);
	font-size: 2.6rem;
	font-weight: 600;
	line-height: 1.15;
	color: #fff;
	max-width: 48rem;
	margin-bottom: 1rem;
}
.f4h-page-hero h1 em { font-style: normal; color: var(--f4h-orange); }
.f4h-page-hero .f4h-hero-lead { margin-bottom: 0; max-width: 44rem; }
.f4h-page-hero .f4h-hero-actions,
.f4h-page-hero .f4h-trust { margin-top: 1.75rem; }

/* Schmale Inhaltsspalte (Akkordeons, Text) */
.f4h-narrow { max-width: 52rem; margin-left: auto; margin-right: auto; }

/* Abschnittskopf linksbuendig (z. B. neben einem Akkordeon) */
.f4h-section-head.f4h-left { text-align: left; margin-left: 0; }

/* Kleines Label */
.f4h-badge {
	display: inline-block;
	font-family: var(--f4h-font);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.03em;
	padding: 0.3rem 0.8rem;
	border-radius: 999px;
	background: var(--f4h-orange-soft);
	color: var(--f4h-orange-text);
}
.f4h-badge-dark { background: var(--f4h-dark); color: #fff; }

/* Paketkarten: Ergaenzungen zu .f4h-plan */
.f4h-plan .f4h-badge { align-self: flex-start; margin-bottom: 1rem; }
.f4h-plan-compact { padding: 1.75rem; }
.f4h-plan-compact h3 { font-size: 1.3rem; }
.f4h-plan-compact .f4h-price strong { font-size: 2.1rem; }
.f4h-checks li small { display: block; color: var(--f4h-muted); font-size: 0.85rem; }

/* Breite Angebotskarte (dunkel), z. B. Top-Paket rServer.RU5 */
.f4h-offer {
	display: grid;
	grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
	gap: 2.5rem;
	align-items: center;
	background: var(--f4h-dark);
	color: #fff;
	border-radius: 20px;
	padding: 2.5rem;
}
.f4h-offer h3 { font-family: var(--f4h-font); font-size: 1.6rem; font-weight: 600; color: #fff; margin-bottom: 0.5rem; }
.f4h-offer p { color: #b9bec4; }
.f4h-offer .f4h-badge { background: var(--f4h-orange); color: var(--f4h-dark); margin-bottom: 1rem; }
.f4h-offer .f4h-price { border-color: rgba(255, 255, 255, 0.12); }
.f4h-offer .f4h-price strong { color: #fff; }
.f4h-offer .f4h-price .f4h-price-from,
.f4h-offer .f4h-price .f4h-price-vat { color: #b9bec4; }
.f4h-offer .f4h-checks li { color: #d5d9dd; }
.f4h-offer .f4h-checks li::before { color: var(--f4h-orange); }
.f4h-offer .f4h-checks li small { color: #9aa1a8; }
.f4h-offer .f4h-checks { margin-bottom: 1.5rem; }

/* Kleingedrucktes / Legende unter Karten */
.f4h-fineprint {
	max-width: 52rem;
	margin: 1.5rem auto 0;
	text-align: center;
	font-size: 0.88rem;
	color: var(--f4h-muted);
}

/* Akkordeon mit <details>/<summary> (ohne JavaScript) */
.f4h-acc { border-top: 1px solid var(--f4h-border); }
.f4h-acc details { border-bottom: 1px solid var(--f4h-border); }
.f4h-acc summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 1.15rem 0.25rem;
	list-style: none;
	cursor: pointer;
	font-family: var(--f4h-font);
	font-size: 1.08rem;
	font-weight: 600;
	color: var(--f4h-text);
	transition: color 0.15s ease;
}
.f4h-acc summary::-webkit-details-marker { display: none; }
.f4h-acc summary::after {
	content: "\f107";
	font-family: FontAwesome;
	font-size: 1.25rem;
	color: var(--f4h-orange-text);
	transition: transform 0.2s ease;
}
.f4h-acc details[open] > summary::after { transform: rotate(180deg); }
.f4h-acc summary:hover { color: var(--f4h-orange-text); }
.f4h-acc summary:focus-visible { outline: 2px solid var(--f4h-orange); outline-offset: 2px; border-radius: 6px; }
.f4h-acc-body { padding: 0 0.25rem 1.5rem; color: #33383d; line-height: 1.7; }
.f4h-acc-body > :last-child { margin-bottom: 0; }
.f4h-acc-body a { color: var(--f4h-orange-text); text-decoration: underline; }
.f4h-acc-body h4 { font-family: var(--f4h-font); font-size: 1rem; font-weight: 600; margin: 1.25rem 0 0.5rem; }

/* Fliesstext (Rechtstexte, FAQ-Antworten, lange Beschreibungen) */
.f4h-prose { max-width: 48rem; margin: 0 auto; color: #33383d; font-size: 1rem; line-height: 1.75; }
.f4h-prose > :first-child { margin-top: 0; }
.f4h-prose h2 { font-family: var(--f4h-font); font-size: 1.5rem; font-weight: 600; color: var(--f4h-text); margin: 2.5rem 0 1rem; }
.f4h-prose h3 { font-family: var(--f4h-font); font-size: 1.2rem; font-weight: 600; color: var(--f4h-text); margin: 2rem 0 0.75rem; }
.f4h-prose h4,
.f4h-prose h5,
.f4h-prose h6 { font-family: var(--f4h-font); font-size: 1.05rem; font-weight: 600; color: var(--f4h-text); margin: 1.5rem 0 0.5rem; }
.f4h-prose a { color: var(--f4h-orange-text); text-decoration: underline; }
.f4h-prose ul,
.f4h-prose ol { padding-left: 1.25rem; }
.f4h-prose li { margin-bottom: 0.4rem; }

/* Stichpunkte in mehreren Spalten */
.f4h-feature-grid {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 0.65rem 1.75rem;
}
.f4h-feature-grid li { position: relative; padding-left: 1.7rem; color: #33383d; }
.f4h-feature-grid li::before {
	content: "\f00c";
	font-family: FontAwesome;
	position: absolute;
	left: 0;
	top: 0.05rem;
	color: var(--f4h-orange-text);
}

/* Dunkles Abschluss-Band mit Handlungsaufforderung */
.f4h-cta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	background: var(--f4h-dark);
	color: #fff;
	border-radius: 20px;
	padding: 2.5rem;
}
.f4h-cta h2 { font-family: var(--f4h-font); font-size: 1.6rem; font-weight: 600; color: #fff; margin: 0 0 0.35rem; }
.f4h-cta p { color: #b9bec4; margin: 0; }

/* Logos/Bilder im Text */
.f4h-logo-inline { display: block; height: 48px; width: auto; margin-top: 1rem; }
.f4h-shot { max-width: 100%; height: auto; border: 1px solid var(--f4h-border); border-radius: 12px; }

/* Tabellen */
.f4h-table-wrap { overflow-x: auto; background: #fff; border: 1px solid var(--f4h-border); border-radius: 14px; }
.f4h-table { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.f4h-table th {
	font-family: var(--f4h-font);
	font-weight: 600;
	text-align: left;
	background: var(--f4h-gray-bg);
	padding: 0.8rem 1rem;
	border-bottom: 1px solid var(--f4h-border);
}
.f4h-table td { padding: 0.65rem 1rem; border-bottom: 1px solid #eef0f2; }
.f4h-table tr:last-child td { border-bottom: 0; }
.f4h-table tbody tr:hover { background: #fafbfb; }

/* Video (2-Klick-Loesung aus body_bottom.php) und eingebettete Formulare */
.f4h-video { position: relative; overflow: hidden; border-radius: 16px; background: #000; aspect-ratio: 16 / 9; }
.f4h-video iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; min-height: 0 !important; border: 0; }
.f4h-embed { width: 100%; border: 1px solid var(--f4h-border); border-radius: 16px; background: #fff; }

/* Formulare (Kontaktformular u. a.) */
.form-control {
	height: auto;
	padding: 0.7rem 0.95rem;
	border: 1px solid #d5d8dc;
	border-radius: 10px;
	font-size: 0.97rem;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.form-control:focus { border-color: var(--f4h-orange); box-shadow: 0 0 0 3px rgba(255, 140, 0, 0.18); }

/* ---------- Sicherheitsnetz fuer altes Markup (FAQ-Bausteine u. a.) ---------- */

body:not(.f4h-home) .card { border: 1px solid var(--f4h-border); border-radius: 16px; overflow: hidden; box-shadow: none; }
.btn-warning {
	background: var(--f4h-orange);
	border-color: var(--f4h-orange);
	color: var(--f4h-dark);
	font-family: var(--f4h-font);
	font-weight: 500;
}
.btn-warning:hover,
.btn-warning:focus { background: #ffa033; border-color: #ffa033; color: var(--f4h-dark); }
.list-group-item { border-color: var(--f4h-border); }

@media (max-width: 991.98px) {
	.f4h-page-hero { padding: 2.75rem 0 2.5rem; }
	.f4h-page-hero h1 { font-size: 2rem; }
	.f4h-offer { grid-template-columns: 1fr; gap: 1.5rem; padding: 1.75rem; }
	.f4h-cta { padding: 1.75rem; }
}
@media (max-width: 575.98px) {
	.f4h-page-hero h1 { font-size: 1.7rem; }
}

/* ---------- Anleitungen (sites/anleitung_*.php, Hub faq.php) ---------- */

/* Kachel als Ganzes verlinkt */
a.f4h-tile-link { color: inherit; text-decoration: none !important; }
a.f4h-tile-link:hover h3 { color: var(--f4h-orange-text); }

/* "Auf dieser Seite"-Inhaltsverzeichnis */
.f4h-toc {
	background: #fff;
	border: 1px solid var(--f4h-border);
	border-radius: 16px;
	padding: 1.5rem 1.75rem;
}
.f4h-toc h2 { font-family: var(--f4h-font); font-size: 1rem; font-weight: 600; margin: 0 0 0.75rem; }
.f4h-toc ol { margin: 0; padding-left: 1.25rem; columns: 2 16rem; column-gap: 2rem; }
.f4h-toc li { margin-bottom: 0.4rem; break-inside: avoid; }
.f4h-toc a { color: var(--f4h-text); }
.f4h-toc a:hover { color: var(--f4h-orange-text); }

/* Anleitungsabschnitt */
.f4h-guide { max-width: 52rem; margin: 0 auto; }
.f4h-guide h2 { font-family: var(--f4h-font); font-size: 1.6rem; font-weight: 600; margin: 0 0 1rem; scroll-margin-top: 96px; }
.f4h-guide h3 { font-family: var(--f4h-font); font-size: 1.15rem; font-weight: 600; margin: 2rem 0 0.75rem; scroll-margin-top: 96px; }
.f4h-guide p,
.f4h-guide li { color: #33383d; line-height: 1.7; }
.f4h-guide a { color: var(--f4h-orange-text); text-decoration: underline; }

/* Nummerierte Schritte */
.f4h-steps { list-style: none; counter-reset: f4h-step; padding: 0; margin: 1rem 0 1.5rem; }
.f4h-steps > li {
	position: relative;
	counter-increment: f4h-step;
	padding: 0 0 1rem 3rem;
	min-height: 2.25rem;
}
.f4h-steps > li::before {
	content: counter(f4h-step);
	position: absolute;
	left: 0;
	top: -0.1rem;
	width: 2rem;
	height: 2rem;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--f4h-orange-soft);
	color: var(--f4h-orange-text);
	font-family: var(--f4h-font);
	font-weight: 600;
	font-size: 0.9rem;
}

/* Menuepfad, Taste, Codeblock */
.f4h-path {
	display: inline-block;
	padding: 0.05rem 0.5rem;
	font-family: var(--f4h-font);
	font-size: 0.88em;
	font-weight: 500;
	color: var(--f4h-text);
	background: var(--f4h-gray-bg);
	border: 1px solid var(--f4h-border);
	border-radius: 6px;
	white-space: nowrap;
}
.f4h-guide code,
.f4h-acc-body code {
	padding: 0.1rem 0.35rem;
	font-size: 0.88em;
	color: #7a3700;
	background: var(--f4h-orange-soft);
	border-radius: 5px;
}
.f4h-code {
	margin: 1rem 0 1.5rem;
	padding: 1rem 1.25rem;
	overflow-x: auto;
	font-size: 0.85rem;
	line-height: 1.6;
	color: #e6e8ea;
	background: var(--f4h-dark);
	border-radius: 12px;
}
.f4h-code code { padding: 0; color: inherit; background: transparent; }

/* Kompakte Daten-/Einstellungstabelle in Anleitungen */
.f4h-guide .f4h-table-wrap { margin: 1rem 0 1.5rem; }

/* ---------- Domainpreisliste: Suche und Tabelle ---------- */

.f4h-search { max-width: 44rem; margin: 0 auto 1.75rem; text-align: center; }
.f4h-search-field { position: relative; }
.f4h-search-field .fa {
	position: absolute;
	left: 1.1rem;
	top: 50%;
	transform: translateY(-50%);
	color: var(--f4h-muted);
	pointer-events: none;
}
.f4h-search-field .form-control {
	padding: 0.95rem 1.1rem 0.95rem 2.85rem;
	font-size: 1.05rem;
	border-radius: 999px;
	background: #fff;
}
.f4h-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; margin-top: 1rem; }
.f4h-chip {
	font-family: var(--f4h-font);
	font-size: 0.85rem;
	font-weight: 500;
	padding: 0.35rem 0.85rem;
	color: var(--f4h-text);
	background: #fff;
	border: 1px solid var(--f4h-border);
	border-radius: 999px;
	cursor: pointer;
	transition: border-color 0.15s ease, color 0.15s ease;
}
.f4h-chip:hover,
.f4h-chip:focus { border-color: var(--f4h-orange); color: var(--f4h-orange-text); outline: none; }
.f4h-search-count { margin: 0.9rem 0 0; font-size: 0.9rem; color: var(--f4h-muted); }
.f4h-search-empty { margin: 0; padding: 1.5rem; text-align: center; color: var(--f4h-muted); }

.f4h-price-table { font-variant-numeric: tabular-nums; }
.f4h-price-table thead th { position: sticky; top: 0; z-index: 1; white-space: nowrap; line-height: 1.3; }
.f4h-price-table thead th span { font-weight: 400; font-size: 0.8rem; color: var(--f4h-muted); }
.f4h-price-table tbody th { font-family: var(--f4h-font); font-weight: 600; padding: 0.65rem 1rem; border-bottom: 1px solid #eef0f2; }
.f4h-price-table td { white-space: nowrap; }
.f4h-price-table tr.is-exact { background: var(--f4h-orange-soft); }
.f4h-price-table tr.is-exact:hover { background: #ffecd6; }
.f4h-table-wrap:has(.f4h-price-table) { max-height: 70vh; overflow: auto; }

/* ---------- Live-Chat: Startknopf und Einwilligungsdialog (sites/smartsupp_chat.php) ---------- */

.f4h-chat-launcher { position: fixed; right: 20px; bottom: 20px; z-index: 1040; }
.f4h-chat-launcher .f4h-btn { box-shadow: 0 10px 28px rgba(27, 31, 35, 0.28); }
.f4h-btn-ghost { border-color: var(--f4h-border); color: var(--f4h-text) !important; background: #fff; }
.f4h-btn-ghost:hover { border-color: #b9bec4; background: var(--f4h-gray-bg); }

.f4h-dialog {
	width: min(92vw, 34rem);
	padding: 0;
	border: 0;
	border-radius: 20px;
	color: var(--f4h-text);
	box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35);
}
.f4h-dialog[open] { animation: f4h-dialog-in 0.18s ease-out; }
@keyframes f4h-dialog-in { from { opacity: 0; transform: translateY(8px) scale(0.98); } to { opacity: 1; transform: none; } }
.f4h-dialog::backdrop { background: rgba(15, 18, 21, 0.55); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.f4h-dialog form { margin: 0; padding: 2rem; }
.f4h-dialog .f4h-ico { margin-bottom: 1rem; }
.f4h-dialog h2 { font-family: var(--f4h-font); font-size: 1.4rem; font-weight: 600; margin: 0 0 0.75rem; }
.f4h-dialog p { font-size: 0.97rem; color: #33383d; }
.f4h-dialog-meta { margin-bottom: 0; }
.f4h-dialog-meta a { color: var(--f4h-orange-text); text-decoration: underline; }
.f4h-dialog-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.75rem; margin-top: 1.5rem; }
@media (max-width: 575.98px) {
	.f4h-dialog form { padding: 1.5rem; }
	.f4h-dialog-actions .f4h-btn { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { .f4h-dialog[open] { animation: none; } }

/* ---------- Navigation (alle Seiten, Markup in sites/navigation.php) ---------- */

/* Anker-Sprungziele nicht unter der fixierten Navigation verstecken */
html { scroll-padding-top: 88px; }

/* Hinweisleiste ueber der Navigation */
.f4h-announce { background: var(--f4h-orange); font-size: 0.85rem; }
.f4h-announce a {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.25rem 0.75rem;
	padding: 0.45rem 1rem;
	color: var(--f4h-dark) !important;
	text-align: center;
	text-decoration: none !important;
}
.f4h-announce b { font-weight: 600; }
.f4h-announce-cta { font-family: var(--f4h-font); font-weight: 600; white-space: nowrap; }
.f4h-announce-cta .fa { margin: 0 0.35rem; }
.f4h-announce a:hover .f4h-announce-cta { text-decoration: underline; text-underline-offset: 3px; }

/* Fixierte Kopfzeile */
.f4h-header {
	position: sticky;
	top: 0;
	z-index: 1030;
	background: rgba(27, 31, 35, 0.94);
	-webkit-backdrop-filter: saturate(140%) blur(10px);
	backdrop-filter: saturate(140%) blur(10px);
	border-bottom: 1px solid transparent;
	transition: box-shadow 0.2s ease, border-color 0.2s ease;
}
.f4h-header.is-scrolled {
	border-bottom-color: rgba(255, 255, 255, 0.06);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
}
.f4h-navbar { padding: 0.75rem 0; background: transparent; }
.f4h-navbar .navbar-brand { display: inline-flex; align-items: center; padding: 0; margin-right: 1.5rem; }
.f4h-navbar .navbar-brand img { height: 36px; width: auto; }
.f4h-navbar .nav-link {
	position: relative;
	font-family: var(--f4h-font);
	font-size: 0.95rem;
	font-weight: 500;
	color: rgba(255, 255, 255, 0.78) !important;
	padding: 0.5rem 0.9rem !important;
	border-radius: 8px;
	transition: color 0.15s ease, background-color 0.15s ease;
}
.f4h-navbar .nav-link:hover,
.f4h-navbar .nav-link:focus,
.f4h-navbar .show > .nav-link { color: #fff !important; background-color: rgba(255, 255, 255, 0.06); }
.f4h-navbar .nav-item.active > .nav-link { color: #fff !important; }
.f4h-navbar .nav-item.active > .nav-link::before {
	content: '';
	position: absolute;
	left: 0.9rem;
	right: 0.9rem;
	bottom: 0.15rem;
	height: 2px;
	border-radius: 2px;
	background: var(--f4h-orange);
}
.f4h-navbar .dropdown-toggle::after { margin-left: 0.4rem; vertical-align: 0.15em; opacity: 0.7; }
.f4h-navbar .navbar-toggler { border: 0; padding: 0.4rem 0.5rem; border-radius: 8px; }
.f4h-navbar .navbar-toggler:focus { outline: 2px solid var(--f4h-orange); outline-offset: 2px; }
.f4h-nav-cta { padding: 0.55rem 1.15rem; font-size: 0.92rem; }
.f4h-nav-cta .fa { font-size: 0.95em; }

/* Dropdowns: gruppiert, abgerundetes Panel; fair4-Namen als Tag rechts */
.f4h-navbar .dropdown-menu {
	min-width: 280px;
	padding: 0.5rem;
	margin-top: 0.6rem;
	background-color: #fff;
	border: 1px solid var(--f4h-border);
	border-radius: 14px;
	box-shadow: 0 18px 45px rgba(15, 18, 21, 0.22), 0 2px 6px rgba(15, 18, 21, 0.08);
}
.f4h-navbar .dropdown-menu.show { animation: f4h-dropdown-in 0.16s ease-out; }
@keyframes f4h-dropdown-in { from { opacity: 0; } to { opacity: 1; } }
.f4h-navbar .dropdown-header {
	font-family: var(--f4h-font);
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #8a9096;
	padding: 0.6rem 0.75rem 0.35rem;
}
.f4h-navbar .dropdown-divider { margin: 0.4rem 0.25rem; border-top-color: #eceef0; }
.f4h-navbar .dropdown-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	font-family: var(--f4h-font);
	font-size: 0.9rem;
	font-weight: 500;
	color: var(--f4h-text);
	padding: 0.55rem 0.75rem;
	border-radius: 9px;
	transition: background-color 0.15s ease, color 0.15s ease;
}
.f4h-navbar .dropdown-item:hover,
.f4h-navbar .dropdown-item:focus { background-color: #f3f4f6; color: var(--f4h-orange-text); }
.f4h-navbar .dropdown-item:active { background-color: #ffe8cc; color: var(--f4h-text); }
.f4h-dd-tag { font-size: 0.75rem; font-weight: 500; color: #8a9096; white-space: nowrap; }
.f4h-dd-tag b { color: var(--f4h-orange); font-weight: 600; }

/* Seitenhinweise (z. B. vserver.php, support.php) */
.alert.f4h-notice {
	max-width: 1140px;
	margin: 1.25rem max(1rem, calc((100% - 1140px) / 2)) 0;
	padding: 0.75rem 3rem 0.75rem 1.25rem;
	background: #fff8f0;
	border: 1px solid #ffd8b0;
	border-radius: 12px;
	color: #3d3d3d;
}
.container .alert.f4h-notice { margin-left: 0; margin-right: 0; max-width: none; }
.alert.f4h-notice a { color: var(--f4h-orange-text); font-weight: 600; text-decoration: underline; }
.alert.f4h-notice a:hover { color: #7a3700; }
.alert.f4h-notice .close { color: #3d3d3d; padding: 0.65rem 1rem; }

@media (max-width: 991.98px) {
	.f4h-navbar .navbar-collapse {
		margin-top: 0.75rem;
		padding-top: 0.75rem;
		border-top: 1px solid rgba(255, 255, 255, 0.08);
		max-height: calc(100vh - 80px);
		overflow-y: auto;
	}
	.f4h-navbar .nav-link { padding: 0.7rem 0.5rem !important; }
	.f4h-navbar .nav-item.active > .nav-link::before { left: 0; right: auto; top: 0.7rem; bottom: 0.7rem; width: 3px; height: auto; }
	.f4h-nav-cta { width: 100%; justify-content: center; margin: 0.75rem 0 0.5rem; }
	/* Im aufgeklappten Mobilmenue fuegen sich die Dropdowns in die dunkle Navigation ein */
	.f4h-navbar .dropdown-menu { min-width: 0; margin: 0 0 0.5rem; padding: 0 0 0 0.75rem; background: transparent; border: 0; box-shadow: none; }
	.f4h-navbar .dropdown-menu.show { animation: none; }
	.f4h-navbar .dropdown-divider { border-top-color: rgba(255, 255, 255, 0.1); }
	.f4h-navbar .dropdown-item { color: rgba(255, 255, 255, 0.8); }
	.f4h-navbar .dropdown-item:hover,
	.f4h-navbar .dropdown-item:focus { background-color: rgba(255, 255, 255, 0.06); color: #ff9800; }
}

/* Social-Links im Footer */
.f4h-social { display: flex; gap: 0.6rem; margin-bottom: 2.25rem; }
.f4h-social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: 50%;
	color: #c9ced3;
	font-size: 1rem;
	transition: border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease;
}
.f4h-social a:hover { border-color: var(--f4h-orange); color: #fff; background: rgba(255, 140, 0, 0.12); text-decoration: none; }
.f4h-social svg { width: 15px; height: 15px; fill: currentColor; }

/* ---------- Footer (alle Seiten) ---------- */

.f4h-footer {
	background: var(--f4h-darker);
	color: #aab0b6;
	padding: 3.75rem 0 0;
	font-size: 0.95rem;
}
.f4h-footer h2 {
	font-family: var(--f4h-font);
	font-size: 1rem;
	font-weight: 600;
	color: #fff;
	margin-bottom: 1rem;
}
.f4h-footer ul { list-style: none; padding: 0; margin: 0 0 2.25rem; }
.f4h-footer li { margin-bottom: 0.55rem; }
.f4h-footer a { color: #c9ced3; transition: color 0.2s ease; }
.f4h-footer a:hover { color: var(--f4h-orange); text-decoration: none; }
.f4h-footer-brand img { height: 36px; width: auto; margin-bottom: 1rem; }
.f4h-footer-brand p { max-width: 21rem; margin-bottom: 1.25rem; }
.f4h-footer-bottom {
	border-top: 1px solid rgba(255, 255, 255, 0.08);
	padding: 1.4rem 0 1.6rem;
	font-size: 0.85rem;
	color: #8a9096;
	text-align: center;
}
.f4h-footer-bottom p { margin: 0 0 0.35rem; }

/* ---------- Responsiv ---------- */

@media (max-width: 991.98px) {
	.f4h-hero { padding: 3rem 0; }
	.f4h-hero h1 { font-size: 2.1rem; }
	.f4h-hero-media { margin-top: 2.5rem; }
	.f4h-hero-media img { height: 220px; }
	.f4h-section, .f4h-help { padding: 3.5rem 0; }
	.f4h-section-head h1, .f4h-section-head h2 { font-size: 1.75rem; }
	.f4h-plan { padding: 1.75rem; }
	.f4h-band { flex-direction: column; align-items: flex-start; }
	.f4h-photo-tile { height: 260px; }
}
@media (max-width: 575.98px) {
	.f4h-hero h1 { font-size: 1.8rem; }
	.f4h-hero-actions .f4h-btn { width: 100%; justify-content: center; }
	.f4h-price strong { font-size: 2.1rem; }
}

@media (prefers-reduced-motion: reduce) {
	.f4h-btn, .f4h-plan, .f4h-tile, .f4h-photo-tile img, .f4h-link .fa { transition: none; }
	.f4h-btn:hover, .f4h-plan:hover, .f4h-tile:hover, .f4h-photo-tile:hover img { transform: none; }
}

/* Native dialog must stay hidden despite Bootstrap display:block. */
dialog:not([open]){display:none}
.f4h-privacy-reset{margin:8px 0;padding:8px 12px;cursor:pointer}

/* Distinct, accessible withdrawal link within the existing legal footer. */
.f4h-footer .f4h-withdraw-link{display:inline-flex;align-items:center;min-height:44px;font-size:1rem;font-weight:600;color:#ff9d2e;text-decoration:underline;text-underline-offset:4px}
.f4h-footer .f4h-withdraw-link:focus-visible{outline:2px solid #ff9d2e;outline-offset:4px}