/* Rothenacker Webcam – schlicht, themenfreundlich, 16:9 */

.rwc {
	--rwc-gap: 1rem;
	--rwc-radius: 0.35rem;
	--rwc-border: color-mix(in srgb, currentColor 18%, transparent);
	--rwc-muted: color-mix(in srgb, currentColor 62%, transparent);
	--rwc-bg: color-mix(in srgb, currentColor 4%, transparent);
	--rwc-accent: color-mix(in srgb, currentColor 12%, transparent);
	max-width: 72rem;
	margin: 0 auto;
	display: grid;
	gap: calc(var(--rwc-gap) * 1.75);
	font-size: 1rem;
	line-height: 1.45;
}

.rwc-title {
	margin: 0;
	font-size: 1.35rem;
	font-weight: 650;
}

.rwc-live__header,
.rwc-archive__controls,
.rwc-live__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.65rem 1rem;
}

.rwc-live__header {
	justify-content: space-between;
	margin-bottom: 0.75rem;
}

.rwc-status {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	padding: 0.2rem 0.55rem;
	border: 1px solid var(--rwc-border);
	border-radius: 999px;
	font-size: 0.85rem;
}

.rwc-status--online {
	border-color: color-mix(in srgb, #1a7f37 55%, var(--rwc-border));
}

.rwc-status--offline,
.rwc-status--error {
	border-color: color-mix(in srgb, #b42318 55%, var(--rwc-border));
}

.rwc-captured {
	color: var(--rwc-muted);
	font-size: 0.9rem;
}

.rwc-btn {
	appearance: none;
	border: 1px solid var(--rwc-border);
	background: var(--rwc-accent);
	color: inherit;
	border-radius: var(--rwc-radius);
	padding: 0.35rem 0.8rem;
	font: inherit;
	cursor: pointer;
}

.rwc-btn:hover,
.rwc-btn:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

.rwc-btn--ghost {
	background: transparent;
}

.rwc-thumb-btn {
	display: block;
	width: 100%;
	padding: 0;
	border: 1px solid var(--rwc-border);
	border-radius: var(--rwc-radius);
	background: var(--rwc-bg);
	cursor: zoom-in;
	overflow: hidden;
}

.rwc-thumb {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	background: var(--rwc-bg);
}

.rwc-hint,
.rwc-muted,
.rwc-privacy {
	color: var(--rwc-muted);
	font-size: 0.92rem;
}

.rwc-hint {
	margin: 0.5rem 0 0;
}

.rwc-label {
	display: grid;
	gap: 0.25rem;
	font-size: 0.9rem;
}

.rwc-label select,
.rwc-label input[type="number"] {
	min-width: 7rem;
	font: inherit;
	padding: 0.35rem 0.5rem;
	border-radius: var(--rwc-radius);
	border: 1px solid var(--rwc-border);
	background: transparent;
	color: inherit;
}

.rwc-label select[data-rwc-month] {
	min-width: 11rem;
}

.rwc-label input[type="number"] {
	min-width: 5.5rem;
	max-width: 8rem;
}

.rwc-months {
	display: grid;
	gap: 1.75rem;
	margin-top: 1rem;
}

.rwc-month__title {
	margin: 0 0 0.5rem;
	font-size: 1.15rem;
}

.rwc-days {
	display: grid;
	gap: 1.25rem;
	margin-top: 1rem;
}

.rwc-day__title {
	margin: 0 0 0.5rem;
	font-size: 1.05rem;
}

.rwc-grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.75rem;
}

.rwc-grid--slots {
	grid-template-columns: repeat(5, minmax(0, 1fr));
}

.rwc-grid--dates {
	grid-template-columns: repeat(auto-fill, minmax(11.5rem, 1fr));
	margin-top: 1rem;
}

.rwc-tile {
	margin: 0;
}

.rwc-tile__btn {
	display: grid;
	gap: 0.35rem;
	width: 100%;
	padding: 0;
	border: 1px solid var(--rwc-border);
	border-radius: var(--rwc-radius);
	background: var(--rwc-bg);
	color: inherit;
	cursor: zoom-in;
	overflow: hidden;
	text-align: left;
}

.rwc-tile__btn img {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

.rwc-tile__label {
	display: block;
	padding: 0 0.45rem 0.45rem;
	font-size: 0.82rem;
	color: var(--rwc-muted);
}

.rwc-tile--empty {
	border: 1px dashed var(--rwc-border);
	border-radius: var(--rwc-radius);
	min-height: 4rem;
	display: grid;
	place-items: end start;
	padding: 0.45rem;
	opacity: 0.55;
}

.rwc-privacy {
	border-top: 1px solid var(--rwc-border);
	padding-top: 0.75rem;
}

.rwc-privacy p {
	margin: 0;
}

.rwc-dialog {
	border: 1px solid var(--rwc-border);
	border-radius: var(--rwc-radius);
	padding: 0.75rem;
	max-width: min(96vw, 1100px);
	width: 100%;
	background: Canvas;
	color: CanvasText;
}

.rwc-dialog::backdrop {
	background: rgb(0 0 0 / 0.55);
}

.rwc-dialog__bar {
	display: flex;
	justify-content: flex-end;
	margin-bottom: 0.5rem;
}

.rwc-dialog__img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: contain;
	background: #111;
}

.rwc-dialog__caption {
	margin: 0.5rem 0 0;
	color: var(--rwc-muted);
	font-size: 0.9rem;
}

@media (max-width: 800px) {
	.rwc-grid--slots {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 480px) {
	.rwc-grid--slots {
		grid-template-columns: 1fr;
	}
}