/* =========================================================
   Gemeinsame Bausteine für beide Marken (Startseite + /immobilien/)
   - Marken-Umschalter „DOKA’S Service ⇄ DOKA’S Immobilien“
   - Tag/Nacht-Knopf (Logik: head.js + core.js [data-theme-toggle])
   - Seitenwechsel mit View Transitions (nur Chrome/Edge/Safari, sonst normaler Wechsel)
   Nutzt nur die Farb-Tokens aus b.css (--bg, --tx, --glass, --ln, --gd …) → funktioniert in beiden Themes.
   ========================================================= */

/* ---------- Seitenwechsel zwischen den Marken ---------- */
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: reduce) {
	@view-transition { navigation: none; }
}
::view-transition-old(root) { animation: marke-out .45s cubic-bezier(.65, 0, .35, 1) both; }
::view-transition-new(root) { animation: marke-in .6s cubic-bezier(.22, 1, .36, 1) both; }
@keyframes marke-out { to { opacity: 0; transform: scale(.985); filter: blur(6px); } }
@keyframes marke-in { from { opacity: 0; transform: scale(1.015); filter: blur(6px); } }
.marke-thumb { view-transition-name: marke-thumb; }
.mnav .marke-thumb, [data-mnav] .marke-thumb { view-transition-name: none; }
::view-transition-group(marke-thumb) { animation-duration: .55s; animation-timing-function: cubic-bezier(.22, 1, .36, 1); }

/* Tag/Nacht per Klick: runde Blende vom Knopf aus (core.js setzt --tt-x/--tt-y und animiert) */
html.theme-vt::view-transition-old(root),
html.theme-vt::view-transition-new(root) { animation: none; mix-blend-mode: normal; }

/* Automatischer Wechsel bei Sonnenauf-/-untergang: sanftes Überblenden */
html.theme-anim,
html.theme-anim *,
html.theme-anim *::before,
html.theme-anim *::after {
	transition: background-color 1s ease, color 1s ease, border-color 1s ease, fill 1s ease, stroke 1s ease, box-shadow 1s ease !important;
}

/* ---------- Marken-Umschalter ---------- */
/* :where = Spezifität 0 → Seiten-CSS (z. B. display:none unter 900 px) gewinnt immer, egal in welcher Reihenfolge geladen */
:where(.marke) {
	position: relative;
	display: inline-grid;
	grid-template-columns: 1fr 1fr;
	padding: 4px;
	border-radius: 999px;
	background: var(--glass-2);
	border: 1px solid var(--ln);
	isolation: isolate;
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
}
.marke-opt {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: 40px;
	min-width: 92px;
	padding: 3px 14px;
	border-radius: 999px;
	color: var(--tx-2);
	font: 700 13px/1.1 var(--font-alt);
	text-decoration: none;
	transition: color .35s ease;
}
.marke-opt:hover { color: var(--tx); }
.marke-kicker { font-size: 9.5px; letter-spacing: .2em; text-transform: uppercase; opacity: .75; font-weight: 700; }
.marke-opt[aria-current="page"] { color: var(--marke-on, var(--on-gold, #1A1216)); }
.marke-thumb {
	position: absolute;
	z-index: 0;
	top: 4px;
	bottom: 4px;
	left: 4px;
	width: calc(50% - 4px);
	border-radius: 999px;
	background: var(--marke-thumb-bg, var(--grad-gold));
	box-shadow: 0 6px 18px -6px rgba(201, 164, 92, .55), inset 0 1px 0 rgba(255, 255, 255, .35);
	transition: transform .55s cubic-bezier(.22, 1, .36, 1);
}
/* Tag: einfarbiges dunkleres Gold, damit der helle Text darauf ≥ 4,5:1 hat */
html[data-theme="day"] .marke-thumb { --marke-thumb-bg: var(--gd, #8A6420); }
.marke:has(.marke-opt:nth-of-type(2)[aria-current="page"]) .marke-thumb { transform: translateX(100%); }
.marke-opt:focus-visible { outline: 2px solid var(--gd-2); outline-offset: 2px; }
@media (max-width: 420px) {
	.marke-opt { min-width: 74px; padding: 3px 10px; font-size: 12px; }
	.marke-kicker { display: none; }
}

/* ---------- Tag/Nacht-Knopf ---------- */
:where(.theme-toggle) {
	position: relative;
	display: inline-grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	color: var(--tx);
	background: var(--glass-2);
	border: 1px solid var(--ln);
	cursor: pointer;
	overflow: hidden;
	transition: background .3s ease, transform .3s ease;
}
.theme-toggle:hover { background: var(--glass-3); transform: rotate(-12deg); }
.theme-toggle svg {
	position: absolute;
	width: 20px;
	height: 20px;
	transition: transform .6s cubic-bezier(.22, 1, .36, 1), opacity .4s ease;
}
html[data-theme="day"] .theme-toggle .tt-moon,
html:not([data-theme="day"]) .theme-toggle .tt-sun { transform: translateY(120%) rotate(90deg); opacity: 0; }
/* kleiner Punkt: manuell gewählt (nicht nach Sonnenstand) */
.theme-toggle[data-manual="true"]::after {
	content: "";
	position: absolute;
	right: 8px;
	top: 8px;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--gd);
}

/* ---------- Logos (Original-Logos der Kundinnen, Hintergrund entfernt) ----------
   Die PNGs in /assets/img/logo/ sind reine Masken (nur Form/Transparenz). Die Farbe kommt aus den
   Tokens – dadurch passen die Logos automatisch zu Tag und Nacht und bleiben gut lesbar.
   Verwendung (Größe per width/height im eigenen CSS):
     <span class="brand-logo logo-service" role="img" aria-label="DOKA’S Immobilienservice"></span>
     <span class="brand-logo logo-service-mark" aria-hidden="true"></span>   (nur Bildmarke, ohne Schrift)
     <span class="brand-logo logo-immo" role="img" aria-label="DOKA’S Immobilien"></span>
*/
:root {
	--logo-gold: #C9A45C;      /* Service-Logo, nachts */
	--logo-immo-gold: #E4C05E; /* Immobilien-Logo: Originalgold (Fassung vom 29.10.2026), nachts */
	--logo-ink: #F4EEF1;       /* „Doka’s“ im Immobilien-Logo, nachts (Original: Weiß) */
}
:root[data-theme="day"] {
	--logo-gold: #8A6420;
	--logo-immo-gold: #8A6420;
	--logo-ink: #2B2326;
}
:where(.brand-logo) {
	position: relative;
	display: inline-block;
	flex: none;
	vertical-align: middle;
}
.brand-logo::before,
.brand-logo::after {
	content: "";
	position: absolute;
	inset: 0;
	-webkit-mask: var(--logo-m) center / contain no-repeat;
	mask: var(--logo-m) center / contain no-repeat;
	background: var(--logo-c);
	transition: background-color .6s ease;
}
.brand-logo::after { display: none; }
.logo-service { aspect-ratio: 1200 / 1079; }
.logo-service::before { --logo-m: url(/assets/img/logo/doka-service.png); --logo-c: var(--logo-gold); }
.logo-service-mark { aspect-ratio: 900 / 588; }
.logo-service-mark::before { --logo-m: url(/assets/img/logo/doka-service-mark.png); --logo-c: var(--logo-gold); }
.logo-immo { aspect-ratio: 1 / 1; }
.logo-immo::before { --logo-m: url(/assets/img/logo/doka-immobilien-accent.png); --logo-c: var(--logo-immo-gold); }
.logo-immo::after { display: block; --logo-m: url(/assets/img/logo/doka-immobilien-ink.png); --logo-c: var(--logo-ink); }
/* Windows-Kontrastmodus: Logo in Systemtextfarbe statt unsichtbar */
@media (forced-colors: active) {
	.brand-logo::before, .brand-logo::after { forced-color-adjust: none; background: CanvasText; }
}
/* Größen-Helfer (optional) */
.brand-logo.is-sm { width: 56px; }
.brand-logo.is-md { width: 120px; }
.brand-logo.is-lg { width: 240px; }