/* =========================================================
   onOffice – Immobilienliste, an das Cody-Design angelehnt.
   Diese Datei wird vom onOffice-Plugin automatisch geladen
   (onoffice-theme/templates/onoffice-style.css) und ersetzt
   dessen Default-CSS. Nutzt die Design-Tokens aus
   cody-child/style.css (:root --cody-*).
   Mobile-first, Desktop-Breakpoint 53.125em (= 850px).
   ========================================================= */

.cody-estates {
	max-width: var(--cody-content-width);
	margin-inline: auto;
	/*padding-inline: var(--cody-space);*/
}

.cody-estates__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 8px 24px;
	margin-block-end: var(--cody-space);
}

.cody-estates__title {
	margin: 0;
}

.cody-estates__count {
	margin: 0;
	color: var(--cody-color-muted);
}

.cody-estates__sort {
	margin-inline-start: auto;
}

/* --- Karten-Raster: mobil 1 Spalte, ab 850px 3 Spalten --- */
.cody-estates__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--cody-space);
}

@media (min-width: 53.125em) {
	.cody-estates__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* --- Einzelne Karte --- */
.cody-estate {
	min-width: 0; /* verhindert Grid-Blowout durch überbreite Inhalte */
	background: #ffffff;
}

.cody-estate__inner {
	display: flex;
	flex-direction: column;
	height: 100%;
	background: var(--cody-color-bg);
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
	overflow: hidden;
}

/* Bild oben, festes Seitenverhältnis – Karten bleiben gleich hoch. */
.cody-estate__media {
	position: relative;
	display: block;
}

.cody-estate__img {
	display: block;
	width: 100%;
	height: 100%;
	/* Festes Seitenverhältnis 1080:456; cover + center → vertikal zentriert,
	   oben und unten abgeschnitten. */
	aspect-ratio: 1080 / 456;
	object-fit: cover;
	object-position: center;
}

/* Vermarktungsstatus (z. B. „Reserviert") als Badge oben links. */
.cody-estate__status {
	position: absolute;
	inset-block-start: 0;
	inset-inline-start: 0;
	padding: 6px 12px;
	background: var(--cody-color-primary);
	color: #fff;
	font-weight: 700;
}

.cody-estate__body {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 20px;
}

/* Zeile: Titel links, Preis rechts (beide grün) – wie im Entwurf. */
.cody-estate__row {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 16px;
}

.cody-estate__name {
	margin: 0;
	font-size: 1rem;
	line-height: 1.3;
	text-transform: none;
	color: var(--cody-color-primary);
}


.cody-estate__name a {
	color: inherit;
	text-decoration: none;
}

.cody-estate__name a:hover,
.cody-estate__name a:focus-visible {
	text-decoration: underline;
}

.cody-estate__price {
	margin: 0;
	flex-shrink: 0;
	font-weight: 700;
	color: var(--cody-color-primary);
	white-space: nowrap;
}

/* Meta-Zeile: Ort links, Fläche rechts – schiebt sich an den unteren Rand. */
.cody-estate__row--meta {
	margin-block-start: auto;
}

.cody-estate__location,
.cody-estate__area {
	margin: 0;
	color: var(--cody-color-muted);
}

.cody-estate__area {
	flex-shrink: 0;
	white-space: nowrap;
}

/* --- Pagination --- */
.cody-estates__pagination {
	margin-block-start: var(--cody-space);
	text-align: center;
}

.cody-estates__pagination a,
.cody-estates__pagination .current {
	display: inline-block;
	padding: 8px 14px;
	color: var(--cody-color-text);
	text-decoration: none;
}

.cody-estates__pagination .current {
	background: var(--cody-color-primary);
	color: #fff;
}

/* =========================================================
   Teaser-Slider (.cody-estates--teaser) – horizontaler Scroller.
   Baut auf der Theme-Komponente .cody-scroller (+ js/scroller.js) auf;
   hier nur die Kartenbreite + den CTA-Bereich ergänzen.
   ========================================================= */
.cody-estates__scroller .cody-estate {
	/* mobil: Karte schmaler als die (durch padding-inline schon reduzierte)
	   Content-Box, damit die nächste Karte hervorlugt. 100% liesse keinen
	   Platz für den Peek. */
	flex: 0 0 100%;
	gap :12px;
	scroll-snap-align: center;   /* mittig einrasten → Einzug/Peek auch mobil */
	min-width: 0;
}

/* Mobil: Textanordnung wie im Entwurf – Titel, darunter der Ort, unten eine
   Zeile mit Fläche links und Preis rechts. Die beiden Markup-Zeilen
   (Titel+Preis / Ort+Fläche) werden per display:contents aufgelöst und die
   vier Felder im Grid neu angeordnet; ab 800px wieder zweizeilig wie gehabt. */
.cody-estates__scroller .cody-estate__body {
	display: grid;
	grid-template-columns: 1fr auto;
	grid-template-areas:
		'name     name'
		'location location'
		'area     price';
	row-gap: 8px;
}

.cody-estates__scroller .cody-estate__row {
	display: contents;
}

.cody-estates__scroller .cody-estate__name     { grid-area: name; }
.cody-estates__scroller .cody-estate__location { grid-area: location; }

.cody-estates__scroller .cody-estate__area,
.cody-estates__scroller .cody-estate__price {
	margin-block-start: 12px;    /* etwas mehr Luft zur unteren Zeile (Figma: 20px) */
}

.cody-estates__scroller .cody-estate__area  { grid-area: area; }
.cody-estates__scroller .cody-estate__price { grid-area: price; align-self: end; }

@media (min-width: 800px) {
	.cody-estates__scroller .cody-estate__body,
	.cody-estates__scroller .cody-estate__row {
		display: flex;               /* Grid-Anordnung mobil-only */
	}

	.cody-estates__scroller .cody-estate__area,
	.cody-estates__scroller .cody-estate__price {
		margin-block-start: 0;
	}
}

/* Einzug/Peek links+rechts als Variable, in vw (der Scroller ist 100vw
   breit): aktive Karte = 100vw − 2 × Einzug. Die Variable steuert außerdem
   die Position der Pfeile (bündig mit den Kartenkanten, siehe unten). */
.cody-estates--teaser {
	--cody-teaser-inset: 24px;
}

@media (min-width: 1200px) {
	.cody-estates--teaser {
		/* 20% Einzug – aber mindestens so viel, dass die aktive Karte
		   nie breiter als 1080px wird. */
		--cody-teaser-inset: max(20vw, calc((100vw - 1080px) / 2));
	}
}

.cody-estates__scroller {
	/* Full-Bleed: der Slider läuft über die volle Fensterbreite, während die
	   Sektion selbst in der Content-Spalte bleibt (gleiche Technik wie beim
	   Hero; overflow-x:clip auf html/body fängt den 100vw-Scrollbalken ab). */
	width: 100vw;
	max-width: 100vw;
	margin-inline: calc(50% - 50vw);
	/* Einzug: aktive Karte mittig, Nachbarn lugen hervor; erlaubt außerdem,
	   die erste/letzte Karte bis in die Mitte zu scrollen. scroll-padding
	   sorgt fürs mittige Einrasten. */
	padding-inline: var(--cody-teaser-inset);
	scroll-padding-inline: var(--cody-teaser-inset);
}


@media (min-width: 800px) {
	.cody-estates__scroller .cody-estate {
		flex-basis: 100%;            /* Karte füllt 100vw − 2 × Einzug */
		scroll-snap-align: center;  /* mittig im Slider einrasten */
	}
}

/* Pfeil-Container (.cody-scroller__nav aus scroller.js): immer exakt so breit
   wie die aktive Karte (100vw − 2 × Einzug, gedeckelt auf 1080px), mittig
   ausgerichtet. Alles Weitere (Overlay auf halber Höhe, „Zurück" −24px links,
   „Weiter" −24px rechts über die Kanten hinaus) kommt aus den Defaults in
   style.css – dadurch sehen die Pfeile auf allen Viewports genauso aus wie
   beim Bild-Slider der Detailseite, nur bezogen auf die Kartenbreite. */
.cody-estates--teaser .cody-scroller__nav {
	inset: 0 auto;
	left: 50%;
	transform: translateX(-50%);
	width: calc(100vw - 2 * var(--cody-teaser-inset));
}


/* --- Aktive (mittig/voll sichtbare) Karte hervorheben: voll deckend +
   leicht vergrößert; die übrigen halbtransparent. Die .is-active-Klasse
   setzt scroller.js; ohne JS (kein .is-ready) bleiben alle voll sichtbar. --- */
.cody-estates--teaser .cody-scroller-wrap.is-ready .cody-estate {
	opacity: 0.5;
	transform: scale(1);
	transition: opacity 0.3s ease, transform 0.3s ease;
}

.cody-estates--teaser .cody-scroller-wrap.is-ready .cody-estate.is-active {
	opacity: 1;
	box-shadow: 0 0 14px rgba(0, 0, 0, 0.2);
}

/* Desktop: aktive Karte bleibt bei 100% (bündig mit dem Einzug), die übrigen
   leicht verkleinert. */
@media (min-width: 53.125em) {
	.cody-estates--teaser .cody-scroller-wrap.is-ready .cody-estate:not(.is-active) {
		transform: scale(0.97);
	}
}

/* Vertikale Luft, damit die vergrößerte Karte nicht abgeschnitten wird. */
.cody-estates--teaser .cody-scroller-wrap.is-ready .cody-scroller {
	padding-block: 10px;
}


/* CTA unter dem Slider. */
.cody-estates__cta {
	margin-block-start: var(--cody-space);
	text-align: center;
}

.cody-estates__more {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 14px 28px;
	background: var(--cody-color-primary);
	color: #fff;
	font-weight: 700;
	text-decoration: none;
}


.cody-estates__more:hover,
.cody-estates__more:focus-visible {
	filter: brightness(0.92);
}

.cody-estates__hint {
	margin: 12px 0 0;
	color: var(--cody-color-muted);
}

/* --- Slider-Pfeile (Override der runden Theme-Pfeile aus style.css):
   rechteckig mit grünem Rahmen, transparent.
   Mobil: als Zeile UNTER den Karten, je halbe Kartenbreite nebeneinander
   (wie der Bild-Slider auf der Detailseite). Ab 850px: oben rechts über dem
   Slider, rechtsbündig mit der Karte. --- */
.cody-estates--teaser .cody-scroller-wrap {
	/* Platz für die Pfeil-Zeile unter den Karten (44px + Abstand). */
	padding-block-end: 56px;
}

.cody-estates--teaser .cody-scroller__arrow {
	top: auto;
	bottom: 0;
	transform: none;
	width: calc(50% - 6px);       /* zwei Buttons + 12px Lücke = Kartenbreite */
	height: 44px;
	border-radius: 0;
	background: transparent;
	border: 1px solid var(--cody-color-primary);
	color: var(--cody-color-primary);
	box-shadow: none;
}

.cody-estates--teaser .cody-scroller__arrow--prev {
	left: 0;
	right: auto;
}

.cody-estates--teaser .cody-scroller__arrow--next {
	right: 0;
	left: auto;
}

/* Desktop: beide oben rechts nebeneinander, rechtsbündig mit der Karte. */
@media (min-width: 53.125em) {
	.cody-estates--teaser .cody-scroller-wrap {
		padding-block-end: 0;
		/* Platz oben schaffen, damit die Pfeile über den Karten sitzen. */
		padding-top: 64px;
	}

	.cody-estates--teaser .cody-scroller__arrow {
		top: 0;
		bottom: auto;
		width: 64px;
	}

	.cody-estates--teaser .cody-scroller__arrow--next {
		left: auto;
		right: 0;
	}

	.cody-estates--teaser .cody-scroller__arrow--prev {
		left: auto;
		right: calc(64px + 12px); /* Button-Breite + Abstand */
	}
}

.cody-estates--teaser .cody-scroller__arrow:not([disabled]):hover,
.cody-estates--teaser .cody-scroller__arrow:not([disabled]):focus-visible {
	background: var(--cody-color-primary);
	color: #fff;
}

/* Langer Pfeil (→ / ←): Schaft als Linie + Pfeilkopf per ::after. */
.cody-estates--teaser .cody-scroller__arrow span {
	position: relative;
	width: 22px;
	height: 2px;
	margin: 0;
	border: 0;
	background: currentColor;
	transform: none;
}

.cody-estates--teaser .cody-scroller__arrow span::after {
	content: "";
	position: absolute;
	top: 50%;
	width: 8px;
	height: 8px;
	border-top: 2px solid currentColor;
	border-right: 2px solid currentColor;
	transform: translateY(-50%) rotate(45deg);
}

.cody-estates--teaser .cody-scroller__arrow--next span::after {
	right: 0;
}

/* Prev: Pfeilkopf nach links spiegeln. */
.cody-estates--teaser .cody-scroller__arrow--prev span::after {
	left: 0;
	border-top: 0;
	border-right: 0;
	border-bottom: 2px solid currentColor;
	border-left: 2px solid currentColor;
}

/* =========================================================
   Detailansicht (.cody-detail) – Aufbau nach Entwurf „Objektdetails":
   Intro (Zurück-Link, Status, Titel + CTA, Faktenzeilen), Bild-Slider
   mit „Alle Bilder anzeigen", Freitexte, Panels, Anfrage-Formular.
   Mobile-first, eine zentrierte Inhaltsspalte.
   ========================================================= */
.cody-detail {
	max-width: var(--cody-content-width);
	margin-inline: auto;
	padding-inline: var(--cody-space);
	display: flex;
	flex-direction: column;
	gap: calc(var(--cody-space) * 1.5);
	PADDING :0;
}

/* Schmalere Lesespalte für Intro, Texte und Formular (wie im Entwurf). */
.cody-detail__intro,
.cody-detail__freetext,
.cody-detail__panel,
.cody-detail__extras,
.cody-detail__anfrage {
	width: 100%;
	max-width: 860px;
	margin-inline: auto;
}

/* --- Intro --- */
.cody-detail__back {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-block-end: 24px;
	color: var(--cody-color-primary);
	font-weight: 600;
	text-decoration: none;
}

.cody-detail__back:hover,
.cody-detail__back:focus-visible {
	text-decoration: underline;
}

.cody-detail__status {
	display: inline-block;
	margin-block-end: 16px;
	padding: 4px 12px;
	border: 1px solid var(--cody-color-text);
	font-weight: 600;
}

/* Zurück-Link und Status untereinander, nicht nebeneinander. */
.cody-detail__back + .cody-detail__status {
	display: table;
}

/* Titel links, „Jetzt Anfragen" rechts; mobil untereinander. */
.cody-detail__title-row {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px 32px;
	margin-block-end: 32px;
}

.cody-detail__title {
	margin: 0;
	max-width: 24ch;
}

.cody-detail__cta {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%; /* mobil: volle Breite (Entwurf); Desktop s. Media Query */
	padding: 12px 24px;
	background: var(--cody-color-primary);
	color: #fff;
	font-weight: 700;
	text-decoration: none;
}

@media (min-width: 53.125em) {
	.cody-detail__cta {
		width: auto;
	}
}

.cody-detail__cta:hover,
.cody-detail__cta:focus-visible {
	filter: brightness(0.92);
}

/* --- Galerie: horizontaler Slider (.cody-scroller), Pfeile via scroller.js.
   Der „Alle N Bilder anzeigen"-Button (js/detail.js) schaltet auf ein Raster
   mit allen Bildern um. Ohne JS: nativ scrollbarer Streifen, Button bleibt
   [hidden]. --- */
/* Mobil (Entwurf): Bild volle Breite, darunter die Pfeil-Zeile, darunter der
   Button in voller Breite. Reihenfolge per Flex-Order (DOM: Bar vor Slider).
   Desktop: Button oben links, Pfeile oben rechts (siehe Media Query unten). */
.cody-detail__gallery {
	position: relative;
	display: flex;
	flex-direction: column;
}

.cody-detail__gallery > .cody-detail__strip,
.cody-detail__gallery > .cody-scroller-wrap {
	order: 1;
}

.cody-detail__gallery-bar {
	order: 2;
	margin-block-start: 12px;
}

.cody-detail__thumbs {
	order: 3;
}

.cody-detail__gallery-footer {
	order: 4;
}

.cody-detail__gallery-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%; /* mobil volle Breite; Desktop s. Media Query */
	height: 44px;
	padding: 0 20px;
	border: 1px solid var(--cody-color-primary);
	border-radius: 0;
	background: transparent;
	color: var(--cody-color-primary);
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}

.cody-detail__gallery-toggle:hover,
.cody-detail__gallery-toggle:focus-visible {
	background: var(--cody-color-primary);
	color: #fff;
}

/* Ohne JS bleibt der Button verborgen. */
.cody-detail__gallery-toggle[hidden] {
	display: none;
}

/* Streifen wie der Teaser-Slider auf der Startseite: aktives Bild mittig,
   die Nachbarn lugen links/rechts hervor (Einzug + scroll-snap: center).
   Mobil ohne Einzug – ein Bild füllt die volle Breite. */
.cody-detail__strip {
	margin-bottom: 0;
	padding-inline: 0;
	scroll-padding-inline: 0;
}

@media (min-width: 53.125em) {
	.cody-detail__strip {
		padding-inline: 10%;
		scroll-padding-inline: 10%;
	}
}

@media (min-width: 75em) {
	.cody-detail__strip {
		padding-inline: 20%;
		scroll-padding-inline: 20%;
	}
}

.cody-detail__pic {
	margin: 0;
	min-width: 0;
	flex: 0 0 100%;
	scroll-snap-align: center;
	transition: opacity 0.3s ease, transform 0.3s ease;
}

@media (min-width: 53.125em) {
	.cody-detail__pic {
		/* Desktop: ein Bild = Breite minus Einzug, mittig. */
		flex-basis: 100%;
	}
}

/* Wie beim Teaser: aktives (mittiges) Bild voll deckend, die übrigen
   halbtransparent. .is-active setzt scroller.js; ohne JS bleiben alle
   sichtbar. Im aufgeklappten Raster (is-expanded) keine Abdunklung. */
.cody-detail__gallery:not(.is-expanded) .cody-scroller-wrap.is-ready .cody-detail__pic {
	opacity: 0.5;
}

.cody-detail__gallery:not(.is-expanded) .cody-scroller-wrap.is-ready .cody-detail__pic.is-active {
	opacity: 1;
	box-shadow: 0 0 14px rgba(0, 0, 0, 0.2);
}

@media (min-width: 53.125em) {
	.cody-detail__gallery:not(.is-expanded) .cody-scroller-wrap.is-ready .cody-detail__pic:not(.is-active) {
		transform: scale(0.97);
	}
}

/* Vertikale Luft, damit Schatten/Skalierung nicht abgeschnitten werden. */
.cody-detail__gallery:not(.is-expanded) .cody-scroller-wrap.is-ready .cody-scroller {
	padding-block: 10px;
}

.cody-detail__img {
	display: block;
	width: 100%;
	height: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

/* Pfeile: rechteckig mit grünem Rahmen (Override der runden Theme-Pfeile).
   Mobil als Zeile UNTER dem Bild, je halbe Breite nebeneinander (Entwurf);
   ab Desktop oben rechts in der Kopfzeile. */
.cody-detail__gallery .cody-scroller-wrap {
	/* Platz für die Pfeil-Zeile unter dem Bild (44px + Abstand). */
	padding-block-end: 56px;
}

.cody-detail__gallery .cody-scroller__arrow {
	top: auto;
	bottom: 0;
	transform: none;
	width: calc(50% - 6px);
	height: 44px;
	border-radius: 0;
	background: transparent;
	border: 1px solid var(--cody-color-primary);
	color: var(--cody-color-primary);
	box-shadow: none;
}

.cody-detail__gallery .cody-scroller__arrow--prev {
	left: 0;
	right: auto;
}

.cody-detail__gallery .cody-scroller__arrow--next {
	right: 0;
	left: auto;
}

.cody-detail__gallery .cody-scroller__arrow:not([disabled]):hover,
.cody-detail__gallery .cody-scroller__arrow:not([disabled]):focus-visible {
	background: var(--cody-color-primary);
	color: #fff;
}

/* Langer Pfeil (→ / ←): Schaft als Linie + Pfeilkopf per ::after
   (wie beim Teaser-Slider). */
.cody-detail__gallery .cody-scroller__arrow span {
	position: relative;
	width: 22px;
	height: 2px;
	margin: 0;
	border: 0;
	background: currentColor;
	transform: none;
}

.cody-detail__gallery .cody-scroller__arrow span::after {
	content: "";
	position: absolute;
	top: 50%;
	width: 8px;
	height: 8px;
	border-top: 2px solid currentColor;
	border-right: 2px solid currentColor;
	transform: translateY(-50%) rotate(45deg);
}

.cody-detail__gallery .cody-scroller__arrow--next span::after {
	right: 0;
}

.cody-detail__gallery .cody-scroller__arrow--prev span::after {
	left: 0;
	border-top: 0;
	border-right: 0;
	border-bottom: 2px solid currentColor;
	border-left: 2px solid currentColor;
}

/* Desktop: Kopfzeile über dem Slider – Button oben links (absolut), Pfeile
   oben rechts; beides fluchtet mit den eingerückten Bildern. */
@media (min-width: 53.125em) {
	.cody-detail__gallery {
		display: block;
		/* Platz für die Kopfzeile (Button + Pfeile, beide absolut). */
		padding-block-start: 64px;
	}

	.cody-detail__gallery-bar {
		position: absolute;
		inset-block-start: 0;
		inset-inline-start: 10%;
		margin-block-start: 0;
	}

	.cody-detail__gallery-toggle {
		width: auto;
	}

	.cody-detail__gallery .cody-scroller-wrap {
		padding-block-end: 0;
	}

	.cody-detail__gallery .cody-scroller__arrow {
		top: -64px;
		bottom: auto;
		width: 64px;
	}

	.cody-detail__gallery .cody-scroller__arrow--next {
		left: auto;
		right: 10%;
	}

	.cody-detail__gallery .cody-scroller__arrow--prev {
		left: auto;
		right: calc(10% + 64px + 12px);
	}
}

@media (min-width: 75em) {
	.cody-detail__gallery-bar {
		inset-inline-start: 20%;
	}

	.cody-detail__gallery .cody-scroller__arrow--next {
		right: 20%;
	}

	.cody-detail__gallery .cody-scroller__arrow--prev {
		right: calc(20% + 64px + 12px);
	}
}

/* Aufgeklappt („Alle Bilder anzeigen"): Der Slider bleibt oben stehen
   (Pfeile weiter nutzbar), die Nachbarbilder werden ganz ausgeblendet statt
   nur abgedunkelt. Darunter erscheint ein 2-spaltiges Raster mit allen
   Bildern (Klick springt im Slider dorthin, aktives Bild markiert) und
   unten links „Weniger Bilder anzeigen". Der obere Button verschwindet. */
.cody-detail__gallery.is-expanded .cody-detail__gallery-bar {
	display: none;
}

.cody-detail__gallery.is-expanded .cody-scroller-wrap.is-ready .cody-detail__pic:not(.is-active) {
	opacity: 0;
}

/* --- Thumbnail-Raster (nur im aufgeklappten Zustand, fluchtet mit dem
   eingerückten Slider-Bild) --- */
.cody-detail__thumbs {
	display: none;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
	margin-block-start: 12px;
	margin-inline: 0;
}

@media (min-width: 53.125em) {
	.cody-detail__thumbs {
		gap: 24px;
		margin-block-start: 24px;
		margin-inline: 10%;
	}
}

@media (min-width: 75em) {
	.cody-detail__thumbs {
		margin-inline: 20%;
	}
}

.cody-detail__gallery.is-expanded .cody-detail__thumbs {
	display: grid;
}

.cody-detail__thumb {
	padding: 0;
	border: 0;
	background: none;
	min-width: 0;
	cursor: pointer;
}

.cody-detail__thumb img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.cody-detail__thumb.is-active {
	outline: 2px solid var(--cody-color-primary);
	outline-offset: 2px;
}

.cody-detail__thumb:focus-visible {
	outline: 3px solid var(--cody-color-primary);
	outline-offset: 2px;
}

/* --- Fußzeile mit „Weniger Bilder anzeigen" --- */
.cody-detail__gallery-footer {
	margin-block-start: 12px;
	margin-inline: 0;
}

/* display steuert .is-expanded (s. u.) – hier nur ausgeblendet lassen. */
.cody-detail__gallery:not(.is-expanded) .cody-detail__gallery-footer {
	display: none;
}

@media (min-width: 53.125em) {
	.cody-detail__gallery-footer {
		margin-block-start: 24px;
		margin-inline: 10%;
	}
}

@media (min-width: 75em) {
	.cody-detail__gallery-footer {
		margin-inline: 20%;
	}
}

.cody-detail__gallery.is-expanded .cody-detail__gallery-footer {
	display: block;
}

/* --- Panels (Fakten, Texte, Sidebar-Boxen) --- */
.cody-detail__panel {
	background: var(--cody-color-bg);
	padding: 0;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}

.cody-detail__panel-title {
	margin: 0 0 16px;
	font-size: 1.125rem;
	color: var(--cody-color-primary);
	text-transform: none;
}

/* --- Faktenzeilen (dl): Label links, Wert rechtsbündig --- */
.cody-detail__facts {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px 24px;
	margin: 0;
}

/* Aufklappbarer Fakten-Teil: display:contents lässt die dt/dd direkte
   Grid-Kinder der dl bleiben. JS (detail.js) setzt .is-collapsed auf dem
   Intro und blendet den Block damit initial aus; ohne JS bleibt alles
   sichtbar und der Toggle-Button [hidden]. */
.cody-detail__facts-more {
	display: contents;
}

.cody-detail__intro.is-collapsed .cody-detail__facts-more {
	display: none;
}

/* „Alle Infos anzeigen" – grüner, zentrierter Text-Button (wie Entwurf). */
.cody-detail__facts-toggle {
	display: block;
	margin: 16px auto 0;
	padding: 8px;
	border: 0;
	background: none;
	color: var(--cody-color-primary);
	font: inherit;
	font-weight: 700;
	cursor: pointer;
}

.cody-detail__facts-toggle:hover,
.cody-detail__facts-toggle:focus-visible {
	text-decoration: underline;
}

.cody-detail__fact-label {
	color: var(--cody-color-muted);
}

.cody-detail__fact-value {
	margin: 0;
	font-weight: 600;
	text-align: right;
}

/* --- Freitexte --- */
.cody-detail__freetext {
	line-height: 1.6;
}

/* --- Ansprechpartner (Entwurf: grünes Label über dem Panel, Foto links,
   rechts Name groß, Funktion grün, E-Mail/Telefon als Links) --- */
.cody-detail__contact-label {
	margin: 0 0 12px;
	color: var(--cody-color-primary);
	font-weight: 700;
}

.cody-detail__person {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0 40px;
}

.cody-detail__person + .cody-detail__person {
	margin-block-start: 24px;
	padding-block-start: 24px;
	border-top: 1px solid var(--cody-color-border);
}

.cody-detail__person-img {
	display: block;
	width: min(200px, 100%);
	aspect-ratio: 4 / 5;
	object-fit: cover;
}

.cody-detail__person-body {
	flex: 1;
	min-width: min(100%, 240px);
	padding: 24px;


}

.cody-detail__person-name {
	margin: 0;
	font-size: 1.625rem;
	font-weight: 700;
	line-height: 1.2;
}

.cody-detail__person-role {
	margin: 8px 0 0;
	color: var(--cody-color-primary);
	font-weight: 700;
}

.cody-detail__person-links {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 4px;
	margin: 24px 0 0;
}

.cody-detail__person-links a {
	color: var(--cody-color-primary);
	font-weight: 600;
	text-decoration: none;
}

.cody-detail__person-links a.cody-detail__person-mail {
	text-decoration: underline;
}

.cody-detail__person-links a:hover,
.cody-detail__person-links a:focus-visible {
	text-decoration: underline;
}

.cody-detail__person-field {
	margin: 8px 0 0;
}

.cody-detail__field-label {
	color: var(--cody-color-muted);
}

/* --- Dokumente / Medien-Links --- */
.cody-detail__document,
.cody-detail__media-link {
	color: var(--cody-color-primary);
	font-weight: 600;
}

.cody-detail__media-item + .cody-detail__media-item {
	margin-block-start: 16px;
}

.cody-detail__media-item iframe {
	width: 100%;
	margin-block-start: 8px;
	border: 0;
	aspect-ratio: 16 / 9;
}

/* --- Extras (Ansprechpartner, Dokumente, Medien) gestapelt --- */
.cody-detail__extras {
	display: flex;
	flex-direction: column;
	gap: var(--cody-space);
}

.cody-detail__extras:empty {
	display: none;
}

/* --- Textblock + Kontaktformular --- */
.cody-detail__anfrage {
	/* Anker-Ziel: unter der sticky Kopfleiste landen. */
	scroll-margin-top: calc(var(--cody-header-height) + 16px);
}

.cody-detail__anfrage-title {
	margin: 0 0 12px;
	color: var(--cody-color-primary);
	text-transform: none;
}

.cody-detail__anfrage-text {
	margin: 0 0 24px;
	line-height: 1.6;
}