/* BLUE THE WEB – Footer Variante C „Großes Statement“ (Stand 28.09.2026)
   Eigenständig, alle Klassen mit Präfix .btw-f3, keine Abhängigkeit vom alten .btw_footer.
   Schrift: erbt die Theme-Schrift (Montserrat). Kann 1:1 als SCSS-Partial verwendet werden. */

.btw-f3 {
	--f3-navy: #08083D;
	--f3-coral: #FF5B4A;
	--f3-soft: #AEB2E0;
	--f3-soft-2: #C9CCF0;
	--f3-line: rgba(255, 255, 255, .12);
	background: var(--f3-navy);
	color: #fff;
	font-family: inherit;
	padding-top: 24px;
	padding-bottom: 24px;
}
.btw-f3 a { color: inherit; text-decoration: none; }
.btw-f3 a:hover, .btw-f3 a:focus-visible { color: var(--f3-coral); }
.btw-f3 a:focus-visible { outline: 2px solid var(--f3-coral); outline-offset: 3px; border-radius: 4px; }
.btw-f3 p, .btw-f3 ul { margin: 0; padding: 0; }
.btw-f3 ul { list-style: none; }

.btw-f3__inner { max-width: 1200px; margin: 0 auto; padding: 110px 24px 40px; }

/* Oben: Statement links, Navigation rechts */
.btw-f3__main { display: grid; grid-template-columns: minmax(0, 500px) minmax(0, 1fr); gap: 56px; }

.btw-f3__claim { font-weight: 900; font-size: clamp(34px, 4vw, 48px); line-height: 1.08; letter-spacing: -.5px; color: #fff; }
.btw-f3__claim span { color: var(--f3-coral); }

.btw-f3__btn {
	display: inline-block; margin-top: 28px; padding: 15px 26px; border-radius: 35px;
	background: var(--f3-coral); color: var(--f3-navy) !important; font-weight: 800; font-size: 15px;
	transition: transform .15s ease, box-shadow .15s ease;
}
.btw-f3__btn:hover { transform: translateY(-1px); box-shadow: 0 8px 24px rgba(255, 91, 74, .35); }

.btw-f3__contact { margin-top: 28px !important; font-size: 15px; line-height: 1.6; color: var(--f3-soft-2); }
.btw-f3__sep { margin: 0 8px; color: var(--f3-soft); }

.btw-f3__nav { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 24px; align-content: start; }
.btw-f3__h { font-size: 13px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--f3-coral); margin-bottom: 14px !important; }
.btw-f3__list li + li { margin-top: 10px; }
.btw-f3__list a { font-size: 15px; line-height: 1.4; color: #fff; }

/* Logo-Zeile */
.btw-f3__brand { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 72px; }
.btw-f3__logo { display: inline-flex; width: 160px; color: #fff; }
.btw-f3__logo svg { width: 100%; height: auto; display: block; }
.btw-f3__tagline { font-size: 14px; color: var(--f3-soft); }

/* Unten: Copyright, Rechtliches, Social */
.btw-f3__bottom {
	display: flex; align-items: center; justify-content: space-between; gap: 16px 32px; flex-wrap: wrap;
	margin-top: 40px; padding-top: 26px; border-top: 1px solid var(--f3-line);
	font-size: 14px; color: var(--f3-soft);
}
.btw-f3__legal, .btw-f3__social { display: flex; flex-wrap: wrap; }
.btw-f3__legal li + li::before, .btw-f3__social li + li::before { content: '·'; margin: 0 10px; color: var(--f3-soft); }
.btw-f3__legal a, .btw-f3__social a { color: var(--f3-soft); }

/* Tablet */
@media (max-width: 1080px) {
	.btw-f3__main { grid-template-columns: 1fr; gap: 64px; }
}
/* Handy */
@media (max-width: 640px) {
	.btw-f3__inner { padding: 72px 20px 32px; }
	.btw-f3__nav { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 20px; }
	.btw-f3__brand { flex-direction: column; align-items: flex-start; margin-top: 56px; }
	.btw-f3__bottom { flex-direction: column; align-items: flex-start; }
	.btw-f3__contact .btw-f3__sep { display: none; }
	.btw-f3__contact a[href^="https://wa.me"] { display: block; }
}