/*
Theme Name: Laser by Beyza 2
Theme URI: https://example.com/
Author: Laser by Beyza
Description: Block-Theme für das Laserstudio „Laser by Beyza“ – dauerhafte Haarentfernung. Umgesetzt aus dem Claude-Design mit WordPress-Core-Blöcken, editierbar im Website-Editor (Gutenberg).
Version: 2.0.0
Requires at least: 6.6
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: laser-by-beyza
*/

/*
 * Fast alles Gestalterische (Farben, Schriften, Abstände, Buttons) steht in der theme.json.
 * Hier liegen nur die Dinge, die theme.json nicht abbilden kann: Ornamente,
 * Icons in Buttons und Listen, sanfte Übergänge.
 */

/* ---------- Grundlagen ---------- */
html { scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; }
.wp-site-blocks > * { margin-block-start: 0; }
h1, h2, h3, .wp-block-heading { text-wrap: balance; }
p { text-wrap: pretty; }
::selection { background: color-mix(in srgb, #A86B4E 25%, transparent); }

/* ---------- Buttons ---------- */
.wp-block-button__link {
	transition: background-color .25s ease, color .25s ease, transform .25s ease;
}
.wp-block-button__link:hover { transform: translateY(-2px); }

/* Blockstil „WhatsApp“: Icon hinter dem Button-Text */
.wp-block-button.is-style-lbb-whatsapp .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: 0.8em;
}
.wp-block-button.is-style-lbb-whatsapp .wp-block-button__link::after {
	content: "";
	flex: none;
	width: 1.4em;
	height: 1.4em;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17.47 14.38c-.3-.15-1.76-.87-2.03-.97-.27-.1-.47-.15-.67.15-.2.3-.77.97-.94 1.17-.17.2-.35.22-.64.07-.3-.15-1.26-.46-2.4-1.48-.89-.79-1.49-1.77-1.66-2.07-.17-.3-.02-.46.13-.61.13-.13.3-.35.45-.52.15-.17.2-.3.3-.5.1-.2.05-.37-.02-.52-.07-.15-.67-1.62-.92-2.22-.24-.58-.49-.5-.67-.51h-.57c-.2 0-.52.07-.79.37-.27.3-1.04 1.02-1.04 2.48s1.07 2.88 1.21 3.08c.15.2 2.1 3.2 5.08 4.49.71.31 1.26.49 1.69.63.71.23 1.36.2 1.87.12.57-.09 1.76-.72 2.01-1.41.25-.7.25-1.29.17-1.41-.07-.13-.27-.2-.57-.35zM12.04 21.5h-.01a9.45 9.45 0 0 1-4.82-1.32l-.35-.21-3.58.94.96-3.49-.23-.36a9.43 9.43 0 0 1-1.45-5.03c0-5.22 4.25-9.47 9.48-9.47 2.53 0 4.91.99 6.7 2.78a9.4 9.4 0 0 1 2.77 6.7c0 5.22-4.25 9.46-9.47 9.46zm8.06-17.53A11.33 11.33 0 0 0 12.04.63C5.76.63.65 5.74.65 12.02c0 2.01.52 3.97 1.52 5.69L.55 23.6l6.03-1.58a11.37 11.37 0 0 0 5.45 1.39h.01c6.28 0 11.39-5.11 11.39-11.39 0-3.04-1.18-5.9-3.33-8.05z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17.47 14.38c-.3-.15-1.76-.87-2.03-.97-.27-.1-.47-.15-.67.15-.2.3-.77.97-.94 1.17-.17.2-.35.22-.64.07-.3-.15-1.26-.46-2.4-1.48-.89-.79-1.49-1.77-1.66-2.07-.17-.3-.02-.46.13-.61.13-.13.3-.35.45-.52.15-.17.2-.3.3-.5.1-.2.05-.37-.02-.52-.07-.15-.67-1.62-.92-2.22-.24-.58-.49-.5-.67-.51h-.57c-.2 0-.52.07-.79.37-.27.3-1.04 1.02-1.04 2.48s1.07 2.88 1.21 3.08c.15.2 2.1 3.2 5.08 4.49.71.31 1.26.49 1.69.63.71.23 1.36.2 1.87.12.57-.09 1.76-.72 2.01-1.41.25-.7.25-1.29.17-1.41-.07-.13-.27-.2-.57-.35zM12.04 21.5h-.01a9.45 9.45 0 0 1-4.82-1.32l-.35-.21-3.58.94.96-3.49-.23-.36a9.43 9.43 0 0 1-1.45-5.03c0-5.22 4.25-9.47 9.48-9.47 2.53 0 4.91.99 6.7 2.78a9.4 9.4 0 0 1 2.77 6.7c0 5.22-4.25 9.46-9.47 9.46zm8.06-17.53A11.33 11.33 0 0 0 12.04.63C5.76.63.65 5.74.65 12.02c0 2.01.52 3.97 1.52 5.69L.55 23.6l6.03-1.58a11.37 11.37 0 0 0 5.45 1.39h.01c6.28 0 11.39-5.11 11.39-11.39 0-3.04-1.18-5.9-3.33-8.05z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Kleinerer Button im Header, größerer im Kontaktbereich */
.lbb-header .wp-block-button__link {
	min-height: 44px;
	padding: 12px clamp(16px, 3vw, 22px);
	font-size: 12px;
	letter-spacing: clamp(0.06em, 0.8vw, 0.14em);
}
.lbb-contact .wp-block-button__link {
	padding: 16px clamp(18px, 4vw, 38px);
	font-size: clamp(12px, 1.6vw, 14px);
	letter-spacing: clamp(0.06em, 0.8vw, 0.14em);
}
/* Im Kontaktbereich steht das WhatsApp-Icon vor dem Text */
.lbb-contact .wp-block-button.is-style-lbb-whatsapp .wp-block-button__link { flex-direction: row-reverse; }

/* Blockstil „Instagram-Icon“: runder Rahmen mit Icon, Text nur für Screenreader */
.wp-block-button.is-style-lbb-instagram .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0 !important;
	font-size: 0 !important;
	letter-spacing: 0 !important;
	color: var(--wp--preset--color--primary);
	background: transparent;
	border: 1px solid #C99A84;
	box-shadow: none;
}
.wp-block-button.is-style-lbb-instagram .wp-block-button__link:hover,
.wp-block-button.is-style-lbb-instagram .wp-block-button__link:focus-visible {
	color: var(--wp--preset--color--on-primary);
	background: var(--wp--preset--color--primary);
	border-color: var(--wp--preset--color--primary);
}
.wp-block-button.is-style-lbb-instagram .wp-block-button__link::before,
.lbb-ig-link a::before {
	content: "";
	flex: none;
	width: 18px;
	height: 18px;
	background-color: currentColor;
	-webkit-mask: var(--lbb-icon-instagram) center / contain no-repeat;
	mask: var(--lbb-icon-instagram) center / contain no-repeat;
}
:root {
	--lbb-icon-instagram: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='2.5' width='19' height='19' rx='5.5'/%3E%3Ccircle cx='12' cy='12' r='4.2'/%3E%3Ccircle cx='17.4' cy='6.6' r='0.6' fill='black'/%3E%3C/svg%3E");
}
/* Footer-Link mit kleinem Instagram-Icon */
.lbb-ig-link a { display: inline-flex; align-items: center; gap: 8px; }
.lbb-ig-link a::before { width: 16px; height: 16px; }

/* ---------- Header ---------- */
.lbb-header .lbb-logo { margin: 0; }
.lbb-header .lbb-logo img { width: clamp(110px, 14vw, 160px) !important; height: auto; }

/* ---------- Ornament-Trenner (Linie – Stern – Linie) ---------- */
hr.wp-block-separator.is-style-lbb-ornament {
	width: min(340px, 100%) !important;
	height: 12px;
	margin-left: 0;
	margin-right: 0;
	border: 0 !important;
	opacity: 1;
	background:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M6 0C6.6 4 8 5.4 12 6C8 6.6 6.6 8 6 12C5.4 8 4 6.6 0 6C4 5.4 5.4 4 6 0Z' fill='%23B98166'/%3E%3C/svg%3E") center / 12px 12px no-repeat,
		linear-gradient(#D4AE9C, #D4AE9C) left center / calc(50% - 18px) 1px no-repeat,
		linear-gradient(#D4AE9C, #D4AE9C) right center / calc(50% - 18px) 1px no-repeat !important;
}
hr.wp-block-separator.is-style-lbb-ornament.lbb-ornament-sm { width: 110px !important; }
hr.wp-block-separator.is-style-lbb-ornament.lbb-ornament-md { width: 160px !important; }
/* Variante „Linie + Stern“ unter Seitentiteln */
hr.wp-block-separator.is-style-lbb-ornament.lbb-ornament-start {
	width: 78px !important;
	height: 10px;
	background:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M6 0C6.6 4 8 5.4 12 6C8 6.6 6.6 8 6 12C5.4 8 4 6.6 0 6C4 5.4 5.4 4 6 0Z' fill='%23B98166'/%3E%3C/svg%3E") right center / 10px 10px no-repeat,
		linear-gradient(#D4AE9C, #D4AE9C) left center / 64px 1px no-repeat !important;
}

/* Dachzeile mit kurzer Linie dahinter (Hero) */
.lbb-kicker-line::after {
	content: "";
	display: inline-block;
	vertical-align: middle;
	width: 48px;
	height: 1px;
	margin-left: 12px;
	background: #C99A84;
}

/* ---------- Liste mit Häkchen ---------- */
ul.is-style-lbb-check {
	list-style: none;
	padding-left: 0;
	display: flex;
	flex-direction: column;
	gap: 14px;
}
ul.is-style-lbb-check li {
	position: relative;
	padding-left: 30px;
}
ul.is-style-lbb-check li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.4em;
	width: 16px;
	height: 16px;
	background-color: var(--wp--preset--color--primary, #A86B4E);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
}
.lbb-card ul.is-style-lbb-check { gap: 8px; }
.lbb-card ul.is-style-lbb-check li { padding-left: 24px; }
.lbb-card ul.is-style-lbb-check li::before { width: 14px; height: 14px; }

/* ---------- Über mich: Bogen-Rahmen ---------- */
.lbb-arch {
	position: relative;
	width: 100%;
	max-width: 425px;
	margin-inline: auto;
}
.lbb-arch .wp-block-image { margin: 0; }
.lbb-arch .wp-block-image img { width: 100%; display: block; }
.lbb-arch::after {
	content: "";
	position: absolute;
	left: -11px;
	bottom: 22%;
	width: 22px;
	height: 22px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M6 0C6.6 4 8 5.4 12 6C8 6.6 6.6 8 6 12C5.4 8 4 6.6 0 6C4 5.4 5.4 4 6 0Z' fill='%23C99A84'/%3E%3C/svg%3E") center / contain no-repeat;
	pointer-events: none;
}

/* ---------- Illustration im Kreis ---------- */
.lbb-circle img { width: clamp(200px, 22vw, 260px) !important; height: auto; }

/* ---------- Sonstiges ---------- */
.lbb-max-480 { max-width: 480px; }
.lbb-max-600 { max-width: 600px; }

@media (max-width: 781px) {
	.lbb-header .wp-block-button__link { padding: 10px 16px; letter-spacing: 0.1em; }
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.wp-block-button__link { transition: none; }
	.wp-block-button__link:hover { transform: none; }
}

/* Logo-Grafiken verschmelzen wie im Design mit dem Rosé-Hintergrund */
.lbb-multiply img { mix-blend-mode: multiply; }

@media (max-width: 480px) {
	.wp-block-button.is-style-lbb-whatsapp .wp-block-button__link {
		justify-content: center;
		letter-spacing: 0.08em;
		padding-left: 22px;
		padding-right: 22px;
	}
}