/*
FUG - Fernwärme Ulm Template
creation Date: 2026-10-23
Author: Sebastian Osinski
http://www.sebbi.net
https://ddm-friends.de
*/

/* ===========================================================================
   KOPFBEREICH / HAUPTMENUE (Design-Guideline 5.1)
   Markup in index.php, Verhalten in js/top_menu.js.

   Desktop (ab 1321px):
     .ddm_utility   Servicezeile 40px (lg2): Stoerungsdienst links,
                    Schnellzugriffe rechts. Scrollt mit der Seite weg.
     .ddm_header    Hauptzeile, klebt oben (position: sticky). 88px, beim
                    Scrollen 64px (.smaller, Logo 56 -> 44px) mit Schatten.
                    Die Hoehe, die sie dabei verliert, gleicht margin-bottom
                    aus - der Inhalt darunter springt also nicht.
     Menue          Joomla-Menuemodul (mod_menu). Punkte mit Unterseiten
                    oeffnen ein Panel unter der Kopfzeile (.opened): links
                    Bereichsname + "Zur Uebersicht" (.ddm_nav_intro, per JS),
                    rechts die Unterpunkte in drei Spalten. Gruppen (Menue-
                    Ueberschriften wie "Erzeugungsanlagen") stehen als
                    Dachzeile ueber ihren Links.
     Kontakt        Menuepunkt mit Link-Klasse "contentbutton _primary
                    ddm_navbutton" (scripts/create-page-structure.php) =
                    rote Schaltflaeche ganz rechts.

   Mobil (bis 1320px):
     Hauptzeile 64px: Logo, Bereichsanzeige (.ddm_header_section = oberster
     Menuepunkt des aktiven Pfads, rot unterstrichen wie der aktive Punkt auf
     dem Desktop), Stoerungsdienst-Knopf (rot), Menueschaltflaeche.
     #ddm_menu wird zum Off-Canvas-Panel von rechts (.res_act am Header):
     Logo + Schliessen oben, Akkordeon fuer die erste Ebene, darunter fest
     die Kontaktzeile (Schnellzugriffe, Stoerungsdienst, E-Mail).

   Ebene 4 unter verlinkten Seiten (Sprungmarken der Biomasse-HKW) erscheint
   nicht im Menue - die Seite selbst fuehrt dorthin.
   =========================================================================== */
:root{
	--hdr-h-full: 88px;
	--hdr-h-small: 64px;
	--hdr-logo-full: 56px;
	--hdr-logo-small: 44px;
	--hdr-utility-h: 40px;
	--hdr-intro-w: 260px;          /* linke Spalte im Panel */
	/* Seitenabstand, der Panelinhalte an .main-container ausrichtet */
	--hdr-side: max(var(--gutter), calc((100% - var(--container)) / 2));
}
html{
	/* Sprungmarken landen unter der kleinen Kopfzeile (auch smoothScroll.js) */
	scroll-padding-top: calc(var(--hdr-h-small) + var(--space-5));
}


/* ===== SERVICEZEILE ===== */
.ddm_utility{
	position: relative;
	z-index: 12;
	height: var(--hdr-utility-h);
	font-size: var(--fs-small);
	line-height: var(--lh-small);
	color: var(--color-dg);
	border-bottom: 1px solid var(--color-line);
}
.ddm_utility_inner{
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 100%;
}
.ddm_utility a{
	color: inherit;
	text-decoration: none;
}
.ddm_utility a:hover,
.ddm_utility a[aria-current="page"]{
	color: var(--color-red);
}
.ddm_hotline{
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
}
.ddm_hotline .ddm_icon{
	color: var(--color-red);
}
.ddm_hotline strong{
	color: var(--color-ink);
	font-weight: var(--weight-text-strong);
	transition: color var(--dur-fast) var(--ease);
}
.ddm_hotline:hover strong{
	color: var(--color-red);
}
.ddm_utility_links{
	display: flex;
	list-style: none;
}
.ddm_utility_links li + li::before{
	content: "·";
	padding: 0px var(--space-3);
	color: var(--color-mg);
}


/* ===== HAUPTZEILE ===== */
.ddm_header{
	--hdr-h: var(--hdr-h-full);
	--hdr-logo: var(--hdr-logo-full);
	position: sticky;
	top: 0px;
	z-index: 11;
	height: var(--hdr-h);
	margin-bottom: calc(var(--hdr-h-full) - var(--hdr-h));
	background-color: var(--color-white);
	color: var(--color-ink);
	box-shadow: 0px 1px 0px 0px var(--color-line);
	transition: height var(--dur) var(--ease), margin-bottom var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.ddm_header.smaller{
	--hdr-h: var(--hdr-h-small);
	--hdr-logo: var(--hdr-logo-small);
	box-shadow: var(--shadow-1);
}
.ddm_header_bar{
	/* static: Bezug fuer das Panel ist der volle Header, nicht der Container */
	position: static;
	display: flex;
	align-items: stretch;
	height: 100%;
}
.ddm_header_logo{
	display: flex;
	align-items: center;
	flex-shrink: 0;
	margin-right: auto;
}
.ddm_header_logo img{
	display: block;
	width: auto;
	height: var(--hdr-logo);
	transition: height var(--dur) var(--ease);
}

/* nur mobil */
.ddm_header_section,
.ddm_header_call,
.ddm_burger,
.ddm_menu_head,
.ddm_menu_contact,
.ddm_menu_backdrop{
	display: none;
}


/* ===== MENUE: GEMEINSAM ===== */
.ddm_menu{
	display: flex;
	align-items: stretch;
}
.ddm_nav ul{
	list-style: none;
	margin: 0px;
	padding: 0px;
}
.ddm_nav a{
	color: inherit;
	text-decoration: none;
}
.ddm_nav .mod-menu__toggle-sub{
	display: inline-flex;
	align-items: center;
	padding: 0px;
	border: none;
	background-color: transparent;
	color: inherit;
	font: inherit;
	letter-spacing: inherit;
	cursor: pointer;
}
/* Pfeil im Untermenue-Knopf (Joomla liefert .icon-chevron-down ohne Iconfont) */
.ddm_nav .icon-chevron-down{
	display: inline-block;
	flex-shrink: 0;
	width: 16px;
	height: 16px;
	margin: 0px;
	background-color: currentColor;
	-webkit-mask: url("../svg/tabler/chevron-down.svg") center / contain no-repeat;
	mask: url("../svg/tabler/chevron-down.svg") center / contain no-repeat;
	transition: transform var(--dur) var(--ease);
}
.ddm_nav [aria-expanded="true"] > .icon-chevron-down{
	transform: rotate(180deg);
}
/* Untermenues verlinkter Seiten ab Ebene 3 (Sprungmarken) ausblenden */
.ddm_nav .mod-menu__sub .mod-menu__sub > li > a ~ ul,
.ddm_nav .mod-menu__sub .mod-menu__sub > li > a ~ button{
	display: none;
}
/* Externe Ziele (z.B. Stellenportal) */
.ddm_nav .mod-menu__sub a[href^="http"]::after{
	-webkit-mask-image: url("../svg/tabler/arrow-up-right.svg");
	mask-image: url("../svg/tabler/arrow-up-right.svg");
}


/* ===== DESKTOP ===== */
@media (min-width: 1321px){
	.ddm_nav,
	.ddm_nav > ul{
		display: flex;
		align-items: stretch;
		height: 100%;
	}
	.ddm_nav > ul > li{
		display: flex;
		align-items: center;
		/* aktiver Bereich: 3px roter Balken unten, Breite = Text */
		background: linear-gradient(var(--color-red), var(--color-red)) no-repeat center bottom / 0px 3px;
		transition: background-size var(--dur) var(--ease);
	}
	.ddm_nav > ul > li > a:not(.contentbutton),
	.ddm_nav > ul > li > .mod-menu__toggle-sub{
		display: flex;
		align-items: center;
		gap: var(--space-1);
		height: 100%;
		padding: 0px var(--space-3);
		font-family: var(--font-head);
		font-weight: var(--weight-ui);
		font-size: var(--fs-ui);
		line-height: var(--lh-ui);
		letter-spacing: var(--ls-ui);
		color: var(--color-ink);
		transition: color var(--dur-fast) var(--ease);
	}
	/* Link + Pfeil-Knopf ruecken zusammen */
	.ddm_nav > ul > li > a + .mod-menu__toggle-sub{
		margin-left: calc(-1 * var(--space-3));
		padding-left: var(--space-1);
	}
	.ddm_nav > ul > li:hover > a:not(.contentbutton),
	.ddm_nav > ul > li:hover > .mod-menu__toggle-sub,
	.ddm_nav > ul > li.opened > a,
	.ddm_nav > ul > li.opened > .mod-menu__toggle-sub,
	.ddm_nav > ul > li.active > a:not(.contentbutton),
	.ddm_nav > ul > li.active > .mod-menu__toggle-sub,
	.ddm_nav > ul > li.current > a:not(.contentbutton),
	.ddm_nav > ul > li.current > .mod-menu__toggle-sub{
		color: var(--color-red);
	}
	.ddm_nav > ul > li.active:not(:has(.ddm_navbutton)),
	.ddm_nav > ul > li.current:not(:has(.ddm_navbutton)){
		background-size: calc(100% - 2 * var(--space-3)) 3px;
	}
	.ddm_nav > ul > li:has(> .ddm_navbutton){
		margin-left: var(--space-5);
	}
	.ddm_nav .ddm_navbutton[aria-current="page"]{
		background-color: var(--color-dred);
		border-color: var(--color-dred);
	}

	/* --- Panel (Ebene 2) --- */
	.ddm_nav > ul > li > ul.mod-menu__sub{
		position: absolute;
		top: 100%;
		left: 0px;
		right: 0px;
		display: block;
		min-height: 240px;
		padding: var(--space-7) var(--hdr-side) var(--space-8) calc(var(--hdr-side) + var(--hdr-intro-w) + var(--space-8));
		column-count: 3;
		column-gap: var(--space-7);
		background-color: var(--color-white);
		border-top: 1px solid var(--color-line);
		box-shadow: var(--shadow-2);
		opacity: 0;
		visibility: hidden;
		transform: translateY(-8px);
		transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility 0s linear var(--dur);
	}
	.ddm_nav > ul > li.opened > ul.mod-menu__sub{
		opacity: 1;
		visibility: visible;
		transform: none;
		transition-delay: 0s;
	}
	.ddm_nav .mod-menu__sub li{
		display: block;
		break-inside: avoid;
	}
	/* Gruppen bekommen Luft nach unten */
	.ddm_nav > ul > li > ul > li:has(> ul){
		padding-bottom: var(--space-5);
	}

	/* linke Spalte: Bereichsname + Uebersicht */
	.ddm_nav .ddm_nav_intro{
		position: absolute;
		top: var(--space-7);
		bottom: var(--space-8);
		left: var(--hdr-side);
		width: var(--hdr-intro-w);
		padding-right: var(--space-6);
		border-right: 1px solid var(--color-line);
	}
	.ddm_nav_intro_title{
		display: block;
		font-family: var(--font-head);
		font-weight: var(--weight-head);
		font-size: var(--fs-h3);
		line-height: var(--lh-h3);
		letter-spacing: var(--ls-head);
		color: var(--color-ink);
	}
	.ddm_nav_intro_title::before{
		content: "";
		display: block;
		width: 32px;
		height: 4px;
		margin-bottom: var(--space-4);
		background-color: var(--color-red);
	}
	.ddm_nav .ddm_nav_intro .ddm_textlink{
		margin-top: var(--space-4);
	}

	/* Links im Panel: Zeilen mit Trennlinie, Pfeil beim Ueberfahren */
	.ddm_nav .mod-menu__sub a{
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--space-3);
		padding: var(--space-3) 0px;
		border-bottom: 1px solid var(--color-line);
		font-family: var(--font-head);
		font-weight: var(--weight-ui);
		font-size: var(--fs-ui);
		line-height: var(--lh-ui);
		letter-spacing: var(--ls-ui);
		color: var(--color-ink);
	}
	.ddm_nav .mod-menu__sub a::after{
		content: "";
		flex-shrink: 0;
		width: 16px;
		height: 16px;
		background-color: currentColor;
		-webkit-mask: url("../svg/tabler/arrow-right.svg") center / contain no-repeat;
		mask: url("../svg/tabler/arrow-right.svg") center / contain no-repeat;
		opacity: 0;
		transform: translateX(-4px);
		transition: opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
	}
	.ddm_nav .mod-menu__sub a[href^="http"]::after{
		opacity: 1;
		transform: none;
		color: var(--color-mg);
	}
	.ddm_nav .mod-menu__sub a:hover,
	.ddm_nav .mod-menu__sub li.current > a{
		color: var(--color-red);
	}
	.ddm_nav .mod-menu__sub a:hover::after,
	.ddm_nav .mod-menu__sub a:focus-visible::after{
		opacity: 1;
		transform: none;
		color: var(--color-red);
	}
	.ddm_nav .mod-menu__sub li.current > a{
		font-weight: var(--weight-head);
	}
	.ddm_nav .ddm_nav_intro a.ddm_textlink{
		display: inline-flex;
		padding: 0px;
		border: none;
		color: var(--color-red);
	}
	.ddm_nav .ddm_nav_intro a.ddm_textlink::after{
		display: none;
	}

	/* Gruppenueberschrift (Menue-Ueberschrift) als Dachzeile */
	.ddm_nav_group{
		display: block;
		padding: var(--space-3) 0px var(--space-1);
		font-family: var(--font-head);
		font-weight: var(--weight-head);
		font-size: var(--fs-h6);
		line-height: var(--lh-h6);
		letter-spacing: var(--ls-caps);
		text-transform: uppercase;
		color: var(--color-muted);
	}
	/* Untergruppe (Ebene 3, z.B. Spitzenlastheizwerke): leise Zeile, Links eingerueckt */
	.ddm_nav .mod-menu__sub .mod-menu__sub .ddm_nav_group{
		padding-top: var(--space-4);
		font-weight: var(--weight-ui);
		letter-spacing: var(--ls-ui);
		text-transform: none;
	}
	.ddm_nav .mod-menu__sub .mod-menu__sub .mod-menu__sub{
		padding-left: var(--space-4);
		border-left: 1px solid var(--color-line);
	}
}


/* ===== MOBIL ===== */
@media (max-width: 1320px){
	.ddm_utility{
		display: none;
	}
	.ddm_header,
	.ddm_header.smaller{
		--hdr-h: var(--hdr-h-small);
		--hdr-logo: 40px;
		margin-bottom: 0px;
	}
	.ddm_header_bar{
		align-items: center;
		gap: var(--space-3);
	}
	.ddm_header_bar > .ddm_header_logo{
		margin-right: 0px;
	}

	/* Bereichsanzeige: Trennstrich, Name mit rotem Balken unten */
	.ddm_header_section{
		display: flex;
		align-items: center;
		align-self: stretch;
		min-width: 0px;
		margin-right: auto;
		font-family: var(--font-head);
		font-weight: var(--weight-ui);
		font-size: var(--fs-ui);
		line-height: var(--lh-ui);
		letter-spacing: var(--ls-ui);
		color: var(--color-ink);
	}
	.ddm_header_section::before{
		content: "";
		flex-shrink: 0;
		width: 1px;
		height: 28px;
		margin-right: var(--space-3);
		background-color: var(--color-line);
	}
	.ddm_header_section_label{
		display: flex;
		align-items: center;
		align-self: stretch;
		min-width: 0px;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		box-shadow: inset 0px -3px 0px var(--color-red);
	}

	.ddm_header_call,
	.ddm_burger{
		display: flex;
		align-items: center;
		justify-content: center;
		flex-shrink: 0;
		width: 44px;
		height: 44px;
		border-radius: var(--radius-s);
	}
	.ddm_header_call{
		margin-left: auto;
		background-color: var(--color-red);
		color: var(--color-white);
	}
	.ddm_header_section + .ddm_menu + .ddm_header_call{
		margin-left: 0px;
	}
	.ddm_header_call:hover{
		background-color: var(--color-dred);
	}
	.ddm_burger{
		flex-direction: column;
		gap: 5px;
		margin-right: -10px;
		padding: 0px;
		border: none;
		background-color: transparent;
		cursor: pointer;
	}
	.ddm_burger > span{
		display: block;
		width: 24px;
		height: 2px;
		border-radius: 1px;
		background-color: var(--color-ink);
		transition: width var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
	}
	.ddm_burger > span:nth-child(2){
		width: 18px;
		margin-left: 6px;
	}
	.ddm_burger:hover > span{
		width: 24px;
		margin-left: 0px;
		background-color: var(--color-red);
	}

	/* --- Off-Canvas-Panel --- */
	.ddm_menu{
		position: fixed;
		top: 0px;
		right: 0px;
		bottom: 0px;
		z-index: 2;
		flex-direction: column;
		width: min(440px, 100%);
		height: 100vh;
		height: 100dvh;
		background-color: var(--color-white);
		box-shadow: var(--shadow-2);
		visibility: hidden;
		transform: translateX(100%);
		transition: transform var(--dur) var(--ease), visibility 0s linear var(--dur);
	}
	.ddm_header.res_act .ddm_menu{
		visibility: visible;
		transform: none;
		transition-delay: 0s;
	}
	.ddm_menu_backdrop{
		display: block;
		position: fixed;
		inset: 0px;
		z-index: 1;
		background-color: rgba(29, 33, 39, 0.5);
		opacity: 0;
		visibility: hidden;
		transition: opacity var(--dur) var(--ease), visibility 0s linear var(--dur);
	}
	.ddm_header.res_act .ddm_menu_backdrop{
		opacity: 1;
		visibility: visible;
		transition-delay: 0s;
	}
	html.ddm_menu_lock,
	html.ddm_menu_lock body{
		overflow: hidden;
	}

	.ddm_menu_head{
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-shrink: 0;
		height: var(--hdr-h-small);
		padding: 0px var(--gutter);
		border-bottom: 1px solid var(--color-line);
	}
	.ddm_menu_close{
		display: flex;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
		margin-right: -10px;
		padding: 0px;
		border: none;
		background-color: transparent;
		color: var(--color-ink);
		cursor: pointer;
	}
	.ddm_menu_close:hover{
		color: var(--color-red);
	}

	.ddm_nav{
		flex: 1 1 auto;
		overflow-y: auto;
		overscroll-behavior: contain;
		padding: var(--space-3) var(--gutter) var(--space-6);
	}
	.ddm_nav .ddm_nav_intro{
		display: none;
	}

	/* Ebene 1: Zeilen mit Trennlinie, Pfeil-Knopf rechts */
	.ddm_nav > ul > li{
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		border-bottom: 1px solid var(--color-line);
	}
	.ddm_nav > ul > li > a:not(.contentbutton),
	.ddm_nav > ul > li > .mod-menu__toggle-sub{
		display: flex;
		align-items: center;
		flex: 1 1 auto;
		min-height: 56px;
		font-family: var(--font-head);
		font-weight: var(--weight-head);
		font-size: var(--fs-h5);
		line-height: var(--lh-h5);
		color: var(--color-ink);
		text-align: left;
	}
	.ddm_nav > ul > li > .mod-menu__toggle-sub{
		justify-content: space-between;
	}
	/* Pfeil-Knopf neben einem Link: eigenes 48px-Feld */
	.ddm_nav > ul > li > a + .mod-menu__toggle-sub{
		flex: 0 0 48px;
		justify-content: flex-end;
	}
	.ddm_nav > ul > li > .mod-menu__toggle-sub .icon-chevron-down{
		width: 20px;
		height: 20px;
	}
	.ddm_nav > ul > li:hover > a:not(.contentbutton),
	.ddm_nav > ul > li.active > a:not(.contentbutton),
	.ddm_nav > ul > li.current > a:not(.contentbutton),
	.ddm_nav > ul > li.active > .mod-menu__toggle-sub,
	.ddm_nav > ul > li.current > .mod-menu__toggle-sub,
	.ddm_nav > ul > li > .mod-menu__toggle-sub:hover{
		color: var(--color-red);
	}

	/* Unterpunkte: Akkordeon */
	.ddm_nav > ul > li > ul.mod-menu__sub{
		display: none;
		flex: 0 0 100%;
		padding: 0px 0px var(--space-4);
	}
	.ddm_nav > ul > li.opened > ul.mod-menu__sub{
		display: block;
	}
	.ddm_nav .mod-menu__sub a{
		display: flex;
		align-items: center;
		gap: var(--space-2);
		min-height: 44px;
		padding: var(--space-2) 0px var(--space-2) var(--space-4);
		font-family: var(--font-head);
		font-weight: var(--weight-ui);
		font-size: var(--fs-ui);
		line-height: var(--lh-ui);
		color: var(--color-dg);
	}
	.ddm_nav .mod-menu__sub a[href^="http"]::after{
		content: "";
		width: 16px;
		height: 16px;
		background-color: var(--color-mg);
		-webkit-mask-position: center;
		mask-position: center;
		-webkit-mask-size: contain;
		mask-size: contain;
		-webkit-mask-repeat: no-repeat;
		mask-repeat: no-repeat;
	}
	.ddm_nav .mod-menu__sub a:hover{
		color: var(--color-red);
	}
	/* aktuelle Seite: rot mit Balken links (Fortsetzung der Bereichsanzeige) */
	.ddm_nav .mod-menu__sub li.current > a{
		color: var(--color-red);
		box-shadow: inset 3px 0px 0px var(--color-red);
	}
	.ddm_nav_group{
		display: block;
		padding: var(--space-4) 0px var(--space-1) var(--space-4);
		font-family: var(--font-head);
		font-weight: var(--weight-head);
		font-size: var(--fs-h6);
		line-height: var(--lh-h6);
		letter-spacing: var(--ls-caps);
		text-transform: uppercase;
		color: var(--color-muted);
	}
	.ddm_nav .mod-menu__sub .mod-menu__sub{
		margin-left: var(--space-4);
		border-left: 1px solid var(--color-line);
	}
	.ddm_nav .mod-menu__sub .mod-menu__sub .ddm_nav_group{
		font-weight: var(--weight-ui);
		letter-spacing: var(--ls-ui);
		text-transform: none;
	}

	/* Kontakt-Schaltflaeche am Ende der Liste */
	.ddm_nav > ul > li:has(> .ddm_navbutton){
		margin-top: var(--space-5);
		border-bottom: none;
	}
	.ddm_nav .ddm_navbutton{
		width: 100%;
	}

	/* --- Kontaktzeile unten --- */
	.ddm_menu_contact{
		display: block;
		flex-shrink: 0;
		padding: var(--space-4) var(--gutter) calc(var(--space-4) + env(safe-area-inset-bottom, 0px));
		background-color: var(--color-lg2);
		border-top: 1px solid var(--color-line);
		font-size: var(--fs-small);
		line-height: var(--lh-small);
	}
	.ddm_menu_quick{
		display: flex;
		flex-wrap: wrap;
		margin-bottom: var(--space-3);
		list-style: none;
	}
	.ddm_menu_quick li + li::before{
		content: "·";
		padding: 0px var(--space-3);
		color: var(--color-mg);
	}
	.ddm_menu_quick a{
		color: var(--color-dg);
		text-decoration: underline;
		text-underline-offset: 3px;
		text-decoration-color: var(--color-line);
	}
	.ddm_menu_quick a:hover,
	.ddm_menu_quick a[aria-current="page"]{
		color: var(--color-red);
		text-decoration-color: currentColor;
	}
	.ddm_menu_contactrow{
		display: flex;
		align-items: stretch;
		gap: var(--space-3);
	}
	.ddm_menu_hotline,
	.ddm_menu_mail{
		display: flex;
		align-items: center;
		min-height: 48px;
		background-color: var(--color-white);
		border: 1px solid var(--color-line);
		border-radius: var(--radius-s);
		color: var(--color-ink);
		text-decoration: none;
		transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
	}
	.ddm_menu_hotline{
		flex: 1 1 auto;
		gap: var(--space-3);
		padding: var(--space-2) var(--space-4);
	}
	.ddm_menu_hotline .ddm_icon{
		color: var(--color-red);
	}
	.ddm_menu_hotline_label{
		display: block;
		color: var(--color-muted);
	}
	.ddm_menu_hotline strong{
		font-family: var(--font-head);
		font-weight: var(--weight-head);
		font-size: var(--fs-h5);
		line-height: 1.2;
	}
	.ddm_menu_mail{
		flex: 0 0 48px;
		justify-content: center;
	}
	.ddm_menu_hotline:hover,
	.ddm_menu_mail:hover{
		border-color: var(--color-red);
		color: var(--color-red);
	}
}

@media (max-width: 400px){
	/* sehr schmal: Bereichsanzeige nimmt, was bleibt */
	.ddm_header_bar{
		gap: var(--space-2);
	}
	.ddm_header_section::before{
		margin-right: var(--space-2);
	}
}