/* CLAUDE: CSS für Denkmal-Objekte (Single & Archive) */
/* CLAUDE: Wird in inc/assets.php via wp_enqueue_style() geladen */
/* CLAUDE: Responsive Design mit Breakpoints: 768px, 1024px, 1200px */

/* ========================================================================
   CLAUDE: SINGLE OBJEKT – Hero Section
   ======================================================================== */

/* CLAUDE: Hero-Container mit Featured Image */
.objekt-hero {
	position: relative;
	width: 100%;
	height: 60vh;
	min-height: 400px;
	max-height: 600px;
	overflow: hidden;
	
	
}

/* CLAUDE: Hero-Bild – vollflächig, zentriert */
.objekt-hero__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	filter: brightness(70%) contrast(110%) saturate(80%);
}

/* CLAUDE: Hero-Overlay – dunkler Gradient für Lesbarkeit */
.objekt-hero__overlay {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	padding: 2rem 0;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
	color: var(--color-white, #fff);
}

/* CLAUDE: Hero-Titel – groß, fett, weiß */
.objekt-hero__title {
	font-size: clamp(1.75rem, 4vw, 3rem);
	font-weight: 700;
	margin: 0 0 0.5rem 0;
	line-height: 1.2;
	color: #f5f5f5;
}

/* CLAUDE: Hero-Untertitel – Kurzbeschreibung */
.objekt-hero__subtitle {
	font-size: clamp(1rem, 2vw, 1.25rem);
	margin: 0 0 1rem 0;
	opacity: 0.95;
}

/* CLAUDE: Status-Badge im Hero */
.objekt-status {
	display: inline-block;
	padding: 0.5rem 1rem;
	font-size: 0.875rem;
	font-weight: 600;
	text-transform: uppercase;
	border-radius: 4px;
	background: var(--color-primary, #004d40);
}

/* CLAUDE: Status-Varianten mit eigenen Farben */
.objekt-status--verfuegbar {
	background: #4caf50;
	color: white;
}

.objekt-status--reserviert {
	background: #ff9800;
	color: white;
}

.objekt-status--verkauft {
	background: #9e9e9e;
	color: white;
}

/* ========================================================================
   CLAUDE: SINGLE OBJEKT – Besonderheiten (Full Width)
   ======================================================================== */

/* CLAUDE: Besonderheiten-Wrapper – Full Width außerhalb des Grids */
.objekt-besonderheiten-wrapper {
	width: 100%;
	margin-bottom: 3rem;
	background: var(--color-light-gray, #f5f5f5);
	padding: 3rem 0;
}

/* CLAUDE: Besonderheiten-Content */
.objekt-features__content {
	font-size: clamp(1rem, 1.5vw, 1.125rem);
	line-height: 1.7;
	color: var(--color-text, #333);
}

/* ========================================================================
   CLAUDE: SINGLE OBJEKT – Eckdaten + Kontakt Grid (Full Width)
   ======================================================================== */

/* CLAUDE: Eckdaten-Wrapper – Full Width */
.objekt-eckdaten-wrapper {
	width: 100%;
	
	background: var(--color-white, #fff);
	padding: 3rem 0;
}

/* CLAUDE: Eckdaten Grid – 2/3 für Facts, 1/3 für Kontakt */
.objekt-eckdaten-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 3rem;
}

@media (min-width: 1024px) {
	.objekt-eckdaten-grid {
		grid-template-columns: 2fr 1fr;
	}
}

/* CLAUDE: Eckdaten Facts Grid – 3 Spalten Cards */
.objekt-facts-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: 1.5rem;
}

/* CLAUDE: Einzelne Fact Card */
.objekt-fact-card {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	padding: 1.5rem;
	background: var(--color-light-gray, #f5f5f5);
	border-radius: 8px;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.objekt-fact-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* CLAUDE: Fact Card Label – linksbündig */
.objekt-fact-card .objekt-fact__label {
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--color-text-light, #666);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	text-align: left;
}

/* CLAUDE: Fact Card Value – linksbündig */
.objekt-fact-card .objekt-fact__value {
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--color-text, #333);
	text-align: left;
}

/* CLAUDE: Preis-Card hervorheben */
.objekt-fact-card--price {
	background: linear-gradient(135deg, var(--color-primary, #c19a6b) 0%, #c19a6b 100%);
	color: white;
}

.objekt-fact-card--price .objekt-fact__label {
	color: rgba(255, 255, 255, 0.9);
	text-align: left;
}

.objekt-fact-card--price .objekt-fact__value {
	font-size: 1.75rem;
	color: white;
	text-align: left;
}

/* CLAUDE: Adresse-Card über volle Breite */
.objekt-fact-card--full {
	grid-column: 1 / -1;
}

/* CLAUDE: Custom Facts Cards (vom Anwender im Backend erstellt) */
.objekt-fact-card--custom {
	background: linear-gradient(135deg, #f5f5f5 0%, #e8e8e8 100%);
	
}

/* CLAUDE: Kontakt-Sidebar */
.objekt-contact-sidebar {
	position: sticky;
	top: 2rem;
	height: fit-content;
}

/* ========================================================================
   CLAUDE: SINGLE OBJEKT – Objektbeschreibung (Full Width)
   ======================================================================== */

/* CLAUDE: Objektbeschreibung-Wrapper – Full Width außerhalb des Grids */
.objekt-description-wrapper {
	width: 100%;
	
	background: var(--color-white, #fff);
	padding: 3rem 0;
}

/* CLAUDE: Objektbeschreibung-Content - optimierte Lesbarkeit */
.objekt-description__content {
	font-size: clamp(1rem, 1.5vw, 1.125rem);
	line-height: 1.7;
	color: var(--color-text, #333);
}

/* CLAUDE: Gutenberg-Blöcke in Objektbeschreibung optimieren */
.objekt-description__content > * + * {
	margin-top: 1.5rem;
}

.objekt-description__content h2,
.objekt-description__content h3 {
	margin-top: 2rem;
	color: var(--color-primary, #c19a6b);
}

/* CLAUDE: Gutenberg-Galerie in Objektbeschreibung - Full Width */
.objekt-description__content .wp-block-gallery {
	margin-left: 0;
	margin-right: 0;
	max-width: 100%;
}

/* ========================================================================
   CLAUDE: SINGLE OBJEKT – Content Grid (2/3 + 1/3)
   ======================================================================== */

/* CLAUDE: Grid-Container – 2 Spalten auf Desktop */
.objekt-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 3rem;
	margin-bottom: 3rem;
}

@media (min-width: 1024px) {
	/* CLAUDE: 2/3 für Main, 1/3 für Sidebar */
	.objekt-grid {
		grid-template-columns: 2fr 1fr;
	}
}

/* CLAUDE: Sections im Main-Content mit Abstand */
.objekt-section {
	margin-bottom: 3rem;
	padding-bottom: 2rem;
	border-bottom: 1px solid var(--color-border, #e0e0e0);
}

.objekt-section:last-child {
	border-bottom: none;
	margin-bottom: 0;
}

/* CLAUDE: Section-Titel */
.objekt-section h2 {
	font-size: clamp(1.5rem, 3vw, 2rem);
	font-weight: 700;
	margin: 0 0 1.5rem 0;
	color: var(--color-primary, #c19a6b);
	text-align: center;
}

/* ========================================================================
   CLAUDE: SINGLE OBJEKT – Bildergalerie
   ======================================================================== */

/* CLAUDE: Galerie-Grid – 3 Spalten auf Desktop */
.objekt-gallery__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
	gap: 1rem;
}

/* CLAUDE: Galerie-Item mit Hover-Effekt */
.objekt-gallery__item {
	margin: 0;
	overflow: hidden;
	border-radius: 8px;
	transition: transform 0.3s ease;
}

.objekt-gallery__item:hover {
	transform: scale(1.05);
}

/* CLAUDE: Galerie-Bild – quadratisch, zentriert */
.objekt-gallery__item img {
	width: 100%;
	height: 250px;
	object-fit: cover;
	display: block;
}

/* CLAUDE: Bildunterschrift */
.objekt-gallery__item figcaption {
	padding: 0.5rem;
	font-size: 0.875rem;
	color: var(--color-text-light, #666);
	text-align: center;
}

/* ========================================================================
   CLAUDE: SINGLE OBJEKT – Grundrisse
   ======================================================================== */

/* CLAUDE: Grundrisse-Liste */
.objekt-floorplans__list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: 2rem;
}

/* CLAUDE: Einzelner Grundriss */
.objekt-floorplan {
	padding: 1rem;
	border: 1px solid var(--color-border, #e0e0e0);
	border-radius: 8px;
}

.objekt-floorplan__title {
	font-size: 1.125rem;
	font-weight: 600;
	margin: 0 0 1rem 0;
}

/* CLAUDE: Grundriss-Bild */
.objekt-floorplan img {
	width: 100%;
	height: auto;
	border-radius: 4px;
}

/* CLAUDE: Download-Link für PDFs */
.objekt-floorplan__download {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.75rem 1rem;
	background: var(--color-light-gray, #f5f5f5);
	border-radius: 4px;
	text-decoration: none;
	font-weight: 600;
	transition: background 0.3s ease;
}

.objekt-floorplan__download:hover {
	background: var(--color-border, #e0e0e0);
}

/* ========================================================================
   CLAUDE: SINGLE OBJEKT – Google Maps
   ======================================================================== */

/* CLAUDE: Karten-Wrapper */
.objekt-map__wrapper {
	width: 100%;
	height: 400px;
	border-radius: 8px;
	overflow: hidden;
}

/* CLAUDE: ACF Google Map Styling */
.acf-map {
	width: 100%;
	height: 100%;
	border: 0;
}

.acf-map img {
	max-width: inherit !important;
}

/* ========================================================================
   CLAUDE: SINGLE OBJEKT – Sidebar (Eckdaten, Kontakt)
   ======================================================================== */

/* CLAUDE: Sidebar macht auf Mobile sticky */
.objekt-sidebar {
	position: sticky;
	top: 2rem;
	height: fit-content;
}

/* CLAUDE: Facts-Box mit Eckdaten */
.objekt-facts {
	padding: 2rem;
	background: var(--color-light-gray, #f5f5f5);
	border-radius: 8px;
	margin-bottom: 2rem;
}

.objekt-facts h2 {
	font-size: 1.5rem;
	margin: 0 0 1.5rem 0;
	color: var(--color-primary, #c19a6b);
}

/* CLAUDE: Einzelner Fact-Eintrag */
.objekt-fact {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0.75rem 0;
	border-bottom: 1px solid var(--color-border, #e0e0e0);
}

.objekt-fact:last-child {
	border-bottom: none;
}

/* CLAUDE: Fact-Label (linksbündig) */
.objekt-fact__label {
	font-weight: 600;
	color: var(--color-text, #333);
	text-align: left;
}

/* CLAUDE: Fact-Value (linksbündig) */
.objekt-fact__value {
	font-weight: 400;
	color: var(--color-text-light, #666);
	text-align: left;
}

/* CLAUDE: Preis-Hervorhebung */
.objekt-fact--price .objekt-fact__value {
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--color-primary, #c19a6b);
}

/* CLAUDE: Kontakt-Box */
.objekt-contact {
	padding: 2rem;
	background: var(--color-white, #fff);
	border: 2px solid var(--color-primary, #c19a6b);
	border-radius: 8px;
	margin-bottom: 2rem;
}

.objekt-contact h2 {
	font-size: 1.5rem;
	margin: 0 0 1rem 0;
	color: var(--color-primary, #c19a6b);
}

/* CLAUDE: Kontakt-Info mit Icons */
.objekt-contact__info p {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0.5rem 0;
}

.objekt-contact__info .dashicons {
	color: var(--color-primary, #c19a6b);
}

/* CLAUDE: Contact Form 7 Integration in Kontakt-Box */
.objekt-contact .wpcf7 {
	max-width: 100%;
	padding: 0;
	margin-top: 1.5rem;
}

.objekt-contact .cdi-row {
	margin-bottom: 1rem;
}

.objekt-contact .cdi-input,
.objekt-contact .cdi-textarea {
	width: 100%;
	font-size: 0.875rem;
}

.objekt-contact .cdi-btn {
	width: 100%;
	text-align: center;
}

.objekt-contact .cdi-privacy-text {
	font-size: 0.75rem;
	line-height: 1.4;
}

/* CLAUDE: Download-Button */
.objekt-download {
	text-align: center;
}

.objekt-download .button {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	width: 100%;
	justify-content: center;
}

/* ========================================================================
   CLAUDE: ARCHIVE OBJEKTE – Header & Filter
   ======================================================================== */

/* CLAUDE: Archive-Header */
.archive-header {
	padding: 3rem 0;
	text-align: center;
	
	margin-bottom: 3rem;
}

.archive-title {
	font-size: clamp(2rem, 5vw, 3rem);
	font-weight: 700;
	margin: 0 0 1rem 0;
	color: var(--color-primary, #c19a6b);
}

.archive-description {
	font-size: 1.125rem;
	max-width: 700px;
	margin: 0 auto 1rem auto;
	color: var(--color-text-light, #666);
}

.archive-count {
	font-size: 1rem;
	font-weight: 600;
	color: var(--color-text, #c19a6b);
}

/* ========================================================================
   CLAUDE: ARCHIVE OBJEKTE – Grid
   ======================================================================== */

/* CLAUDE: Objekte-Grid – maximal 2 Spalten für größere Cards */
.objekte-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 3rem;
	margin-bottom: 3rem;
}

@media (min-width: 768px) {
	/* CLAUDE: 2 Spalten ab Tablet – Cards nehmen vollen Platz ein */
	.objekte-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 3.5rem;
	}
}

/* ========================================================================
   CLAUDE: ARCHIVE OBJEKTE – Card Component
   ======================================================================== */

/* CLAUDE: Objekt-Card mit Schatten & Hover */
.objekt-card {
	display: flex;
	flex-direction: column;
	background: var(--color-white, #fff);
	border-radius: 8px;
	overflow: hidden;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.objekt-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

/* CLAUDE: Card-Bild (oben) – groß für 2-Spalten-Layout */
.objekt-card__image {
	position: relative;
	display: block;
	width: 100%;
	height: 350px;
	overflow: hidden;
}

/* CLAUDE: Auf Desktop noch größer für maximale Wirkung */
@media (min-width: 1024px) {
	.objekt-card__image {
		height: 400px;
	}
}

.objekt-card__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.3s ease;
}

.objekt-card:hover .objekt-card__image img {
	transform: scale(1.1);
}

/* CLAUDE: Status-Badge auf Card */
.objekt-card__status {
	position: absolute;
	top: 1rem;
	right: 1rem;
	padding: 0.5rem 1rem;
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	border-radius: 4px;
	background: var(--color-primary, #004d40);
	color: white;
}

/* CLAUDE: Status-Varianten */
.objekt-card__status--verfuegbar {
	background: #4caf50;
}

.objekt-card__status--reserviert {
	background: #ff9800;
}

.objekt-card__status--verkauft {
	background: #9e9e9e;
}

/* CLAUDE: Card-Content (unten) – großzügiges Padding für 2-Spalten-Layout */
.objekt-card__content {
	padding: 2rem;
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
	flex: 1;
}

/* CLAUDE: Auf Desktop noch mehr Padding */
@media (min-width: 1024px) {
	.objekt-card__content {
		padding: 2.5rem;
		gap: 1.5rem;
	}
}

/* CLAUDE: Auf Mobile weniger Padding */
@media (max-width: 767px) {
	.objekt-card__content {
		padding: 1.5rem;
		gap: 1rem;
	}
}

/* CLAUDE: Taxonomie-Tags – größer */
.objekt-card__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
}

.objekt-card__tag {
	display: inline-block;
	padding: 0.5rem 1rem;
	font-size: 0.875rem;
	font-weight: 600;
	text-transform: uppercase;
	background: var(--color-light-gray, #f5f5f5);
	color: var(--color-primary, #c19a6b);
	border-radius: 4px;
}

/* CLAUDE: Card-Titel – deutlich größer für 2-Spalten-Layout */
.objekt-card__title {
	font-size: clamp(1.5rem, 2.5vw, 1.875rem);
	font-weight: 700;
	margin: 0;
	line-height: 1.3;
}

.objekt-card__title a {
	color: var(--color-text, #3b2a1a);
	text-decoration: none;
	transition: color 0.3s ease;
}

.objekt-card__title a:hover {
	color: var(--color-primary, #c19a6b);
}

/* CLAUDE: Standort mit Icon – größer */
.objekt-card__location {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: clamp(0.95rem, 1.3vw, 1.125rem);
	color: var(--color-text-light, #3b2a1a);
	margin: 0;
}

/* CLAUDE: Excerpt – deutlich größer für bessere Lesbarkeit */
.objekt-card__excerpt {
	font-size: clamp(1rem, 1.3vw, 1.125rem);
	color: var(--color-text-light, #3b2a1a);
	margin: 0;
	line-height: 1.65;
}

/* CLAUDE: Facts-Liste in Card */
.objekt-card__facts {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	padding-top: 1rem;
	border-top: 1px solid var(--color-border, #3b2a1a);
}

/* CLAUDE: Einzelner Fact – deutlich größer für 2-Spalten-Layout */
.objekt-card__fact {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	font-size: clamp(0.95rem, 1.2vw, 1.05rem);
	color: var(--color-text, #c19a6b);
}

.objekt-card__fact .dashicons {
	color: var(--color-primary, #c19a6b);
}

/* CLAUDE: Preis-Fact hervorheben – sehr prominent für 2-Spalten-Layout */
.objekt-card__fact--price {
	font-size: clamp(1.75rem, 3vw, 2rem);
	color: var(--color-primary, #c19a6b);
	font-weight: 700;
	margin-bottom: 0.5rem;
}

/* CLAUDE: CTA-Button */
.objekt-card__cta {
	margin-top: auto;
	width: 100%;
	text-align: center;
}

/* ========================================================================
   CLAUDE: ARCHIVE OBJEKTE – Pagination
   ======================================================================== */

/* CLAUDE: Pagination-Container */
.archive-pagination {
	margin: 3rem 0;
	text-align: center;
}

.archive-pagination .page-numbers {
	display: inline-flex;
	gap: 0.5rem;
	list-style: none;
	padding: 0;
	margin: 0;
}

.archive-pagination .page-numbers li {
	display: inline-block;
}

.archive-pagination .page-numbers a,
.archive-pagination .page-numbers span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 1rem;
	border: 1px solid var(--color-border, #c19a6b);
	border-radius: 4px;
	text-decoration: none;
	color: var(--color-text, #333);
	transition: background 0.3s ease, color 0.3s ease;
}

.archive-pagination .page-numbers a:hover {
	background: var(--color-primary, #004d40);
	color: white;
	border-color: var(--color-primary, #c19a6b);
}

.archive-pagination .page-numbers .current {
	background: var(--color-primary, #c19a6b);
	color: white;
	border-color: var(--color-primary, #c19a6b);
}

/* ========================================================================
   CLAUDE: ARCHIVE OBJEKTE – No Results
   ======================================================================== */

/* CLAUDE: Keine Ergebnisse */
.archive-no-results {
	text-align: center;
	padding: 4rem 2rem;
}

.archive-no-results h2 {
	font-size: 2rem;
	margin: 0 0 1rem 0;
	color: var(--color-primary, #c19a6b);
}

.archive-no-results p {
	font-size: 1.125rem;
	color: var(--color-text-light, #c19a6b);
	margin: 0 0 2rem 0;
}

/* ========================================================================
   CLAUDE: RESPONSIVE ADJUSTMENTS
   ======================================================================== */

/* CLAUDE: Mobile-Anpassungen (< 768px) */
@media (max-width: 767px) {
	/* CLAUDE: Hero kleiner auf Mobile */
	.objekt-hero {
		height: 40vh;
		min-height: 300px;
	}

	/* CLAUDE: Besonderheiten - reduzierte Abstände auf Mobile */
	.objekt-besonderheiten-wrapper {
		padding: 2rem 0;
		margin-bottom: 2rem;
	}

	/* CLAUDE: Eckdaten - reduzierte Abstände auf Mobile */
	.objekt-eckdaten-wrapper {
		padding: 2rem 0;
		margin-bottom: 2rem;
	}

	/* CLAUDE: Eckdaten Grid - 2 Spalten auf Mobile für bessere Übersicht */
	.objekt-facts-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 0.875rem;
	}

	/* CLAUDE: Fact Cards - kompakter auf Mobile mit overflow-Schutz */
	.objekt-fact-card {
		padding: 0.875rem;
		min-width: 0; /* CLAUDE: Verhindert overflow bei langen Texten */
	}

	/* CLAUDE: Fact Card Label - kleinere Schrift auf Mobile */
	.objekt-fact-card .objekt-fact__label {
		font-size: 0.75rem;
		word-break: break-word; /* CLAUDE: Lange Labels umbrechen */
	}

	/* CLAUDE: Fact Card Value - angepasste Schrift mit overflow-Schutz */
	.objekt-fact-card .objekt-fact__value {
		font-size: 1.125rem;
		word-break: break-word; /* CLAUDE: Lange Werte umbrechen */
		overflow-wrap: break-word; /* CLAUDE: Fallback für ältere Browser */
		hyphens: auto; /* CLAUDE: Silbentrennung aktivieren */
	}

	/* CLAUDE: Preis-Card - angepasste Schrift auf Mobile */
	.objekt-fact-card--price .objekt-fact__value {
		font-size: 1.5rem;
		word-break: break-word;
	}

	/* CLAUDE: Full-width Cards bleiben über volle Breite */
	.objekt-fact-card--full {
		grid-column: 1 / -1;
	}

	/* CLAUDE: Kontakt-Sidebar nicht sticky auf Mobile */
	.objekt-contact-sidebar {
		position: relative;
		top: 0;
	}

	/* CLAUDE: Objektbeschreibung - reduzierte Abstände auf Mobile */
	.objekt-description-wrapper {
		padding: 2rem 0;
		margin-bottom: 2rem;
	}

	.objekt-description__content {
		font-size: 1rem;
	}

	.objekt-description__content > * + * {
		margin-top: 1rem;
	}

	/* CLAUDE: Sidebar nicht sticky auf Mobile */
	.objekt-sidebar {
		position: relative;
		top: 0;
	}

	/* CLAUDE: Facts horizontal auf Mobile */
	.objekt-card__facts {
		flex-direction: row;
		flex-wrap: wrap;
	}
}

/* CLAUDE: Sehr kleine Screens (< 480px) - 1 Spalte für bessere Lesbarkeit */
@media (max-width: 479px) {
	/* CLAUDE: Eckdaten Grid - 1 Spalte auf sehr kleinen Screens */
	.objekt-facts-grid {
		grid-template-columns: 1fr;
		gap: 0.75rem;
	}

	/* CLAUDE: Fact Cards - noch kompakter */
	.objekt-fact-card {
		padding: 1rem;
	}

	/* CLAUDE: Preis-Card - etwas kleinere Schrift */
	.objekt-fact-card--price .objekt-fact__value {
		font-size: 1.375rem;
	}
}

/* Basis-Button */
.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	padding: .7rem 1.1rem;
	border-radius: .5rem;
	font-weight: 600;
	line-height: 1;
	text-decoration: none; /* Unterstreichung weg */
	border: 0;
	cursor: pointer;
  }
  
  /* Primär-Variante */
  .button--primary {
	background: var(--brand-primary, #c19a6b); /* Mittelbraun, fallback */
	color: #fff;
	box-shadow: 0 2px 8px rgba(0,0,0,.12);
	transition: background .2s ease, box-shadow .2s ease, transform .05s ease;
  }
  .button--primary:hover,
  .button--primary:focus {
	background: #633a1a; /* dunkler Hover */
	text-decoration: none;
	box-shadow: 0 4px 14px rgba(0,0,0,.16);
  }
  .button--primary:active { transform: translateY(1px); }
  
  /* Karte-spezifisch optional */
  .objekt-card__cta { width: fit-content; }