/*
Lorenz Meters - Footer Modul (mod_ddm_footer)
creation Date: 2026-09-04
Author: Sebastian Osinski
http://www.sebbi.net
https://ddm-friends.de
*/

/* ---------------------------------------------------------------
   FOOTER
   Aufbau:  .ddm_footer > .footer_curve (transparente Welle)
                        > .footer_body  (blauer Bereich, full bleed)
                          > .main-container.footer_inner

   Die Welle liegt als SVG (preserveAspectRatio="none") ueber dem
   blauen Bereich, oberhalb der Welle bleibt alles transparent -
   der Footer funktioniert damit vor jedem beliebigen Hintergrund.
   --------------------------------------------------------------- */
.ddm_footer{
	/* Hoehe des Wellenbandes. Der Pfad ist aus dem Layout abgemessen und
	   fuellt den viewBox 0 0 1920 34, bei 1920 px Breite entspricht
	   1 Einheit also rund 1 px. */
	--footer-curve-height: 36px;
	--footer-curve-min: 16px;
	/* Soll die Welle in den darueberliegenden Abschnitt hineinragen,
	   hier einen Wert (z.B. var(--footer-curve-height)) eintragen. */
	--footer-curve-overlap: 0px;

	position: relative;
	width: 100%;
	color: #ffffff;
	margin-top: calc(-1 * var(--footer-curve-overlap));
}

/* Welle */
.ddm_footer .footer_curve{
	position: relative;
	width: 100%;
	height: clamp(var(--footer-curve-min), 1.8vw, var(--footer-curve-height));
	line-height: 0;
	margin-bottom: -1px;
	pointer-events: none;
}
.ddm_footer .footer_curve svg{
	display: block;
	width: 100%;
	height: 100%;
}
.ddm_footer .footer_curve path{
	fill: var(--c-blue, #2b2d7a);
}

/* blauer Bereich */
.ddm_footer .footer_body{
	position: relative;
	width: 100%;
}
.ddm_footer .footer_inner{
	padding-top: 40px;
	padding-bottom: 50px;
}

/* Logo + Spalten */
.ddm_footer .footer_top{
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 40px;
}
.ddm_footer .footer_brand{
	flex: 0 0 auto;
	width: 22%;
}
.ddm_footer .footer_logo{
	display: inline-block;
	text-decoration: none;
}
.ddm_footer .footer_logo img{
	display: block;
	width: 185px;
	max-width: 100%;
	height: auto;
}
.ddm_footer .footer_nav{
	flex: 1 1 480px;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 30px 24px;
}
.ddm_footer .footer_col_title{
	font-family: var(--font-bold);
	font-stretch: var(--width-normal);
	font-weight: var(--weight-bold);
	font-size: 16px;
	line-height: 24px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #ffffff;
	margin-bottom: 14px;
}
.ddm_footer .footer_col_list{
	list-style: none;
	margin: 0;
	padding: 0;
}
.ddm_footer .footer_col_list li{
	margin-bottom: 6px;
}
.ddm_footer .footer_col_list li:last-child{
	margin-bottom: 0;
}
.ddm_footer .footer_col_list a{
	display: inline-block;
	font-size: 16px;
	line-height: 24px;
	color: #ffffff;
	text-decoration: none;
}

/* Fusszeile: Copyright + Rechtliches */
.ddm_footer .footer_bottom{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px 40px;
	margin-top: 65px;
}
.ddm_footer .footer_copy{
	margin: 0;
	font-size: 13px;
	line-height: 20px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #ffffff;
}
.ddm_footer .footer_legal{
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 45px;
	margin: 0;
	padding: 0;
}
.ddm_footer .footer_legal a{
	display: inline-block;
	font-size: 13px;
	line-height: 20px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #ffffff;
	text-decoration: none;
}

/* Tastaturbedienung */
.ddm_footer a:focus-visible{
	outline: 2px solid #ffffff;
	outline-offset: 3px;
}


/* ---------------------------------------------------------------
   RESPONSIVE - Breakpoints wie im Template (1320 / 860 / 600 / 500)
   --------------------------------------------------------------- */
/* Ab hier steht das Logo ueber den Spalten - alles wird zentriert. */
@media (max-width: 1320px){
	.ddm_footer .footer_brand{
		width: 100%;
	}
	.ddm_footer .footer_nav{
		flex-basis: 100%;
	}
	.ddm_footer .footer_top{
		gap: 45px;
		text-align: center;
	}
	.ddm_footer .footer_logo img{
		margin-left: auto;
		margin-right: auto;
	}
	.ddm_footer .footer_bottom{
		flex-direction: column;
		align-items: center;
		text-align: center;
		gap: 18px;
	}
	.ddm_footer .footer_legal{
		justify-content: center;
	}
}

@media (max-width: 860px){
	.ddm_footer .footer_inner{
		padding-top: 30px;
		padding-bottom: 45px;
	}
	.ddm_footer .footer_nav{
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 34px 24px;
	}
	.ddm_footer .footer_bottom{
		margin-top: 50px;
	}
}

@media (max-width: 600px){
	.ddm_footer .footer_nav{
		grid-template-columns: minmax(0, 1fr);
		gap: 28px;
	}
	.ddm_footer .footer_bottom{
		margin-top: 45px;
	}
	.ddm_footer .footer_legal{
		gap: 8px 28px;
	}
}

@media (max-width: 500px){
	.ddm_footer .footer_logo img{
		width: 150px;
	}
	.ddm_footer .footer_inner{
		padding-bottom: 40px;
	}
}