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

/* ===========================================================================
   GESTALTUNGSWERTE
   Verbindlich: docs/design-guideline.md. Abstaende, Radien, Schatten und
   Bewegung kommen nur aus diesen Variablen (Farben: colors.css, Schrift:
   fonts.css). Die Werte fuer kleinere Bildschirme setzt responsive.css.
   =========================================================================== */
:root{
	/* Abstaende, 8er-Raster */
	--space-1: 4px;
	--space-2: 8px;
	--space-3: 12px;
	--space-4: 16px;
	--space-5: 24px;
	--space-6: 32px;
	--space-7: 48px;
	--space-8: 64px;
	--space-9: 96px;
	--space-10: 128px;

	/* Abschnittsabstaende (.extrawidepad, .widepad, .regpad, .lowpad) */
	--pad-xl: 128px;
	--pad-l: 96px;
	--pad-m: 64px;
	--pad-s: 32px;

	/* Raster */
	--grid-gap: 32px;

	/* Ecken: 0 fuer volle Flaechen, Schraegen und Hero-Bilder */
	--radius-s: 4px;    /* Schaltflaechen, Felder, Tags, Hinweise */
	--radius-m: 8px;    /* Karten, Inhaltsbilder, Video, Karte */

	/* Tiefe - kuehl getoent, nur zwei Stufen */
	--shadow-1: 0 1px 2px rgba(29, 33, 39, 0.06), 0 2px 8px rgba(29, 33, 39, 0.06);
	--shadow-2: 0 8px 24px rgba(29, 33, 39, 0.12);

	/* Bewegung */
	--dur-fast: 150ms;  /* Farbwechsel beim Ueberfahren */
	--dur: 250ms;       /* Aufklappen, Karten anheben */
	--ease: cubic-bezier(0.2, 0.7, 0.2, 1);

	/* FUG-Schraege: ein Winkel fuer die ganze Seite (4 Grad).
	   --slant-h = Hoehe der Schraege ueber die volle Fensterbreite (tan 4 Grad). */
	--slant: 4deg;
	--slant-h: 6.99vw;
}


/* ===========================================================================
   GRUNDLAGEN
   Schriftwerte kommen ausschliesslich aus den Variablen in fonts.css.
   =========================================================================== */
*{
	margin: 0px;
	padding: 0px;
}
*, *::before, *::after{
	box-sizing: border-box;
}
body, html{
	font-family: var(--font-text);
	font-weight: var(--weight-text);
	font-size: var(--fs-text);
	line-height: var(--lh-text);
	width: 100%;
	height: auto;
	margin: 0px;
	/* clip statt hidden: hidden machte body zum Scroll-Container und
	   wuerde den klebenden Header (position: sticky) abschalten */
	overflow-x: clip;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}
textarea, input, select, button{
	font-family: inherit;
	font-size: inherit;
	line-height: inherit;
}
img{
	border: none;
}
a{
	color: inherit;
	text-decoration: none;
}
a.anchorlink{
	line-height: 0px;
	height: 0px;
	font-size: 0px;
}
table{
	width: 100%;
	table-layout: fixed;
}
td{
	vertical-align: top;
	position: relative;
}


/* ===========================================================================
   TYPOGRAFIE
   Jede Rolle gibt es als Element (h1, p, ...) und als Klasse (.font_h1, ...),
   damit ein Element wie eine andere Rolle aussehen kann, ohne die Semantik zu
   aendern (z.B. <p class="font_h6"> als Dachzeile, <h2 class="font_h1">
   im Hero). Abschnitte setzen keine eigenen Schriftgroessen.
   =========================================================================== */
h1, h2, h3, h4, h5, h6,
.font_h1, .font_h2, .font_h3, .font_h4, .font_h5, .font_h6{
	font-family: var(--font-head);
	font-weight: var(--weight-head);
	letter-spacing: var(--ls-head);
	color: var(--color-head);
	hyphens: manual;
	overflow-wrap: break-word;
}
h1, .font_h1{
	font-size: var(--fs-h1);
	line-height: var(--lh-h1);
}
h2, .font_h2{
	font-size: var(--fs-h2);
	line-height: var(--lh-h2);
}
h3, .font_h3{
	font-size: var(--fs-h3);
	line-height: var(--lh-h3);
}
h4, .font_h4{
	font-size: var(--fs-h4);
	line-height: var(--lh-h4);
}
h5, .font_h5{
	font-size: var(--fs-h5);
	line-height: var(--lh-h5);
}
/* h6 / .font_h6 = Dachzeile: Versalien, rot (auf dunklen Flaechen weiss) */
h6, .font_h6{
	font-size: var(--fs-h6);
	line-height: var(--lh-h6);
	text-transform: uppercase;
	letter-spacing: var(--ls-caps);
	color: var(--color-eyebrow);
}
/* Schlagwort in Headlines (Nachfolger der fett-kursiven Schlagworte der
   alten Seite): <h2><span class="ddm_keyword">Zaehlerstand</span> einfach
   melden</h2>. Hoechstens eines je Headline, nur in Hero und Teasern.
   Auf dunklen Flaechen weiss mit Balken (Rot auf ink waere zu kontrastarm). */
.ddm_keyword{
	color: var(--color-keyword);
	background: linear-gradient(var(--color-keyword-bar), var(--color-keyword-bar)) left bottom / 100% 4px no-repeat;
	padding-bottom: 2px;
}
.font_text{
	font-family: var(--font-text);
	font-weight: var(--weight-text);
	font-size: var(--fs-text);
	line-height: var(--lh-text);
	letter-spacing: normal;
	text-transform: none;
}
.font_l,
.font_l p,
.font_l li{
	font-size: var(--fs-lead);
	line-height: var(--lh-lead);
}
.font_s,
.font_s p,
.font_s li{
	font-size: var(--fs-small);
	line-height: var(--lh-small);
}
.font_ui{
	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);
}
.font_footer,
.font_footer p,
.font_footer li{
	font-size: var(--fs-footer);
	line-height: var(--lh-footer);
}
.bold, b, strong{
	font-weight: var(--weight-text-strong);
}
h1 b, h1 strong, h2 b, h2 strong, h3 b, h3 strong{
	font-weight: var(--weight-head);
}
.light{
	font-weight: var(--weight-text-light);
}
.italic, em, i{
	font-style: italic;
}

/* Silbentrennung fuer Fliesstext in schmalen Spalten (Karten, Raster);
   Headlines bleiben manuell (&shy; in langen Komposita). */
.hyphenate,
.hyphenate p,
.hyphenate li{
	hyphens: auto;
	-webkit-hyphens: auto;
}
.tabular{
	font-variant-numeric: tabular-nums;
}

/* Abstaende im Fliesstext */
p,
.contstyles li{
	position: relative;
}
.contstyles p{
	margin-top: 0.8em;
	margin-bottom: 0.8em;
}
.contstyles h1,
.contstyles h2,
.contstyles h3,
.contstyles h4,
.contstyles h5,
.contstyles h6{
	margin-top: 1.4em;
	margin-bottom: 0.5em;
}
.contstyles h1:first-child,
.contstyles h2:first-child,
.contstyles h3:first-child,
.contstyles h4:first-child,
.contstyles h5:first-child,
.contstyles h6:first-child{
	margin-top: 0px;
}
/* Dachzeile (.font_h6) direkt ueber der Headline */
.contstyles .font_h6 + h1,
.contstyles .font_h6 + h2,
.contstyles .font_h6 + h3{
	margin-top: 0.15em;
}
.contstyles p.font_h6{
	margin-bottom: 0px;
}
.contstyles ul,
.contstyles ol{
	margin-top: 0.8em;
	margin-bottom: 0.8em;
	margin-left: 1.4em;
}
.contstyles li{
	margin-top: 0.3em;
	margin-bottom: 0.3em;
}
p.nomarg_top{
	margin-top: 0px;
}
p.nomarg_bot{
	margin-bottom: 0px;
}
p.nomarg{
	margin-top: 0px;
	margin-bottom: 0px;
}


/* ===========================================================================
   HILFSKLASSEN
   =========================================================================== */
.hidden{
	visibility: hidden;
}
.visible{
	visibility: visible;
}
.visually-hidden{
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}
.center{
	text-align: center;
}
.left{
	text-align: left;
}
.right{
	text-align: right;
}
.uppercase{
	text-transform: uppercase;
}
.lowercase{
	text-transform: lowercase;
}
.nocase{
	text-transform: none;
}
.underline{
	text-decoration: underline;
}
.nounderline,
.nounderline *:hover{
	text-decoration: none !important;
}
.inline{
	display: inline;
}
.relative{
	position: relative;
}
.block{
	display: block;
	position: relative;
}
/* clip statt hidden: schneidet genauso ab, ist aber kein Scroll-Container -
   position: sticky darin funktioniert weiter (z.B. .ddm_toc) */
.nooverflow{
	overflow: clip;
}
.overflow{
	overflow: visible;
}
.functionpad{
	padding-top: 1px;
	padding-bottom: 1px;
}
.fields-container,
.page-header{
	display: none;
}


/* ===========================================================================
   INHALTSBREITEN
   .main-container          1240px  Standard: Raster, Karten, Spalten
   .main-container.wide     1520px  breite Abschnitte: Slider, Galerien, Netzplan
   .main-container.narrow    800px  Lesebreite: reine Textseiten, Formulare
                                    (ca. 75-85 Zeichen je Zeile bei 18px)
   Der Seitenrand (--gutter) bleibt auf jeder Breite erhalten.
   =========================================================================== */
:root{
	--container: 1240px;
	--container-wide: 1520px;
	--container-narrow: 800px;
	--gutter: 32px;
}
.main-container{
	position: relative;
	width: var(--container);
	max-width: calc(100% - 2 * var(--gutter));
	margin-left: auto;
	margin-right: auto;
}
.main-container.wide{
	width: var(--container-wide);
}
.main-container.narrow{
	width: var(--container-narrow);
}
.main-container.fullheight{
	display: block;
	height: 100%;
}

/* vertikale Abstaende der Abschnitte (Werte: --pad-*, Standard = .widepad).
   Zwei Abschnitte mit gleichem Hintergrund teilen sich den Abstand: der
   zweite bekommt nur _bot. */
.extrawidepad{
	padding-top: var(--pad-xl);
	padding-bottom: var(--pad-xl);
}
.widepad{
	padding-top: var(--pad-l);
	padding-bottom: var(--pad-l);
}
.widepad_top{
	padding-top: var(--pad-l);
}
.widepad_bot{
	padding-bottom: var(--pad-l);
}
.regpad{
	padding-top: var(--pad-m);
	padding-bottom: var(--pad-m);
}
.regpad_top{
	padding-top: var(--pad-m);
}
.regpad_bot{
	padding-bottom: var(--pad-m);
}
.lowpad{
	padding-top: var(--pad-s);
	padding-bottom: var(--pad-s);
}
.lowpad_top{
	padding-top: var(--pad-s);
}
.lowpad_bot{
	padding-bottom: var(--pad-s);
}
/* Artikeltext (PAGE CONTENT im Override): Abstand wie .widepad,
   entfaellt bei leerem Artikel */
.autowidepad{
	padding-top: var(--pad-l);
	padding-bottom: var(--pad-l);
}
.autowidepad:empty{
	padding-top: 0px;
	padding-bottom: 0px;
}
.cont-block{
	position: relative;
	display: block;
	width: 100%;
}


/* ===========================================================================
   BILDER
   =========================================================================== */
img.cont_img{
	max-width: 100% !important;
	height: auto !important;
}
img.cont_img_limit{
	display: block;
	width: var(--container-narrow) !important;
	max-width: 100% !important;
	height: auto !important;
	margin-left: auto;
	margin-right: auto;
}
img.absimg{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
img.fullsize{
	width: 100%;
	display: block;
}
img.maxSize{
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 100%;
}
img.sizeFittings{
	display: block;
	position: relative;
	margin-left: auto;
	margin-right: auto;
}


/* ===========================================================================
   EBENEN
   =========================================================================== */
#topmenu-wrapper{
	z-index: 11;
}
.zindex6{
	z-index: 6;
}
.zindex5{
	z-index: 5;
}
.zindex4{
	z-index: 4;
}
.zindex3{
	z-index: 3;
}
#content-wrapper,
.zindex2{
	z-index: 2;
}
.cont-block,
.zindex1{
	z-index: 1;
}
.zeroindex{
	z-index: 0;
}


/* ===========================================================================
   UEBERGAENGE
   =========================================================================== */
img.fullsize{
	transition: all 500ms ease;
}
a{
	transition: color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.animated_children, .animated_children *{
	transition: all 200ms linear;
}
.nonanimated_children, .nonanimated_children *{
	transition: all 0ms linear;
}
@media (prefers-reduced-motion: reduce){
	*, *::before, *::after{
		transition-duration: 0ms !important;
		animation-duration: 1ms !important;
		animation-iteration-count: 1 !important;
		scroll-behavior: auto !important;
	}
}


/* ===========================================================================
   INHALT / LAYOUT-BAUSTEINE
   =========================================================================== */
#content-wrapper{
	overflow: visible;
}
#content-wrapper:focus{
	outline: none;
}
.contentspacer{
	display: block;
	position: relative;
	width: 100%;
	height: 90px;
}
.overlay_mask{
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0px;
	left: 0px;
}
.linespacer{
	display: block;
	position: relative;
	width: 100%;
	height: 1px;
	margin-top: 20px;
	margin-bottom: 20px;
	margin-left: auto;
	margin-right: auto;
	background-color: var(--color-line);
}
.linespacer.nomarg{
	margin: 0px;
}
.linespacer.narrow{
	width: var(--container-narrow);
	max-width: 100%;
}

/* Hintergrundbild eines Abschnitts (mit .bg_parallax in template.js) */
.section_bg{
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	z-index: 0;
	width: 100%;
	height: auto;
}

.flexwrap{
	display: flex;
	justify-content: space-between;
	flex-flow: row wrap;
}
.flexwrap.leftalign{
	justify-content: left;
	gap: 2%;
}
.flexbox{
	position: relative;
}
.flexbox._s10{
	width: 10%;
}
.flexbox._s15{
	width: 15%;
}
.flexbox._s20{
	width: 20%;
}
.flexbox._s25{
	width: 25%;
}
.flexbox._s30{
	width: 30%;
}
.flexbox._s35{
	width: 35%;
}
.flexbox._s40{
	width: 40%;
}
.flexbox._s45{
	width: 45%;
}
.flexbox._s47{
	width: 47%;
}
.flexbox._s49{
	width: 49%;
}
.flexbox._half,
.flexbox_half{
	width: 48%;
}
.flexbox._s50{
	width: 50%;
}
.flexbox._s60{
	width: 60%;
}
.flexbox._s65{
	width: 65%;
}
.flexbox._s70{
	width: 70%;
}
.flexbox._s75{
	width: 75%;
}
.flexbox._s80{
	width: 80%;
}
.flexbox._s90{
	width: 90%;
}
.flexbox._full{
	width: 100%;
}
.flexbox_third{
	width: 31%;
}

.linkoverlay{
	position: absolute !important;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	z-index: 4;
}


/* ===========================================================================
   SCHALTFLAECHEN
   Variante mit Link: <div class="contentbutton _primary"><a href="">Text</a></div>
   Variante als <button class="contentbutton _primary">Text</button>.
     _primary    Rot, weisse Schrift - die eine Hauptaktion je Abschnitt
     _secondary  roter Rahmen, rote Schrift - Alternative
     _inverse    weiss, rote Schrift - auf Hero, rotem Band, Footer
     _outline    weisser Rahmen, weisse Schrift - Alternative auf dunkel
     _small (40px) / _large (56px, Hero); Standard 48px
   Icon: <span class="ddm_icon i_download"></span> vor oder nach dem Text;
   ein Pfeil (.i_arrow-right) am Ende rueckt beim Ueberfahren 4px weiter.
   Hoechstens zwei Schaltflaechen nebeneinander (.ddm_buttons), mobil
   untereinander in voller Breite. Die alten Farbklassen (.red_bg .white,
   .bordered) funktionieren weiterhin.
   =========================================================================== */
.contentbutton{
	--btn-h: 48px;
	--btn-pad: 24px;
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	z-index: 1;
	min-height: var(--btn-h);
	padding: 0px var(--btn-pad);
	border: 2px solid transparent;
	border-radius: var(--radius-s);
	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);
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.contentbutton._small{
	--btn-h: 40px;
	--btn-pad: 16px;
}
.contentbutton._large{
	--btn-h: 56px;
	--btn-pad: 32px;
}
.contentbutton.abs{
	position: absolute;
}
.contentbutton.contentbutton a{
	color: inherit;
}
/* Link fuellt die ganze Schaltflaeche */
.contentbutton a{
	display: flex;
	align-items: center;
	justify-content: center;
	gap: inherit;
	min-height: calc(var(--btn-h) - 4px);
	margin: 0px calc(-1 * var(--btn-pad));
	padding: 0px var(--btn-pad);
	text-decoration: none;
}
.contentbutton a::after{
	display: none !important;
}
.contentbutton._primary,
.contentbutton.red_bg{
	background-color: var(--color-red);
	border-color: var(--color-red);
	color: var(--color-white);
}
.contentbutton._primary:hover,
.contentbutton._primary:focus-within,
.contentbutton.red_bg:hover,
.contentbutton.red_bg:focus-within{
	background-color: var(--color-dred);
	border-color: var(--color-dred);
}
.contentbutton._secondary{
	background-color: transparent;
	border-color: var(--color-red);
	color: var(--color-red);
}
.contentbutton._secondary:hover,
.contentbutton._secondary:focus-within{
	background-color: var(--color-red-tint);
}
.contentbutton._inverse{
	background-color: var(--color-white);
	border-color: var(--color-white);
	color: var(--color-red);
}
.contentbutton._inverse:hover,
.contentbutton._inverse:focus-within{
	background-color: var(--color-red-tint);
	border-color: var(--color-red-tint);
}
.contentbutton._outline{
	background-color: transparent;
	border-color: var(--color-white);
	color: var(--color-white);
}
.contentbutton._outline:hover,
.contentbutton._outline:focus-within{
	background-color: rgba(255, 255, 255, 0.12);
}
.contentbutton.bordered{
	border-width: 2px;
	border-style: solid;
}
.contentbutton:disabled,
.contentbutton._disabled{
	background-color: var(--color-g);
	border-color: var(--color-g);
	color: var(--color-muted);
	cursor: not-allowed;
}
.contentbutton .i_arrow-right,
.ddm_textlink .i_arrow-right{
	transition: transform var(--dur-fast) var(--ease);
}
.contentbutton:hover .i_arrow-right,
.ddm_textlink:hover .i_arrow-right{
	transform: translateX(4px);
}
/* Gruppe aus hoechstens zwei Schaltflaechen */
.ddm_buttons{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-4);
	margin-top: var(--space-5);
}

/* Textlink mit Pfeil: "Weiterlesen", "Alle Meldungen" */
.ddm_textlink{
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	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-red);
}
.ddm_ondark .ddm_textlink{
	color: var(--color-white);
}
.linehover_links a.ddm_textlink::after{
	display: none;
}


/* ===========================================================================
   LINKS MIT LINIE
   Standard fuer alle Inhaltsabschnitte: jeder Abschnitt traegt
   .linehover_links. Die Linie waechst beim Ueberfahren von links ein und
   nimmt die Linkfarbe an (currentColor) - eigene Farbregeln je Hintergrund
   sind dadurch nicht noetig.
   =========================================================================== */
.linehover_links a,
.linehover_links a:hover{
	position: relative;
	text-decoration: none;
}
.linehover_links a::after{
	content: '';
	position: absolute;
	left: 0;
	bottom: -1px;
	height: 1px;
	width: 0;
	background-color: currentColor;
	transition: width 300ms ease;
}
.linehover_links a:hover::after,
.linehover_links a:focus-visible::after{
	width: 100%;
}
/* Links mitten im Fliesstext sind zusaetzlich unterstrichen - die Farbe
   allein reicht als Unterscheidungsmerkmal nicht (WCAG 1.4.1). */
.contstyles p a,
.contstyles li a{
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}
.contstyles p a:hover,
.contstyles li a:hover{
	text-decoration-color: transparent;
}
.linehover_links .nolinehover::after,
.linehover_links a:has(img)::after{
	display: none;
}


/* ===========================================================================
   FOKUS UND SPRUNGLINK
   =========================================================================== */
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible{
	outline: 3px solid var(--color-focus);
	outline-offset: 2px;
}
.ddm_skip{
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 120;
	padding: 10px 18px;
	background-color: var(--color-red);
	color: var(--color-white);
	font-family: var(--font-head);
	font-weight: var(--weight-ui);
	font-size: var(--fs-ui);
	transform: translateY(-200%);
	transition: transform 200ms ease;
}
.ddm_skip:focus{
	transform: translateY(0px);
}


/* ===========================================================================
   KLARO (Einwilligung)
   Farben und Schrift stellt js/config.js ueber styling ein; hier nur die
   Stellen, die Klaro nicht ueber Variablen anbietet.
   =========================================================================== */
.klaro .cookie-notice,
.klaro .cookie-modal{
	font-family: var(--font-text);
}
.klaro .cm-link.cn-learn-more,
.klaro .cookie-notice a,
.klaro .cookie-modal a{
	color: var(--color-red) !important;
	text-decoration: underline;
}
.klaro .cm-btn{
	font-family: var(--font-head);
	font-weight: var(--weight-ui);
}
.klaro .cm-btn.cm-btn-danger.cn-decline{
	background-color: var(--color-dg) !important;
}
.klaro .cm-btn.cm-btn-success,
.klaro .cm-btn.cm-btn-success-var{
	background-color: var(--color-red) !important;
	color: var(--color-white) !important;
}


/* ===========================================================================
   EINBETTUNG MIT EINWILLIGUNG (Karte, Video)
   Markup aus ddm_renderConsentEmbed() im Artikel-Override, Logik in
   ddm_initConsentEmbeds() (functions.js). Ohne Freigabe steht der
   Hinweiskasten ueber dem leeren Rahmen; mit Freigabe (._granted) nur der
   Rahmen.
   =========================================================================== */
.ddm_embed{
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	background-color: var(--color-lg2);
	border-radius: var(--radius-m);
	overflow: hidden;
}
.ddm_embed_frame{
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	border: 0px;
}
.ddm_embed_notice{
	position: absolute;
	inset: 0px;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 24px;
	text-align: center;
	background-color: var(--color-lg2);
	color: var(--color-dg2);
	overflow-y: auto;
	box-sizing: border-box;
}
.ddm_embed_notice p{
	max-width: 560px;
	margin: 0px;
}
.ddm_embed_settings{
	cursor: pointer;
	text-decoration: underline;
}
.ddm_embed._granted .ddm_embed_notice{
	display: none;
}


/* ===========================================================================
   DDM MODAL
   Markup: .ddm_modal[data-modalid] > .ddm_modal_contwrap > .ddm_modal_close
   + .ddm_modal_cont. Geoeffnet von .ddm_modal_activator mit gleichem
   data-modalid, Logik in functions.js.
   =========================================================================== */
.ddm_modal{
	position: fixed;
	top: 0px;
	left: 0px;
	z-index: 100;
	width: 100%;
	height: 0px;
	opacity: 0;
	overflow: hidden;
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	background: rgba(29, 33, 39, 0.45);
}
.ddm_modal.active{
	height: 100%;
	opacity: 1;
}
.ddm_modal_contwrap{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 800px;
	max-width: 95%;
	height: 800px;
	max-height: 90%;
	border-radius: var(--radius-m);
	overflow: hidden;
}
.ddm_modal_close{
	position: absolute;
	top: 15px;
	right: 25px;
	z-index: 4;
	width: 40px;
	height: 40px;
	border-radius: 50px;
	cursor: pointer;
}
.ddm_modal_close:hover{
	filter: drop-shadow(0 0 6px rgba(0,0,0,0.45)) brightness(1.1);
}
.ddm_modal_close span{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	text-transform: uppercase;
	pointer-events: none;
	font-weight: var(--weight-text-strong);
}
.ddm_modal_cont{
	position: absolute;
	top: 0px;
	left: 0px;
	display: block;
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	padding: 40px;
	overflow-x: hidden;
	overflow-y: scroll;
}


/* ===========================================================================
   BAUSTEINE
   Klassen der Inhaltselemente laut docs/design-guideline.md (Kapitel 6).
   Module und Overrides bauen ihr Markup aus diesen Klassen und setzen
   keine eigenen Schriftgroessen oder Hexwerte. Anpassungen fuer kleinere
   Bildschirme stehen in responsive.css.
   =========================================================================== */


/* ===== RASTER =====
   12 Spalten im Container (Nachfolger der FluidCols):
   <div class="ddm_grid"><div class="col_4">..</div><div class="col_8">..</div></div>
   Standardaufteilungen: 12, 6/6, 4/8, 8/4, 4/4/4, 3/3/3/3, 2er nur fuer Logos/Icons. */
.ddm_grid{
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	gap: var(--grid-gap);
}
.ddm_grid._center{
	align-items: center;
}
.col_2{ grid-column: span 2; }
.col_3{ grid-column: span 3; }
.col_4{ grid-column: span 4; }
.col_5{ grid-column: span 5; }
.col_6{ grid-column: span 6; }
.col_7{ grid-column: span 7; }
.col_8{ grid-column: span 8; }
.col_9{ grid-column: span 9; }
.col_12{ grid-column: span 12; }


/* ===== FUG-SCHRAEGE =====
   Ein Winkel (--slant), Kanten fallen von links nach rechts. Nur auf
   Flaechen - Inhalte werden nie gedreht. Hoechstens eine schraege Kante
   je Bildschirmhoehe.
   .ddm_slant_bot   untere Kante eines vollbreiten Abschnitts (Hero, rotes Band)
   .ddm_slant_top   obere Kante (Footer-Serviceband)
   .ddm_under_slant fuer den Abschnitt NACH .ddm_slant_bot, wenn er einen
                    eigenen Hintergrund hat: schiebt ihn unter die Schraege,
                    damit kein weisser Keil entsteht.
   .ddm_plane       schraege Hintergrundflaeche hinter einem Bild/Teaser
                    (_red, _left); Winkel ueber skewY, daher breitenunabhaengig. */
.ddm_slant_bot{
	position: relative;
	z-index: 2;
	clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - var(--slant-h)));
	padding-bottom: calc(var(--pad-l) + var(--slant-h));
}
.ddm_slant_top{
	position: relative;
	clip-path: polygon(0 0, 100% var(--slant-h), 100% 100%, 0 100%);
	padding-top: calc(var(--pad-l) + var(--slant-h));
}
.ddm_under_slant{
	margin-top: calc(-1 * var(--slant-h));
	padding-top: calc(var(--pad-l) + var(--slant-h));
}
.ddm_plane{
	position: relative;
	isolation: isolate;
}
.ddm_plane::before{
	content: '';
	position: absolute;
	z-index: -1;
	top: 10%;
	bottom: 10%;
	left: 20%;
	right: -8%;
	background-color: var(--color-lg);
	transform: skewY(var(--slant));
}
.ddm_plane._left::before{
	left: -8%;
	right: 20%;
}
.ddm_plane._red::before{
	background-color: var(--color-red);
}
/* _grey: fuer Abschnitte mit lg-Hintergrund (dort waere die Standardflaeche unsichtbar) */
.ddm_plane._grey::before{
	background-color: var(--color-g);
}


/* ===== MEDIEN =====
   <figure class="ddm_media _3x2"><img ...></figure> + optional
   <figcaption class="ddm_caption">. Bilder immer object-fit: cover,
   Fokuspunkt bei Bedarf per style="object-position: 50% 30%". */
.ddm_media{
	position: relative;
	display: block;
	overflow: hidden;
	border-radius: var(--radius-m);
	background-color: var(--color-lg2);
}
.ddm_media > img,
.ddm_media > video,
.ddm_media > picture > img{
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.ddm_media._flat{
	border-radius: 0px;
}
.ddm_media._21x9{ aspect-ratio: 21 / 9; }
.ddm_media._16x9{ aspect-ratio: 16 / 9; }
.ddm_media._3x2{ aspect-ratio: 3 / 2; }
.ddm_media._4x3{ aspect-ratio: 4 / 3; }
.ddm_media._1x1{ aspect-ratio: 1 / 1; }
.ddm_caption{
	margin-top: var(--space-2);
	font-size: var(--fs-small);
	line-height: var(--lh-small);
	color: var(--color-meta);
}
/* Platzhalter, wenn kein Bild vorhanden ist (z.B. News): Linienmuster im
   FUG-Winkel statt Stockfoto */
.ddm_placeholder{
	background-color: var(--color-lg);
	background-image: repeating-linear-gradient(calc(180deg - var(--slant)), transparent 0px, transparent 22px, var(--color-g) 22px, var(--color-g) 24px);
}


/* ===== BREADCRUMB =====
   <nav class="ddm_breadcrumb" aria-label="Brotkrumen"><ol><li><a>..</a></li>
   ..<li aria-current="page">..</li></ol></nav> */
.ddm_breadcrumb ol{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-1) var(--space-2);
	list-style: none;
	font-size: var(--fs-small);
	line-height: var(--lh-small);
	color: var(--color-meta);
}
.ddm_breadcrumb li{
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
}
.ddm_breadcrumb li + li::before{
	content: '';
	width: 14px;
	height: 14px;
	background-color: var(--color-mg);
	-webkit-mask: url("../svg/tabler/chevron-right.svg") center / contain no-repeat;
	mask: url("../svg/tabler/chevron-right.svg") center / contain no-repeat;
}
.ddm_breadcrumb a,
.contstyles .ddm_breadcrumb a{
	color: inherit;
	text-decoration: none;
}
.ddm_breadcrumb a:hover{
	color: var(--color-red);
}
.ddm_breadcrumb [aria-current]{
	color: var(--color-red);
}


/* ===== SEITENKOPF (Unterseiten, Intro-Stil "normal") =====
   Ausgabe ueber ddm_renderIntro() (html/com_content/article/default.php)
   aus den Feldern der Gruppe "Intro"; ohne Intro-Bild kein Seitenkopf.
   <header class="ddm_pagehead">
     <div class="main-container wide"><div class="ddm_pagehead_media ddm_parallax"><img></div></div>
     <div class="main-container"><div class="ddm_pagehead_card">Dachzeile, H1, Lead</div></div>
   </header>
   Bildband 16:5 (passt zu den 1460x500-Kopfbildern), hoechstens 480px hoch -
   bewusst ruhiger als der Hero der Startseite. Die weisse Titelkarte
   ueberlappt das Bild um 64px.
   Ohne Bild (spaeter Formulare, News): .ddm_pagehead._plain (graues Band) */
.ddm_pagehead{
	position: relative;
}
/* Abstand zum Header wie seitlich: das Bild steht als Flaeche im Raster */
.ddm_pagehead > .main-container.wide{
	padding-top: var(--gutter);
}
.ddm_pagehead_media{
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 5;
	max-height: 480px;
	overflow: hidden;
	background-color: var(--color-lg);
}
.ddm_pagehead_card{
	position: relative;
	z-index: 2;
	max-width: 760px;
	margin-top: calc(-1 * var(--space-8));
	padding: var(--space-6) var(--space-7) var(--space-6) var(--space-7);
	background-color: var(--color-white);
	box-shadow: var(--shadow-2);
}
.ddm_pagehead_card h1,
.ddm_pagehead._plain h1{
	margin-top: var(--space-2);
}
.ddm_pagehead_card .font_l,
.ddm_pagehead._plain .font_l{
	margin-top: var(--space-4);
}
.ddm_pagehead._plain{
	background-color: var(--color-lg);
	padding-top: var(--pad-l);
	padding-bottom: var(--pad-m);
}
.ddm_pagehead + .ddm_breadcrumb,
.ddm_pagehead .ddm_breadcrumb{
	margin-bottom: var(--space-5);
}


/* ===== HERO (Startseite, Intro-Stil "startseite") =====
   Ausgabe ueber ddm_renderIntro(), Buttons aus dem Feld "Buttons" (max. 2).
   <header class="ddm_hero ddm_slant_bot ddm_ondark linehover_links">
     <div class="ddm_hero_img ddm_parallax"><img></div><div class="overlay_grad"></div>
     <div class="main-container"><div class="ddm_hero_cont">Dachzeile, H1 mit
     .ddm_keyword, Lead, .ddm_buttons (_inverse / _outline, _large)</div></div>
   </header>
   Kein Slider. */
.ddm_hero{
	position: relative;
	display: flex;
	align-items: center;
	min-height: min(82vh, 760px);
	padding-top: var(--pad-l);
	background-color: var(--color-ink);
	overflow: hidden;
}
.ddm_hero_img{
	position: absolute;
	inset: 0px;
}
.ddm_hero_img img{
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.ddm_hero > .main-container{
	z-index: 2;
}
.ddm_hero_cont{
	max-width: 720px;
}
.ddm_hero_cont h1,
.ddm_hero_cont .font_h1{
	margin-top: var(--space-3);
}
.ddm_hero_cont .font_l{
	margin-top: var(--space-5);
}
.ddm_hero_cont .ddm_buttons{
	margin-top: var(--space-6);
}

/* Parallaxe fuer Intro-Bilder: das Bild im Rahmen (.ddm_parallax, braucht
   eine Positionierung) laeuft beim Scrollen langsamer mit. Hoehe und
   Versatz setzt ddm_initParallax() (js/template.js); aus bis 860px und bei
   prefers-reduced-motion - dann fuellt das Bild einfach den Rahmen. */
.ddm_parallax{
	overflow: hidden;
}
.ddm_parallax > img{
	position: absolute;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.ddm_parallax.ddm_parallax_on > img{
	top: calc(-1 * var(--parallax-range, 0px));
	height: calc(100% + var(--parallax-range, 0px));
	will-change: transform;
}


/* ===== KARTEN =====
   Teaser-Karte (FugBox/FugImageBox, News):
   <article class="ddm_card"><div class="ddm_card_img"><img></div>
     <div class="ddm_card_body"><p class="ddm_meta">..</p><h3 class="font_h4">..</h3>
     <p>..</p><span class="ddm_textlink">Weiterlesen ..</span></div>
     <a class="linkoverlay" href=".." aria-label="..."></a></article>
   _bordered: Rahmen statt Schatten (auf grauen Flaechen). */
.ddm_card{
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	background-color: var(--color-white);
	border-radius: var(--radius-m);
	box-shadow: var(--shadow-1);
	overflow: hidden;
	transition: box-shadow var(--dur) var(--ease);
}
.ddm_card._bordered{
	box-shadow: none;
	border: 1px solid var(--color-line);
}
.ddm_card:hover{
	box-shadow: var(--shadow-2);
}
.ddm_card:has(.linkoverlay:focus-visible){
	outline: 3px solid var(--color-focus);
	outline-offset: 2px;
}
.ddm_card .linkoverlay:focus-visible{
	outline: none;
}
.ddm_card_img{
	position: relative;
	aspect-ratio: 3 / 2;
	overflow: hidden;
	background-color: var(--color-lg2);
}
.ddm_card_img img{
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--dur) var(--ease);
}
.ddm_card:hover .ddm_card_img img{
	transform: scale(1.03);
}
.ddm_card_body{
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: var(--space-2);
	padding: var(--space-5);
	hyphens: auto;
	-webkit-hyphens: auto;
}
.ddm_card_body > .ddm_textlink{
	margin-top: auto;
	padding-top: var(--space-3);
}
.ddm_card:hover .ddm_textlink .i_arrow-right{
	transform: translateX(4px);
}

/* Schnellzugriff (Zaehlerstand, Stoerung, Anschluss, Planauskunft):
   <a class="ddm_quicklink" href=".."><span class="ddm_icon i_gauge"></span>
   Zaehlerstand melden<span class="ddm_icon i_arrow-right"></span></a> */
.ddm_quicklinks{
	position: relative;
	z-index: 3;
	margin-top: calc(-1 * (var(--slant-h) + var(--space-7)));
}
/* doppelte Klasse: schlaegt .red_links a */
.ddm_quicklink.ddm_quicklink{
	display: flex;
	align-items: center;
	gap: var(--space-4);
	height: 100%;
	min-height: 120px;
	padding: var(--space-5);
	background-color: var(--color-white);
	border-radius: var(--radius-m);
	box-shadow: var(--shadow-1);
	font-family: var(--font-head);
	font-weight: var(--weight-head);
	font-size: var(--fs-h5);
	line-height: var(--lh-h5);
	color: var(--color-ink);
	transition: box-shadow var(--dur) var(--ease), color var(--dur-fast) var(--ease);
}
.ddm_quicklink .ddm_icon{
	color: var(--color-red);
}
.ddm_quicklink .ddm_icon:first-child{
	width: 32px;
	height: 32px;
}
.ddm_quicklink .i_arrow-right{
	margin-left: auto;
	transition: transform var(--dur-fast) var(--ease);
}
.ddm_quicklink.ddm_quicklink:hover{
	box-shadow: var(--shadow-2);
	color: var(--color-red);
}
.ddm_quicklink:hover .i_arrow-right{
	transform: translateX(4px);
}
.linehover_links a.ddm_quicklink::after{
	display: none;
}
.ddm_quicklinks ul{
	list-style: none;
}
.ddm_quicklink_text{
	display: flex;
	flex-direction: column;
}
/* Zusatzzeile, z.B. Telefonnummer bei "Stoerung melden" */
.ddm_quicklink_extra{
	margin-top: var(--space-1);
	font-family: var(--font-text);
	font-weight: var(--weight-text);
	font-size: var(--fs-small);
	line-height: var(--lh-small);
	color: var(--color-meta);
}

/* Grosser Teaser: Bild und Text 6/6, Seiten wechseln je Zeile (_reverse).
   Das Bild kann auf einer schraegen Flaeche liegen (.ddm_plane). */
.ddm_feature{
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--space-8);
	align-items: center;
}
.ddm_feature + .ddm_feature{
	margin-top: var(--pad-l);
}
.ddm_feature._reverse .ddm_feature_media{
	order: 2;
}

/* Eckdaten im Teaser (Dauer, Gruppengroesse, Ort): Symbol + kurzer Text
   <ul class="ddm_facts"><li><span class="ddm_icon i_clock"></span>ca. 2 Stunden</li></ul> */
.ddm_facts.ddm_facts{
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3) var(--space-6);
	margin: var(--space-5) 0px 0px 0px;
	list-style: none;
}
.ddm_facts.ddm_facts > li{
	display: flex;
	align-items: center;
	gap: var(--space-2);
	margin: 0px;
	color: var(--color-dg2);
}
.ddm_facts .ddm_icon{
	color: var(--color-red);
}

/* Broschueren-Titelseiten (Infomaterial): zwei Hochformate, das zweite
   versetzt davor. Bilder in ihrem eigenen Seitenverhaeltnis, ohne Beschnitt.
   <div class="ddm_brochures"><img ..><img ..></div> */
.ddm_brochures{
	position: relative;
	max-width: 440px;
	margin: 0px auto;
	padding: var(--space-6) 0px var(--space-8) 0px;
}
.ddm_brochures img{
	display: block;
	height: auto;
	background-color: var(--color-white);
	border-radius: var(--radius-s);
	box-shadow: var(--shadow-2);
}
.ddm_brochures img:first-child{
	width: 58%;
}
.ddm_brochures img + img{
	position: absolute;
	right: 0px;
	bottom: 0px;
	width: 48%;
}

/* Abschnittskopf: Dachzeile + H2 links, optional Buttons/Textlink rechts
   <div class="ddm_sectionhead"><div>..h6, h2..</div><div class="ddm_buttons">..</div></div> */
.ddm_sectionhead{
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--space-5) var(--space-7);
	margin-bottom: var(--space-7);
}
.ddm_sectionhead > .ddm_buttons{
	margin-top: 0px;
}
/* Kartenraster als Liste */
.ddm_cardlist{
	list-style: none;
}


/* ===== META / TAGS ===== */
.ddm_meta{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-2) var(--space-4);
	font-size: var(--fs-small);
	line-height: var(--lh-small);
	color: var(--color-meta);
}
.ddm_tag{
	display: inline-block;
	padding: 2px 10px;
	border-radius: var(--radius-s);
	background-color: var(--color-lg);
	color: var(--color-dg2);
	font-family: var(--font-head);
	font-weight: var(--weight-ui);
	font-size: var(--fs-small);
	line-height: var(--lh-small);
}
.ddm_tag._red{
	background-color: var(--color-red-tint);
	color: var(--color-red);
}
mark,
.ddm_hit{
	background-color: var(--color-red-tint);
	color: inherit;
}


/* ===== ANSPRECHPARTNER (FugPerson, FugContactPersons) =====
   .ddm_person > .ddm_person_img (img oder Monogramm-Text) + h3.font_h5
   + p.ddm_person_role + ul.ddm_person_contact (li > a > .ddm_icon + Text) */
.ddm_person{
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-3);
	height: 100%;
	padding: var(--space-5);
	background-color: var(--color-white);
	border: 1px solid var(--color-line);
	border-radius: var(--radius-m);
}
.ddm_person_img{
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 96px;
	height: 96px;
	border-radius: 50%;
	object-fit: cover;
	background-color: var(--color-lg);
	color: var(--color-dg2);
	font-family: var(--font-head);
	font-weight: var(--weight-head);
	font-size: var(--fs-h4);
	overflow: hidden;
}
.ddm_person_role{
	margin-top: calc(-1 * var(--space-2));
	color: var(--color-meta);
}
.ddm_person_contact{
	list-style: none;
}
.ddm_person_contact a{
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	min-height: 32px;
}
.ddm_person_contact .ddm_icon{
	color: var(--color-red);
}


/* ===== KENNZAHLEN (Statistik) =====
   <ul class="ddm_figures [_divided]"><li class="ddm_figure"><span class="ddm_figure_value">..</span>
   <span class="ddm_figure_label">..</span></li></ul>; mit Hochzaehlen: ddm_renderFigure()
   (article/default.php) + .counter_count (viewports.js). */
.ddm_figures{
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: var(--grid-gap);
	list-style: none;
}
.ddm_figure_value{
	display: block;
	font-family: var(--font-head);
	font-weight: var(--weight-head);
	font-size: var(--fs-h1);
	line-height: var(--lh-h1);
	letter-spacing: var(--ls-head);
	font-variant-numeric: tabular-nums;
	color: var(--color-red);
}
.ddm_ondark .ddm_figure_value{
	color: var(--color-white);
}
/* _divided: Linie ueber den Zahlen und zwischen den Spalten (rotes Band) */
.ddm_figures._divided{
	margin-top: var(--space-8);
	padding-top: var(--space-7);
	border-top: 1px solid var(--color-line);
}
.ddm_figures._divided > .ddm_figure + .ddm_figure{
	padding-left: var(--grid-gap);
	border-left: 1px solid var(--color-line);
}
.ddm_ondark .ddm_figures._divided,
.ddm_ondark .ddm_figures._divided > .ddm_figure{
	border-color: rgba(255, 255, 255, 0.3);
}
/* Vorsatz (ca., ueber) und Einheit kleiner als die Zahl */
.ddm_figure_affix,
.ddm_figure_unit{
	font-size: var(--fs-h4);
	line-height: var(--lh-h4);
	letter-spacing: normal;
}
.ddm_figure_label{
	display: block;
	margin-top: var(--space-2);
	font-size: var(--fs-small);
	line-height: var(--lh-small);
	color: var(--color-meta);
	/* lange Komposita in schmalen Spalten (z.B. Heisswasserdruckspeicher) */
	hyphens: auto;
	overflow-wrap: break-word;
}


/* ===== ZEITLEISTE (Meilensteine) =====
   <ol class="ddm_timeline [_alternate]"><li><span class="ddm_timeline_year">1971</span>
   <div class="ddm_timeline_text">..</div></li></ol>
   _alternate: links/rechts im Wechsel (ab 860px, darunter einspaltig) */
.ddm_timeline{
	position: relative;
	list-style: none;
	padding-left: var(--space-7);
}
.ddm_timeline::before{
	content: '';
	position: absolute;
	top: 8px;
	bottom: 8px;
	left: 7px;
	width: 2px;
	background-color: var(--color-line);
}
.ddm_timeline > li{
	position: relative;
	padding-bottom: var(--space-6);
}
.ddm_timeline > li:last-child{
	padding-bottom: 0px;
}
.ddm_timeline > li::before{
	content: '';
	position: absolute;
	top: 8px;
	left: calc(-1 * var(--space-7));
	width: 16px;
	height: 16px;
	border: 3px solid var(--color-red);
	border-radius: 50%;
	background-color: var(--color-white);
}
.ddm_timeline_year{
	display: block;
	font-family: var(--font-head);
	font-weight: var(--weight-head);
	font-size: var(--fs-h4);
	line-height: var(--lh-h4);
	color: var(--color-red);
}
.ddm_timeline_text{
	margin-top: var(--space-2);
}
.ddm_timeline._alternate{
	padding-left: 0px;
}
.ddm_timeline._alternate::before{
	left: calc(50% - 1px);
}
.ddm_timeline._alternate > li{
	width: 50%;
	padding-right: var(--space-7);
	text-align: right;
}
.ddm_timeline._alternate > li::before{
	left: auto;
	right: -8px;
}
.ddm_timeline._alternate > li:nth-child(even){
	margin-left: 50%;
	padding-right: 0px;
	padding-left: var(--space-7);
	text-align: left;
}
.ddm_timeline._alternate > li:nth-child(even)::before{
	right: auto;
	left: -8px;
}


/* ===== PROZESS-SCHRITTE (z.B. Anschluss anfragen -> Inbetriebnahme) =====
   <ol class="ddm_steps"><li><h3 class="font_h5">..</h3><p>..</p></li></ol>
   Waagerecht ab 1000px, darunter senkrecht (responsive.css). */
.ddm_steps{
	display: grid;
	grid-auto-columns: minmax(0, 1fr);
	grid-auto-flow: column;
	gap: var(--space-6);
	list-style: none;
	counter-reset: ddm_step;
}
.ddm_steps > li{
	position: relative;
	padding-top: calc(48px + var(--space-4));
	counter-increment: ddm_step;
}
.ddm_steps > li::before{
	content: counter(ddm_step);
	position: absolute;
	top: 0px;
	left: 0px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border: 2px solid var(--color-red);
	border-radius: 50%;
	background-color: var(--color-white);
	font-family: var(--font-head);
	font-weight: var(--weight-head);
	font-size: var(--fs-h5);
	color: var(--color-red);
}
.ddm_steps > li:not(:last-child)::after{
	content: '';
	position: absolute;
	top: 23px;
	left: calc(48px + var(--space-3));
	right: calc(-1 * var(--space-6) + var(--space-3));
	height: 2px;
	background-color: var(--color-line);
}
.ddm_steps p{
	margin-top: var(--space-2);
}


/* ===== DOWNLOADS =====
   <ul class="ddm_downloads"><li><a class="ddm_download" href="..pdf">
   <span class="ddm_icon i_file-type-pdf _24"></span><span class="ddm_download_text">
   <span class="ddm_download_title">Preisblatt 2026</span>
   <span class="ddm_download_meta">PDF · 245 KB · Stand 01.2026</span></span>
   <span class="ddm_icon i_download _24"></span></a></li></ul> */
.ddm_downloads{
	list-style: none;
	border-top: 1px solid var(--color-line);
}
.contstyles .ddm_downloads{
	margin-left: 0px;
}
.ddm_downloads > li{
	margin: 0px;
	border-bottom: 1px solid var(--color-line);
}
/* doppelte Klasse: schlaegt .red_links a */
.ddm_download.ddm_download{
	display: flex;
	align-items: center;
	gap: var(--space-4);
	padding: var(--space-4) var(--space-3);
	color: var(--color-ink);
	text-decoration: none !important;
}
.ddm_download:hover{
	background-color: var(--color-lg2);
}
.ddm_download > .ddm_icon{
	color: var(--color-red);
}
.ddm_download > .ddm_icon:last-child{
	margin-left: auto;
}
.ddm_download_title{
	display: block;
	font-weight: var(--weight-text-strong);
}
.ddm_download.ddm_download:hover .ddm_download_title{
	color: var(--color-red);
}
.ddm_download_meta{
	display: block;
	font-size: var(--fs-small);
	line-height: var(--lh-small);
	color: var(--color-meta);
}
.linehover_links a.ddm_download::after{
	display: none;
}
/* optionale Beschreibung unter dem Titel (Downloads-Komponente) */
.ddm_download_desc{
	display: block;
	margin-top: 2px;
	font-size: var(--fs-small);
	line-height: var(--lh-small);
	color: var(--color-dg);
}
.ddm_download_desc + .ddm_download_meta{
	margin-top: var(--space-1);
}
/* Dateilisten der Downloads-Komponente (Marker {downloads:pfad}):
   <div class="ddm_downloadgroups"><section class="ddm_downloadgroup" aria-labelledby="downloads-formulare">
   <div class="ddm_downloadgroup_head"><h3 id="downloads-formulare" class="font_h4">Formulare</h3>
   <p class="ddm_meta">3 Dokumente</p></div><ul class="ddm_downloads">..</ul></section></div>
   Kopf 4/12 links (klebt unter dem Header), Liste 8/12 rechts; <= 860px untereinander. */
.ddm_downloadgroups{
	display: flex;
	flex-direction: column;
	gap: var(--space-8);
}
.ddm_downloads + .ddm_downloadgroups{
	margin-top: var(--space-8);
}
.ddm_downloadgroup{
	display: grid;
	grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
	column-gap: var(--grid-gap);
	align-items: start;
}
.ddm_downloadgroup_head{
	position: sticky;
	top: calc(var(--hdr-h-small) + var(--space-5));
	padding-top: var(--space-4);
	border-top: 2px solid var(--color-red);
}
.ddm_downloadgroup_head > h3{
	margin: 0px;
}
.ddm_downloadgroup_text{
	margin-top: var(--space-2);
	font-size: var(--fs-small);
	line-height: var(--lh-small);
}
.ddm_downloadgroup_text > :last-child{
	margin-bottom: 0px;
}
.ddm_downloadgroup_head > .ddm_meta{
	margin: var(--space-2) 0px 0px 0px;
}
/* Titelseiten-Karten (Downloads mit Vorschaubild, z.B. Prospekte):
   <ul class="ddm_grid ddm_cardlist ddm_covers"><li class="col_4"><a class="ddm_cover" href="..pdf">
   <span class="ddm_cover_img"><img></span><span class="ddm_download_title">..</span>
   <span class="ddm_download_meta">..</span></a></li></ul>
   Titelseite unbeschnitten auf lg-Flaeche, Hover: Karte hebt sich, Titel rot. */
.ddm_cover.ddm_cover{
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	height: 100%;
	color: var(--color-ink);
	text-decoration: none !important;
}
.linehover_links a.ddm_cover::after{
	display: none;
}
.ddm_cover_img{
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 4 / 5;
	overflow: hidden; /* haelt das Seitenverhaeltnis, auch bei hohen Titelseiten */
	margin-bottom: var(--space-3);
	padding: var(--space-6);
	border-radius: var(--radius-m);
	background-color: var(--color-lg);
	transition: background-color var(--dur) var(--ease);
}
.ddm_cover_img > img{
	display: block;
	width: auto;
	max-width: 100%;
	height: auto;
	max-height: 100%;
	box-shadow: var(--shadow-1);
	transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.ddm_cover:hover .ddm_cover_img > img{
	box-shadow: var(--shadow-2);
	transform: translateY(-4px);
}
.ddm_cover.ddm_cover:hover .ddm_download_title{
	color: var(--color-red);
}
.ddm_cover .ddm_download_meta .ddm_icon{
	color: var(--color-red);
}

/* Platzhalter fuer ein spaeter eingebundenes Modul (Marker {platzhalter:Name}):
   gestrichelter Rahmen, Werkzeug-Symbol, Name + Hinweis. Nur Entwicklungsstand. */
.ddm_pending{
	display: flex;
	align-items: flex-start;
	gap: var(--space-4);
	margin: var(--space-6) 0px;
	padding: var(--space-6);
	border: 2px dashed var(--color-line);
	border-radius: var(--radius-m);
	background-color: var(--color-lg2);
	color: var(--color-dg2);
}
.ddm_pending > .ddm_icon{
	margin-top: 2px;
	color: var(--color-mg);
}
.contstyles .ddm_pending p{
	margin: 0px;
}
.ddm_pending_title{
	font-family: var(--font-head);
	font-weight: var(--weight-head);
	color: var(--color-ink);
}
.ddm_pending .font_s{
	margin-top: var(--space-1) !important;
	color: var(--color-meta);
}
.ddm_prose > .ddm_pending:last-child{
	margin-bottom: 0px;
}


/* ===== TABELLEN (Preisblaetter, technische Daten) =====
   <div class="ddm_table_wrap" tabindex="0" role="region" aria-label=".."><table class="ddm_table">
   Nur Linien (kein Zebra), Zahlen rechtsbuendig (.num). Mobil scrollt die
   Tabelle im Rahmen; der Schatten am Rand zeigt, dass es weitergeht. */
.ddm_table_wrap{
	overflow-x: auto;
	margin-top: var(--space-5);
	margin-bottom: var(--space-5);
	background:
		linear-gradient(90deg, var(--color-white) 30%, rgba(255, 255, 255, 0)) left center / 40px 100% no-repeat local,
		linear-gradient(270deg, var(--color-white) 30%, rgba(255, 255, 255, 0)) right center / 40px 100% no-repeat local,
		radial-gradient(farthest-side at 0 50%, rgba(29, 33, 39, 0.14), rgba(29, 33, 39, 0)) left center / 12px 100% no-repeat scroll,
		radial-gradient(farthest-side at 100% 50%, rgba(29, 33, 39, 0.14), rgba(29, 33, 39, 0)) right center / 12px 100% no-repeat scroll;
}
.ddm_table,
.contstyles table{
	width: 100%;
	table-layout: auto;
	border-collapse: collapse;
	font-variant-numeric: tabular-nums;
}
.ddm_table_wrap .ddm_table{
	min-width: 600px;
}
.ddm_table th,
.contstyles table th{
	padding: var(--space-3) var(--space-4);
	background-color: var(--color-lg);
	color: var(--color-ink);
	font-family: var(--font-head);
	font-weight: var(--weight-head);
	text-align: left;
	vertical-align: bottom;
}
.ddm_table td,
.contstyles table td{
	padding: var(--space-3) var(--space-4);
	border-bottom: 1px solid var(--color-line);
}
.ddm_table .num,
.contstyles table .num{
	text-align: right;
}
/* Datenblatt (Begriff | Wert): Zeilenkoepfe <th scope="row"> ohne Flaeche */
.ddm_table th[scope="row"],
.contstyles table th[scope="row"]{
	width: 36%;
	background-color: transparent;
	border-bottom: 1px solid var(--color-line);
	vertical-align: top;
}
.ddm_table tr:first-child > *,
.contstyles table tr:first-child > *{
	border-top: 1px solid var(--color-line);
}


/* ===== NETZPLAN (Versorgungsnetz) =====
   Markup: article/default.php (content_versorgungsnetz), Verhalten: js/netzplan.js.
   <figure class="ddm_netzplan" data-netzplan> > .ddm_netzplan_view[data-level]
     > .ddm_netzplan_stage (img + button.ddm_netzplan_zone._level1/_level2)
     + .ddm_netzplan_status + .ddm_netzplan_controls
   Daneben aside.ddm_netzplan_aside: Liste (.ddm_netzplan_areas), Legende, PDFs.
   Ohne JS (kein ._ready) bleibt nur das Bild. Bereiche: Ink-Rahmen mit
   Namensschild, Hover/Fokus rot; Rahmen und Schild werden gegen den Zoom
   (--np-scale) skaliert und bleiben gleich gross. */
.ddm_netzplan_view{
	position: relative;
	overflow: hidden;
	border: 1px solid var(--color-line);
	border-radius: var(--radius-m);
	background-color: var(--color-lg2);
}
.ddm_netzplan_stage > img{
	display: block;
	width: 100%;
	height: auto;
}
.ddm_netzplan:not(._ready) .ddm_netzplan_zone,
.ddm_netzplan:not(._ready) .ddm_netzplan_status,
.ddm_netzplan:not(._ready) .ddm_netzplan_controls{
	display: none;
}
.ddm_netzplan._ready .ddm_netzplan_view{
	height: clamp(420px, calc(100vh - 200px), 880px);
	touch-action: pan-y;
	user-select: none;
	-webkit-user-select: none;
}
/* gezoomt: Ziehen gehoert dem Plan, nicht der Seite */
.ddm_netzplan._ready .ddm_netzplan_view._zoomed{
	touch-action: none;
	cursor: grab;
}
.ddm_netzplan._ready .ddm_netzplan_view._dragging{
	cursor: grabbing;
}
.ddm_netzplan._ready .ddm_netzplan_stage{
	position: absolute;
	top: 0px;
	left: 0px;
	transform-origin: 0 0;
	will-change: transform;
}
.ddm_netzplan_stage._animate{
	transition: transform 450ms var(--ease);
}
.ddm_netzplan._ready .ddm_netzplan_stage > img{
	height: 100%;
	pointer-events: none;
	-webkit-user-drag: none;
}
.ddm_netzplan_zone{
	position: absolute;
	padding: 0px;
	border: calc(2px / var(--np-scale, 1)) solid var(--color-ink);
	border-radius: calc(4px / var(--np-scale, 1));
	background-color: rgba(29, 33, 39, 0.04);
	box-shadow: 0 0 0 calc(2px / var(--np-scale, 1)) rgba(255, 255, 255, 0.85);
	cursor: zoom-in;
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--dur) var(--ease), visibility var(--dur), background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.ddm_netzplan_view[data-level="0"] .ddm_netzplan_zone._level1,
.ddm_netzplan_view[data-level="1"] .ddm_netzplan_zone._level2{
	opacity: 1;
	visibility: visible;
}
.ddm_netzplan_zone:focus-visible{
	z-index: 1;
	border-color: var(--color-red);
	background-color: rgba(194, 0, 22, 0.10);
}
.ddm_netzplan_zone:focus-visible{
	outline: calc(3px / var(--np-scale, 1)) solid var(--color-red);
	outline-offset: calc(2px / var(--np-scale, 1));
}
.ddm_netzplan_label{
	position: absolute;
	top: 50%;
	left: 50%;
	padding: var(--space-1) var(--space-3);
	border-radius: var(--radius-s);
	background-color: var(--color-white);
	box-shadow: var(--shadow-1);
	font-family: var(--font-head);
	font-weight: var(--weight-head);
	font-size: var(--fs-small);
	line-height: var(--lh-small);
	color: var(--color-ink);
	white-space: nowrap;
	transform: translate(-50%, -50%) scale(calc(1 / var(--np-scale, 1)));
	transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.ddm_netzplan_zone:focus-visible .ddm_netzplan_label{
	background-color: var(--color-red);
	color: var(--color-white);
}
/* Hover nur mit Maus: auf Touch bliebe der getippte Bereich sonst rot */
@media (hover: hover){
	.ddm_netzplan_zone:hover{
		z-index: 1;
		border-color: var(--color-red);
		background-color: rgba(194, 0, 22, 0.10);
	}
	.ddm_netzplan_zone:hover .ddm_netzplan_label{
		background-color: var(--color-red);
		color: var(--color-white);
	}
}
/* aktueller Ausschnitt oben links (nur gezoomt sichtbar, Ansage bleibt), Zoom-Schaltflaechen oben rechts */
.ddm_netzplan_status{
	position: absolute;
	top: var(--space-3);
	left: var(--space-3);
	z-index: 2;
	max-width: calc(100% - 88px);
	margin: 0px;
	padding: var(--space-2) var(--space-3);
	border-radius: var(--radius-s);
	background-color: var(--color-white);
	box-shadow: var(--shadow-1);
	font-family: var(--font-head);
	font-weight: var(--weight-head);
	font-size: var(--fs-small);
	line-height: var(--lh-small);
	color: var(--color-ink);
	pointer-events: none;
	transition: opacity var(--dur) var(--ease);
}
.ddm_netzplan_view:not(._zoomed) .ddm_netzplan_status{
	opacity: 0;
}
.ddm_netzplan_controls{
	position: absolute;
	top: var(--space-3);
	right: var(--space-3);
	z-index: 2;
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
}
.ddm_netzplan_btn{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0px;
	border: none;
	border-radius: var(--radius-s);
	background-color: var(--color-white);
	box-shadow: var(--shadow-1);
	color: var(--color-ink);
	cursor: pointer;
	transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.ddm_netzplan_btn:hover:not(:disabled){
	background-color: var(--color-red);
	color: var(--color-white);
}
.ddm_netzplan_btn:disabled{
	color: var(--color-mg);
	cursor: default;
}
.ddm_netzplan_view:focus-visible{
	outline: 3px solid var(--color-focus);
	outline-offset: 2px;
}
/* Seitenspalte: Stadtteile, Legende, PDFs */
.ddm_netzplan_grid{
	margin-top: var(--space-7);
	align-items: start;
}
.ddm_netzplan_aside > * + *{
	margin-top: var(--space-7);
}
.ddm_netzplan_aside h3{
	margin-bottom: var(--space-3);
}
.ddm_netzplan_areas ul{
	margin: 0px;
	list-style: none;
}
.ddm_netzplan_areas > ul{
	border-top: 1px solid var(--color-line);
}
.ddm_netzplan_areas > ul > li{
	margin: 0px;
	padding: var(--space-3) 0px;
	border-bottom: 1px solid var(--color-line);
}
.ddm_netzplan_area{
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	min-height: 44px;
	padding: 0px;
	border: none;
	background: none;
	font-family: var(--font-head);
	font-weight: var(--weight-head);
	font-size: var(--fs-ui);
	line-height: var(--lh-ui);
	color: var(--color-ink);
	text-align: left;
	cursor: pointer;
	transition: color var(--dur-fast) var(--ease);
}
.ddm_netzplan_area .ddm_icon{
	color: var(--color-mg);
	transition: color var(--dur-fast) var(--ease);
}
.ddm_netzplan_area:hover,
.ddm_netzplan_area[aria-current],
.ddm_netzplan_area:hover .ddm_icon,
.ddm_netzplan_area[aria-current] .ddm_icon{
	color: var(--color-red);
}
.ddm_netzplan_subs{
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	margin-top: var(--space-1) !important;
}
.ddm_netzplan_subs > li{
	margin: 0px;
}
.ddm_netzplan_sub{
	min-height: 36px;
	padding: var(--space-1) var(--space-3);
	border: 1px solid var(--color-line);
	border-radius: var(--radius-s);
	background-color: var(--color-white);
	font-size: var(--fs-small);
	line-height: var(--lh-small);
	color: var(--color-dg2);
	cursor: pointer;
	transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}
.ddm_netzplan_sub:hover,
.ddm_netzplan_sub[aria-current]{
	border-color: var(--color-red);
	color: var(--color-red);
}
.ddm_netzplan_sub[aria-current]{
	background-color: var(--color-red-tint);
}
.ddm_netzplan_legend ul{
	margin: 0px 0px var(--space-4) 0px;
	list-style: none;
}
.ddm_netzplan_legend li{
	display: flex;
	align-items: center;
	gap: var(--space-3);
	margin: 0px;
	padding: var(--space-1) 0px;
	font-size: var(--fs-small);
	line-height: var(--lh-small);
	color: var(--color-dg);
}
.ddm_netzplan_legend_head{
	margin-bottom: var(--space-1);
	font-family: var(--font-head);
	font-weight: var(--weight-head);
	color: var(--color-ink);
}
/* Leitungsfarben aus der Planlegende (nur hier, keine UI-Farben) */
.ddm_netzplan_line{
	flex: 0 0 32px;
	height: 5px;
	border-radius: 3px;
	background-color: var(--line);
}
.ddm_netzplan_line._thin{
	height: 2px;
}


/* ===== AKKORDEON (FAQ) =====
   <div class="ddm_accordion"><details><summary>Frage</summary>
   <div class="ddm_accordion_body contstyles">..</div></details></div>
   Natives details/summary: per Tastatur bedienbar, ohne JS, mehrere offen. */
.ddm_accordion{
	border-top: 1px solid var(--color-line);
}
.ddm_accordion details{
	border-bottom: 1px solid var(--color-line);
}
.ddm_accordion summary{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-4);
	padding: var(--space-4) 0px;
	list-style: none;
	cursor: pointer;
	font-family: var(--font-head);
	font-weight: var(--weight-head);
	font-size: var(--fs-h5);
	line-height: var(--lh-h5);
	color: var(--color-ink);
	transition: color var(--dur-fast) var(--ease);
}
.ddm_accordion summary::-webkit-details-marker{
	display: none;
}
.ddm_accordion summary::after{
	content: '';
	flex-shrink: 0;
	width: 24px;
	height: 24px;
	background-color: var(--color-red);
	-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_accordion summary:hover{
	color: var(--color-red);
}
.ddm_accordion details[open] > summary::after{
	transform: rotate(180deg);
}
.ddm_accordion_body{
	padding-bottom: var(--space-5);
}


/* ===== HINWEISE =====
   <div class="ddm_notice _alert" role="note"><span class="ddm_icon i_alert-circle _24"></span>
   <div>Text</div></div>
   _info (Standard), _alert (Hinweis/Stoerung), _warning, _success.
   Farbe nie allein: immer Icon + Text. */
.ddm_notice{
	display: flex;
	align-items: flex-start;
	gap: var(--space-3);
	padding: var(--space-4) var(--space-5);
	border-left: 4px solid var(--color-ink);
	border-radius: var(--radius-s);
	background-color: var(--color-lg);
	color: var(--color-dg2);
}
.ddm_notice > .ddm_icon{
	width: 24px;
	height: 24px;
	margin-top: 2px;
}
/* im Beitragstext (Editor entfernt leere Icon-Spans): <div class="ddm_notice">
   <div>Text</div></div> - das Info-Icon kommt dann per ::before */
.ddm_notice:not(:has(> .ddm_icon))::before{
	content: '';
	flex-shrink: 0;
	width: 24px;
	height: 24px;
	margin-top: 2px;
	background-color: currentColor;
	-webkit-mask: url("../svg/tabler/info-circle.svg") center / contain no-repeat;
	mask: url("../svg/tabler/info-circle.svg") center / contain no-repeat;
}
.ddm_notice._alert::before{
	color: var(--color-red);
}
.ddm_notice > div > :first-child{
	margin-top: 0px;
}
.ddm_notice > div > :last-child{
	margin-bottom: 0px;
}
.ddm_notice._alert{
	border-color: var(--color-red);
	background-color: var(--color-red-tint);
}
.ddm_notice._alert > .ddm_icon{
	color: var(--color-red);
}
.ddm_notice._warning{
	border-color: var(--color-ink);
	background-color: var(--color-orange);
	color: var(--color-ink);
}
.ddm_notice._success{
	border-color: var(--color-green);
	background-color: var(--color-green-tint);
}
.ddm_notice._success > .ddm_icon{
	color: var(--color-green-text);
}


/* ===== INHALTSVERZEICHNIS (lange Textseiten, z.B. Datenschutz) =====
   <div class="ddm_grid"><div class="col_8">Text mit <h2 id="id"></div>
   <aside class="col_4 ddm_toc_col"><nav class="ddm_toc" aria-label="..">
   <p class="font_h6">Inhalt</p><ol><li><a href="#id">..</a></li></ol></nav></aside></div>
   Steht rechts neben dem Text und bleibt beim Scrollen unter dem Header
   stehen. <= 860px ausgeblendet (stuende sonst unter dem Text). */
.ddm_grid > .ddm_toc_col{
	grid-column: 9 / span 4;
	grid-row: 1;
}
.ddm_toc{
	position: sticky;
	top: calc(var(--hdr-h-small) + var(--space-5));
	padding: var(--space-5);
	border: 1px solid var(--color-line);
	border-radius: var(--radius-m);
	background-color: var(--color-lg2);
}
.contstyles .ddm_toc ol{
	margin: var(--space-3) 0px 0px 0px;
	list-style: none;
}
.contstyles .ddm_toc li{
	margin: 0px;
	border-top: 1px solid var(--color-line);
}
.contstyles .ddm_toc a{
	display: block;
	padding: var(--space-2) 0px;
	font-size: var(--fs-small);
	line-height: var(--lh-small);
	color: var(--color-dg2);
	text-decoration: none;
	transition: color var(--dur-fast) var(--ease);
}
.contstyles .ddm_toc a:hover{
	color: var(--color-red);
}


/* ===== INHALTSELEMENTE (Marker im Beitragstext) =====
   ddm_renderContent() (article/default.php) teilt den Beitragstext an
   {abschnitt[:grau #anker]} in Abschnitte und setzt {element:typ [gruppe]}
   aus der Feldgruppe "Inhaltselemente" ein:
   <div id=".." class="ddm_section widepad [lg_bg] red_links linehover_links nooverflow">
     <div class="main-container"><div class="ddm_prose contstyles">..</div> Element ..</div></div>
   Text steht in Lesebreite, Elemente nutzen den ganzen Container. */
.ddm_section > .main-container > * + *{
	margin-top: var(--space-7);
}
.ddm_prose{
	max-width: var(--container-narrow);
}
.ddm_prose > :first-child{
	margin-top: 0px;
}
.ddm_prose > :last-child{
	margin-bottom: 0px;
}
/* Karte ({karte}) nutzt den ganzen Container statt der Lesebreite */
.ddm_prose:has(> .ddm_embed){
	max-width: none;
}
.ddm_section .ddm_figures._divided{
	padding-top: var(--space-6);
}
/* Symbolkarte (Kacheln): Werte, Merkmale - nicht klickbar, daher ohne Hover */
.ddm_iconcard{
	height: 100%;
	padding: var(--space-6);
	border: 1px solid var(--color-line);
	border-radius: var(--radius-m);
	background-color: var(--color-white);
}
.ddm_iconcard > .ddm_icon{
	display: block;
	margin-bottom: var(--space-5);
	color: var(--color-red);
}
.ddm_iconcard > h3{
	margin-bottom: var(--space-2);
}
/* _link: Karte mit Link (Feld "Link"). Der Textlink unten ist der Link
   (a.ddm_textlink.ddm_iconcard_link), sein ::before spannt ueber die ganze
   Karte; Hover wie .ddm_card, Titel wird rot */
.ddm_iconcard._link{
	position: relative;
	display: flex;
	flex-direction: column;
	transition: box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.ddm_iconcard._link:hover{
	border-color: transparent;
	box-shadow: var(--shadow-2);
}
.ddm_iconcard._link > .ddm_textlink{
	margin-top: auto;
	padding-top: var(--space-4);
}
.ddm_iconcard._link:hover .i_arrow-right{
	transform: translateX(4px);
}
/* :hover mit, sonst gewinnt .linehover_links a:hover (position: relative) und
   die Klickflaeche schrumpft beim Ueberfahren auf den Link zusammen */
.ddm_iconcard .ddm_iconcard_link,
.ddm_iconcard .ddm_iconcard_link:hover{
	position: static;
	align-self: flex-start;
}
.ddm_iconcard._link > h3{
	transition: color var(--dur-fast) var(--ease);
}
.ddm_iconcard._link:hover > h3{
	color: var(--color-red);
}
.ddm_iconcard_link::before{
	content: '';
	position: absolute;
	inset: 0px;
	z-index: 1;
	border-radius: var(--radius-m);
}
.linehover_links a.ddm_iconcard_link::after{
	display: none;
}
.ddm_iconcard._link:has(.ddm_iconcard_link:focus-visible){
	outline: 3px solid var(--color-focus);
	outline-offset: 2px;
}
.ddm_iconcard_link:focus-visible{
	outline: none;
}

/* Text neben Element (Marker mit links/rechts): Text 7/12, Element 5/12,
   ab 860px untereinander. Bilder stehen hier ohne Kartenrahmen. */
.ddm_split{
	display: grid;
	grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	gap: var(--space-8);
	align-items: start;
}
.ddm_split._reverse{
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
}
.ddm_split._reverse > .ddm_split_media{
	order: -1;
}
.ddm_split > .ddm_prose{
	max-width: none;
}
.ddm_split_media .ddm_imagecard{
	padding: 0px;
	border: none;
	background-color: transparent;
}
.ddm_split_media .ddm_imagecard_img > img{
	max-height: 640px;
	border-radius: var(--radius-m);
}
.ddm_split_media .ddm_grid > [class*="col_"]{
	grid-column: 1 / -1;
}

/* Eigenes Video: Titel, 16:9-Rahmen mit nativer Steuerung, Bildunterschrift */
.ddm_video > h3{
	margin-bottom: var(--space-4);
}
.ddm_video video{
	background-color: var(--color-ink);
	object-fit: contain;
}

/* Downloads ab 7 Dateien zweispaltig (Linie oben je Spalte) */
.ddm_downloads._columns{
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: var(--grid-gap);
	border-top: none;
}
.ddm_downloads._columns > li:nth-child(-n+2){
	border-top: 1px solid var(--color-line);
}
/* Bild-/Diagrammkarte: Bild unbeschnitten (Diagramme), Klick = volle Groesse */
.ddm_imagecard{
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: var(--space-6);
	border: 1px solid var(--color-line);
	border-radius: var(--radius-m);
	background-color: var(--color-white);
}
.ddm_imagecard > h3{
	margin-bottom: var(--space-5);
}
.ddm_imagecard_img{
	position: relative;
	display: flex;
	flex: 1;
	align-items: center;
	justify-content: center;
	cursor: zoom-in;
}
.ddm_imagecard_img > img{
	display: block;
	width: auto;
	max-width: 100%;
	height: auto;
	max-height: 520px;
}
.ddm_imagecard_zoom{
	position: absolute;
	right: 0px;
	bottom: 0px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: var(--radius-s);
	background-color: var(--color-lg);
	color: var(--color-dg2);
	transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.ddm_imagecard_img:hover .ddm_imagecard_zoom,
.ddm_imagecard_img:focus-visible .ddm_imagecard_zoom{
	background-color: var(--color-red);
	color: var(--color-white);
}
.ddm_imagecard .ddm_caption{
	margin-top: var(--space-4);
	padding-top: var(--space-4);
	border-top: 1px solid var(--color-line);
}


/* ===== FORMULARE =====
   <form class="ddm_form"> > fieldset > legend + .ddm_field > label + Feld
   (+ .ddm_form_hint). Pflichtfeld: <span class="ddm_req">*</span>.
   Fehlertexte von jQuery Validate (label.error / Feld.error).
   Feldrahmen in mg (3.2:1, WCAG 1.4.11) - die hellere Linie waere zu schwach. */
.ddm_form fieldset{
	border: none;
	margin-bottom: var(--space-6);
}
.ddm_form legend{
	margin-bottom: var(--space-4);
	font-family: var(--font-head);
	font-weight: var(--weight-head);
	font-size: var(--fs-h4);
	line-height: var(--lh-h4);
	color: var(--color-ink);
}
.ddm_field{
	margin-bottom: var(--space-5);
}
.ddm_form label{
	display: block;
	margin-bottom: var(--space-2);
	font-family: var(--font-head);
	font-weight: var(--weight-ui);
	font-size: var(--fs-ui);
	line-height: var(--lh-ui);
	color: var(--color-ink);
}
.ddm_req{
	color: var(--color-red);
}
.ddm_form input[type="text"],
.ddm_form input[type="email"],
.ddm_form input[type="tel"],
.ddm_form input[type="number"],
.ddm_form input[type="date"],
.ddm_form input[type="password"],
.ddm_form input[type="search"],
.ddm_form input[type="url"],
.ddm_form select,
.ddm_form textarea{
	display: block;
	width: 100%;
	min-height: 48px;
	padding: 10px 14px;
	border: 1px solid var(--color-mg);
	border-radius: var(--radius-s);
	background-color: var(--color-white);
	color: var(--color-ink);
	transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.ddm_form textarea{
	min-height: 160px;
	resize: vertical;
}
.ddm_form input:hover,
.ddm_form select:hover,
.ddm_form textarea:hover{
	border-color: var(--color-dg);
}
.ddm_form input:focus,
.ddm_form select:focus,
.ddm_form textarea:focus{
	border-color: var(--color-red);
	box-shadow: 0 0 0 1px var(--color-red);
}
.ddm_form input[type="checkbox"],
.ddm_form input[type="radio"]{
	width: 20px;
	height: 20px;
	margin-right: var(--space-2);
	vertical-align: -4px;
	accent-color: var(--color-red);
}
/* Checkbox/Radio mit Text in einer Zeile */
.ddm_form label.ddm_check{
	display: flex;
	align-items: flex-start;
	gap: var(--space-2);
	font-family: var(--font-text);
	font-weight: var(--weight-text);
	font-size: var(--fs-text);
	line-height: var(--lh-text);
	color: var(--color-dg);
}
.ddm_form label.ddm_check input{
	flex-shrink: 0;
	margin-top: 4px;
	margin-right: 0px;
}
.ddm_form_hint{
	margin-top: var(--space-2);
	font-size: var(--fs-small);
	line-height: var(--lh-small);
	color: var(--color-meta);
}
.ddm_form input.error,
.ddm_form select.error,
.ddm_form textarea.error{
	border-color: var(--color-dred);
	box-shadow: 0 0 0 1px var(--color-dred);
}
.ddm_form label.error{
	display: flex;
	align-items: center;
	gap: var(--space-2);
	margin-top: var(--space-2);
	margin-bottom: 0px;
	font-family: var(--font-text);
	font-weight: var(--weight-text-strong);
	font-size: var(--fs-small);
	line-height: var(--lh-small);
	color: var(--color-dred);
}
.ddm_form label.error::before{
	content: '';
	flex-shrink: 0;
	width: 16px;
	height: 16px;
	background-color: currentColor;
	-webkit-mask: url("../svg/tabler/alert-circle.svg") center / contain no-repeat;
	mask: url("../svg/tabler/alert-circle.svg") center / contain no-repeat;
}


/* ===== GALERIE (statt Slider, ohne Automatik) =====
   Steuerung: .ddm_gallery_nav (Buttons 44px) + .ddm_gallery_count "2 / 6".
   Bildunterschrift unter dem Bild (.ddm_caption). Logik folgt mit dem Modul. */
.ddm_gallery_nav{
	display: flex;
	align-items: center;
	gap: var(--space-3);
	margin-top: var(--space-4);
}
.ddm_gallery_nav button{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border: 1px solid var(--color-line);
	border-radius: 50%;
	background-color: var(--color-white);
	color: var(--color-ink);
	cursor: pointer;
	transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.ddm_gallery_nav button:hover{
	border-color: var(--color-red);
	color: var(--color-red);
}
.ddm_gallery_count{
	font-size: var(--fs-small);
	color: var(--color-meta);
	font-variant-numeric: tabular-nums;
}


/* ===== EINBLENDEN BEIM SCROLLEN =====
   .animUp (viewports.js -> animate.css fadeInUp) faehrt nur 16px statt der
   vollen Elementhoehe ein. Unter prefers-reduced-motion ist alles aus. */
@keyframes ddm_fadeInUp{
	from{
		opacity: 0;
		transform: translate3d(0, 16px, 0);
	}
	to{
		opacity: 1;
		transform: none;
	}
}
.animate__animated.animate__fadeInUp{
	animation-name: ddm_fadeInUp;
	animation-duration: 600ms;
	animation-timing-function: var(--ease);
}


/* ===== NEWS (com_ddm_news, Leitfaden 6.4) =====
   Karte = .ddm_card: der Titel-Link (a.ddm_newscard_link) spannt per ::before
   ueber die ganze Karte und oeffnet das Fenster (js/news.js).
   Archiv: .ddm_newsarchive > .ddm_newsfilter (Umschalter .ddm_chip),
   .ddm_newsfilter_status, .ddm_newslist, .ddm_newsmore.
   Fenster: <dialog class="ddm_news_modal"> wie die Stoerungsmeldung (6.19):
   rote Oberkante, Kopf (Datum, Kategorie, X) und Fuss (blaettern,
   Schliessen) stehen, nur der Inhalt scrollt. */
.ddm_newscard .ddm_newscard_link,
.ddm_newscard .ddm_newscard_link:hover{
	position: static; /* sonst gewinnt .linehover_links a (relative) */
	color: inherit;
	text-decoration: none;
}
.ddm_newscard .ddm_newscard_link::before{
	content: "";
	position: absolute;
	inset: 0px;
	z-index: 4;
}
.linehover_links a.ddm_newscard_link::after{
	display: none;
}
.ddm_newscard .ddm_newscard_link:focus-visible{
	outline: none;
}
.ddm_card:has(.ddm_newscard_link:focus-visible){
	outline: 3px solid var(--color-focus);
	outline-offset: 2px;
}
.ddm_newscard h2,
.ddm_newscard h3{
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	overflow: hidden;
	margin: 0px;
	transition: color var(--dur-fast) var(--ease);
}
.ddm_newscard:hover h2,
.ddm_newscard:hover h3{
	color: var(--color-red);
}
.ddm_newscard .ddm_card_body > p:not(.ddm_meta){
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	overflow: hidden;
}
.ddm_newslist > li[hidden],
.ddm_newsfilter[hidden],
.ddm_newsmore[hidden],
.ddm_news_modal_nav[hidden]{
	display: none;
}

/* Archiv: Filter, Anzahl, Nachladen */
.ddm_newsfilter{
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-4) var(--space-7);
	margin-bottom: var(--space-5);
}
.ddm_newsfilter_group{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-2);
}
.ddm_newsfilter_label{
	margin-right: var(--space-2);
	font-family: var(--font-head);
	font-weight: var(--weight-ui);
	font-size: var(--fs-small);
	color: var(--color-meta);
}
.ddm_chip{
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	min-height: 40px;
	padding: 0px 16px;
	border: 1px solid var(--color-line);
	border-radius: var(--radius-s);
	background-color: var(--color-white);
	color: var(--color-ink);
	font-family: var(--font-head);
	font-weight: var(--weight-ui);
	font-size: var(--fs-ui);
	line-height: 1;
	font-variant-numeric: tabular-nums;
	cursor: pointer;
	transition: background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.ddm_chip:hover{
	border-color: var(--color-red);
	color: var(--color-red);
}
.ddm_chip[aria-pressed="true"]{
	border-color: var(--color-red);
	background-color: var(--color-red);
	color: var(--color-white);
}
.ddm_chip_count{
	font-size: var(--fs-small);
	color: var(--color-meta);
}
.ddm_chip[aria-pressed="true"] .ddm_chip_count{
	color: inherit;
	opacity: 0.8;
}
.ddm_newsfilter_status{
	margin-bottom: var(--space-5);
	font-size: var(--fs-small);
	color: var(--color-meta);
}
.ddm_newsmore{
	display: flex;
	justify-content: center;
	margin-top: var(--space-7);
}

/* Fenster */
html.ddm_news_lock{
	overflow: hidden;
}
.ddm_news_modal{
	width: min(760px, calc(100% - 2 * var(--gutter)));
	max-width: none;
	max-height: calc(100dvh - 2 * var(--gutter));
	margin: auto;
	padding: 0px;
	border: 0px;
	border-top: 4px solid var(--color-red);
	border-radius: var(--radius-m);
	background-color: var(--color-white);
	box-shadow: var(--shadow-2);
	color: var(--color-dg);
	overflow: hidden;
}
.ddm_news_modal[open]{
	display: flex;
	animation: ddm_news_in var(--dur) var(--ease);
}
.ddm_news_modal::backdrop{
	background-color: rgba(29, 33, 39, 0.72); /* --color-ink */
	animation: ddm_news_fade var(--dur) var(--ease);
}
.ddm_news_modal_inner{
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-height: 0px;
	width: 100%;
}
.ddm_news_modal_head{
	display: flex;
	align-items: center;
	gap: var(--space-4);
	padding: var(--space-5) var(--space-6) 0px var(--space-6);
}
.ddm_news_modal_head > .ddm_meta > div{
	display: contents;
}
.ddm_news_close{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 44px;
	height: 44px;
	margin: 0px calc(-1 * var(--space-2)) 0px auto;
	padding: 0px;
	border: 0px;
	border-radius: var(--radius-s);
	background-color: transparent;
	color: var(--color-ink);
	cursor: pointer;
	transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.ddm_news_close:hover{
	background-color: var(--color-lg);
	color: var(--color-red);
}
.ddm_news_modal_body{
	flex: 1 1 auto;
	min-height: 0px;
	padding: var(--space-3) var(--space-6) var(--space-6) var(--space-6);
	overflow-y: auto;
	overscroll-behavior: contain;
}
/* nur per Skript fokussiert (Screenreader beginnen beim Titel): kein Fokusring */
.ddm_news_modal_body h2[tabindex]:focus-visible{
	outline: none;
}
.ddm_news_modal_body h2{
	margin: 0px 0px var(--space-5) 0px;
	color: var(--color-ink);
	hyphens: auto;
	-webkit-hyphens: auto;
}
.ddm_news_modal_img{
	margin: 0px 0px var(--space-5) 0px;
	border-radius: var(--radius-m);
	overflow: hidden;
}
.ddm_news_modal_img img{
	display: block;
	width: 100%;
	height: auto;
}
.ddm_news_modal_text > :last-child{
	margin-bottom: 0px;
}
.ddm_news_modal_files{
	margin-top: var(--space-6);
}
.ddm_news_modal_files:first-child,
.ddm_news_modal_body h2 + .ddm_news_modal_files{
	margin-top: 0px;
}
.ddm_news_modal_files h3{
	margin-bottom: var(--space-3);
}
.ddm_news_modal_foot{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-2) var(--space-5);
	padding: var(--space-3) var(--space-6);
	border-top: 1px solid var(--color-line);
	background-color: var(--color-lg2);
}
.ddm_news_modal_nav{
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2) var(--space-5);
}
.ddm_news_step,
.ddm_news_dismiss{
	display: inline-flex;
	align-items: center;
	gap: var(--space-1);
	min-height: 44px;
	padding: 0px;
	border: 0px;
	background: none;
	color: var(--color-red);
	font-family: var(--font-head);
	font-weight: var(--weight-ui);
	font-size: var(--fs-ui);
	cursor: pointer;
	transition: color var(--dur-fast) var(--ease);
}
.ddm_news_step:hover,
.ddm_news_dismiss:hover{
	color: var(--color-dred);
}
.ddm_news_step:disabled{
	color: var(--color-meta);
	opacity: 0.5;
	cursor: default;
}
.ddm_news_dismiss{
	color: var(--color-ink);
}
@keyframes ddm_news_in{
	from{ opacity: 0; transform: translateY(16px); }
	to{ opacity: 1; transform: none; }
}
@keyframes ddm_news_fade{
	from{ opacity: 0; }
	to{ opacity: 1; }
}
@media (prefers-reduced-motion: reduce){
	.ddm_news_modal[open],
	.ddm_news_modal::backdrop{
		animation: none;
	}
}


/* ===========================================================================
   SEITENSPEZIFISCHE STILE
   (folgen in den naechsten Schritten)
   =========================================================================== */