/* Startseite: inline Sprachauswahl unter dem Hero ausblenden */
.inline-language-menu { display: none !important; }
/* Hero-Cards: eigener weisser Hintergrund */
.multimedia-header .header-teaser { background: #fff; }
/* Blauer Container: verschachtelte Gradient-Kaesten der Kind-Elemente vermeiden */
.bg--blue .frame.bg { background: transparent !important; }
/* Entdecken Sie die Vielfalt: Cards in 2er-Grid (erst ab Tablet, mobil 1 Spalte) */
@media (min-width: 768px) {
#c-teaser-layout-10-c15826 .teaser__block { grid-template-columns: repeat(2, 1fr) !important; }
}
/* Footer: Breadcrumb-Trennlinie genauso lang wie die Linie unter den Social-Icons (80rem statt 40rem) */
.footer .footer__breadcrumb { width: 80rem; }
/* Hero-Cards: alle Bilder gleiche Hoehe -> Bildunterkante auf einer Linie */
.multimedia-header__teaser .header-teaser__image { aspect-ratio: 3 / 2; height: auto; object-fit: cover; }
/* Hero-Bild-Slider: ueberblendende Hintergrundebenen */
.multimedia-header__media .hero-slideshow { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.multimedia-header__media .hero-slide { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0; transition: opacity 1.4s ease-in-out; }
.multimedia-header__media .hero-slide.is-active { opacity: 1; }
/* Hauptmenue: Full-Width-Mega-Menue auf Desktop (wie altes Template, neues Design) */
@media (min-width: 993px) {
/* Toolbar darf das Mega-Panel nach unten ueberlaufen lassen */
.toolbar__wrap { overflow: visible; }
/* Item statisch -> das absolute Panel verankert an .toolbar__wrap (fixed) = volle Breite */
.main-menu__item--has-sub { position: static; }
.main-menu__sub {
position: absolute; top: 100%; left: 0; right: 0;
background: #fff;
border-top: 1px solid rgba(0,0,0,.08);
box-shadow: 0 .9rem 1.75rem rgba(0,0,0,.16);
opacity: 0; visibility: hidden; transform: translateY(.3rem);
transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
z-index: 200;
}
/* unsichtbare Bruecke ueberbrueckt den Spalt zwischen Item und Panel (Hover bleibt) */
.main-menu__sub::before {
content: ""; position: absolute; left: 0; right: 0; top: -2.5rem; height: 2.5rem;
}
.main-menu__item--has-sub:hover > .main-menu__sub,
.main-menu__item--has-sub:focus-within > .main-menu__sub,
.main-menu__sub:hover {
opacity: 1; visibility: visible; transform: translateY(0);
}
/* Inhalt auf Content-Breite (1280px), Spalten als Gruppe horizontal zentriert
(statt links gepackt) -> wenige Spalten stehen mittig, breite Menues fuellen die Breite */
.main-menu__mega {
max-width: 80rem; margin: 0 auto; padding: 1.75rem 2rem 2rem;
display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start;
gap: 1.5rem 2rem;
}
.main-menu__col {
flex: 0 0 12.5rem; width: 12.5rem;
break-inside: avoid; -webkit-column-break-inside: avoid; page-break-inside: avoid;
margin-bottom: 0;
}
.main-menu__col-title {
display: block; padding: .35rem 0; margin-bottom: .35rem;
border-bottom: 1px solid rgba(0,0,0,.12);
color: #4d4d4d; text-decoration: none; line-height: 1.25;
font-size: .95rem; font-weight: 700;
}
/* Hover: Schrift NICHT rot -> nur blaue Linie unter dem Text (wie altes Template) */
.main-menu__col-title:hover,
.main-menu__col-title:focus,
.main-menu__col-title--active {
text-decoration: underline; text-decoration-color: var(--col-blue, #2276d0);
text-decoration-thickness: 2px; text-underline-offset: .25em;
}
.main-menu__col-list { margin: 0; padding: 0; list-style: none; }
.main-menu__sub-item { margin: 0; }
.main-menu__sub-link {
display: block; padding: .3rem 0; white-space: normal;
color: #1a1a1a; text-decoration: none; line-height: 1.3;
font-size: .9rem;
}
.main-menu__sub-link:hover,
.main-menu__sub-link:focus,
.main-menu__sub-link--active {
color: #1a1a1a;
text-decoration: underline; text-decoration-color: var(--col-blue, #2276d0);
text-decoration-thickness: 2px; text-underline-offset: .2em;
}
}
/* Mobile/Tablet: keine Hover-Dropdowns -> Sub-Menues ausblenden, neues Mobile-Nav bleibt unveraendert */
@media (max-width: 992px) {
.main-menu__sub { display: none; }
}
/* ── Themen-Dropdown auf Unterseiten entfernen (2026-06-16) ──
Die Haupt-Navigation (Mega-Menue Desktop / Drill-Down Mobil) deckt die
Unterseiten-Navigation komplett ab -> der separate Themen-Dropdown oben auf
Unterseiten (.sub-menu__bar / .sub-menu__nav-wrap) ist redundant. Nur
ausgeblendet -> das Scroll-Verhalten der Toolbar (submenu.js) bleibt aktiv,
voll reversibel. */
.sub-menu__bar,
.sub-menu__nav-wrap { display: none !important; }
/* ── Mobile Drill-Down-Navigation im Hamburger-Drawer (2026-06-16) ──
Ersetzt auf Mobil die flache Top-Level-Liste durch eine Ebenen-Navigation
(wie der entfernte Themen-Dropdown): direkt aus dem Burger in die
Unterpunkte, ohne erst eine Seite zu oeffnen. DOM per dresden.js
(ddBuildMobileNav) aus dem vorhandenen Menuebaum erzeugt. */
.dd-mnav { display: none; }
@media (max-width: 992px) {
/* flache Original-Liste im Drawer verstecken, Drill-Down zeigen */
.main-menu__wrap .main-menu { display: none; }
.dd-mnav { display: block; }
/* Suchleiste IMMER oben halten: das Template haengt .global-search UND
.main-menu per JS bei JEDEM resize ans Ende des Drawers (auf Mobil feuert
schon das Ein-/Ausblenden der Browser-URL-Leiste ein resize) -> ohne feste
Reihenfolge rutscht die Suche unter die Menuelinks. Flexbox + order
erzwingt die visuelle Reihenfolge unabhaengig von der DOM-Reihenfolge. */
/* !important + --open: schlaegt das inline display:block, das menu.js beim
Oeffnen setzt; nur im offenen Zustand, damit das Schliessen (display:none)
weiter funktioniert. */
.main-menu__wrap--open { display: flex !important; flex-direction: column; }
.main-menu__wrap { padding-top: .75rem; }
.main-menu__wrap .global-search { order: 0; margin-bottom: 1.25rem; }
.main-menu__wrap .dd-mnav { order: 1; }
}
.dd-mnav__viewport {
position: relative;
overflow: hidden;
transition: height .3s ease;
}
/* Panels schieben horizontal. Wichtig: deckender Hintergrund, sonst scheint
das darunterliegende Eltern-Panel durch (Text-Overlap). */
.dd-mnav__panel {
position: absolute; top: 0; left: 0; width: 100%;
margin: 0; padding: 0; list-style: none;
background: var(--col-black-05, #f4f4f4);
transform: translateX(100%);
transition: transform .3s ease;
}
.dd-mnav__panel.is-active { transform: translateX(0); }
.dd-mnav__panel.is-left { transform: translateX(-100%); }
.dd-mnav__item {
list-style: none; margin: 0;
border-bottom: 1px solid var(--col-black-20, rgba(0,0,0,.12));
}
.dd-mnav__item--back { border-bottom: 0; }
/* Eine Zeile: Label nimmt den Platz, Chevron sitzt rechts (kein Overlap) */
.dd-mnav__entry {
display: flex; align-items: center; justify-content: space-between; gap: .75rem;
width: 100%; padding: 1rem; box-sizing: border-box;
border: 0; background: transparent; cursor: pointer;
font-family: inherit; font-size: 1rem; font-weight: 700; line-height: 1.25;
text-align: left; text-decoration: none; color: var(--col-text, #1a1a1a);
}
.dd-mnav__label { flex: 1 1 auto; min-width: 0; }
.dd-mnav__entry--drill > svg { flex: 0 0 auto; width: 9px; height: 13px; }
.dd-mnav__entry.dd-mnav__link--active { color: var(--col-blue, #2276d0); }
.dd-mnav__back {
display: flex; align-items: center; gap: .55rem; width: 100%;
padding: .85rem 1rem; border: 0; background: var(--col-black-10, #ececec);
color: #4d4d4d; font-weight: 600; font-size: .95rem; cursor: pointer;
font-family: inherit;
}
.dd-mnav__back svg { width: 9px; height: 13px; transform: rotate(180deg); }
/* Lange URLs/Woerter im RTE-/Textmedia-Text umbrechen. Migrierte Inhalte haben
Links deren sichtbarer Text die volle URL ist (z.B. https://www.radeberg.de/inhalte/...)
-> ohne Umbruch sprengen sie auf Mobil die Seitenbreite (horizontaler Scroll). */
.o-cms-content__body,
.textmedia__text,
.ce-bodytext,
.rte-content,
.o-cms-content__body a,
.textmedia__text a,
.ce-bodytext a { overflow-wrap: break-word; word-break: break-word; }
/* RTE-Headlines (.o-cms-content__headline): hatten margin-top:0 + margin-bottom:1em
-> Headline klebte am vorherigen Block und stand riesig weit ueber ihrem eigenen
Text. Wie alte Seite: etwas Luft nach oben, eng an den folgenden Text. */
.o-cms-content__headline {
margin-top: 1.6rem;
margin-bottom: 0.4em;
line-height: 1.2;
}
/* erste Headline direkt unter der Seiten-H1 / oben im Inhaltsbereich nicht extra einruecken */
.o-cms-content__body > .frame:first-child .o-cms-content__headline:first-child {
margin-top: 0;
}
/* ============================================================================
Ansprechpartner-Cards (einheitlich, eine Card pro Person)
Struktur wird per dresden.js (initContactCards) aus den getippten
Kontaktbloecken erzeugt: Foto-Placeholder + Name/Funktion/Telefon/E-Mail.
Rein praesentativ, voll reversibel. */
.dd-cp-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(440px, 1fr));
gap: 1.4rem;
width: 100%;
max-width: 1056px;
margin: 1.4rem auto 2rem;
align-items: stretch;
}
/* Theme-Frame-Margins der Cards nullen: sonst fressen sie (ungleich: erste Card
ohne margin-top) unterschiedlich viel der Reihenhoehe -> Cards ungleich hoch.
Abstaende kommen ausschliesslich aus dem Grid-gap. */
.dd-cp-grid > .dd-cp {
margin: 0 !important;
}
/* Eine Card: Foto fuellt linke Spalte ueber die volle Hoehe (Stil Freiberg) */
.dd-cp,
.frame.dd-cp {
/* display:flex -> der Body fuellt die min-height auch bei EINZEL-Cards (ohne
Grid, das sonst die definite Hoehe liefert). Sonst bleibt der Body auf
Inhaltshoehe und unter dem Foto klafft ein weisser Streifen bis min-height. */
display: flex;
min-height: 162px;
background: #fff;
border: 1px solid #e7e7e7;
border-radius: 12px;
box-shadow: 0 3px 14px rgba(0, 0, 0, .09);
padding: 0;
margin: 0;
overflow: hidden;
}
/* Body fuellt die (per Grid gleich hohe) Card -> Foto/Placeholder ohne weisse
Luecke darunter, alle Cards einer Reihe optisch identisch. */
.dd-cp__body {
display: flex;
align-items: stretch;
/* KEIN height:100% -> das wuerde gegen die (inhaltshohe) Elternhoehe aufloesen
und das flex align-items:stretch der Card aushebeln. Ohne definite Hoehe
streckt die Card (display:flex) den Body auf ihre min-height (162px). */
flex: 1 1 auto;
gap: 0;
width: 100% !important;
max-width: none !important;
margin: 0 !important;
padding: 0 !important;
}
/* Foto / Placeholder: linke Spalte. order:-1 -> Foto immer links. Bild absolut ->
diktiert NICHT die Kartenhoehe (Hochformat wuerde die Karte sonst sprengen);
Hoehe kommt aus der Info-Spalte. (Beside-Wrapper entfernt das JS in ddCardifyBox.) */
.dd-cp__photo {
order: -1;
flex: 0 0 38%;
max-width: 38%;
align-self: stretch;
position: relative;
min-height: 150px;
background: #d9d9d9;
overflow: hidden;
}
.dd-cp__photo img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 20%;
display: block;
}
/* Meinhold: einziges vorhandenes Bild ist ein Quer-/Hero-Foto (Gesicht oben
rechts). Ausschnitt darauf ausrichten, damit es im Card-Slot nicht abschneidet. */
#c18670 .dd-cp__photo img { object-position: 56% 50%; }
/* Tom Heintze: Foto formatfuellend (kein weisser Rand seitlich), Ausschnitt
etwas tiefer ausgerichtet, damit Kopf nicht oben abschneidet. Stabil ueber
den Dateinamen adressiert (CE-uid unterscheidet sich lokal/Server). */
.dd-cp__photo img[src*="heintze"] { object-position: center 32%; }
.dd-cp__photo--ph {
display: flex;
align-items: center;
justify-content: center;
min-height: 120px;
background: #e7e7e7;
}
.dd-cp__photo--ph svg {
width: 46%;
max-width: 72px;
height: auto;
fill: none;
stroke: #8a8a8a;
stroke-width: 4;
stroke-linecap: round;
}
/* Mehrere Personen aus EINEM Textblock: untereinander, volle Breite */
.dd-cp-stack { grid-template-columns: 1fr; }
/* Einzelne Karte in einer Bereichs-Gruppe (z.B. Frank Sipply / Geschaefts-
fuehrung, Mattes / RKD, Thomas / Haustechnik): mittig statt full width. */
.dd-cp-grid:not(.dd-cp-stack):has(> .dd-cp--frame:only-child) {
grid-template-columns: minmax(0, 500px);
justify-content: center;
}
/* Abstand zwischen Namens-/Funktionsgruppe und den Kontaktzeilen */
.dd-cp__sep { display: block; height: .85rem; }
/* Info-Spalte (rechts) mit Innenabstand; kleinerer, luftiger Text */
.dd-cp__info {
flex: 1 1 auto;
min-width: 0;
font-size: .9rem;
line-height: 1.7;
padding: 1.3rem 1.5rem;
}
.dd-cp__info > .o-cms-content__headline,
.dd-cp__info > h2,
.dd-cp__info > h3,
.dd-cp__info > h4 {
margin: 0 0 .45rem;
font-size: 1.05rem;
line-height: 1.2;
color: var(--col-red, #e60005);
}
.dd-cp__info p { margin: 0 0 .35rem; }
.dd-cp__info p:last-child { margin-bottom: 0; }
.dd-cp__info b,
.dd-cp__info strong { font-weight: 600; }
.dd-cp__info a { word-break: break-word; }
/* Inline-Cards (mehrere Personen aus EINEM Textblock) tragen das direkt */
.dd-cp--inline .dd-cp__info > p { margin: 0; }
/* "E-Mail schreiben"-Button (aus E-Mail-Adresse erzeugt) sowie der
"Auf Google Maps oeffnen"-Button der Adress-Cards (.dd-cp-btn) */
.dd-cp .dd-cp-mail,
.dd-cp .dd-cp-btn {
display: inline-block;
margin: .55rem 0 0;
padding: .45rem 1.05rem;
font-size: .9rem;
line-height: 1.2;
white-space: nowrap;
word-break: normal;
}
/* calltoaction-Kontakt-Card: einzelne, mittig im Inhalt ausgerichtete Card
(nicht mehr am Seitenrand klebend). */
.dd-cp--cta {
max-width: 40rem;
margin: 1.4rem auto 2rem;
}
@media (max-width: 560px) {
/* Einspaltig + seitliches Padding, damit die Cards nicht am Rand kleben
(die 440px-Mindestbreite des Desktop-Grids wuerde sonst ueberlaufen). */
.dd-cp-grid {
grid-template-columns: 1fr;
padding-inline: 1rem;
gap: 1rem;
margin-block: 1rem 1.5rem;
}
/* Foto bleibt LINKS (kompaktes, quadratisches Bild) statt riesigem
Vollbreite-Banner -> Portraet-Gesichter wirken nicht abgeschnitten,
Platzhalter-Karten keine grossen leeren Flaechen. */
.dd-cp__photo { flex: 0 0 40%; max-width: 40%; }
.dd-cp__info { padding: 1rem 1.1rem; }
/* Einzelkarte mobil wieder volle (gepaddete) Breite, nicht 500px-zentriert */
.dd-cp-grid:not(.dd-cp-stack):has(> .dd-cp--frame:only-child) {
grid-template-columns: 1fr;
}
}
/* Mobile: Card-Slider (menu_sitemap layout 10) mit gleichem Rand-Spacing wie "Aktuelles" (32px) */
@media (max-width: 767px) {
.teaser__slider .swiper__teaser { padding-inline: 2rem; }
.teaser__slider .swiper-slide { max-width: 310px; width: 100%; }
/* blaue Section: doppeltes Innen-Padding der gridelements-Box fuer den Slider aufheben */
.frame.bg--blue .teaser__wrapper { margin-inline: -2rem; }
}
/* ----------------------------------------------------------------------------
Inhalts-Tabellen mobil-optimiert (wie alte Seite drk_template2016 .c-table)
Das neue Template wrappt RTE-Tabellen per JS in .contenttable__wrap, liefert
aber KEIN responsives CSS dazu -> breite Tabellen laufen ueber den Rand und
erzeugen horizontalen Seiten-Scroll. Alte Seite stapelte die Zellen unter
45em. Hier nachgebaut: unter 768px wird jede Zeile/Zelle zum Block (Label
ueber Wert), Kopfzeile ausgeblendet -> kein Overflow, lesbar wie frueher. */
@media (max-width: 767px) {
/* Als echte Tabelle rendern (nicht stapeln), aber sauber: geteilte Rahmen per
border-collapse -> KEINE komischen Luecken/Doppelrahmen zwischen den Zellen.
Label-Spalte dezent grau + fett, Wert-Spalte normal. Zu breite Tabellen
scrollen im Wrap horizontal statt die Seite zu sprengen. */
.contenttable__wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.contenttable {
display: table;
width: 100%;
/* Theme setzt table-layout:fixed -> mit width:1% wuerde die Label-Spalte auf
~0 schrumpfen und der Text ueberlappen. auto: Spalten nach Inhalt. */
table-layout: auto !important;
border-collapse: collapse;
border: 1px solid #e0e0e0;
background: #fff;
margin: 0;
}
.contenttable tbody { display: table-row-group; }
.contenttable thead { display: table-header-group; }
.contenttable tr { display: table-row; }
.contenttable td,
.contenttable th {
display: table-cell;
border: 1px solid #e0e0e0;
padding: .5rem .65rem;
text-align: left;
vertical-align: top;
overflow-wrap: anywhere;
word-break: break-word;
}
/* Label-Spalte (1. von zweien): schmal, grau hinterlegt, fett */
.contenttable tr td:first-child:not(:only-child) {
font-weight: 600;
color: #333;
background: #f4f4f4;
white-space: nowrap;
width: 1%;
}
/* Adress-Tabelle (drk-addresses, .c-addresses__table): nutzt intern Floats +
feste 50%-Spalten mit nicht umbrechenden Header-Boxen -> laeuft mobil ueber.
Daher mobil komplett stapeln (Block), Floats aufheben -> passt in Viewport. */
.c-addresses__table,
.c-addresses__table tbody,
.c-addresses__table tr,
.c-addresses__table td,
.c-addresses__table th {
display: block;
width: 100% !important;
box-sizing: border-box;
float: none !important;
}
.c-addresses__table td,
.c-addresses__table th { padding: .35rem 0; vertical-align: top; }
.c-addresses__table tr { border-bottom: 1px solid rgba(0,0,0,.1); padding: .5rem 0; }
.c-addresses__table tr:last-child { border-bottom: 0; }
.c-addresses__table .header,
.c-addresses__table h4 { width: auto !important; }
.c-addresses__table td *,
.c-addresses__table th * { max-width: 100%; overflow-wrap: anywhere; word-break: break-word; }
}
/* ── Absatz- & Listen-Abstände an die alte Seite angleichen (2026-06-09) ──
Aufeinanderfolgende Text-Absätze sind je ein eigenes .frame mit margin-block
4rem (64px Desktop) -> Absatzabstand viel größer als früher (~1 Leerzeile).
Nur den Abstand ZWISCHEN zwei Text-Elementen verkleinern; Abstand zu Bildern/
Teasern/Slidern bleibt unverändert (4rem). margin-block:577px-Regel des
Templates -> hier ab 577px überschreiben. Beide Seiten setzen, sonst greift
margin-collapse den größeren (4rem) Wert. */
@media (min-width: 577px) {
.frame-type-textmedia:has(+ .frame-type-textmedia),
.frame-type-text:has(+ .frame-type-text) {
margin-block-end: 1.6rem;
}
.frame-type-textmedia + .frame-type-textmedia,
.frame-type-text + .frame-type-text {
margin-block-start: 1.6rem;
}
}
/* RTE-Listen (.list) liefen mit .3em/.3em Polster pro
sehr luftig (Item 42px
statt ~30px) -> enger wie früher: alte Seite hat 0 Polster, Bullets nur über
line-height verteilt. Horizontale Polster (Bullet-Einzug) bleiben. */
.textmedia__text .list > li,
.csc-textpic-text .list > li {
padding-top: 0;
padding-bottom: 0;
}
/* RTE-Listen klebten ohne Abstand am umgebenden Text (margin oben/unten = 0px).
Alte Seite: ~17px oben / ~17–25px unten. -> Abstand zwischen Text und Liste
und zwischen Liste und Folgetext wiederherstellen. Universell für alle Seiten,
da alle Inhalts-Listen die Klasse .list tragen (im .textmedia__text/.csc-Text). */
.textmedia__text ul.list,
.textmedia__text ol.list,
.csc-textpic-text ul.list,
.csc-textpic-text ol.list {
margin-block: 1.1rem;
}
/* ── Hero-/Stage-Bilder: einheitliche, kleinere Höhe (2026-06-10) ──
Bisher = volle Bildhöhe (Breite × natürliches Seitenverhältnis) -> bis 797px,
pro Seite unterschiedlich je nach Bild. Feste Höhe + object-fit:cover macht
alle Seiten-Heros gleich hoch und deutlich kompakter. */
.frame-type-drk_template_stage .stage-image img {
width: 100%;
height: 560px;
object-fit: cover;
object-position: center;
display: block;
}
@media (max-width: 767px) {
.frame-type-drk_template_stage .stage-image img {
height: 300px;
}
}
/* ── Inhaltsbilder „neben Text" (beside) verkleinern (2026-06-10) ──
Migration verlor die imagewidth (alle 0); neues Template teilt beside 50/50
-> Bildspalte 640px (riesig). Alte Seite zeigte diese Bilder klein (~271px)
neben dem Text. -> Bildspalte deckeln, Text bekommt den Rest. Nur beside-
Layout (oben/unten-Bilder bleiben unverändert). Erst ab Tablet (>=768px);
darunter stapelt das Template ohnehin (Bild voll). */
@media (min-width: 768px) {
.textmedia--orientation-beside .textmedia__figure {
flex: 0 0 auto;
width: 320px;
max-width: 38%;
}
.textmedia--orientation-beside .textmedia__figure img {
width: 100%;
height: auto;
}
}
/* ── Doppelte Kurslisten-Überschrift entfernen (2026-06-10) ──
Die Extension drk/courseview rendert in ihrem Fluid-Template eine fest
eingebaute Überschrift