/*
 * DU-Die Unternehmerinnen e. V.: Design-Schicht über Bootstrap 5.3.8 (lokal, MIT), nah am Original der Website.
 * Schriften (lokal, SIL OFL 1.1): Roboto (fonts/roboto), Caveat Brush (fonts/caveat-brush).
 * Icons: Bootstrap Icons 1.13.1 (MIT), css/bootstrap-icons.min.css.
 */
@font-face {
	font-family: "Roboto";
	font-style: normal;
	font-weight: 300 700;
	font-display: swap;
	src: url("../fonts/roboto/roboto-latin-var.woff2") format("woff2");
}
@font-face {
	font-family: "Caveat Brush";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/caveat-brush/caveat-brush-latin.woff2") format("woff2");
}

:root {
	--du-red: #bd0926;
	--du-red-dark: #970720;
	--du-orange: #e7501e;
	--du-grey: #565655;
	--du-panel: #e9e4e2;
	--bs-primary: var(--du-red);
	--bs-primary-rgb: 189, 9, 38;
	--bs-link-color: var(--du-red);
	--bs-link-color-rgb: 189, 9, 38;
	--bs-link-hover-color: var(--du-red-dark);
	--bs-link-hover-color-rgb: 151, 7, 32;
	--bs-body-font-family: "Roboto", system-ui, -apple-system, "Segoe UI", sans-serif;
	--bs-body-color: var(--du-grey);
	--bs-body-color-rgb: 86, 86, 85;
	--bs-body-font-weight: 400;
	--bs-body-line-height: 1.6;
	--bs-border-radius: 0;
	--bs-border-radius-sm: 0;
	--bs-border-radius-lg: 0;
	--bs-border-radius-pill: 0;
	--du-script: "Caveat Brush", "Segoe Print", cursive;
	--du-nav-h: 130px;
}

body { font-size: 1.125rem; line-height: 1.6; }
strong, b { font-weight: 700; }
h1, h2, h3, h4, .h1, .h2, .h3, .h4 { color: var(--du-grey); font-weight: 400; line-height: 1.25; }
h1, .h1 { font-size: 2rem; }
h2, .h2 { font-size: 1.65rem; }
h3, .h3 { font-size: 1.4rem; }
a { text-decoration: none; }
h2, .h2 { margin-bottom: 1.25rem; }
img { border-radius: 0; }
.handschrift, .du-script { font-family: var(--du-script); font-weight: 400; color: var(--du-orange); font-size: 1.5em; }

/* Buttons: eckig, grau → rot beim Überfahren (wie im Original) */
.btn { --bs-btn-border-radius: 0; --bs-btn-padding-x: 1.4rem; font-weight: 400; }
.btn-primary { --bs-btn-bg: var(--du-grey); --bs-btn-border-color: var(--du-grey); --bs-btn-hover-bg: var(--du-red); --bs-btn-hover-border-color: var(--du-red); --bs-btn-active-bg: var(--du-red); --bs-btn-active-border-color: var(--du-red); --bs-btn-disabled-bg: var(--du-grey); --bs-btn-disabled-border-color: var(--du-grey); }
.btn-outline-primary { --bs-btn-color: var(--du-red); --bs-btn-border-color: var(--du-red); --bs-btn-hover-bg: var(--du-red); --bs-btn-hover-border-color: var(--du-red); --bs-btn-active-bg: var(--du-red); --bs-btn-active-border-color: var(--du-red); }
.btn-cat { --c: var(--du-grey); background: var(--c); border-color: var(--c); color: #fff; font-size: 0.95rem; padding: 0.35rem 0.8rem; margin: 0; }
.du-auswahl .du-k-7 .btn-cat { --c: #e7501e; }
.du-auswahl .du-k-8 .btn-cat { --c: #bd0926; }
.du-auswahl .du-k-9 .btn-cat { --c: #565655; }
.du-auswahl__text { font-size: 1rem; color: var(--c, var(--du-grey)); }
.du-auswahl .du-k-9 .du-auswahl__text { color: var(--du-grey); }
.btn-cat:hover, .btn-cat.active { background: var(--du-grey); border-color: var(--du-grey); color: #fff; }
.btn-cat.active { background: var(--du-red); border-color: var(--du-red); }
:focus-visible { outline: 3px solid var(--du-orange); outline-offset: 2px; }

/* Kopfzeile: fest oben, halbtransparent weiß, Logo links, Menü als orange Kacheln (wie im Original) */
.du-header { position: fixed; top: 0; left: 0; right: 0; z-index: 1030; background: linear-gradient(to bottom, rgba(255, 255, 255, 0.9) 0, rgba(255, 255, 255, 0.86) 24%, rgba(255, 255, 255, 0.74) 40%, rgba(255, 255, 255, 0.56) 54%, rgba(255, 255, 255, 0.38) 67%, rgba(255, 255, 255, 0.21) 79%, rgba(255, 255, 255, 0.08) 90%, rgba(255, 255, 255, 0) 100%); height: 180px; padding-top: 20px; pointer-events: none; }
.du-header .navbar-brand, .du-header .navbar-nav, .du-header .navbar-toggler, .du-header .offcanvas { pointer-events: auto; }
.du-header .navbar { width: 100%; padding: 0; --bs-navbar-nav-link-padding-x: 24px; }
.du-header .navbar > .container-fluid { justify-content: flex-end; align-items: flex-start; }
.du-header .navbar-brand { padding: 0 15px; margin: 0; position: relative; z-index: 0; }
/* zusätzlicher, weich auslaufender Aufheller hinter der Zeile „Die Unternehmerinnen“ */
.du-header .navbar-brand::before { content: ""; position: absolute; z-index: -1; left: -34px; right: -34px; bottom: -22px; height: 78px; background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(255, 255, 255, 0.92) 0%, rgba(255, 255, 255, 0.8) 38%, rgba(255, 255, 255, 0.4) 68%, rgba(255, 255, 255, 0) 100%); pointer-events: none; }
.du-header .navbar-nav { align-items: flex-start; }
.du-header .navbar-brand img { height: 75px; width: auto; display: block; }
.du-header .navbar-nav { gap: 0; }
.du-header .nav-item { background: var(--du-orange); }
.du-header .nav-item:hover, .du-header .nav-item.active-item { background: var(--du-red); }
.du-header .nav-link { color: #fff; font-weight: 400; font-size: 18px; line-height: 31px; padding: 15px 24px; }
.du-header .nav-link:hover, .du-header .nav-link:focus, .du-header .nav-link.active { color: #fff; }
.du-header .dropdown-menu { background: var(--du-red); border: 0; padding: 0; margin: 0; min-width: 100%; }
.du-header .dropdown-item { color: #fff; font-weight: 400; padding: 0.5rem 1rem; }
.du-header .dropdown-item:hover, .du-header .dropdown-item.active, .du-header .dropdown-item:focus { background: var(--du-orange); color: #fff; }
@media (min-width: 992px) {
	.du-header .offcanvas { flex-grow: 0; }
	.du-header .offcanvas-body { flex-grow: 0; }
	.du-header .dropdown:hover > .dropdown-menu { display: block; }

}
.du-header .navbar-toggler { border: 0; background: var(--du-orange); color: #fff; font-size: 2rem; line-height: 1; padding: 0.35rem 0.75rem; border-radius: 0; }
.du-header .navbar-toggler:focus { box-shadow: none; }
@media (max-width: 991.98px) {
	:root { --du-nav-h: 90px; }
	.du-header { padding-top: 20px; height: 125px; }
	.du-header .navbar > .container-fluid { justify-content: flex-start; align-items: flex-start; padding: 0 !important; }
	.du-header .navbar-brand { padding: 0 15px; }
	.du-header .navbar-brand img { height: 75px; }
	/* orangener Balken von Logo bis zum rechten Rand, Burger rechts darin (wie im Original) */
	.du-header .navbar-toggler { flex: 1 1 auto; height: 61px; margin-left: 5px; display: flex; align-items: center; justify-content: flex-end; padding: 0 20px; font-size: 2.2rem; }
	/* Menü: weiße Fläche von rechts, graue Großbuchstaben, alle Unterpunkte sichtbar */
	.du-header .offcanvas { --bs-offcanvas-width: min(420px, 78vw); background: #fff; color: var(--du-grey); box-shadow: -6px 0 30px rgba(0, 0, 0, 0.25); }
	.du-header .offcanvas-header { justify-content: flex-end; padding: 1.1rem 1.5rem 0.5rem; }
	.du-header .offcanvas-title { display: none; }
	.du-header .btn-close { width: auto; height: auto; padding: 0.25rem 0.5rem; background: none; opacity: 1; color: var(--du-orange); font-size: 2rem; line-height: 1; }
	.du-header .btn-close::before { content: "\2715"; }
	.du-header .offcanvas-body { padding: 0.5rem 1.5rem 2rem; }
	.du-header .navbar-nav { width: 100%; }
	.du-header .nav-item, .du-header .nav-item:hover, .du-header .nav-item.active-item { width: 100%; background: transparent; }
	.du-header .nav-link { color: var(--du-grey); text-transform: uppercase; font-size: 1.25rem; line-height: 1.3; padding: 0.7rem 0; }
	.du-header .nav-link:hover, .du-header .nav-link:focus { color: var(--du-orange); }
	.du-header .nav-link.active { color: var(--du-red); }
	.du-header .dropdown-menu { display: block; position: static; background: transparent; border: 0; padding: 0 0 0.5rem 1.25rem; margin: 0; }
	.du-header .dropdown-item { color: var(--du-grey); font-size: 1.15rem; padding: 0.35rem 0; background: transparent; }
	.du-header .dropdown-item:hover, .du-header .dropdown-item:focus { color: var(--du-orange); background: transparent; }
	.du-header .dropdown-item.active { color: var(--du-red); background: transparent; }
}
/* Kopfbild: groß wie im Original, ohne Schwung, ohne Filter */
.du-hero { position: relative; background: #ddd; height: 700px; }
.du-hero__img { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 1199px) { .du-hero { height: 550px; } }
@media (max-width: 991px) { .du-hero { height: 450px; } }
@media (max-width: 767px) { .du-hero { height: 350px; } }
@media (max-width: 600px) { .du-hero { height: 250px; } }
@media (max-width: 400px) { .du-hero { height: 190px; } }
.du-hero__caption { position: absolute; left: 0; right: 0; bottom: 0; padding-bottom: 1.5rem; pointer-events: none; }
.du-hero__headline { display: inline-block; margin: 0; padding: 0.25rem 1rem; background: var(--du-red); color: #fff; font-family: var(--du-script); font-size: clamp(1.5rem, 3.5vw, 2.6rem); line-height: 1.3; }
.du-hero__subline { display: table; margin: 0.25rem 0 0; padding: 0.2rem 1rem; background: #fff; color: var(--du-grey); font-size: 1rem; }
body:not(.du-has-hero) main { padding-top: var(--du-nav-h); }

/* Inhalt */
.du-section { padding: 2.5rem 0; }
.du-section + .du-section { padding-top: 0.5rem; }
.du-prose > :last-child { margin-bottom: 0; }
.du-prose h1 { margin-bottom: 1rem; }
.du-prose h2 { margin-top: 2rem; }
.du-prose h3 { margin-top: 1.5rem; }
.du-prose img { max-width: 100%; height: auto; }
.du-prose table { width: 100%; margin-bottom: 1rem; }
.du-prose table td, .du-prose table th { padding: 0.35rem 0.5rem; vertical-align: top; }
.du-prose blockquote { border-left: 4px solid var(--du-orange); padding-left: 1rem; font-style: italic; }
.du-quote { font-family: var(--du-script); font-size: 1.6rem; line-height: 1.3; color: var(--du-red); border-left: 4px solid var(--du-orange); padding-left: 1rem; }
.du-address { font-style: normal; }
.du-social a { display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; background: var(--du-red); color: #fff; font-size: 1.15rem; margin-right: 0.35rem; text-decoration: none; }
.du-social a:hover { background: var(--du-grey); color: #fff; }

/* Kreise (Startseite) */
.du-circle { position: relative; display: block; width: 100%; max-width: 280px; aspect-ratio: 1; margin: 0 auto; border-radius: 50%; overflow: hidden; text-decoration: none; color: #fff; }
.du-circle__img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 50%; transition: transform 0.4s; }
a.du-circle:hover .du-circle__img { transform: scale(1.06); }
.du-circle__label { position: absolute; inset: auto 0 18% 0; text-align: center; font-family: var(--du-script); font-size: clamp(1.4rem, 3.2vw, 2rem); line-height: 1.1; text-shadow: 0 1px 6px rgba(0, 0, 0, 0.45); }
.du-circle--rot { background: var(--du-red); }
.du-circle--orange { background: var(--du-orange); }
.du-circle--rot .du-circle__img, .du-circle--orange .du-circle__img { opacity: 0.35; mix-blend-mode: multiply; }

/* Termine: Monatsüberschrift, Zeilen in Kategoriefarbe mit gepunkteter Linie (wie im Original) */
.du-month { text-transform: uppercase; font-size: 1.25rem; font-weight: 400; color: var(--du-grey); margin: 2rem 0 1.25rem; }
.du-event { --c: var(--du-red); font-size: 1rem; color: var(--c); border-bottom: 3px dotted var(--c); padding: 0.1rem 0; }
.du-event p { margin: 0.75rem 0; color: var(--c); }
.du-event a { color: var(--c); text-decoration: none; }
.du-event a:hover { color: var(--du-grey); }
.du-k-7 { --c: #e7501e; }
.du-k-8 { --c: #bd0926; }
.du-k-9 { --c: #565655; }
.du-modal .modal-content { border: 0; }
.du-modal .modal-header { border: 0; }
.du-modal .modal-title { color: var(--du-red); }
.du-modal .modal-footer { border: 0; }
.du-modal .bi { color: var(--du-red); }
.du-modal a { text-decoration: none; }
.du-modal a:hover { text-decoration: underline; }

/* Mitglieder: runde Fotos (leicht gedreht, beim Überfahren gerade), Farbpunkt vor dem Namen (wie im Original) */
.du-member { --grp: var(--du-grey); display: block; text-align: center; text-decoration: none; color: var(--du-grey); }
.du-member__photo { display: block; width: 100%; max-width: 330px; aspect-ratio: 1; margin: 0 auto; border-radius: 50%; overflow: hidden; background: #e3dedc; position: relative; }
.du-member__img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s; }
a.du-member:hover .du-member__img, a.du-member:focus .du-member__img { transform: scale(1.05); }
.du-member__photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, transparent 79%, var(--grp) 79%); pointer-events: none; }
.du-member__noimg { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; font-size: 5rem; color: #bbb; }
.du-member__text { display: block; padding-top: 0.75rem; }
.du-member__name { display: block; font-weight: 400; font-size: 1.15rem; color: var(--du-grey); overflow-wrap: anywhere; hyphens: auto; }
.du-member__name::before { content: "\25CF\00a0"; color: var(--grp); font-size: 2.1rem; line-height: 0.6; vertical-align: -0.12em; }
.du-member__role { display: block; font-size: 1rem; }
.du-member__quote { display: block; margin-top: 0.5rem; font-style: italic; font-size: 0.95rem; }
.du-members--karte .du-member { display: flex; gap: 1.5rem; align-items: center; text-align: left; }
.du-members--karte .du-member__photo { flex: 0 0 38%; max-width: 38%; margin: 0; }
.du-members--karte .du-member__text { padding-top: 0; }
.du-members--klein .du-member__name { font-size: 0.95rem; }
.du-members--klein .du-member__role { font-size: 0.85rem; }
.du-members--klein .du-member__name::before { font-size: 1.15rem; }
/* Versetztes Raster: Desktop 4 – 3 – 4 – 3 …, Tablet 3 – 2 – 3 …, Handy 2 – 1 – 2 … (Grid mit 2-Spalten-Zellen) */
.du-honey { display: grid; gap: 2.5rem 2rem; grid-template-columns: repeat(4, 1fr); }
.du-honey__cell { grid-column: span 2; }
.du-honey__cell:nth-child(3n + 3) { grid-column: 2 / span 2; }
@media (min-width: 768px) {
	.du-honey { grid-template-columns: repeat(6, 1fr); }
	.du-honey__cell:nth-child(3n + 3) { grid-column: span 2; }
	.du-honey__cell:nth-child(5n + 4) { grid-column: 2 / span 2; }
}
@media (min-width: 992px) {
	.du-honey { grid-template-columns: repeat(8, 1fr); }
	.du-honey__cell:nth-child(5n + 4) { grid-column: span 2; }
	.du-honey__cell:nth-child(7n + 5) { grid-column: 2 / span 2; }
}
.du-member-detail { --grp: var(--du-red); }
.du-member-detail .du-member__photo { max-width: none; border-radius: 50%; }
.du-member-detail h2 { color: var(--du-red); }
.du-member-detail__img { width: 100%; height: auto; display: block; }
.du-chip { --grp: var(--du-grey); display: inline-block; margin: 0 0.25rem 0.5rem 0; padding: 0.4rem 0.9rem; background: var(--grp); color: #fff; font-weight: 300; text-decoration: none; }
.du-chip:hover, .du-chip:focus { background: var(--du-grey); color: #fff; }
.du-chip.active { background: var(--du-red); color: #fff; }
.du-g-1 { --grp: #0092d6; }
.du-g-2 { --grp: #24b8cd; }
.du-g-3 { --grp: #afc86d; }
.du-g-4 { --grp: #fbbb1d; }
.du-g-5 { --grp: #951979; }
.du-g-6 { --grp: #c7016e; }
.du-g-7 { --grp: #147f09; }
.du-g-8 { --grp: #999999; }
.du-chip.du-g-3, .du-chip.du-g-4 { color: #3a3a39; }

/* Galerie: Bilder in natürlichen Proportionen, 6 Spalten, Überschrift klein (wie im Original) */
.du-gallery h2 { font-size: 1.25rem; font-weight: 400; color: var(--du-grey); margin-bottom: 1rem; }
.du-gallery__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.9rem; align-items: start; }
@media (min-width: 768px) { .du-gallery__grid { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 992px) { .du-gallery__grid { grid-template-columns: repeat(6, 1fr); } }
.du-gallery__item { display: block; aspect-ratio: 1; overflow: hidden; background: #eee; }
.du-gallery__item img { display: block; width: 100%; height: 100%; object-fit: cover; transition: opacity 0.3s; }
.du-gallery__item:hover img { opacity: 0.8; }
.du-lightbox { border: 0; padding: 0; background: transparent; max-width: 96vw; max-height: 96vh; overflow: visible; }
.du-lightbox::backdrop { background: rgba(0, 0, 0, 0.9); }
.du-lightbox__img { display: block; max-width: 92vw; max-height: 82vh; margin: 0 auto; }
.du-lightbox__bar { display: flex; justify-content: space-between; align-items: center; color: #fff; padding-top: 0.5rem; gap: 1rem; }
.du-lightbox button { background: none; border: 0; color: #fff; font-size: 2rem; padding: 0.25rem 0.75rem; line-height: 1; }
.du-lightbox button:hover { color: var(--du-orange); }

/* Formulare: Flächen statt Rahmen, eckig, keine Linien */
.du-form form { background: var(--du-panel); padding: 2.5rem 2rem 2rem; }
.du-form .form-label { font-weight: 400; margin-bottom: 0.25rem; }
.du-form .form-control, .du-form .form-select { background: #fff; border: 0; border-radius: 0; box-shadow: none; padding: 0.7rem 1rem; color: var(--du-grey); }
.du-form .form-control:focus, .du-form .form-select:focus { background: #fff; box-shadow: inset 0 -4px 0 var(--du-red); }
.du-form .form-check-input { width: 1.25rem; height: 1.25rem; margin-top: 0.2rem; background-color: #fff; border: 0; border-radius: 0; box-shadow: none; }
.du-form .form-check-input:checked { background-color: var(--du-red); }
.du-form .form-check-input:focus { box-shadow: 0 0 0 3px rgba(231, 80, 30, 0.45); }
.du-form .form-check-label { font-weight: 300; }
.du-form .btn-primary { padding: 0.7rem 2rem; }
.du-form .alert { border: 0; border-radius: 0; }
.du-form .alert-success { background: #e1efdc; color: #2d5a1e; }
.du-form .alert-danger { background: #f6d9dd; color: #7a0a1e; }
.du-form .invalid-feedback, .du-form .text-danger { font-size: 0.9rem; }
.form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Download-Liste ohne Rahmen */
.du-downloads .list-group { --bs-list-group-border-width: 0; --bs-list-group-border-radius: 0; }
.du-downloads .list-group-item { background: var(--du-panel); margin-bottom: 0.4rem; border: 0; }

/* Footer: rot, ohne Schwung */
.du-footer { background: var(--du-red); color: #fff; padding: 3rem 0 1.5rem; margin-top: 3rem; }
.du-footer a { color: #fff; }
.du-footer a:hover { color: #fff; opacity: 0.7; }
.du-footer h2, .du-footer h3, .du-footer h4 { color: #fff; font-size: 1rem; font-weight: 700; }
.du-footer ul { list-style: none; padding: 0; margin: 0; }
.du-footer__col p:has(+ ul) { margin-bottom: 0; }
.du-footer li:has(.du-soc) + li:has(.du-soc) { margin-top: 0.85rem; }
.du-soc { display: inline-flex; align-items: center; justify-content: center; width: 2.1rem; height: 2.1rem; border-radius: 50%; background: #fff; color: var(--du-red); margin-right: 0.6rem; font-size: 1rem; }
.du-footer .du-soc .bi { margin: 0; font-size: 1rem; }
.du-footer__col > :last-child { margin-bottom: 0; }
.du-footer__rule { border-color: rgba(255, 255, 255, 0.4); margin: 2rem 0 1rem; opacity: 1; }
.du-footer__legal { font-size: 0.92rem; }
.du-footer__legal a { text-decoration: none; }
.du-footer__legal a:hover { text-decoration: underline; }
.du-footer .list-inline-item:not(:last-child) { margin-right: 1.25rem; }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { transition: none !important; animation: none !important; }
	.du-member__img { transform: none !important; }
}

/* Startseite: sechs kleine Kreise in einer Reihe (wie im Original) */
.du-circles__row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem 0.5rem; justify-items: center; max-width: 920px; margin: 0 auto; }
@media (min-width: 480px) { .du-circles__row { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 768px) { .du-circles__row { grid-template-columns: repeat(6, 1fr); } }
.du-circles .du-circle { width: 100%; max-width: 140px; margin: 0; container-type: inline-size; }
.du-circles .du-circle__img { opacity: 1; mix-blend-mode: normal; }
.du-circles .du-circle__label { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; font-family: var(--bs-body-font-family); font-weight: 700; font-size: 14.5cqw; line-height: 1.15; text-shadow: none; padding: 0 4cqw; }
.du-circles .du-circle--weiss .du-circle__label { color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.35); }
.du-circles .du-circle--orange .du-circle__label { color: var(--du-orange); }
.du-circles .du-circle--rot .du-circle__label { color: var(--du-red); }
.du-circles .du-circle--rot, .du-circles .du-circle--orange { background: transparent; }

/* Vorstand: 3 + 2 zentriert, weicher Schatten, ohne Farbkeil und Farbpunkt (wie im Original) */
.du-vorstand { display: flex; flex-wrap: wrap; justify-content: center; gap: 2.5rem 0; }
.du-vorstand__cell { flex: 0 0 100%; max-width: 100%; }
@media (min-width: 576px) { .du-vorstand__cell { flex-basis: 50%; max-width: 50%; } }
@media (min-width: 992px) { .du-vorstand__cell { flex-basis: 33.333%; max-width: 33.333%; } }
.du-members--vorstand .du-member__photo { max-width: 240px; box-shadow: 5px 5px 15px #ccc; }
.du-members--vorstand .du-member__photo::after { display: none; }
.du-members--vorstand .du-member__name::before { content: none; }

/* Schriftzug „Vernetzt. Sichtbar. Aktiv.“: Originalgrafik aus dem Newsletter-Kopf (img/vernetzt-sichtbar-aktiv.png, weiß mit Transparenz),
   hier als Maske in Grau eingefärbt. Der Text im Absatz bleibt für Screenreader und Suchmaschinen erhalten. */
.handschrift, .du-script { display: block; width: min(100%, 620px); aspect-ratio: 715 / 81; margin: 0.75rem auto 1.75rem; font-size: 0; line-height: 0; color: transparent; background-color: var(--du-grey); -webkit-mask: url("../img/vernetzt-sichtbar-aktiv.png") center / contain no-repeat; mask: url("../img/vernetzt-sichtbar-aktiv.png") center / contain no-repeat; }
.du-crumbs { font-size: 0.85rem; padding: 1rem 0 0; }
.du-crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 0.5rem; }
.du-crumbs li + li::before { content: "/"; color: #aaa; margin-right: 0.5rem; }
.du-crumbs a { color: var(--du-red); }

/* Intro mit Vorteilen (Startseite): Leitsatz, Kacheln, roter Streifen */
.du-lead { font-size: 1.6rem; line-height: 1.35; font-weight: 500; color: var(--du-grey); margin: 0; }
.du-tiles { background: #f4f1ef; padding: 2.25rem 0 2.5rem; }
.du-tile { background: #fff; padding: 1.4rem 1.35rem 1.5rem; height: 100%; box-shadow: 0 2px 14px rgba(0, 0, 0, 0.12); }
.du-tile__icon { display: block; line-height: 0; margin-bottom: 0.6rem; }
.du-tile__icon svg { display: block; overflow: visible; transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); }
.du-tile__icon circle { fill: var(--du-red); }
.du-tile__icon path { fill: none; stroke: #fff; stroke-width: 5; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; stroke-dasharray: 48; stroke-dashoffset: 0; }
.du-tile:hover .du-tile__icon svg { transform: scale(1.1); }
.js .du-tile:not(.is-in) .du-tile__icon path { stroke-dashoffset: 48; }
.js .du-tile.is-in .du-tile__icon path { animation: du-tick 0.5s cubic-bezier(0.5, 0, 0.2, 1) calc(var(--d, 0s) + 0.1s) both; }
@keyframes du-tick { from { stroke-dashoffset: 48; } to { stroke-dashoffset: 0; } }
.du-tile p { margin: 0; line-height: 1.4; font-size: 1.1rem; font-weight: 500; color: #3f3f3e; }
.du-tile strong { font-weight: 700; }
.du-band { background: var(--du-red); color: #fff; padding: 2.25rem 0; margin-top: 2.5rem; font-size: 1.15rem; }
.du-band .btn-light { --bs-btn-bg: #fff; --bs-btn-color: var(--du-red); --bs-btn-border-color: #fff; --bs-btn-hover-bg: var(--du-red); --bs-btn-hover-color: #fff; --bs-btn-hover-border-color: #fff; --bs-btn-active-bg: var(--du-red); --bs-btn-active-color: #fff; --bs-btn-active-border-color: #fff; --bs-btn-focus-shadow-rgb: 255, 255, 255; border-width: 2px; padding: 0.65rem 1.6rem; }
.du-band .btn-light:hover, .du-band .btn-light:focus-visible, .du-band .btn-light:active { opacity: 1; background: var(--du-red); color: #fff; border-color: #fff; }

/* Branchenauswahl der Mitglieder (wie im Original: zwei rote Schaltflächen, Auswahl als farbige Liste) */
.du-branchen { display: flex; flex-wrap: wrap; gap: 15px; margin-bottom: 2.5rem; }
.du-branchen__btn { display: block; width: 285px; max-width: 100%; height: 30px; line-height: 30px; padding: 0 0 0 15px; background: var(--du-red); color: #fff; border: 0; border-radius: 0; font-size: 16px; text-align: left; text-decoration: none; }
.du-branchen__btn.dropdown-toggle::after { display: none; }
.du-branchen .dropdown-menu { width: 285px; max-width: 100%; padding: 10px 0 0; margin: 0; background: #fff; border: 0; border-radius: 0; box-shadow: none; }
.du-branchen .dropdown-item { position: relative; color: var(--du-grey); font-size: 13px; line-height: 1.5; padding: 7px 10px 7px 30px; white-space: normal; background: transparent; }
.du-branchen .dropdown-item::before { content: ""; position: absolute; left: 10px; top: 12px; width: 10px; height: 10px; border-radius: 50%; background: var(--grp, var(--du-grey)); }
.du-branchen .dropdown-item:hover, .du-branchen .dropdown-item:focus, .du-branchen .dropdown-item.active { background: transparent; color: var(--du-grey); font-weight: 700; }
/* News „DU aktiv“ */
.du-news__item { margin-bottom: 3rem; }
.du-news__item img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; }
.du-news__item h3 { font-size: 1.35rem; color: var(--du-red); margin-bottom: 0.25rem; }
.du-news__datum { color: var(--du-orange); font-size: 0.9rem; margin-bottom: 1rem; }
.du-news__text > :last-child { margin-bottom: 0; }
.du-pager { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin: 1rem 0 2rem; }
.du-pager__item { min-width: 40px; padding: 0.4rem 0.8rem; background: var(--du-grey); color: #fff; text-align: center; text-decoration: none; }
.du-pager__item:hover, .du-pager__item.active { background: var(--du-red); color: #fff; }

/* Mitgliederbereich im Footer: auffälliger als die übrigen Links */
.du-footer li > strong > a { display: inline-block; margin-top: 0.75rem; padding: 0.5rem 1rem; background: #fff; color: var(--du-red); border: 2px solid #fff; font-weight: 700; text-decoration: none; }
.du-footer li > strong > a:hover, .du-footer li > strong > a:focus-visible { background: var(--du-red); color: #fff; border-color: #fff; opacity: 1; }
.du-header .dropdown-toggle::after { display: none; }

/* Formular-Buttons rot, beim Überfahren grau */
.du-form .btn-primary { --bs-btn-bg: var(--du-red); --bs-btn-border-color: var(--du-red); --bs-btn-hover-bg: var(--du-grey); --bs-btn-hover-border-color: var(--du-grey); --bs-btn-active-bg: var(--du-grey); --bs-btn-active-border-color: var(--du-grey); }

/* Seite „Mitglied werden“ */
.du-join h1 { margin-bottom: 1.5rem; }
.du-join__cols { padding-top: 3rem; padding-bottom: 1rem; }
.du-join__cols h2 { margin-bottom: 1.25rem; }
.du-fee { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.du-fee li { display: flex; align-items: baseline; gap: 1rem; padding: 1.1rem 1.35rem; background: #f4f1ef; }
.du-fee__sum { font-size: 2.6rem; line-height: 1; font-weight: 700; color: var(--du-red); }
.du-fee__text { font-size: 1.1rem; color: var(--du-grey); }
.du-steps { list-style: none; counter-reset: schritt; margin: 0 0 1.75rem; padding: 0; display: grid; gap: 1rem; }
.du-steps li { counter-increment: schritt; position: relative; padding: 0.45rem 0 0.45rem 3.5rem; min-height: 2.75rem; font-size: 1.1rem; }
.du-steps li::before { content: counter(schritt); position: absolute; left: 0; top: 0; width: 2.75rem; height: 2.75rem; line-height: 2.75rem; text-align: center; background: var(--du-red); color: #fff; font-weight: 700; font-size: 1.3rem; }
.du-note { background: #f4f1ef; padding: 1.75rem 0; margin-top: 3rem; }
.du-note h2 { font-size: 1.5rem; font-weight: 700; color: var(--du-red); margin-bottom: 0.5rem; }
.du-note p { margin: 0; }
.du-join .btn-primary { --bs-btn-bg: var(--du-red); --bs-btn-border-color: var(--du-red); --bs-btn-hover-bg: var(--du-grey); --bs-btn-hover-border-color: var(--du-grey); --bs-btn-active-bg: var(--du-grey); --bs-btn-active-border-color: var(--du-grey); padding: 0.7rem 1.6rem; }
.du-use { margin-top: 2rem; }
.du-use h3 { font-size: 1.15rem; font-weight: 700; color: var(--du-red); margin-bottom: 0.6rem; }
.du-use p { margin-bottom: 0.75rem; }
.du-use ul { list-style: none; margin: 0; padding: 0; }
.du-use li { position: relative; padding: 0.2rem 0 0.2rem 1.4rem; }
.du-use li::before { content: ""; position: absolute; left: 0; top: 0.75em; width: 0.6rem; height: 0.6rem; background: var(--du-red); }
.du-join .du-lead { margin-bottom: 1rem; color: var(--du-grey); font-size: 1.5rem; font-weight: 400; line-height: 1.35; }
.du-key { background: #f4f1ef; padding: 1.25rem 1.4rem; height: 100%; font-size: 1.05rem; line-height: 1.45; }
.du-key strong { display: block; color: var(--du-red); font-size: 1.5rem; font-weight: 700; margin-bottom: 0.35rem; }
.du-join h1 { margin: 0; }
.du-join .du-prose { font-size: 1.125rem; line-height: 1.6; }

/* Textseiten mit Zeilen (Verein, Geschichte, Satzung, Netzwerk) */
.du-rows { display: grid; gap: 1rem; padding-bottom: 1rem; }
.du-row { background: #f4f1ef; padding: 1.4rem 1.6rem; }
.du-row h2 { font-size: 1.35rem; font-weight: 700; color: var(--du-red); margin: 0; }
.du-row p { margin: 0; }
.du-row p + p { margin-top: 1rem; }
.du-row__btns { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.du-sections .btn-primary { padding: 0.5rem 1.4rem; }
.du-rows .du-rows__title { font-size: 1.65rem; font-weight: 400; color: var(--du-grey); margin: 0 0 0.5rem; }
.du-card { background: #fff; box-shadow: 0 2px 14px rgba(0, 0, 0, 0.14); padding: 1.25rem 1.4rem; height: 100%; }
.du-card h2 { font-size: 1.4rem; font-weight: 700; color: var(--du-red); margin: 0 0 0.25rem; }
.du-card p { margin: 0; }
.du-card .du-row__btns { margin-top: 1rem; }

/* Auswahlfeld im Formular: Pfeil sichtbar (Chevron aus Bootstrap 5, MIT) */
.du-form select.form-control, .du-form .form-select { appearance: none; -webkit-appearance: none; padding-right: 2.75rem; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23bd0926' stroke-linecap='square' stroke-width='2.5' d='M2 5l6 6 6-6'/%3e%3c/svg%3e"); background-repeat: no-repeat; background-position: right 1rem center; background-size: 16px 12px; cursor: pointer; }

/* Einfacher Texteditor (Fett, Kursiv, Listen) für Textfelder mit data-richtext, siehe main.js */
.du-rt__bar { display: flex; gap: 2px; margin-bottom: 2px; }
.du-rt__bar button { background: #fff; border: 0; border-radius: 0; color: var(--du-grey); width: 2.4rem; height: 2.2rem; font-size: 1rem; line-height: 1; cursor: pointer; }
.du-rt__bar button:hover, .du-rt__bar button:focus-visible { background: var(--du-red); color: #fff; }
.du-rt__area { background: #fff; padding: 0.7rem 1rem; min-height: 10rem; color: var(--du-grey); }
.du-rt__area:focus { outline: 0; box-shadow: inset 0 -4px 0 var(--du-red); }
.du-rt__area p { margin: 0 0 0.75rem; }
.du-rt__area ul, .du-rt__area ol { margin: 0 0 0.75rem; padding-left: 1.5rem; }

/* Unternavigation Mitgliederbereich */
.du-subnav { padding-top: 1.25rem; }
.du-subnav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px; }
.du-subnav a { display: block; background: #f4f1ef; color: var(--du-grey); padding: 0.55rem 1.1rem; text-decoration: none; font-weight: 500; }
.du-subnav a:hover, .du-subnav a:focus-visible { background: var(--du-grey); color: #fff; }
.du-subnav a.is-active { background: var(--du-red); color: #fff; }

/* Newsletter-Formular von Brevo (Embed, Markup theme/private/inc/brevo/*.html).
 * Werte stammen aus den style=-Attributen des Brevo-Embeds der Alt-Seite; als Klassen, weil die CSP kein style= erlaubt.
 * sib-styles.css (sibforms.com) steht vorher im <head>, die Selektoren mit .sib-form haben höhere Spezifität. */
.sib-form .du-sib, .sib-form.du-sib { text-align: left; background-color: #fff; }
.sib-form .du-sib-err, .sib-form .du-sib-ok { font-size: 16px; text-align: left; font-family: "Helvetica", sans-serif; border-radius: 3px; max-width: 540px; }
.sib-form .du-sib-err { color: #661d1d; background-color: #ffeded; border-color: #ff4949; }
.sib-form .du-sib-ok { color: #085229; background-color: #e7faf0; border-color: #13ce66; }
.sib-form .du-sib-box { text-align: left; background-color: rgba(255, 255, 255, 1); max-width: 540px; border-radius: 3px; border-width: 0; border-color: #c0ccd9; border-style: solid; direction: ltr; }
.sib-form .du-sib-row { padding: 16px 0; }
.sib-form .du-sib-label { font-weight: 700; text-align: left; font-size: 16px; font-family: "Helvetica", sans-serif; color: #565655; }
.sib-form .du-sib-error { font-size: 16px; text-align: left; font-family: "Helvetica", sans-serif; color: #661d1d; background-color: #ffeded; border-radius: 3px; border-color: #ff4949; }
.sib-form .du-sib-opt { font-size: 14px; text-align: left; font-family: "Helvetica", sans-serif; color: #3c4858; background-color: transparent; }
.sib-form .du-sib-spec { font-size: 12px; text-align: left; font-family: "Helvetica", sans-serif; color: #8390a4; }
.sib-form .du-sib-sphere { width: 63px; height: 63px; }
.sib-form .du-sib-decl { font-size: 14px; text-align: left; font-family: "Helvetica", sans-serif; color: #565655; background-color: transparent; }
.sib-form .du-sib-link { color: #bd0926; font-size: inherit; font-family: inherit; line-height: normal; }
.sib-form .du-sib-left { text-align: left; }
.sib-form .du-sib-btn { font-size: 16px; text-align: left; font-weight: 700; font-family: "Helvetica", sans-serif; color: #fff; background-color: #e7501e; border-radius: 1px; border-width: 0; }
#sib-container input::placeholder, #sib-container input:-ms-input-placeholder, #sib-container textarea::placeholder { text-align: left; font-family: "Helvetica", sans-serif; color: #c0ccda; }