/* ============================================================
   DIE DESIGNER — Footer v2.1
   Ablage: /dd-footer/css/dd-footer.css
   Raster: uebernimmt die Breite vom Bootstrap-Container (1140px)
   ============================================================ */

.dd-footer {
	/* --- Farbschema A: dunkler Grund (Empfehlung) --- */
	--dd-f-bg:        #140b24;
	--dd-f-bg-deep:   #0d0718;
	--dd-f-text:      #ffffff;
	--dd-f-muted:     #b8aecc;   /* 9,1:1 */
	--dd-f-accent:    #6e11f4;
	--dd-f-accent-lt: #b18cff;   /* 7,3:1 */
	--dd-f-line:      rgba(255,255,255,.10);

	/* --- Farbschema B: Vollviolett ---
	   Beide Bloecke tauschen, nicht mischen. Die Werte sind
	   auf 4,5:1 gegen #6e11f4 gerechnet.
	--dd-f-bg:        #6e11f4;
	--dd-f-bg-deep:   #140b24;
	--dd-f-text:      #ffffff;
	--dd-f-muted:     #e6dcff;
	--dd-f-accent:    #5a0dc9;
	--dd-f-accent-lt: #ffffff;
	--dd-f-line:      rgba(255,255,255,.22);
	*/

	background: var(--dd-f-bg);
	color: var(--dd-f-text);
	font-family: var(--font-body, "Hanken Grotesk", system-ui, sans-serif);
	font-size: 1rem;
	line-height: 1.6;
}

/* Breite kommt von .container — hier nur zuruecksetzen, was stoert */
.dd-footer__inner {
	width: 100%;
}

.dd-footer a {
	color: inherit;
	text-decoration: none;
	transition: color .18s ease;
}

.dd-footer a:hover,
.dd-footer a:focus-visible {
	color: var(--dd-f-accent-lt);
	text-decoration: underline;
	text-underline-offset: .2em;
}

.dd-footer a:focus-visible {
	outline: 2px solid var(--dd-f-accent-lt);
	outline-offset: 3px;
	border-radius: 2px;
}

/* --- Zone 1: Handlungsband --- */

.dd-footer__cta {
	background: var(--dd-f-accent);
}

.dd-footer__cta-inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1.25rem;
	padding-block: 1.75rem;
}

.dd-footer__cta-text {
	margin: 0;
	max-width: 46ch;
	font-family: var(--font-display, "Bricolage Grotesque", system-ui, sans-serif);
	font-size: clamp(1.125rem, 2.2vw, 1.5rem);
	font-weight: 500;
	line-height: 1.3;
	color: #ffffff;
}

.dd-footer__cta-btn {
	flex: 0 0 auto;
	display: inline-block;
	padding: .75rem 1.75rem;
	background: #ffffff;
	color: var(--dd-f-accent) !important;
	font-weight: 600;
	border-radius: 999px;
	white-space: nowrap;
}

.dd-footer__cta-btn:hover,
.dd-footer__cta-btn:focus-visible {
	background: #f2ecff;
	text-decoration: none !important;
}

/* --- Zone 2: Hauptfooter --- */

.dd-footer__main {
	padding-block: 3.5rem 3rem;
}

.dd-footer__grid {
	display: grid;
	grid-template-columns: 1.4fr repeat(3, minmax(0, 1fr));
	gap: 2.5rem 2rem;
}

.dd-footer__head {
	margin: 0 0 1rem;
	font-family: var(--font-display, "Bricolage Grotesque", system-ui, sans-serif);
	font-size: .8125rem;
	font-weight: 600;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--dd-f-muted);
}

.dd-footer__list,
.dd-footer__social,
.dd-footer__legal ul,
.dd-footer__regions {
	list-style: none;
	margin: 0;
	padding: 0;
}

.dd-footer__list li + li {
	margin-top: .625rem;
}

.dd-footer__list a {
	font-size: .9375rem;
	color: var(--dd-f-text);
}

/* Spalte Marke */

.dd-footer__logo {
	display: inline-block;
	margin-bottom: 1.25rem;
}

.dd-footer__logo img {
	max-width: 180px;
	height: auto;
}

.dd-footer__claim {
	margin: 0 0 1rem;
	max-width: 34ch;
	font-size: .9375rem;
	color: var(--dd-f-muted);
}

.dd-footer__ai {
	margin: 0 0 1.5rem;
	font-family: var(--font-display, "Bricolage Grotesque", system-ui, sans-serif);
	font-size: .9375rem;
	font-weight: 500;
	color: var(--dd-f-accent-lt);
}

.dd-footer__social {
	display: flex;
	gap: .625rem;
}

.dd-footer__social a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border: 1px solid var(--dd-f-line);
	border-radius: 50%;
	color: var(--dd-f-muted);
	transition: border-color .18s ease, color .18s ease;
}

.dd-footer__social a:hover,
.dd-footer__social a:focus-visible {
	border-color: var(--dd-f-accent-lt);
	color: var(--dd-f-accent-lt);
	text-decoration: none;
}

/* Spalte Kontakt */

.dd-footer__nap {
	margin: 0 0 1rem;
	font-size: .9375rem;
	font-style: normal;
	color: var(--dd-f-muted);
}

.dd-footer__nap-name {
	display: block;
	font-weight: 600;
	color: var(--dd-f-text);
}

.dd-footer__list--contact a {
	font-variant-numeric: tabular-nums;
}

.dd-footer__hours {
	margin: 1rem 0 0;
	font-size: .875rem;
	color: var(--dd-f-muted);
}

.dd-footer__region {
	margin: .5rem 0 0;
	max-width: 26ch;
	font-size: .875rem;
	color: var(--dd-f-muted);
}

.dd-footer__regions {
	display: flex;
	flex-wrap: wrap;
	gap: .375rem .875rem;
	margin-top: .75rem;
	font-size: .875rem;
}

/* --- Zone 3: Badges --- */

.dd-footer__badges {
	border-top: 1px solid var(--dd-f-line);
	padding-block: 2rem;
}

.dd-footer__badge-row {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 2rem 3rem;
	margin: 0;
	padding: 0;
}

.dd-footer__badge-row + .dd-footer__badge-row {
	margin-top: 2rem;
}

.dd-footer__badge-row--own img { height: 44px; width: auto; }
.dd-footer__badge-row--brands img { height: 38px; width: auto; }

/* --- Zone 4: Fusszeile --- */

.dd-footer__bottom {
	background: var(--dd-f-bg-deep);
	border-top: 1px solid var(--dd-f-line);
}

.dd-footer__bottom-inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: .75rem 1.5rem;
	padding-block: 1.25rem;
}

.dd-footer__copy {
	margin: 0;
	font-size: .875rem;
	color: var(--dd-f-muted);
}

.dd-footer__legal ul {
	display: flex;
	flex-wrap: wrap;
	gap: .375rem 1.25rem;
	font-size: .875rem;
}

.dd-footer__legal a {
	color: var(--dd-f-muted);
}

/* --- Breakpoints --- */

@media (max-width: 991.98px) {
	.dd-footer__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.dd-footer__col--brand {
		grid-column: 1 / -1;
	}
}

@media (max-width: 575.98px) {
	.dd-footer__grid {
		grid-template-columns: 1fr;
	}
	.dd-footer__main {
		padding-block: 2.5rem 2rem;
	}
	.dd-footer__cta-inner,
	.dd-footer__bottom-inner {
		flex-direction: column;
		align-items: flex-start;
	}
	.dd-footer__cta-btn {
		width: 100%;
		text-align: center;
	}
	.dd-footer__claim,
	.dd-footer__region,
	.dd-footer__cta-text {
		max-width: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.dd-footer a,
	.dd-footer__social a {
		transition: none;
	}
}