/* RMH Seitenfelder: Felder der Stadtteilseite in der Sprache von Entwurf B, auf Unterseiten ruhiger.
   Farben: Verkehrsweiss #f1f0ea, Text #ebe9e2, leise #b0b7bd, hell #d6d3cb, Licht #f2b544. */
.rmh-feld {
	--rmh-feld-linie: repeating-linear-gradient(90deg, rgba(242, 181, 68, 0.45) 0 9px, transparent 9px 21px);
	color: #d6d3cb;
	font-family: 'IBM Plex Sans', system-ui, sans-serif;
	font-size: 17px;
	line-height: 1.6;
}
.rmh-feld p { margin: 0 0 1em; }
.rmh-feld p:last-child { margin-bottom: 0; }
.rmh-feld__titel {
	margin: 0;
	color: #ebe9e2;
	font-family: 'Saira Condensed', system-ui, sans-serif;
	font-weight: 700;
	font-size: clamp(1.7rem, 2.8vw, 2.4rem);
	line-height: 1.02;
	letter-spacing: -0.2px;
}

/* Einleitung */
.rmh-feld--einleitung { max-width: 60ch; font-size: 18px; color: #b0b7bd; }

/* Abschnitte: Linie, Titel links, Text rechts (ab 1025 px), sonst untereinander */
.rmh-feld--abschnitte { display: block; }
.rmh-feld__abschnitt { position: relative; padding: 40px 0 44px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.rmh-feld__abschnitt::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--rmh-feld-linie); }
.rmh-feld__text { max-width: 62ch; }
@media (min-width: 1025px) {
	.rmh-feld__abschnitt { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 46px; padding: 48px 0 52px; }
	.rmh-feld__abschnitt:not(:has(.rmh-feld__titel)) .rmh-feld__text { grid-column: 2; }
}

/* Haeufige Fragen */
.rmh-feld--faq { display: block; }
.rmh-feld__fragen { margin-top: 28px; border-top: 2px solid transparent; border-image: var(--rmh-feld-linie) 1; }
.rmh-feld__frage { position: relative; padding: 0; }
.rmh-feld__frage::after { content: ''; display: block; height: 2px; background: var(--rmh-feld-linie); }
.rmh-feld__frage summary {
	display: flex; align-items: center; justify-content: space-between; gap: 16px;
	padding: 20px 6px 18px 0; cursor: pointer; list-style: none;
	color: #ebe9e2; font-family: 'Saira Condensed', system-ui, sans-serif; font-weight: 600; font-size: 22px; line-height: 1.25; letter-spacing: 0.1px;
}
.rmh-feld__frage summary::-webkit-details-marker { display: none; }
.rmh-feld__frage summary::after {
	content: ''; flex: 0 0 14px; width: 14px; height: 14px;
	background: linear-gradient(#f2b544, #f2b544) center / 100% 2px no-repeat, linear-gradient(#f2b544, #f2b544) center / 2px 100% no-repeat;
	transition: transform 0.2s ease;
}
.rmh-feld__frage[open] summary::after { background: linear-gradient(#f2b544, #f2b544) center / 100% 2px no-repeat; }
.rmh-feld__frage summary:hover { color: #f2b544; }
.rmh-feld__antwort { max-width: 62ch; padding: 0 0 24px; }
.rmh-feld__frage summary:focus-visible { outline: 2px solid #f2b544; outline-offset: 2px; border-radius: 3px; }

/* Schwesterseiten */
.rmh-feld--schwestern { display: block; }
.rmh-feld__liste { list-style: none; margin: 24px 0 0; padding: 0; border-top: 2px solid transparent; border-image: var(--rmh-feld-linie) 1; }
.rmh-feld__liste li { position: relative; margin: 0; padding: 0; }
.rmh-feld__liste li::after { content: ''; display: block; height: 2px; background: var(--rmh-feld-linie); }
.rmh-feld__liste a {
	display: flex; align-items: center; justify-content: space-between; gap: 16px;
	padding: 17px 6px 15px 0; color: #ebe9e2; text-decoration: none;
	font-family: 'Saira Condensed', system-ui, sans-serif; font-weight: 600; font-size: 24px; line-height: 1.3; letter-spacing: 0.1px;
	transition: transform 0.15s ease, color 0.15s ease;
}
.rmh-feld__liste a svg { flex: 0 0 18px; color: #f2b544; }
.rmh-feld__liste a:hover { color: #f2b544; transform: translateX(6px); }
.rmh-feld__liste a:focus-visible { outline: 2px solid #f2b544; outline-offset: 2px; border-radius: 3px; }
@media (max-width: 767px) {
	.rmh-feld__frage summary { font-size: 20px; }
	.rmh-feld__liste a { font-size: 20px; }
}
@media (prefers-reduced-motion: reduce) {
	.rmh-feld__liste a, .rmh-feld__frage summary::after { transition: none; }
	.rmh-feld__liste a:hover { transform: none; }
}

/* Abstaende zwischen den Bereichen: stehen im Widget, damit ein leerer Bereich keinen Platz belegt */
.rmh-feld--einleitung { margin-top: 20px; }
.rmh-feld--abschnitte { margin-top: 24px; }
.rmh-feld--faq, .rmh-feld--schwestern { margin-top: 72px; }