/* ROS REAL – Baustein Kachel und Listeneintrag (Design v46).
   Nur Tokens aus main.css verwenden, keine Hex-Werte. */

/* ---------- Hülle und Merkzettel-Knopf ---------- */

.kachelhuelle { position: relative; }

.kachelhuelle .merkknopf {
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 3;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding: 0 14px;
	border: 1px solid var(--linie);
	border-radius: 0;
	background: var(--papier);
	color: var(--tinte);
	font: 400 var(--t3)/1.2 var(--sans);
	cursor: pointer;
}

.kachelhuelle .merkknopf__gemerkt { display: none; }
.kachelhuelle .merkknopf[aria-pressed="true"] .merkknopf__an { display: none; }
.kachelhuelle .merkknopf[aria-pressed="true"] .merkknopf__gemerkt { display: inline; }
.kachelhuelle .merkknopf[aria-pressed="true"] { color: var(--blau); }

/* ---------- Kachel (Raster) ---------- */

.kachel { display: block; color: inherit; text-decoration: none; }
.kachel:hover { text-decoration: none; }

.kachel .bild {
	display: block;
	position: relative;
	overflow: hidden;
	aspect-ratio: 4 / 3;
	background: var(--papier-tief);
}

.kachel .bild img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .9s cubic-bezier(.2, .8, .2, 1);
}

.kachel:hover .bild img { transform: scale(1.04); }

.kachel .unten { display: block; padding: 14px 0 0; }

.kachel .sz {
	display: block;
	font-family: var(--serif);
	font-size: var(--g6);
	color: var(--grau);
	line-height: 1.6;
}

.kachel .nm {
	display: inline-block;
	max-width: 100%;
	font-family: var(--serif);
	font-size: clamp(23px, 1.9vw, 29px);
	line-height: 1.15;
	margin-top: 3px;
	color: var(--tinte);
	overflow-wrap: break-word;
}

.kachel:hover .nm {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: var(--unterstrich-abstand);
}

.kachel .pr {
	display: block;
	font-family: var(--sans);
	font-size: var(--t2);
	line-height: 1.6;
	margin-top: 7px;
	color: var(--tinte);
}

.kachel .eck,
.kachel .ek {
	display: block;
	font-family: var(--sans);
	font-size: var(--t3);
	line-height: 1.4;
	margin-top: 3px;
	color: var(--grau);
}

/* „Foto folgt“ (Kachel: Serif kursiv, Grau 72 %) */

.bild.leer .folgt {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--serif);
	font-style: italic;
	font-weight: 400;
	font-size: var(--g5);
	letter-spacing: 0;
	text-transform: none;
	color: var(--grau);
	opacity: .72;
}

/* ---------- Listeneintrag (Liste / Kartenansicht) ---------- */

.keintrag {
	display: block;
	width: 100%;
	color: inherit;
	text-decoration: none;
	background: none;
	border: 0;
	border-bottom: 1px solid var(--linie);
	padding: 14px var(--rand);
}

.keintrag:hover { text-decoration: none; }

.keintrag .reihe {
	display: grid;
	grid-template-columns: 112px minmax(0, 1fr);
	gap: 16px;
	align-items: start;
}

.keintrag .bild {
	position: relative;
	display: block;
	overflow: hidden;
	aspect-ratio: 4 / 3;
	background: var(--papier-tief);
}

.keintrag .bild img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.keintrag .text { display: block; min-width: 0; }

.keintrag .sz {
	display: block;
	font-family: var(--serif);
	font-size: var(--g6);
	color: var(--grau);
	line-height: 1.4;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.keintrag .nm {
	display: block;
	font-family: var(--serif);
	font-size: clamp(23px, 1.9vw, 29px);
	line-height: 1.15;
	margin-top: 2px;
	color: var(--tinte);
	overflow-wrap: break-word;
}

.keintrag:hover .nm {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: var(--unterstrich-abstand);
}

.keintrag .pr {
	display: block;
	font-family: var(--sans);
	font-size: var(--t3);
	line-height: 1.4;
	margin-top: 6px;
	color: var(--tinte);
}

.keintrag .eck,
.keintrag .ek {
	display: block;
	font-family: var(--sans);
	font-size: var(--t3);
	line-height: 1.4;
	margin-top: 4px;
	color: var(--grau);
}

/* „Foto folgt“ im Listeneintrag: kleiner als in der Kachel. */
.keintrag .bild.leer .folgt { font-size: 13px; }

/* Handy: kleineres Bild, engere Spalte. */
@media (max-width: 1023px) {
	.keintrag { padding: 10px var(--rand); }
	.keintrag .reihe { grid-template-columns: 72px minmax(0, 1fr); gap: 12px; }
}

/* Sehr breite Bildschirme: Kacheltitel wächst auf 42 px (Übergabe 7.6). */
@media (min-width: 2200px) {
	.kachel .nm { font-size: 42px; }
}

/* TC 22.09.: Im Prototyp gibt es in der Kachel keinen Merken-Knopf (Merken auf der Objektseite + Schwebeleiste). */
.raster .kachelhuelle .merkknopf { display: none; }

/* K2 – Messrunde 2 Nr 86: Unterzeile im Listeneintrag darf zweizeilig umbrechen (Prototyp), 14 px. */
.keintrag .sz {
	font-size: var(--t3);
	white-space: normal;
	overflow: visible;
	text-overflow: clip;
}
.keintrag .nm { font-size: clamp(23px, 1.9vw, 28px); }