/* =====================================================================
   DS Stadtseiten unter /regionen/ (Digitalbasis, 24.10.2026)
   Bildgeführter Aufbau: Einstieg, realisierte Räume, drei Disziplinen,
   Referenz im Detail, Ort, Zusammenarbeit, Fragen, Abschluss.
   Volle 1400-px-Box der BB-Row, eckig, Farben der CI.
   BB-Breakpoints hier: medium 940, responsive 500.
   ===================================================================== */
.ds-rg { color: #14201d; font-family: Raleway, sans-serif; text-align: left; }
.ds-rg * { box-sizing: border-box; }
.ds-rg p, .ds-rg li { color: #3a4744; font-size: 16.5px; line-height: 1.7; }
.ds-rg img { display: block; width: 100%; height: 100%; object-fit: cover; max-width: none; }
.ds-rg a { outline: 0; }

.ds-rg-kick {
	font-size: 12px !important; letter-spacing: 1.8px; text-transform: uppercase; line-height: 1.5 !important;
	font-weight: 600 !important; color: #2b7264 !important; margin: 0 0 14px !important;
}
.ds-rg-h {
	font-family: Montserrat, sans-serif; font-size: 36px; line-height: 1.16;
	font-weight: 600 !important; letter-spacing: -.5px; text-transform: none !important;
	color: #14201d !important; margin: 0 0 20px !important; text-wrap: balance;
}
.ds-rg-h3 {
	font-family: Montserrat, sans-serif; font-size: 20px; line-height: 1.3;
	font-weight: 600 !important; text-transform: none !important; letter-spacing: -.1px;
	color: #14201d !important; margin: 0 0 10px !important;
}
.ds-rg-lead { font-size: 19px !important; line-height: 1.6 !important; color: #2c3835 !important; }
.ds-rg p { margin: 0 0 16px; }
.ds-rg-kopf { margin-bottom: 44px; }
@media (min-width: 941px) {
	.ds-rg-kopf { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: 80px; align-items: end; }
	.ds-rg-kopf .ds-rg-kick { grid-column: 1 / -1; }
	.ds-rg-kopf .ds-rg-h, .ds-rg-kopf .ds-rg-lead { margin-bottom: 0 !important; }
}

/* Links und Buttons: eckig, Mint mit dunkler Schrift, Zweitbutton dunkel */
.ds-rg-btn, .ds-rg-btn2 {
	display: inline-block; padding: 15px 30px; font-family: Montserrat, sans-serif; font-size: 13px; font-weight: 600;
	letter-spacing: 1.4px; text-transform: uppercase; text-decoration: none !important; border-radius: 0; line-height: 1.3;
	transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.ds-rg-btn { background: #63af9e; color: #14201d !important; }
.ds-rg-btn:hover, .ds-rg-btn:focus-visible { background: #7fc9b7; color: #14201d !important; }
.ds-rg-btn2 { background: #1f1f1f; color: #ffffff !important; }
.ds-rg-btn2:hover, .ds-rg-btn2:focus-visible { background: #2b7264; color: #ffffff !important; }
.ds-rg-pfeil {
	display: inline-flex; align-items: center; gap: 10px; font-family: Montserrat, sans-serif; font-size: 13px;
	font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase; color: #14201d !important;
	text-decoration: none !important; border-bottom: 1px solid #63af9e; padding-bottom: 4px;
}
.ds-rg-pfeil::after { content: "\2192"; color: #2b7264; transition: transform .2s ease; }
.ds-rg-pfeil:hover::after { transform: translateX(4px); }
.ds-rg-text a:not([class]) { color: #2b7264 !important; text-decoration: underline; text-underline-offset: 2px; }

/* Bild mit Unterzeile */
.ds-rg-bild { margin: 0; position: relative; overflow: hidden; background: #e9ece9; }
.ds-rg-bild img { transition: transform .9s cubic-bezier(.2,.7,.2,1); }
a:hover > .ds-rg-bild img, .ds-rg-bild a:hover img { transform: scale(1.03); }
.ds-rg-unter { font-size: 13px !important; line-height: 1.5 !important; color: #5a6764 !important; margin: 12px 0 0 !important; }
.ds-rg-unter b { color: #14201d; font-weight: 600; }
.ds-rg-unter a { color: inherit !important; text-decoration: none !important; }
.ds-rg-unter a:hover b { color: #2b7264; }

/* 1. Einstieg */
.ds-rg-intro { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 0 88px; align-items: center; }
.ds-rg-intro .ds-rg-bild { aspect-ratio: 4 / 5; }
.ds-rg-fakten { list-style: none; margin: 34px 0 0 !important; padding: 26px 0 0 !important; border-top: 1px solid rgba(20,32,29,.14);
	display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.ds-rg-fakten li { margin: 0 !important; padding: 0 !important; }
.ds-rg-fakten b { display: block; font-family: Montserrat, sans-serif; font-size: 22px; line-height: 1.2; font-weight: 600; color: #14201d; margin-bottom: 6px; }
.ds-rg-fakten span { display: block; font-size: 14px; line-height: 1.45; color: #5a6764; }

/* 2. Realisierte Räume: dunkle Row, Mosaik */
.ds-rg-galerie .ds-rg-kick { color: #7fc9b7 !important; }
.ds-rg-galerie .ds-rg-h { color: #ffffff !important; }
.ds-rg-galerie .ds-rg-lead { color: rgba(255,255,255,.82) !important; }
.ds-rg-mosaik { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 250px; gap: 14px;
	grid-template-areas: "a a b c" "a a d d" "e e f f"; }
.ds-rg-kachel { position: relative; display: block; overflow: hidden; text-decoration: none !important; background: #24302d; }
.ds-rg-kachel:nth-child(1) { grid-area: a; }
.ds-rg-kachel:nth-child(2) { grid-area: b; }
.ds-rg-kachel:nth-child(3) { grid-area: c; }
.ds-rg-kachel:nth-child(4) { grid-area: d; }
.ds-rg-kachel:nth-child(5) { grid-area: e; }
.ds-rg-kachel:nth-child(6) { grid-area: f; }
.ds-rg-kachel img { transition: transform .9s cubic-bezier(.2,.7,.2,1); }
.ds-rg-kachel:hover img, .ds-rg-kachel:focus-visible img { transform: scale(1.04); }
.ds-rg-kachel::after { content: ""; position: absolute; inset: 45% 0 0 0; pointer-events: none;
	background: linear-gradient(to top, rgba(8,14,12,.86), rgba(8,14,12,0)); }
.ds-rg-kachel__text { position: absolute; left: 20px; right: 20px; bottom: 18px; z-index: 1; display: block; }
.ds-rg-kachel__text b { display: block; font-family: Montserrat, sans-serif; font-size: 12px; letter-spacing: 1.5px;
	text-transform: uppercase; font-weight: 600; color: #7fc9b7; margin-bottom: 4px; }
.ds-rg-kachel__text span { display: block; font-size: 15.5px; line-height: 1.4; color: #ffffff; }
.ds-rg-galerie__fuss { margin: 32px 0 0 !important; }
.ds-rg-galerie .ds-rg-pfeil { color: #ffffff !important; }
.ds-rg-galerie .ds-rg-pfeil::after { color: #7fc9b7; }

/* 3. Drei Disziplinen */
.ds-rg-felder__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 44px; }
.ds-rg-feld .ds-rg-bild { aspect-ratio: 4 / 3; margin-bottom: 24px; }
.ds-rg-feld__nr { font-family: Montserrat, sans-serif; font-size: 12px !important; letter-spacing: 1.6px; font-weight: 600;
	color: #2b7264 !important; margin: 0 0 8px !important; text-transform: uppercase; }
.ds-rg-feld p { font-size: 16px; }
.ds-rg-feld .ds-rg-pfeil { margin-top: 6px; }

/* 4. Referenz im Detail */
.ds-rg-projekt { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 0 72px; align-items: center; }
.ds-rg-projekt__bilder { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.ds-rg-projekt__bilder .ds-rg-bild:first-child { grid-column: 1 / -1; aspect-ratio: 16 / 10; }
.ds-rg-projekt__bilder .ds-rg-bild:not(:first-child) { aspect-ratio: 4 / 3; }
.ds-rg-liste { list-style: none; margin: 8px 0 30px !important; padding: 0 !important; border-top: 1px solid rgba(20,32,29,.14); }
.ds-rg-liste li { margin: 0 !important; padding: 12px 0 12px 26px; position: relative; border-bottom: 1px solid rgba(20,32,29,.14);
	font-size: 15.5px !important; line-height: 1.5 !important; }
.ds-rg-liste li::before { content: ""; position: absolute; left: 2px; top: 21px; width: 10px; height: 2px; background: #2b7264; }

/* 5. Ort */
.ds-rg-ort__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 56px; border-top: 2px solid #14201d; }
.ds-rg-ort__block { padding-top: 28px; }
.ds-rg-ort__block p { font-size: 16px; }

/* 6. Zusammenarbeit */
.ds-rg-ablauf { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 0 80px; align-items: start; }
.ds-rg-ablauf .ds-rg-bild { aspect-ratio: 3 / 4; }
.ds-rg-ablauf .ds-rg-bild img { object-position: 38% 50%; }
.ds-rg-schritte { list-style: none; margin: 10px 0 0 !important; padding: 0 !important; counter-reset: s; }
.ds-rg-schritte li { counter-increment: s; position: relative; margin: 0 !important; padding: 20px 0 20px 64px;
	border-top: 1px solid rgba(20,32,29,.14); }
.ds-rg-schritte li::before { content: counter(s, decimal-leading-zero); position: absolute; left: 0; top: 20px;
	font-family: Montserrat, sans-serif; font-size: 22px; font-weight: 600; color: #2b7264; line-height: 1.2; }
.ds-rg-schritte b { display: block; font-family: Montserrat, sans-serif; font-size: 17px; color: #14201d; font-weight: 600; margin-bottom: 4px; }
.ds-rg-schritte span { display: block; font-size: 15.5px; line-height: 1.6; color: #3a4744; }
.ds-rg-fein { font-size: 14px !important; line-height: 1.55 !important; color: #5a6764 !important; margin: 18px 0 0 !important; }

/* 7. Fragen */
.ds-rg-faq { max-width: none; border-top: 1px solid rgba(20,32,29,.14); }
.ds-rg-faq details { border-bottom: 1px solid rgba(20,32,29,.14); }
.ds-rg-faq summary { list-style: none; cursor: pointer; padding: 22px 48px 22px 0; position: relative;
	font-family: Montserrat, sans-serif; font-size: 17.5px; line-height: 1.4; font-weight: 600; color: #14201d; }
.ds-rg-faq summary::-webkit-details-marker { display: none; }
.ds-rg-faq summary::after { content: "+"; position: absolute; right: 6px; top: 18px; font-size: 26px; font-weight: 400; color: #2b7264; }
.ds-rg-faq details[open] summary::after { content: "\2212"; }
.ds-rg-faq details > div { padding: 0 0 22px; max-width: 92ch; }
@media (min-width: 941px) {
	.ds-rg-faq { columns: 1; }
}

/* 8. Abschluss: Bildfläche mit Text */
.ds-rg-cta { position: relative; min-height: 520px; display: flex; align-items: flex-end; overflow: hidden; background: #14201d; }
.ds-rg-cta > img { position: absolute; inset: 0; z-index: 0; }
.ds-rg-cta::before { content: ""; position: absolute; inset: 0; z-index: 1;
	background: linear-gradient(90deg, rgba(10,18,16,.9) 0%, rgba(10,18,16,.72) 42%, rgba(10,18,16,.15) 78%, rgba(10,18,16,0) 100%); }
.ds-rg-cta__inhalt { position: relative; z-index: 2; padding: 64px 64px 56px; max-width: 760px; }
.ds-rg-cta .ds-rg-kick { color: #7fc9b7 !important; }
.ds-rg-cta .ds-rg-h { color: #ffffff !important; }
.ds-rg-cta p { color: rgba(255,255,255,.88) !important; }
.ds-rg-cta .ds-rg-knoepfe { display: flex; flex-wrap: wrap; gap: 12px; margin: 28px 0 22px; }
.ds-rg-cta .ds-rg-btn2 { background: transparent; border: 1px solid rgba(255,255,255,.55); padding: 14px 28px; }
.ds-rg-cta .ds-rg-btn2:hover { border-color: #7fc9b7; background: transparent; color: #7fc9b7 !important; }
.ds-rg-cta .ds-rg-fein { color: rgba(255,255,255,.72) !important; }
.ds-rg-cta .ds-rg-fein a { color: #ffffff !important; text-decoration: underline; text-underline-offset: 2px; }

/* Übersicht /regionen/: Städtekarten nach Regionen, Distanz-Blöcke zweispaltig */
.ds-rg-gruppe { margin-top: 48px; }
.ds-rg-gruppe:first-of-type { margin-top: 0; }
.ds-rg-gruppe__titel { font-family: Montserrat, sans-serif; font-size: 13px !important; letter-spacing: 1.8px; text-transform: uppercase;
	font-weight: 600 !important; color: #14201d !important; margin: 0 0 18px !important; padding-bottom: 12px; border-bottom: 2px solid #14201d; }
.ds-rg-karten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px 28px; }
.ds-rg-karte { display: block; text-decoration: none !important; color: inherit; background: #ffffff; }
.ds-rg-karte .ds-rg-bild { aspect-ratio: 3 / 2; }
.ds-rg-karte .ds-rg-feld__nr, .ds-rg-karte .ds-rg-h3, .ds-rg-karte p { padding: 0 22px; }
.ds-rg-karte .ds-rg-feld__nr { margin-top: 20px !important; }
.ds-rg-karte p:last-child { font-size: 15px; line-height: 1.6; padding-bottom: 22px; margin: 0 !important; }
.ds-rg-karte:hover .ds-rg-h3 { color: #2b7264 !important; }
.ds-rg-karte:hover img { transform: scale(1.03); }
.ds-rg-ort__grid--zwei { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 72px; }

/* Hero-H1 ohne automatische Trennung: Der Hero-Feinschliff trennt Wörter ab 14 Zeichen, auch wenn sie allein auf
   eine Zeile passen ("BADARCHI-TEKTUR", "BRAUN-SCHWEIGER"). Längstes Wort der Stadt-H1s passt auch bei 360 px. */
body.parent-pageid-48713 .fl-row:has(.fl-col.ds-scrim) h1,
body.parent-pageid-48713 .fl-row:has(.fl-col.ds-scrim) h1 .fl-heading-text,
body.page-id-48713 .fl-row:has(.fl-col.ds-scrim) h1,
body.page-id-48713 .fl-row:has(.fl-col.ds-scrim) h1 .fl-heading-text {
	-webkit-hyphens: manual; hyphens: manual;
}
/* Bis 400 px: 14 Buchstaben in Versalien (BADARCHITEKTUR 322 px, BRAUNSCHWEIGER 337 px) brauchten mehr als die
   320 px Spalte bei 360 px. 27 px und 2 px Laufweite ergeben 291 und 305 px. */
@media (max-width: 400px) {
	body.parent-pageid-48713 .fl-row:has(.fl-col.ds-scrim) h1,
	body.parent-pageid-48713 .fl-row:has(.fl-col.ds-scrim) h1 .fl-heading-text,
	body.page-id-48713 .fl-row:has(.fl-col.ds-scrim) h1,
	body.page-id-48713 .fl-row:has(.fl-col.ds-scrim) h1 .fl-heading-text {
		font-size: 27px !important; letter-spacing: 2px !important;
	}
}

/* Tablet und kleiner */
@media (max-width: 940px) {
	.ds-rg-h { font-size: 29px; }
	.ds-rg-lead { font-size: 17.5px !important; }
	.ds-rg-intro, .ds-rg-projekt, .ds-rg-ablauf { grid-template-columns: 1fr; gap: 36px; }
	.ds-rg-intro .ds-rg-bild { aspect-ratio: 4 / 3; }
	.ds-rg-ablauf .ds-rg-bild { aspect-ratio: 4 / 3; max-width: 560px; }
	.ds-rg-mosaik { grid-template-columns: 1fr 1fr; grid-auto-rows: 200px; grid-template-areas: "a a" "a a" "b c" "d d" "e f"; }
	.ds-rg-felder__grid, .ds-rg-ort__grid, .ds-rg-ort__grid--zwei { grid-template-columns: 1fr; gap: 40px; }
	.ds-rg-karten { grid-template-columns: 1fr 1fr; gap: 24px 18px; }
	.ds-rg-ort__grid { gap: 0; }
	.ds-rg-cta__inhalt { padding: 48px 32px 40px; }
	.ds-rg-cta::before { background: linear-gradient(0deg, rgba(10,18,16,.92) 0%, rgba(10,18,16,.75) 55%, rgba(10,18,16,.35) 100%); }
}
@media (max-width: 600px) {
	.ds-rg-h { font-size: 25px; }
	.ds-rg p, .ds-rg li { font-size: 16px; }
	.ds-rg-fakten { grid-template-columns: 1fr; gap: 16px; }
	.ds-rg-karten { grid-template-columns: 1fr; }
	.ds-rg-mosaik { grid-auto-rows: 150px; gap: 10px; }
	.ds-rg-kachel__text { left: 14px; right: 14px; bottom: 12px; }
	.ds-rg-kachel__text span { font-size: 14px; }
	.ds-rg-kachel:not(:first-child) .ds-rg-kachel__text b { display: none; }
	.ds-rg-kachel:not(:first-child)::after { inset: 35% 0 0 0; }
	.ds-rg-cta { min-height: 0; }
	.ds-rg-cta__inhalt { padding: 40px 22px 32px; }
	.ds-rg-cta .ds-rg-knoepfe { flex-direction: column; align-items: stretch; }
	.ds-rg-cta .ds-rg-knoepfe a { text-align: center; }
	.ds-rg-schritte li { padding-left: 52px; }
}
@media (prefers-reduced-motion: reduce) {
	.ds-rg img, .ds-rg-pfeil::after { transition: none !important; }
}