/**
 * Footer — kompakt
 *
 * Datei:   index.inc.css
 * Version: 2.4 (15.10.2026)
 * Zweck:   Gestaltung zu index.inc.php. Alle Regeln gelten nur innerhalb von .fit-footer.
 *          Grundfarbe #2875c7, geschwungene Oberkante in #f7c121.
 */

/* ---------- Variablen ---------- */
.fit-footer {
	--ft-blue:      #2875C7;	/* Grundfarbe */
	--ft-blue-deep: #1D5FA6;	/* Verlauf, untere Leiste */
	--ft-text:      #FFFFFF;
	--ft-soft:      rgba(255, 255, 255, .97);	/* Sekundärtext (Kontrast ≥ 4,5:1 auf #2875c7) */
	--ft-line:      rgba(255, 255, 255, .22);
	--ft-glass:     rgba(255, 255, 255, .12);
	--ft-glass-hi:  rgba(255, 255, 255, .22);
	--ft-wrap:      1120px;
	--ft-gutter:    clamp(16px, 4vw, 32px);

	--ft-yellow:    #F7C121;	/* geschwungene Oberkante */
	--ft-wave-h:    clamp(44px, 5.5vw, 80px);	/* Höhe der Welle, Banddicke wächst mit */

	position: relative;
	margin: 0;
	color: var(--ft-text);
	background: transparent;	/* oberhalb der Welle scheint die Seite durch */
	font-family: inherit;
	font-size: 1rem;
	line-height: 1.55;
	text-align: left;
}

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

.fit-footer p,
.fit-footer ul,
.fit-footer li,
.fit-footer address { margin: 0; padding: 0; }
.fit-footer ul { list-style: none; }
.fit-footer address { font-style: normal; }
.fit-footer a { color: var(--ft-text); text-underline-offset: .2em; }
.fit-footer :focus-visible { outline: 3px solid #FFFFFF; outline-offset: 3px; border-radius: 6px; }
.fit-footer .fit-footer__sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---------- Geschwungene Oberkante ---------- */
.fit-footer .fit-footer__wave {
	display: block;
	width: 100%;
	height: var(--ft-wave-h);
	margin-bottom: -1px;	/* verhindert eine Haarlinie zur Fläche darunter */
}
.fit-footer__wave-band { fill: var(--ft-yellow); }
.fit-footer__wave-fill { fill: var(--ft-blue); }

.fit-footer__body {
	position: relative;
	overflow: hidden;
	/* Oben exakt #2875c7, damit die Welle nahtlos anschließt; nach unten leicht dunkler. */
	background: linear-gradient(180deg, var(--ft-blue) 0%, var(--ft-blue) 35%, var(--ft-blue-deep) 100%);
}

.fit-footer__wrap {
	width: 100%;
	max-width: calc(var(--ft-wrap) + 2 * var(--ft-gutter));
	margin-inline: auto;
	padding-inline: var(--ft-gutter);
}

/* ---------- Hauptzeile: Firma links, Kontakt rechts ---------- */
.fit-footer__main {
	display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
	gap: 1.5rem 2.5rem;
	padding-block: clamp(2.25rem, 5vw, 3.25rem);
}

.fit-footer__brand { display: flex; align-items: center; gap: 1rem; min-width: 0; }
.fit-footer .fit-footer__logo {
	display: grid; place-items: center; flex: none;
	width: 56px; height: 56px; border-radius: 16px;
	background: var(--ft-glass); border: 1px solid var(--ft-line);
	transition: background .2s, transform .2s cubic-bezier(.2, .75, .22, 1);
}
.fit-footer .fit-footer__logo:hover { background: var(--ft-glass-hi); transform: translateY(-2px); }
.fit-footer__logo img { display: block; width: 32px; height: 32px; }

.fit-footer .fit-footer__name { font-size: 1.08rem; font-weight: 700; letter-spacing: -.01em; line-height: 1.3; }
.fit-footer .fit-footer__slogan {
	margin-top: .15rem;
	font-size: .98rem; font-weight: 500; line-height: 1.4;
	color: var(--ft-soft); text-wrap: balance;
}
.fit-footer .fit-footer__address { margin-top: .35rem; font-size: .94rem; color: var(--ft-soft); }

.fit-footer__contact { display: flex; flex-wrap: wrap; gap: .6rem; }
.fit-footer .fit-footer__pill {
	display: inline-flex; align-items: center; gap: .55rem;
	min-height: 44px; padding: .55rem 1.1rem;
	border: 1px solid var(--ft-line); border-radius: 999px;
	background: var(--ft-glass);
	font-size: .95rem; font-weight: 600; text-decoration: none;
	transition: background .2s, border-color .2s, transform .2s cubic-bezier(.2, .75, .22, 1);
}
.fit-footer .fit-footer__pill:hover { background: #FFFFFF; border-color: #FFFFFF; color: var(--ft-blue-deep); transform: translateY(-1px); }
.fit-footer__pill svg { flex: none; }

/* Hauptschaltfläche zum Kontaktformular – Gelb wie die Wellenkante */
.fit-footer .fit-footer__pill--primary {
	background: var(--ft-yellow); border-color: var(--ft-yellow);
	color: #16202B; font-weight: 700;
	box-shadow: 0 8px 20px -10px rgba(10, 30, 60, .55);
}
.fit-footer .fit-footer__pill--primary:hover { background: #FFFFFF; border-color: #FFFFFF; color: #16202B; }
.fit-footer .fit-footer__arrow { display: inline-block; transition: transform .2s cubic-bezier(.2, .75, .22, 1); }
.fit-footer .fit-footer__pill--primary:hover .fit-footer__arrow { transform: translateX(3px); }

/* ---------- Untere Leiste ---------- */
.fit-footer__bottom {
	display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
	gap: .75rem 2rem;
	padding-block: 1.25rem 1.5rem;
	border-top: 1px solid var(--ft-line);
	font-size: .88rem; color: var(--ft-soft);
}
.fit-footer__legal { display: flex; flex-wrap: wrap; gap: .25rem 1.5rem; }
.fit-footer .fit-footer__legal a { color: var(--ft-soft); text-decoration: none; font-weight: 600; }
.fit-footer .fit-footer__legal a:hover { color: var(--ft-text); text-decoration: underline; }

/* ---------- Schmale Bildschirme ---------- */
@media (max-width: 640px) {
	.fit-footer__main { flex-direction: column; align-items: flex-start; }
	.fit-footer__bottom { flex-direction: column-reverse; align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
	.fit-footer * { transition: none !important; }
}