/* Konfbild – Rahmenvorschau auf der Produktseite (Spirigweb, Oktober 2026)
   Das Produktbild wird per JS (frame-preview.js) in <span class="kb-frame kb-frame--…" data-orientation="quer|hoch|quadrat">
   gewickelt; die Klasse folgt der gewählten Rahmenart.
   Holz- und Alurahmen: Texturen aus den Eckfotos der echten Rahmen (assets/img/rahmen/, Kunde 26.10.2026), als border-image.
   Rahmenbreiten im Verhältnis der Fotos (gleicher Aufnahmemassstab): weiss > gold > schwarz > Eiche ≈ Alu.
   Cliprahmen, Leinwand, Posterschienen und «ungerahmt» sind gezeichnet. Farben/Werte hier anpassen. */

:root {
	--kb-wall: #e9e4dc;        /* Wandfarbe hinter dem Bild (Kundenwunsch: nicht mehr weiss) */
	--kb-wall-mini: #f1eee9;   /* Hintergrund der kleinen Vorschau-Kacheln */
}

/* nur bei Produkten mit Rahmenwahl (Klasse setzt frame-preview.js) – Karten, Bücher, Kunstwerke usw. bleiben wie bisher */
.product .woocommerce-product-gallery.kb-has-frame {
	background-color: var(--kb-wall);
	background-image: radial-gradient(ellipse at 50% 0%, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) 70%);
}

/* ---- Grundgerüst ---- */
.kb-frame {
	--kb-fw: 0px;                                   /* Rahmenbreite */
	--kb-k: 1;                                      /* Skalierung (Vorschau-Kacheln: 0.35) */
	--kb-inset: calc(var(--kb-fw) * var(--kb-k));   /* Abstand Bildkante – Rahmenaussenkante innerhalb der Box */
	position: relative;
	display: inline-block;
	box-sizing: border-box;
	max-width: 100%;
	padding: calc(var(--kb-fw) * var(--kb-k));
	line-height: 0;
	background: #fff;
	box-shadow: 0 calc(26px * var(--kb-k)) calc(40px * var(--kb-k)) calc(-18px * var(--kb-k)) rgba(0, 0, 0, 0.5),
	            0 calc(8px * var(--kb-k)) calc(14px * var(--kb-k)) calc(-8px * var(--kb-k)) rgba(0, 0, 0, 0.3);
	transition: padding 0.25s ease, border-width 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
}
.kb-frame img {
	display: block;
	max-width: 100%;
	height: auto;
}
.kb-frame::before,
.kb-frame::after {
	content: "";
	position: absolute;
	pointer-events: none;
}

/* ---- Bild ungerahmt (Papier) ---- */
.kb-frame--ohne {
	--kb-fw: 0px;
	box-shadow: 0 calc(14px * var(--kb-k)) calc(24px * var(--kb-k)) calc(-14px * var(--kb-k)) rgba(0, 0, 0, 0.45);
}
.kb-frame--ohne::before {
	inset: 0;
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
}

/* ---- Cliprahmen randlos: Glaskante + schmale Klammern ----
   Kunde 26.10.2026: Klammern ca. 30 % so breit wie vorher; rechteckige Bilder 6 Klammern, je 2 auf den langen Seiten
   (Kunde 27.10.: beim Hochformat links und rechts), je 1 auf den kurzen; quadratische 4 (eine pro Seite). */
.kb-frame--clip {
	--kb-fw: 2px;
	--clip-l: calc(8px * var(--kb-k));    /* Breite der Klammer entlang der Kante */
	--clip-d: calc(9px * var(--kb-k));    /* wie weit sie aufs Glas greift */
	--clip-t: linear-gradient(180deg, #6f6f6f, #c8c8c8 55%, #8a8a8a);
	--clip-b: linear-gradient(0deg,   #6f6f6f, #c8c8c8 55%, #8a8a8a);
	--clip-l-side: linear-gradient(90deg,  #6f6f6f, #c8c8c8 55%, #8a8a8a);
	--clip-r-side: linear-gradient(270deg, #6f6f6f, #c8c8c8 55%, #8a8a8a);
	background: #cfcfcf;
}
.kb-frame--clip::before {
	inset: 0;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.6);
	/* Quadrat (und Fallback): 4 Klammern, je Seite mittig */
	background:
		var(--clip-t)      50% 0    / var(--clip-l) var(--clip-d) no-repeat,
		var(--clip-b)      50% 100% / var(--clip-l) var(--clip-d) no-repeat,
		var(--clip-l-side) 0 50%    / var(--clip-d) var(--clip-l) no-repeat,
		var(--clip-r-side) 100% 50% / var(--clip-d) var(--clip-l) no-repeat;
}
.kb-frame--clip[data-orientation="quer"]::before {
	/* Querformat: je 2 oben und unten, je 1 links und rechts */
	background:
		var(--clip-t)      25% 0    / var(--clip-l) var(--clip-d) no-repeat,
		var(--clip-t)      75% 0    / var(--clip-l) var(--clip-d) no-repeat,
		var(--clip-b)      25% 100% / var(--clip-l) var(--clip-d) no-repeat,
		var(--clip-b)      75% 100% / var(--clip-l) var(--clip-d) no-repeat,
		var(--clip-l-side) 0 50%    / var(--clip-d) var(--clip-l) no-repeat,
		var(--clip-r-side) 100% 50% / var(--clip-d) var(--clip-l) no-repeat;
}
.kb-frame--clip[data-orientation="hoch"]::before {
	/* Hochformat: je 2 links und rechts (lange Seiten), je 1 oben und unten */
	background:
		var(--clip-t)      50% 0    / var(--clip-l) var(--clip-d) no-repeat,
		var(--clip-b)      50% 100% / var(--clip-l) var(--clip-d) no-repeat,
		var(--clip-l-side) 0 25%    / var(--clip-d) var(--clip-l) no-repeat,
		var(--clip-l-side) 0 75%    / var(--clip-d) var(--clip-l) no-repeat,
		var(--clip-r-side) 100% 25% / var(--clip-d) var(--clip-l) no-repeat,
		var(--clip-r-side) 100% 75% / var(--clip-d) var(--clip-l) no-repeat;
}

/* ---- Holz- und Alurahmen: Fototextur der echten Rahmen ----
   Textur = Eckfoto, viermal gespiegelt (Ecken mit Gehrung + gerade Stücke); border-image-slice in Pixeln der Textur
   (oben/unten, links/rechts). --kb-fw = Rahmenbreite in der grossen Ansicht. */
.kb-frame--holz-schwarz,
.kb-frame--holz-weiss,
.kb-frame--holz-gold,
.kb-frame--holz-eiche,
.kb-frame--alu {
	--kb-inset: 0px;
	padding: 0;
	background: #fff;
	border-style: solid;
	border-color: transparent;
	border-width: calc(var(--kb-fw) * var(--kb-k));
	border-image-repeat: stretch;
}
.kb-frame--holz-schwarz { --kb-fw: 18px;   border-image-source: url(../img/rahmen/holz-schwarz.jpg); border-image-slice: 101 100; }
.kb-frame--holz-weiss   { --kb-fw: 23px;   border-image-source: url(../img/rahmen/holz-weiss.jpg);   border-image-slice: 103 100; }
.kb-frame--holz-gold    { --kb-fw: 20.5px; border-image-source: url(../img/rahmen/holz-gold.jpg);    border-image-slice: 98 100; }
.kb-frame--holz-eiche   { --kb-fw: 16px;   border-image-source: url(../img/rahmen/holz-eiche.jpg);   border-image-slice: 95 100; }
.kb-frame--alu          { --kb-fw: 15.5px; border-image-source: url(../img/rahmen/alu.jpg);          border-image-slice: 100 100; }

.kb-frame--holz-schwarz::before,
.kb-frame--holz-weiss::before,
.kb-frame--holz-gold::before,
.kb-frame--holz-eiche::before,
.kb-frame--alu::before {
	/* Falz/Schatten des Rahmens auf dem Bild */
	inset: 0;
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.3), inset 0 calc(3px * var(--kb-k)) calc(6px * var(--kb-k)) rgba(0, 0, 0, 0.3);
}

/* ---- Leinwand auf Keilrahmen: Tiefe rechts/unten, Leinenstruktur ---- */
.kb-frame--leinwand {
	--kb-fw: 0px;
	box-shadow:
		calc(10px * var(--kb-k)) calc(10px * var(--kb-k)) 0 calc(-3px * var(--kb-k)) #d8d4cc,
		calc(10px * var(--kb-k)) calc(10px * var(--kb-k)) 0 calc(-2px * var(--kb-k)) #b9b4aa,
		calc(18px * var(--kb-k)) calc(20px * var(--kb-k)) calc(26px * var(--kb-k)) calc(-10px * var(--kb-k)) rgba(0, 0, 0, 0.5);
}
.kb-frame--leinwand::after {
	/* Leinenstruktur – Kunde 27.10.: «eine Stufe feiner» (vorher Raster 3 px, Deckkraft 7 / 6 %) */
	inset: 0;
	background:
		repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.05) 0 1px, rgba(0, 0, 0, 0) 1px 2px),
		repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.04) 0 1px, rgba(0, 0, 0, 0) 1px 2px);
}

/* ---- Magnetische Posterschienen: Leiste oben und unten ---- */
.kb-frame--schienen-eiche,
.kb-frame--schienen-schwarz {
	--kb-fw: 0px;
	padding-top: calc(14px * var(--kb-k));
	padding-bottom: calc(14px * var(--kb-k));
	background: transparent;
	box-shadow: none;
}
.kb-frame--schienen-eiche img,
.kb-frame--schienen-schwarz img {
	box-shadow: 0 calc(12px * var(--kb-k)) calc(22px * var(--kb-k)) calc(-12px * var(--kb-k)) rgba(0, 0, 0, 0.45);
}
.kb-frame--schienen-eiche::before,
.kb-frame--schienen-eiche::after,
.kb-frame--schienen-schwarz::before,
.kb-frame--schienen-schwarz::after {
	left: calc(-5px * var(--kb-k));
	right: calc(-5px * var(--kb-k));
	height: calc(14px * var(--kb-k));
	border-radius: calc(2px * var(--kb-k));
	box-shadow: 0 calc(3px * var(--kb-k)) calc(6px * var(--kb-k)) rgba(0, 0, 0, 0.35);
}
.kb-frame--schienen-eiche::before,
.kb-frame--schienen-schwarz::before { top: 0; }
.kb-frame--schienen-eiche::after,
.kb-frame--schienen-schwarz::after  { bottom: 0; }
.kb-frame--schienen-eiche::before,
.kb-frame--schienen-eiche::after {
	background: repeating-linear-gradient(90deg, rgba(90, 60, 20, 0.12) 0 1px, rgba(0, 0, 0, 0) 1px 5px), linear-gradient(180deg, #d9b67f, #bf975b);
}
.kb-frame--schienen-schwarz::before,
.kb-frame--schienen-schwarz::after {
	background: linear-gradient(180deg, #333, #111);
}

/* ---- Glas / Plexi: leichter Reflex über dem Bild ---- */
.kb-frame--glas:not(.kb-frame--leinwand):not(.kb-frame--ohne)::after {
	inset: var(--kb-inset);
	background: linear-gradient(112deg, rgba(255, 255, 255, 0.28) 0%, rgba(255, 255, 255, 0.08) 28%, rgba(255, 255, 255, 0) 45%);
}

/* ---- Vorschau-Kacheln unter dem Bild: alle Rahmen, 4 pro Reihe ---- */
.kb-frame-thumbs {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 14px;
	max-width: 540px;
	margin: 34px auto 0;
	line-height: 1.3;
}
.kb-frame-thumb {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	min-width: 0;
	padding: 10px 6px 6px;
	border: 2px solid transparent;
	border-radius: 6px;
	background: var(--kb-wall-mini);
	cursor: pointer;
	font: inherit;
	font-size: 12px;
	color: #444;
	transition: border-color 0.2s ease;
}
.kb-frame-thumb:hover,
.kb-frame-thumb:focus-visible {
	border-color: #999;
	outline: none;
}
.kb-frame-thumb.is-active {
	border-color: #e8752b;
	color: #111;
}
.kb-frame-thumb__pic {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 84px;
}
.product .woocommerce-product-gallery .kb-frame-thumb .kb-frame {
	--kb-k: 0.35;
	width: auto;
}
/* !important: das Theme setzt Galerie-Bildern min-height 350px (style.css) und 30rem Breite (Parent) */
.product .woocommerce-product-gallery .kb-frame-thumb .kb-frame img {
	display: block;
	height: auto !important;
	min-height: 0 !important;
	max-width: none !important;
	max-height: none !important;
}
/* Bildbreite je Format (Höhe ergibt sich aus dem Seitenverhältnis) – data-orientation setzt frame-preview.js */
.kb-frame-thumbs[data-orientation="quer"]    .kb-frame img { width: 80px !important; }
.kb-frame-thumbs[data-orientation="hoch"]    .kb-frame img { width: 46px !important; }
.kb-frame-thumbs[data-orientation="quadrat"] .kb-frame img { width: 62px !important; }

@media (max-width: 767px) {
	.kb-frame-thumbs { gap: 6px; margin-top: 20px; }
	.kb-frame-thumb { padding: 6px 2px 3px; font-size: 10px; gap: 5px; }
	.kb-frame-thumb__pic { height: 54px; }
	.kb-frame-thumbs[data-orientation="quer"]    .kb-frame img { width: 44px !important; }
	.kb-frame-thumbs[data-orientation="hoch"]    .kb-frame img { width: 27px !important; }
	.kb-frame-thumbs[data-orientation="quadrat"] .kb-frame img { width: 36px !important; }
}