/**
 * Abschnitte, Karten, Listen, Detailseiten und Formulare.
 * Grundlage: v1 css/core/_sections.css, components/_cards.css, _forms.css, sections/_events.css.
 * Karten nach Auftrag A1: #202020, Kontur #2e2e2e, Radius 11px, Schraffur wie im Original.
 */

/* ---------- Abschnitt ---------- */
.re-sek { position: relative; z-index: 2; padding: 6rem 0; }
.re-sek--klein-oben { padding-top: 2rem; }
.re-sek--klein-unten { padding-bottom: 2rem; }
.re-sek--klein { padding: 2rem 0; }
@media (max-width: 992px) { .re-sek { padding: 2rem 0; } }
/* Einleitungstext + folgende Liste bilden im Original einen Abschnitt: kein doppelter Abstand dazwischen */
.re-sek--text:has(+ .re-sek:is(.re-sek--karten, .re-sek--kacheln, .re-sek--galerie, .re-sek--mietobjekte, .re-sek--referenzen, .re-sek--team, .re-sek--events)) { padding-bottom: 0; }
.re-sek--text + .re-sek:is(.re-sek--karten, .re-sek--kacheln, .re-sek--galerie, .re-sek--mietobjekte, .re-sek--referenzen, .re-sek--team, .re-sek--events) { padding-top: 4.5rem; }
@media (max-width: 992px) { .re-sek--text + .re-sek:is(.re-sek--karten, .re-sek--kacheln, .re-sek--galerie, .re-sek--mietobjekte, .re-sek--referenzen, .re-sek--team, .re-sek--events) { padding-top: 2rem; } }
/* Erster Abschnitt direkt unter dem Seitenkopf: weniger Abstand oben (Original «smallTop») */
.rie-page-header + .re-sek, .brxe-shortcode:has(.rie-page-header) + .brxe-shortcode .re-sek:first-child { padding-top: 2rem; }

.re-titel small,
.rie-page-header h1 small {
	display: block;
	margin-top: .5rem;
	font-size: 22px;
	font-weight: 600;
	line-height: 1.4;
	text-transform: none;
	letter-spacing: 0;
	color: var(--color-white);
}
.rie-page-header h1 small { font-size: 24px; font-weight: 300; }
@media (max-width: 992px) { .re-titel small { font-size: 18px; } .rie-page-header h1 small { font-size: 20px; } }
@media (max-width: 576px) { .re-titel small { font-size: 17px; } .rie-page-header h1 small { font-size: 18px; } }
/* H1 im Stil einer H2 (Startseite: erster Abschnittstitel) */
.re-titel--h2 { font-size: 1.8rem; font-weight: 800; }
@media (max-width: 992px) { .re-titel--h2 { font-size: 1.75rem; } }
@media (max-width: 576px) { .re-titel--h2 { font-size: 1.5rem; } }

.re-text > :last-child { margin-bottom: 0; }
.re-text ul { margin: 0 0 1rem; }
.re-text h2, .re-text h3 { margin-top: 1.5rem; }
.re-text > .re-titel:first-child { margin-top: 0; }
.re-text--schmal { max-width: 900px; }
.re-leer { opacity: .8; }

/* Zurück-Link im Seitenkopf (Original: a.backlink) */
.rie-page-header .rie-container { position: relative; }
.re-backlink {
	display: inline-flex;
	align-items: center;
	gap: .25rem;
	margin-bottom: .5rem;
	color: var(--color-red);
	font-size: max(60%, 12px);
	font-weight: 700;
	text-transform: uppercase;
	text-decoration: none;
	transition: var(--transition-slow);
}
.re-backlink svg { width: 1em; height: 1em; transition: var(--transition-slow); }
.re-backlink:hover, .re-backlink:focus-visible { color: var(--color-white); }
.re-backlink:hover svg { transform: translateX(-3px); }

/* ---------- Buttons ---------- */
.re-buttons { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.5rem; }
.re-btn--outline { background: transparent; border-color: var(--color-white); color: var(--color-white); }
.re-btn--outline:hover, .re-btn--outline:focus-visible { background: var(--color-red); border-color: var(--color-red); color: var(--color-white); }
.re-btn--icon { padding: .65rem; }
.re-btn--icon svg { width: 20px; height: 20px; display: block; }

/* ---------- Bilder ---------- */
.re-lightbox { display: block; overflow: hidden; border-radius: var(--border-radius-sm); }
.re-lightbox img, .re-karte-bild img, .re-referenz-bild img, .re-event-bild img, .re-kachel-bild img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--transition-slow);
}
.re-lightbox:hover img { transform: scale(1.04); }

.re-galerie { display: grid; gap: .5rem; grid-template-columns: repeat(2, 1fr); margin-top: 1.5rem; }
.re-galerie .re-lightbox { aspect-ratio: 3 / 2; }
@media (min-width: 768px) {
	.re-galerie--3 { grid-template-columns: repeat(3, 1fr); }
	.re-galerie--4 { grid-template-columns: repeat(4, 1fr); }
}

/* Text mit Bildern (Original: article-standard) */
.re-tb { display: grid; gap: 2rem; align-items: start; }
@media (min-width: 992px) {
	.re-tb { grid-template-columns: 5fr 6fr; gap: 3rem; }
	.re-tb--rechts { grid-template-columns: 6fr 5fr; }
	.re-tb--rechts .re-tb-bilder { order: 2; }
}
.re-tb-bilder > .re-lightbox { aspect-ratio: 4 / 3; }
.re-tb-thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem; margin-top: .5rem; }
.re-tb-thumbs .re-lightbox { aspect-ratio: 1; }

/* ---------- Karten ---------- */
.re-karte {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid var(--card-border);
	border-radius: var(--border-radius-md);
	background-color: var(--card-bg);
	background: repeating-linear-gradient(-35deg, var(--card-bg), var(--card-bg) 1px, transparent 1px, transparent 4px);
	transition: border-color var(--transition-slow);
}
.re-karte:hover { border-color: var(--color-lightgrey); }
.re-karte-bild { margin: 22px 22px 0; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--border-radius-sm); }
.re-karte:hover .re-karte-bild img { transform: scale(1.06); }
.re-karte-body { display: flex; flex-direction: column; flex: 1; padding: 22px; }
.re-karte-body h3 { font-size: 1.75rem; margin-bottom: .5rem; }
.re-karte-body h3 a { color: inherit; text-decoration: none; }
.re-karte-body h3 small { display: block; font-size: 80%; font-weight: 300; margin-top: .15rem; }
.re-karte-text > :last-child { margin-bottom: 0; }
.re-karte .re-buttons { margin-top: auto; padding-top: 1.5rem; }
@media (max-width: 768px) { .re-karte-bild { margin: 15px 15px 0; } .re-karte-body { padding: 15px; } }
@media (max-width: 577px) { .re-karte-bild { margin: 12px 12px 0; } .re-karte-body { padding: 12px; } }

.re-karten { display: grid; gap: 1.5rem; margin-top: 1.5rem; }
@media (min-width: 768px) { .re-karten { grid-template-columns: repeat(2, 1fr); } }
.re-karten > [hidden] { display: none; }

/* ---------- Kacheln mit Piktogramm (Startseite) ---------- */
.re-kacheln { display: grid; gap: 2.5rem; margin-top: 1.5rem; text-align: center; }
@media (min-width: 768px) { .re-kacheln { grid-template-columns: repeat(3, 1fr); gap: 2rem; } }
.re-kachel { display: block; color: inherit; text-decoration: none; padding: 0 22px; }
.re-kachel-bild { height: 180px; margin: 0 auto 1.25rem; display: flex; align-items: center; justify-content: center; }
.re-kachel-bild img { width: auto; max-width: 100%; height: 100%; object-fit: contain; }
a.re-kachel:hover .re-kachel-bild img { transform: scale(.94); }
.re-kachel .re-kachel-titel { font-size: 1.5rem; font-weight: 800; text-transform: uppercase; margin-bottom: .5rem; }
.re-kachel p { font-size: var(--font-size-small); margin: 0; }
@media (max-width: 767px) { .re-kachel-bild { height: 150px; } }

/* ---------- Filter ---------- */
.re-filter { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.5rem 0; }
.re-filter-btn {
	font: inherit;
	font-size: 16px;
	line-height: 1;
	padding: .6rem 1rem;
	border-radius: var(--border-radius-pill);
	border: 1.5px solid var(--color-white);
	background: transparent;
	color: var(--color-white);
	cursor: pointer;
	transition: var(--transition-fast);
}
.re-filter-btn:hover { border-color: var(--color-red); color: var(--color-red); }
.re-filter-btn.is-aktiv { background: var(--color-red); border-color: var(--color-red); color: var(--color-white); }

/* ---------- Erfolgsgeschichten (Original: article-referenzen) ---------- */
.re-referenzen { display: grid; gap: .5rem; grid-template-columns: repeat(2, 1fr); margin-top: 1.5rem; }
@media (min-width: 992px) { .re-referenzen { grid-template-columns: repeat(3, 1fr); gap: 1rem; } }
.re-referenzen > [hidden] { display: none; }
.re-referenz {
	position: relative;
	display: block;
	aspect-ratio: 1;
	overflow: hidden;
	border: 1px solid var(--card-border);
	border-radius: var(--border-radius-md);
	color: var(--color-white);
	text-decoration: none;
}
.re-referenz-bild { position: absolute; inset: 0; }
.re-referenz::after {
	content: "";
	position: absolute;
	inset: auto 0 0;
	height: 60%;
	background: linear-gradient(0deg, rgba(0, 0, 0, .8) 0%, rgba(0, 0, 0, 0) 100%);
	transform-origin: bottom;
	transition: transform var(--transition-slow);
}
/* Original: Verlauf 60 % → 40 % Höhe beim Hover; als transform statt height (kein Layout-Neuberechnen) */
.re-referenz:hover::after { transform: scaleY(.6667); }
.re-referenz:hover img { transform: scale(1.06); }
.re-referenz-caption { position: absolute; z-index: 2; inset: auto 0 0; padding: 11px 22px 16px; line-height: 1.1; }
.re-referenz-zeit { display: block; font-size: 16px; margin-bottom: .25rem; }
.re-referenz-titel { display: block; font-size: 1.5rem; font-weight: 800; text-transform: uppercase; }
@media (max-width: 768px) { .re-referenz-caption { padding: 7px 12px 10px; } .re-referenz-titel { font-size: 1.05rem; } .re-referenz-zeit { font-size: 13px; } }

/* ---------- Team ---------- */
.re-team { display: grid; gap: 1.5rem; margin-top: 1.5rem; }
@media (min-width: 768px) { .re-team { grid-template-columns: repeat(3, 1fr); } }
.re-person .re-karte-bild { aspect-ratio: 4 / 5; margin: 22px; }
.re-person .re-karte-body { padding-top: 0; }
.re-person a { word-break: break-word; }

/* ---------- Eventliste (Original: accordion eventTable) ---------- */
.re-events { display: grid; gap: .75rem; margin-top: 1.5rem; }
.re-event {
	border: 1px solid var(--card-border);
	border-radius: var(--border-radius-md);
	background: repeating-linear-gradient(-35deg, var(--card-bg), var(--card-bg) 1px, transparent 1px, transparent 4px);
	transition: border-color var(--transition-slow);
}
.re-event:hover, .re-event[open] { border-color: var(--color-lightgrey); }
.re-event summary {
	display: grid;
	grid-template-columns: 120px 1fr 32px;
	gap: 1.25rem;
	align-items: center;
	padding: 22px;
	cursor: pointer;
	list-style: none;
}
.re-event summary::-webkit-details-marker { display: none; }
.re-event-bild { display: block; aspect-ratio: 1; overflow: hidden; border-radius: var(--border-radius-sm); }
.re-event-kopf { display: flex; flex-direction: column; gap: .2rem; min-width: 0; }
.re-event-titel { font-size: 1.5rem; font-weight: 700; line-height: 1.2; }
.re-datum b { font-weight: 700; }
.re-datum-bis { font-size: 80%; }
.re-wday { margin-right: .1rem; }
.re-event-ort { font-size: var(--font-size-small); opacity: .85; }
.re-event-pfeil svg { width: 28px; height: 28px; transition: transform var(--transition-default); color: var(--color-red); }
.re-event[open] .re-event-pfeil svg { transform: rotate(180deg); }
.re-event-inhalt { padding: 0 22px 22px calc(120px + 22px + 1.25rem); }
.re-event-inhalt .re-buttons { margin-top: 1rem; }
.re-event-inhalt h2 { font-size: 1.5rem; }
@media (max-width: 768px) {
	.re-event summary { padding: 15px; gap: .9rem; grid-template-columns: 80px 1fr 24px; }
	.re-event-titel { font-size: 1.1rem; }
	.re-event-inhalt { padding: 0 15px 15px; }
}
.re-events-vergangen { margin-top: 3rem; font-size: 1.5rem; }

/* ---------- Detailseiten ---------- */
.re-steckbrief { width: auto; border-collapse: collapse; margin: 0 0 1.5rem; }
.re-steckbrief th { text-align: left; font-weight: 700; padding: .25rem 1.5rem .25rem 0; vertical-align: top; white-space: nowrap; }
.re-steckbrief td { padding: .25rem 0; }
.re-detail-video { margin-top: 2rem; max-width: 900px; }
.re-video { position: relative; aspect-ratio: 16 / 9; background: var(--card-bg); border-radius: var(--border-radius-md); overflow: hidden; }
.re-video video, .re-video iframe { width: 100%; height: 100%; border: 0; display: block; background: #000; }
.re-video--yt { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .75rem; background-image: var(--stripes); }
.re-video-start { display: inline-flex; align-items: center; gap: .5rem; font: inherit; font-size: 18px; padding: .75rem 1.25rem; border-radius: var(--border-radius-pill); border: 0; background: var(--color-red); color: var(--color-white); cursor: pointer; }
.re-video-start svg { width: 22px; height: 22px; }
.re-video-start:hover { background: var(--color-white); color: var(--color-red); }
.re-video-hinweis { font-size: 13px; opacity: .8; margin: 0; }

/* ---------- Kontakt ---------- */
.re-kontakt { display: grid; gap: 3rem; }
@media (min-width: 992px) { .re-kontakt { grid-template-columns: 4fr 7fr; } }
.re-kontakt address { font-style: normal; margin-bottom: 1rem; }
.re-kontakt-tabelle { width: auto; border-collapse: collapse; }
.re-kontakt-tabelle th { text-align: left; font-weight: 300; padding: 0 1.5rem 0 0; }
.re-kontakt-tabelle a { color: var(--color-white); }
.re-kontakt-tabelle a:hover { color: var(--color-red); }

/* ---------- Formulare ---------- */
#anfrage, #infoservice, .re-sek[id] { scroll-margin-top: 160px; }
.re-form { margin-top: 1rem; }
.re-form-grid { display: grid; gap: 1rem 1.25rem; }
@media (min-width: 576px) { .re-form-grid { grid-template-columns: repeat(2, 1fr); } .re-feld--nachricht, .re-feld--betreff { grid-column: 1 / -1; } }
.re-feld label { display: block; font-size: var(--font-size-small); margin-bottom: .3rem; }
.re-optional { color: #c4c4c4; font-size: 90%; }
.re-feld--check a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.re-feld--check a:hover, .re-feld--check a:focus-visible { color: var(--color-white); }
.re-feld input:not([type=checkbox]), .re-feld select, .re-feld textarea {
	width: 100%;
	font: inherit;
	font-size: 16px;
	font-weight: 400;
	color: var(--color-white);
	background: var(--card-bg);
	border: 1px solid var(--color-lightgrey);
	border-radius: var(--border-radius-sm);
	padding: .7rem .85rem;
	transition: border-color var(--transition-fast);
	color-scheme: dark;
}
.re-feld input:focus, .re-feld select:focus, .re-feld textarea:focus { outline: none; border-color: var(--color-white); box-shadow: 0 0 0 2px var(--color-red); }
.re-feld--check { display: flex; gap: .65rem; align-items: flex-start; margin: 1.25rem 0; }
.re-feld--check input { width: 20px; height: 20px; margin-top: .15rem; flex: none; accent-color: var(--color-red); }
.re-feld--check label { margin: 0; }
.re-pflichthinweis { font-size: 14px; opacity: .8; }
.re-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.re-meldung { padding: .9rem 1.1rem; border-radius: var(--border-radius-sm); margin: 1rem 0; font-weight: 400; }
.re-meldung--ok { background: #1f3d24; border: 1px solid #3f7a49; }
.re-meldung--fehler { background: #4a1b1d; border: 1px solid var(--color-red); }

/* ---------- Infoservice (Original: infosevice-block splitter-background) ---------- */
.re-sek--infoservice { padding: 0 0 2rem; }
.re-infoservice {
	display: grid;
	gap: 1rem 3rem;
	padding: 22px;
	border-radius: var(--border-radius-md);
	background-color: var(--color-black);
	background-image: var(--stripes);
}
@media (min-width: 768px) { .re-infoservice { grid-template-columns: 4fr 8fr; } }
@media (min-width: 1200px) { .re-infoservice { padding: 40px; } }
.re-infoservice .re-feld label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.re-infoservice .re-feld--check label { position: static; width: auto; height: auto; clip: auto; font-size: var(--font-size-small); }
.re-infoservice .re-feld input::placeholder { color: #aaa; }

/* ---------- Lightbox ---------- */
.re-lb { padding: 0; border: 0; background: transparent; max-width: 100vw; max-height: 100vh; width: 100vw; height: 100vh; }
.re-lb::backdrop { background: rgba(0, 0, 0, .92); }
.re-lb-inner { position: relative; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
.re-lb img { max-width: 92vw; max-height: 86vh; object-fit: contain; border-radius: var(--border-radius-sm); }
.re-lb button {
	position: absolute;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	border: 0;
	background: var(--color-white);
	color: var(--color-red);
	font-size: 26px;
	line-height: 1;
	cursor: pointer;
}
.re-lb-zu { top: 16px; right: 16px; }
.re-lb-vor { right: 16px; top: 50%; transform: translateY(-50%); }
.re-lb-zurueck { left: 16px; top: 50%; transform: translateY(-50%); }
.re-lb-zahl { position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%); font-size: 14px; color: var(--color-white); }

/* ---------- Einblenden (dezent, nur ohne reduzierte Bewegung) ---------- */
@media (prefers-reduced-motion: no-preference) {
	.re-js .re-einblenden { opacity: 0; transform: translateY(16px); transition: opacity .6s ease-out, transform .6s ease-out; }
	.re-js .re-einblenden.is-sichtbar { opacity: 1; transform: none; }
}