/* =========================================================================
   Glas-Optik (seit 1.80.0) – nur aktiv, wenn <body> die Klasse „mlk-glas“ hat
   (Schalter: MLK-Archiv → Einstellungen → Design → „Glas-Optik“).
   - Weiße Kästen werden zu milchigem Glas (Hintergrund schimmert durch).
   - Schrift in den Kästen wie bei Apple: auf iPhone/Mac die Systemschrift SF,
     sonst Inter. Die Seitenüberschrift (H1) bleibt in Playfair.
   ========================================================================= */
body.mlk-glas {
	/* Apple: Glas für Bedienelemente, für Inhalte ein dichteres „Material“ – Text muss klar lesbar bleiben */
	--mlk-glas-bg: rgba(255, 255, 255, .6);
	--mlk-glas-bg-hell: rgba(255, 255, 255, .34);
	--mlk-glas-bg-stark: rgba(255, 255, 255, .7);
	--mlk-glas-rand: rgba(255, 255, 255, .72);
	--mlk-glas-linie: rgba(0, 0, 0, .09);
	--mlk-glas-blur: blur(20px) saturate(170%);
	--mlk-glas-schatten: 0 12px 34px rgba(0, 0, 0, .14), inset 0 1px 0 rgba(255, 255, 255, .85);
	--mlk-glas-schatten-hover: 0 18px 44px rgba(0, 0, 0, .2), inset 0 1px 0 rgba(255, 255, 255, .9);
	--mlk-glas-radius: 22px;
	--mlk-glas-innen: 10px;            /* innere Ecken „konzentrisch“: Außenradius minus Abstand */
	--mlk-label-2: rgba(60, 60, 67, .85); /* Nebentext wie Apples „secondaryLabel“, etwas kräftiger für Lesbarkeit */
	--mlk-schrift-apple: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Inter", "Helvetica Neue", Arial, sans-serif;
}

/* ---------- Die Glas-Fläche ---------- */
body.mlk-glas .mlk-steckbrief,
body.mlk-glas .mlk-katalog-karte,
body.mlk-glas .mlk-einzelkatalog-karte,
body.mlk-glas .mlk-baustein-karte,
body.mlk-glas .mlk-artikelliste .mlk-artikel-karte,
body.mlk-glas .mlk-artikelliste .mlk-kategorie-kachel,
body.mlk-glas .mlk-insider-karte,
body.mlk-glas .mlk-insider-start-kachel,
body.mlk-glas .mlk-varianten-hinweis li.mlk-varianten-karte,
body.mlk-glas .mlk-verwandt,
body.mlk-glas .mlk-artikel-kontakt,
body.mlk-glas .mlk-filter,
body.mlk-glas .mlk-archiv-info details,
body.mlk-glas .mlk-katalog-anfrage-hinweis,
body.mlk-glas .mlk-bereich,
body.mlk-glas .mlk-ep-bild,
body.mlk-glas .mlk-ep-kasten,
body.mlk-glas .mlk-ep-nav a,
body.mlk-glas .mlk-preistabelle-responsiv tr {
	background: var(--mlk-glas-bg) !important;
	border: 1px solid var(--mlk-glas-rand) !important;
	border-radius: var(--mlk-glas-radius) !important;
	-webkit-backdrop-filter: var(--mlk-glas-blur);
	backdrop-filter: var(--mlk-glas-blur);
	box-shadow: var(--mlk-glas-schatten) !important;
	font-family: var(--mlk-schrift-apple);
}
body.mlk-glas .mlk-katalog-karte:hover,
body.mlk-glas .mlk-einzelkatalog-karte:hover,
body.mlk-glas .mlk-artikelliste .mlk-artikel-karte:hover,
body.mlk-glas .mlk-artikelliste .mlk-kategorie-kachel:hover,
body.mlk-glas .mlk-insider-start-kachel:hover,
body.mlk-glas .mlk-bereich:hover,
body.mlk-glas .mlk-ep-nav a:hover {
	background: var(--mlk-glas-bg-stark) !important;
	box-shadow: var(--mlk-glas-schatten-hover) !important;
}
/* kleinere Kästen etwas weniger rund */
body.mlk-glas .mlk-filter,
body.mlk-glas .mlk-archiv-info details,
body.mlk-glas .mlk-katalog-anfrage-hinweis,
body.mlk-glas .mlk-ep-kasten,
body.mlk-glas .mlk-ep-nav a,
body.mlk-glas .mlk-ep-bild,
body.mlk-glas .mlk-preistabelle-responsiv tr { border-radius: 16px !important; }
body.mlk-glas .mlk-katalog-anfrage-hinweis,
body.mlk-glas .mlk-ep-kasten { border-left: 4px solid var(--mlk-knopf-gruen, #3986a0) !important; }

/* Große Rahmen um ganze Bereiche: durchsichtig, damit die Glas-Kästen wirken */
body.mlk-glas .mlk-preissuche,
body.mlk-glas .mlk-kataloge-archiv,
body.mlk-glas .mlk-artikelliste,
body.mlk-glas .mlk-gaestebuch,
body.mlk-glas .mlk-kontakt-seite,
body.mlk-glas .mlk-insider,
body.mlk-glas .mlk-insider-start,
body.mlk-glas .mlk-suche,
body.mlk-glas .mlk-kataloge-nav,
body.mlk-glas .mlk-sprungmarken,
body.mlk-glas .mlk-suchleiste {
	background: transparent;
	border-color: transparent;
}

/* ---------- Suchfeld als Glas-Pille ---------- */
body.mlk-glas .mlk-suchfeld,
body.mlk-glas .mlk-suchleiste-form input[type="text"],
body.mlk-glas .mlk-preissuche-form input[type="text"],
body.mlk-glas .mlk-artikelliste-filter input[type="text"] {
	background: var(--mlk-glas-bg-stark);
	border: 1px solid var(--mlk-glas-rand);
	-webkit-backdrop-filter: var(--mlk-glas-blur);
	backdrop-filter: var(--mlk-glas-blur);
	box-shadow: 0 6px 22px rgba(0, 0, 0, .12), inset 0 1px 0 rgba(255, 255, 255, .85);
	font-family: var(--mlk-schrift-apple);
}
body.mlk-glas .mlk-suchfeld:focus-within { border-color: var(--mlk-knopf-gruen, #3986a0); box-shadow: 0 0 0 4px rgba(57, 134, 160, .2), 0 6px 22px rgba(0, 0, 0, .12); }
body.mlk-glas .mlk-suchleiste-form input[type="text"],
body.mlk-glas .mlk-preissuche-form input[type="text"],
body.mlk-glas .mlk-artikelliste-filter input[type="text"] { border-radius: 999px; padding-left: 16px; }
body.mlk-glas .mlk-such-vorschlaege a { background: var(--mlk-glas-bg); border-color: var(--mlk-glas-rand); }

/* ---------- Innenteile des Steckbriefs ---------- */
body.mlk-glas .mlk-steckbrief { --mlk-sb-hell: rgba(255, 255, 255, .45); --mlk-sb-hell2: rgba(255, 255, 255, .6); --mlk-sb-linie: var(--mlk-glas-linie); }
body.mlk-glas .mlk-steckbrief-kopf { background: transparent; border-bottom: 1px solid var(--mlk-glas-linie); }
body.mlk-glas .mlk-steckbrief-mehrfach { background: rgba(57, 134, 160, .1); border-bottom: 1px solid var(--mlk-glas-linie); }
body.mlk-glas .mlk-steckbrief-hauptbild,
body.mlk-glas .mlk-steckbrief-thumbs a { background: rgba(255, 255, 255, .85); border-color: var(--mlk-glas-rand); border-radius: var(--mlk-glas-innen); }
body.mlk-glas .mlk-steckbrief-thumbs a { border-radius: 8px; }
body.mlk-glas .mlk-steckbrief-preise-kurz > div { border-radius: var(--mlk-glas-innen); }
body.mlk-glas .mlk-digitalfunktionen { border-radius: var(--mlk-glas-innen); background: rgba(255, 255, 255, .3); }
body.mlk-glas .mlk-preistabelle { background: rgba(255, 255, 255, .55); border-radius: var(--mlk-glas-innen); overflow: hidden; }
body.mlk-glas .mlk-preistabelle tr:nth-child(even) td { background: rgba(255, 255, 255, .35); }

/* Bilder in Kacheln: weiße Fläche, damit Katalogbilder klar bleiben */
body.mlk-glas .mlk-katalog-karte img,
body.mlk-glas .mlk-artikelliste .mlk-artikel-karte img,
body.mlk-glas .mlk-artikelliste .mlk-kategorie-kachel img,
body.mlk-glas .mlk-galerie-bild { background: #fff; }
body.mlk-glas .mlk-galerie-bild { border-radius: var(--mlk-glas-innen); border-color: var(--mlk-glas-rand); }

/* ---------- Schrift wie Apple in den Kästen ---------- */
body.mlk-glas .mlk-steckbrief-nummer {
	font-family: var(--mlk-schrift-apple); font-weight: 600; letter-spacing: .02em;
	background: rgba(29, 29, 31, .88); border-radius: 999px; padding: 4px 14px;
}
body.mlk-glas .mlk-steckbrief-titel,
body.mlk-glas .mlk-preissuche .mlk-steckbrief-titel,
body.mlk-glas .mlk-katalog-titel,
body.mlk-glas .mlk-artikelliste .mlk-artikel-karte h4,
body.mlk-glas .mlk-artikelliste .mlk-kategorie-kachel h4,
body.mlk-glas .mlk-artikel-kontakt h3,
body.mlk-glas .mlk-steckbrief h4,
body.mlk-glas .mlk-preissuche .mlk-steckbrief-preise h4,
body.mlk-glas .mlk-ausstattung-titel,
body.mlk-glas .mlk-kz-wert,
body.mlk-glas .mlk-preistabelle th,
body.mlk-glas .mlk-bereich .mlk-bereich-titel,
body.mlk-glas .mlk-ep-nav a strong,
body.mlk-glas .mlk-insider-karte h3,
body.mlk-glas .mlk-insider-karte h4,
body.mlk-glas .mlk-insider-start-kachel h3,
body.mlk-glas .mlk-baustein-karte h3,
body.mlk-glas .mlk-baustein-karte h4,
body.mlk-glas .mlk-einzelkatalog-karte h3,
body.mlk-glas .mlk-einzelkatalog-karte h4,
body.mlk-glas .mlk-archiv-info summary,
body.mlk-glas .mlk-filter > summary {
	font-family: var(--mlk-schrift-apple) !important;
	font-weight: 600;               /* Apple „Headline“: Semibold */
	letter-spacing: -.01em;
	color: #1d1d1f;
}
/* Alle Überschriften innerhalb der Glas-Kästen */
body.mlk-glas :is(.mlk-steckbrief, .mlk-katalog-karte, .mlk-einzelkatalog-karte, .mlk-baustein-karte, .mlk-artikel-karte, .mlk-kategorie-kachel, .mlk-insider-karte, .mlk-insider-start-kachel, .mlk-varianten-karte, .mlk-verwandt, .mlk-artikel-kontakt, .mlk-bereich, .mlk-ep-kasten) :is(h2, h3, h4, h5) {
	font-family: var(--mlk-schrift-apple) !important;
	font-weight: 600;
	letter-spacing: -.01em;
	color: #1d1d1f;
}
/* Große Titel im Kasten: Bold, wie Apples „Title“ */
body.mlk-glas .mlk-steckbrief-titel,
body.mlk-glas .mlk-preissuche .mlk-steckbrief-titel,
body.mlk-glas .mlk-bereich .mlk-bereich-titel { font-weight: 700 !important; letter-spacing: -.02em; }
/* Nebentexte (Bezeichnungen, Meta-Angaben) */
body.mlk-glas .mlk-steckbrief-fakten dt,
body.mlk-glas .mlk-ausstattung-liste dt,
body.mlk-glas .mlk-kz-label,
body.mlk-glas .mlk-kz-zusatz,
body.mlk-glas .mlk-katalog-meta,
body.mlk-glas .mlk-katalog-anzahl,
body.mlk-glas .mlk-stichwort-meta { color: var(--mlk-label-2); }
body.mlk-glas .mlk-preistabelle th { color: #fff; letter-spacing: 0; font-weight: 600; }
body.mlk-glas .mlk-steckbrief,
body.mlk-glas .mlk-steckbrief dd,
body.mlk-glas .mlk-steckbrief-fakten dd { color: #1d1d1f; }

/* Seitenüberschrift bleibt Playfair */
body.mlk-glas h1.entry-title,
body.mlk-glas .entry-title { font-family: var(--mlk-schriftart-ueberschrift, 'Playfair Display', Georgia, serif); }

/* Ältere Browser ohne Glas-Unterstützung: etwas deckender, damit Text lesbar bleibt */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
	body.mlk-glas { --mlk-glas-bg: rgba(255, 255, 255, .88); --mlk-glas-bg-stark: rgba(255, 255, 255, .95); }
}
@media (max-width: 600px) {
	body.mlk-glas { --mlk-glas-radius: 18px; }
}
/* Bilder in Kacheln folgen den runden Ecken */
body.mlk-glas .mlk-bereich,
body.mlk-glas .mlk-artikelliste .mlk-artikel-karte,
body.mlk-glas .mlk-artikelliste .mlk-kategorie-kachel,
body.mlk-glas .mlk-insider-start-kachel { overflow: hidden; }