/*!
 * Suchbilder – Ausgabe auf der Website
 * Copyright (C) 2026 Pia Streck, Webdesign
 * Lizenz: GPL-2.0-or-later
 */

/* Das Feld ist technisch ein Button (gut für Tastatur und Screenreader).
   Viele Themes gestalten Buttons stark, deshalb hier ein gründlicher Reset. */
button.suchbild,
button.suchbild:hover,
button.suchbild:focus,
button.suchbild:active {
	all: unset;
	box-sizing: border-box;
	position: relative;
	display: block;
	width: 100%;
	max-width: var(--sb-max, 320px);
	aspect-ratio: var(--sb-ratio, 1/1);
	margin: 0 auto 1em;
	padding: 0;
	border: 0;
	border-radius: var(--sb-radius, 8px);
	overflow: hidden;
	cursor: pointer;
	background-color: #e5e7eb;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	box-shadow: 0 2px 8px rgba(0, 0, 0, .15);
	transition: transform .15s ease, box-shadow .15s ease;
	-webkit-tap-highlight-color: transparent;
	isolation: isolate;
}

button.suchbild:hover {
	transform: scale(1.02);
	box-shadow: 0 4px 14px rgba(0, 0, 0, .22);
}

button.suchbild:focus-visible {
	outline: 3px solid #2563eb;
	outline-offset: 3px;
}

button.suchbild.suchbild-noimage {
	background-image: repeating-linear-gradient(45deg, #e5e7eb 0 12px, #f3f4f6 12px 24px);
}

button.suchbild.is-loading {
	cursor: progress;
	opacity: .8;
}

/* Farbton: färbt das Foto ein, Helligkeit und Details bleiben erhalten */
.suchbild .suchbild-tint {
	position: absolute;
	inset: 0;
	mix-blend-mode: color;
	pointer-events: none;
	z-index: 0;
}

/* Die Zahl */
.suchbild .suchbild-number {
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 2em;
	height: 2em;
	padding: 0 .4em;
	box-sizing: border-box;
	border-radius: 999px;
	background: var(--sb-num-bg, #333);
	color: var(--sb-num-color, #fff);
	font: bold clamp(14px, 1.2vw + 8px, 22px)/1 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	box-shadow: 0 1px 4px rgba(0, 0, 0, .3);
	z-index: 1;
}
.suchbild-pos-top-left .suchbild-number { top: .5em; left: .5em; }
.suchbild-pos-top-right .suchbild-number { top: .5em; right: .5em; }
.suchbild-pos-bottom-left .suchbild-number { bottom: .5em; left: .5em; }
.suchbild-pos-bottom-right .suchbild-number { bottom: .5em; right: .5em; }
.suchbild-pos-center .suchbild-number { top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: clamp(20px, 2vw + 12px, 34px); }

/* Der grüne Haken */
.suchbild .suchbild-check {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(255, 255, 255, .35);
	opacity: 0;
	pointer-events: none;
	transition: opacity .25s ease;
	z-index: 2;
}
.suchbild .suchbild-check svg {
	width: 45%;
	max-width: 120px;
	height: auto;
	transform: scale(.5);
	transition: transform .3s cubic-bezier(.34, 1.56, .64, 1);
	filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .35));
}
.suchbild .suchbild-check circle { fill: #16a34a; }
.suchbild .suchbild-check path {
	fill: none;
	stroke: #fff;
	stroke-width: 5;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.suchbild.is-found .suchbild-check { opacity: 1; }
.suchbild.is-found .suchbild-check svg { transform: scale(1); }
button.suchbild.is-found { cursor: default; }
button.suchbild.is-found:hover { transform: none; }

/* Zeitleiste unten auf dem Bildschirm */
.suchbilder-bar {
	position: fixed;
	left: 50%;
	bottom: 16px;
	transform: translateX(-50%);
	z-index: 99998;
	display: flex;
	align-items: center;
	gap: 1em;
	max-width: calc(100vw - 32px);
	box-sizing: border-box;
	padding: .7em 1.2em;
	border-radius: 999px;
	background: var(--sb-bar, #1f2937);
	color: #fff;
	font: 600 17px/1.2 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	box-shadow: 0 6px 20px rgba(0, 0, 0, .3);
	white-space: nowrap;
}
.suchbilder-bar-time {
	font-variant-numeric: tabular-nums;
	font-size: 1.15em;
}
.suchbilder-bar-time::before {
	content: "⏱";
	margin-right: .35em;
}
.suchbilder-bar.is-warning .suchbilder-bar-time { color: #fca5a5; }
.suchbilder-bar-progress { opacity: .9; }

/* Kurze Hinweise */
.suchbilder-toast {
	position: fixed;
	left: 50%;
	bottom: 80px;
	transform: translateX(-50%) translateY(10px);
	z-index: 99999;
	max-width: calc(100vw - 32px);
	box-sizing: border-box;
	padding: .75em 1.2em;
	border-radius: 10px;
	background: #111827;
	color: #fff;
	font: 500 17px/1.35 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	text-align: center;
	box-shadow: 0 6px 20px rgba(0, 0, 0, .3);
	opacity: 0;
	transition: opacity .2s ease, transform .2s ease;
	pointer-events: none;
}
.suchbilder-toast.is-visible {
	opacity: 1;
	transform: translateX(-50%) translateY(0);
}

/* Meldungsfenster (Zeit abgelaufen / Geschafft) */
.suchbilder-overlay {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
	background: rgba(0, 0, 0, .55);
}
.suchbilder-dialog {
	width: 100%;
	max-width: 440px;
	box-sizing: border-box;
	padding: 2em 1.75em 1.75em;
	border-radius: 14px;
	background: #fff;
	color: #1f2937;
	text-align: center;
	font: 400 18px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	box-shadow: 0 20px 50px rgba(0, 0, 0, .35);
}
.suchbilder-dialog h2 {
	margin: 0 0 .5em;
	padding: 0;
	font: 700 1.35em/1.25 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	color: inherit;
}
.suchbilder-dialog p {
	margin: 0 0 1.25em;
	white-space: pre-line;
}
.suchbilder-dialog-icon {
	font-size: 2.6em;
	line-height: 1;
	margin-bottom: .3em;
}
.suchbilder-dialog-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: .6em;
	justify-content: center;
}
.suchbilder-dialog button {
	all: unset;
	box-sizing: border-box;
	padding: .7em 1.4em;
	border-radius: 8px;
	background: var(--sb-bar, #1f2937);
	color: #fff;
	font: 600 17px/1.2 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	cursor: pointer;
}
.suchbilder-dialog button.is-secondary {
	background: #e5e7eb;
	color: #1f2937;
}
.suchbilder-dialog button:focus-visible {
	outline: 3px solid #2563eb;
	outline-offset: 2px;
}

.suchbild-admin-notice {
	padding: .6em .9em;
	border-left: 4px solid #d63638;
	background: #fcf0f1;
	color: #1d2327;
	font-size: 15px;
}

@media (prefers-reduced-motion: reduce) {
	button.suchbild,
	.suchbild .suchbild-check,
	.suchbild .suchbild-check svg,
	.suchbilder-toast { transition: none; }
}