/* ==========================================================================
   BeautyLounge Theme – mobile first
   Farben/Schriften kommen aus theme.json (--wp--preset--…); hier Kurzformen.
   ========================================================================== */

:root {
	--cream: var(--wp--preset--color--cream);
	--cream-2: var(--wp--preset--color--cream-2);
	--white: var(--wp--preset--color--white);
	--nude: var(--wp--preset--color--nude);
	--wine: var(--wp--preset--color--wine);
	--wine-2: #5a2337;
	--polish: var(--wp--preset--color--polish);
	--ink: var(--wp--preset--color--ink);
	--ink-2: var(--wp--preset--color--ink-2);
	--line: var(--wp--preset--color--line);
	--display: var(--wp--preset--font-family--display);
	--text: var(--wp--preset--font-family--text);
	--script: var(--wp--preset--font-family--script);
	--radius: 14px;
	--bar: 64px;
	--gutter: clamp(20px, 4vw, 32px);
	/* Lackfarben aus den echten Nagelfotos */
	--sw-nude: #e9c3b8;
	--sw-berry: #7c2f55;
	--sw-bordeaux: #5e1424;
	--sw-red: #c3141f;
}

html { -webkit-text-size-adjust: 100%; }
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img { height: auto; }
:where(h1, h2, h3) { text-wrap: balance; }
p { text-wrap: pretty; }
::selection { background: var(--nude); }
:focus-visible { outline: 3px solid var(--polish); outline-offset: 3px; }
.wp-site-blocks { padding-bottom: calc(var(--bar) + env(safe-area-inset-bottom)); }

/* ---------- Kopfzeile ---------- */
.site-header { position: sticky; top: 0; z-index: 50; background: rgba(251, 245, 238, .96); border-bottom: 1px solid var(--line); }
.admin-bar .site-header { top: var(--wp-admin--admin-bar--height, 0); }
.site-header-inner { min-height: 68px; gap: 16px; }
.header-cta { display: none !important; }

.bl-logo { display: inline-flex; flex-direction: column; align-items: flex-start; line-height: 1; text-decoration: none !important; color: var(--wine); }
.bl-logo-name { margin: 6px 0 4px; font: 400 44px/.7 var(--script); white-space: nowrap; }
.bl-logo-city { padding-left: 3px; color: var(--ink-2); font: 700 10px/1 var(--text); letter-spacing: .34em; text-transform: uppercase; }

/* Navigation (Kernblock): Handy-Menü als ruhige Vollfläche */
.site-nav .wp-block-navigation__responsive-container-open { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border: 1.5px solid var(--ink); border-radius: 999px; }
.site-nav .wp-block-navigation__responsive-container-open::after { content: "Menü"; font-weight: 700; }
/* Der Kernblock schaltet schon ab 600 px auf die Leiste um – wir erst ab 1080 px (siehe unten). */
.site-nav .wp-block-navigation__responsive-container:not(.is-menu-open) { display: none !important; }
.site-nav .wp-block-navigation__responsive-container.is-menu-open { padding: 24px var(--gutter); background: var(--cream) !important; color: var(--ink) !important; }
.site-nav .is-menu-open .wp-block-navigation__responsive-container-content { align-items: stretch !important; padding-top: 64px; }
.site-nav .is-menu-open .wp-block-navigation__container { gap: 0 !important; width: 100%; align-items: stretch !important; }
.site-nav .is-menu-open .wp-block-navigation-item { width: 100%; border-bottom: 1px solid var(--line); }
.site-nav .is-menu-open .wp-block-navigation-item__content { display: block; padding: 16px 0 !important; font: 400 28px/1.2 var(--display); }
.site-nav .wp-block-navigation-item__content { text-decoration: none; }
.site-nav .current-menu-item > .wp-block-navigation-item__content,
.site-nav a.wp-block-navigation-item__content[aria-current="page"] { color: var(--polish); }
.site-nav .is-menu-open .wp-block-navigation__container,
.site-nav .is-menu-open .wp-block-navigation-item { align-items: flex-start !important; justify-content: flex-start !important; text-align: left; }

/* ---------- Buttons ---------- */
.wp-element-button, .wp-block-button__link { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; white-space: nowrap; text-decoration: none !important; transition: background .2s, color .2s, border-color .2s; }
.is-style-outline > .wp-block-button__link,
.wp-element-button.is-outline { background: transparent !important; color: var(--wine) !important; border: 2px solid var(--wine) !important; }
.is-style-outline > .wp-block-button__link:hover,
.wp-element-button.is-outline:hover { background: var(--wine) !important; color: var(--white) !important; }
.wp-block-buttons { gap: 12px; }

/* ---------- Kleine Stile ---------- */
hr.is-style-swatches { width: 74px !important; max-width: 74px; height: 14px; margin: 0 0 18px !important; border: 0 !important; background:
	radial-gradient(circle at 7px 7px, var(--sw-nude) 6.5px, transparent 7px),
	radial-gradient(circle at 27px 7px, var(--sw-berry) 6.5px, transparent 7px),
	radial-gradient(circle at 47px 7px, var(--sw-bordeaux) 6.5px, transparent 7px),
	radial-gradient(circle at 67px 7px, var(--sw-red) 6.5px, transparent 7px) !important; opacity: 1 !important; }
.has-text-align-center hr.is-style-swatches, hr.is-style-swatches.aligncenter { margin-inline: auto !important; }
.is-style-kicker { margin-bottom: 8px !important; color: var(--polish); font-size: 13px !important; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.is-style-script { font: 400 clamp(52px, 12vw, 72px)/.9 var(--script) !important; color: var(--polish); }
.is-style-pill { display: inline-block; padding: 5px 12px; border-radius: 999px; background: var(--nude); color: var(--wine); font-size: 15px !important; font-weight: 700; }
.is-style-card { padding: 22px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); }
.is-style-rounded img { border-radius: var(--radius); }
.lead { color: var(--ink-2); font-size: 1.15em; }

/* ---------- Abschnitte ---------- */
.section { padding-top: var(--wp--preset--spacing--60) !important; padding-bottom: var(--wp--preset--spacing--60) !important; }
.is-style-tint, .tint { background: var(--cream-2); }
.section-head { margin-bottom: 1.75rem !important; }
.section-head p { color: var(--ink-2); }

/* Seitenkopf der Unterseiten */
.page-head { padding-top: 28px; padding-bottom: 36px; border-bottom: 1px solid var(--line); }
.page-head .wp-block-post-title { font-size: clamp(2.4rem, 11vw, 4.5rem); }
.page-head .wp-block-post-excerpt__excerpt { margin: 0; }
.page-content > * + * { margin-block-start: var(--wp--preset--spacing--50); }
.blseo-crumbs ol { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 18px; padding: 0; list-style: none; color: var(--ink-2); font-size: 15px; }
.blseo-crumbs a { color: var(--ink-2); }
.blseo-crumbs__sep { margin-left: 6px; color: var(--line); }

/* ---------- Startseite: Fassade + Türschild ---------- */
.hero { position: relative; padding-bottom: 36px !important; }
.hero > .hero-photo { margin: 0 !important; max-width: none !important; }
.hero > .hero-photo img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 30%; }
.hero > .hero-photo figcaption { position: absolute; right: 12px; bottom: 12px; margin: 0; padding: 6px 12px; border-radius: 999px; background: rgba(42, 32, 35, .72); color: #fff; font-size: 13px; }
.door-sign { position: relative; margin: -70px var(--gutter) 0 !important; padding: 30px 24px 26px !important; border-radius: 6px; background: var(--white); box-shadow: 0 1px 0 var(--line), 0 18px 40px -18px rgba(67, 25, 42, .35); text-align: center; }
.door-sign::before { content: ""; position: absolute; inset: 11px; pointer-events: none; background:
	radial-gradient(circle at 4.5px 4.5px, #b6aea9 4px, transparent 4.5px) top left / 9px 9px no-repeat,
	radial-gradient(circle at 4.5px 4.5px, #b6aea9 4px, transparent 4.5px) top right / 9px 9px no-repeat,
	radial-gradient(circle at 4.5px 4.5px, #b6aea9 4px, transparent 4.5px) bottom left / 9px 9px no-repeat,
	radial-gradient(circle at 4.5px 4.5px, #b6aea9 4px, transparent 4.5px) bottom right / 9px 9px no-repeat; }
.door-sign .sign-script { margin: 0 0 4px !important; font: 400 64px/.9 var(--script); color: var(--wine); }
.door-sign .sign-services { margin: 0 0 22px !important; color: var(--ink-2); font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.door-sign h1 { margin: 0 0 12px !important; font-size: clamp(2.1rem, 9.6vw, 3.5rem); }
.door-sign h1 .seo { display: block; margin-bottom: 10px; color: var(--polish); font: 700 13px/1.4 var(--text); letter-spacing: .12em; text-transform: uppercase; }
.door-sign p { color: var(--ink-2); }
.door-sign .wp-block-buttons { justify-content: center; }

/* Status-Leiste */
.status-strip { padding-block: 14px !important; border-block: 1px solid var(--line); background: var(--cream-2); font-size: 16px; }
.status-strip > * { margin-block: 2px !important; }
.bl-status { margin: 0; font-weight: 700; }
.bl-status::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 9px; border-radius: 50%; background: #9a8f8a; vertical-align: 0; }
.bl-status.is-open::before { background: #2f7d4a; box-shadow: 0 0 0 4px rgba(47, 125, 74, .15); }

/* Leistungs-Kacheln */
.tiles { gap: 18px !important; }
.tile { overflow: hidden; border-radius: var(--radius); background: var(--wine); color: var(--white); }
.tile > .wp-block-image { margin: 0 !important; }
.tile > .wp-block-image img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.tile > :not(.wp-block-image) { padding-inline: 22px; }
.tile > :last-child { padding-bottom: 22px; }
.tile h3, .tile h3 a { color: var(--white) !important; text-decoration: none; }
.tile p { color: #ead9dd; }
.tile > .is-style-pill { margin: 4px 22px 22px; padding: 5px 12px; color: var(--wine); }

/* Slogan */
.slogan { padding-block: 64px !important; background: var(--wine); color: var(--white); text-align: center; }
.slogan p.slogan-text { margin: 0; font: 400 clamp(2.1rem, 10vw, 4.75rem)/1.08 var(--display); color: var(--white); }
.slogan p.slogan-text em { display: block; font-style: normal; color: var(--nude); }

/* Team-Karten (Block aus dem Plugin) */
.bl-team { display: grid; gap: 16px; }
.bl-member { display: grid; grid-template-columns: 96px 1fr; gap: 16px; align-items: center; padding: 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); color: var(--ink); text-decoration: none !important; }
.bl-member img, .bl-member-initial { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; }
.bl-member-initial { display: grid; place-items: center; background: var(--nude); color: var(--wine); font: 400 40px var(--display); }
.bl-member strong { display: block; font: 400 23px/1.2 var(--display); }
.bl-member-role { display: block; margin: 4px 0 6px; color: var(--polish); font-size: 14px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.bl-member-more { color: var(--wine); font-size: 16px; font-weight: 700; }
a.bl-member:hover { border-color: var(--wine); }

/* Bilderstreifen (Galerie-Stil) */
.wp-block-gallery.is-style-strip { flex-wrap: nowrap !important; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin-inline: calc(var(--gutter) * -1) !important; padding-inline: var(--gutter); }
.wp-block-gallery.is-style-strip::-webkit-scrollbar { display: none; }
@media (max-width: 719px) {
	.wp-block-gallery.columns-3:not(.is-style-strip) { display: grid !important; grid-template-columns: repeat(3, 1fr); gap: 8px !important; }
	.wp-block-gallery.columns-3:not(.is-style-strip) .wp-block-image { width: auto !important; margin: 0 !important; }
}
.wp-block-gallery.is-style-strip .wp-block-image { flex: 0 0 72% !important; width: 72% !important; scroll-snap-align: start; }
.wp-block-gallery.is-style-strip img, .wp-block-gallery.is-style-rounded img { aspect-ratio: 1 / 1; object-fit: cover; border-radius: var(--radius); }
.wp-block-gallery .wp-block-image img { border-radius: 10px; }

/* Besuch */
.visit { gap: 20px !important; }
.visit > .wp-block-column { padding: 22px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); }
.visit h2, .visit h3 { margin-top: 0; overflow-wrap: normal; hyphens: manual; }
.visit h2 { font-size: var(--wp--preset--font-size--large); }

/* Aufruf am Ende */
.cta { text-align: center; }
.cta .wp-block-buttons { justify-content: center; }

/* Profilseiten */
.profile { gap: 28px !important; }
.profile .wp-block-image img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius); }
.profile .claim { font: 400 1.6rem/1.25 var(--display); color: var(--wine); }
.profile .signature { margin: 8px 0 24px !important; font: 400 58px/.9 var(--script); color: var(--polish); }

/* ---------- Datenblöcke aus dem Plugin ---------- */
.blseo-prices { --blseo-accent: var(--nude); }
.blseo-prices__cat { padding: 24px 20px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); }
.blseo-prices__cat + .blseo-prices__cat { margin-top: 20px; }
.blseo-prices__title { margin: 0 0 2px; font-size: clamp(1.75rem, 7vw, 2.5rem); text-align: left; }
.blseo-prices__title::after { display: none; }
.blseo-prices__by { margin: 0 0 14px; color: var(--ink-2); }
.blseo-prices__item { margin: 0; padding: 14px 0; border-top: 1px solid var(--line); }
.blseo-prices__name { font-weight: 700; }
.blseo-prices__price { color: var(--wine); font: 400 21px/1.2 var(--display); }
.blseo-prices.has-leader .blseo-prices__dots { opacity: .25; }
.blseo-prices__note { font-style: normal; color: var(--ink-2); font-size: 16px; opacity: 1; }
.blseo-prices__catnote { padding-top: 14px; border-top: 1px solid var(--line); color: var(--ink-2); opacity: 1; }

.blseo-hours-widget { --blseo-today: var(--cream-2); --blseo-open: #2f7d4a; --blseo-closed: var(--polish); }
.blseo-hours-widget__row { padding: 9px 0; border-bottom: 1px solid var(--line); border-radius: 0; }
.blseo-hours-widget__row:last-child { border-bottom: 0; }
.blseo-hours-widget__row.is-today { padding-inline: 8px; margin-inline: -8px; border-radius: 6px; color: var(--wine); }
.blseo-hours-widget__row dd { font-variant-numeric: tabular-nums; }

.blseo-contact { --blseo-accent: var(--polish); }
.blseo-contact__list li { padding: 8px 0; border-bottom: 1px solid var(--line); }
.blseo-contact__list li:last-child { border-bottom: 0; }
.blseo-contact address { font-style: normal; }
.blseo-contact a { color: var(--wine); font-weight: 700; }
.blseo-contact__buttons { display: flex; flex-direction: column; gap: 10px; }
.blseo-contact__buttons .wp-element-button { box-sizing: border-box; width: 100%; color: var(--white); }
.blseo-contact__buttons .wp-element-button.is-outline { color: var(--wine); }
.blseo-contact.is-compact .blseo-contact__list { gap: 0; margin: 0; }
.blseo-contact.is-compact .blseo-contact__list li { padding: 2px 0; border: 0; }

/* ---------- Fußzeile ---------- */
.site-footer { margin-top: 0; padding-top: 52px !important; padding-bottom: 36px !important; background: var(--wine); color: #ead9dd; font-size: 16px; }
.site-footer .bl-logo { color: var(--white); }
.site-footer .bl-logo-city { color: #c9adb6; }
.site-footer a, .site-footer .blseo-contact a { color: var(--white) !important; font-weight: 400; text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }
.site-footer .footer-title { margin-bottom: 10px; color: var(--white); font: 700 13px/1.3 var(--text) !important; letter-spacing: .14em; text-transform: uppercase; }
.site-footer .footer-cols { margin-top: 28px; gap: 28px; }
.site-footer .footer-links { margin: 0; padding: 0; list-style: none; }
.site-footer .footer-links li { padding: 3px 0; }
.site-footer .bl-status { margin-top: 10px; font-weight: 400; }
.site-footer .legal { gap: 6px 18px; margin-top: 36px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, .15); color: #c9adb6; font-size: 15px; }
.site-footer .legal p { margin: 0; }

/* ---------- Leiste unten (Handy) ---------- */
.bl-block--action-bar { position: fixed; inset: auto 0 0; z-index: 60; margin: 0 !important; }
.bl-action-bar { display: grid; grid-template-columns: 1fr 1.4fr; gap: 8px; padding: 8px var(--gutter) calc(8px + env(safe-area-inset-bottom)); background: rgba(251, 245, 238, .97); border-top: 1px solid var(--line); }
.bl-action-bar a { display: flex; align-items: center; justify-content: center; min-height: 48px; border-radius: 999px; font-weight: 700; text-decoration: none; }
.bl-action-call { border: 2px solid var(--ink); color: var(--ink) !important; }
.bl-action-book { background: var(--wine); color: var(--white) !important; }
/* Auf der Buchungsseite übernimmt die Leiste der Buchungsstrecke */
body:has(.bl-booking) .bl-block--action-bar { display: none; }
body:has(.bl-booking) { --bar: 0px; }
body:has(.bl-booking) .wp-site-blocks { padding-bottom: 0; }

/* ==========================================================================
   Ab Tablet
   ========================================================================== */
@media (min-width: 720px) {
	.hero > .hero-photo img { aspect-ratio: 16 / 9; max-height: 72vh; }
	.door-sign { max-width: 620px; margin: -150px auto 0 !important; padding: 40px 48px 36px !important; }
	.status-strip { display: flex; flex-wrap: wrap; justify-content: space-between; }
	.bl-team { grid-template-columns: 1fr 1fr; }
	.wp-block-gallery.is-style-strip { display: grid !important; grid-template-columns: repeat(4, 1fr); gap: 14px !important; overflow: visible; margin-inline: 0 !important; padding-inline: 0; }
	.wp-block-gallery.is-style-strip .wp-block-image { width: auto !important; margin: 0 !important; }
}

/* ==========================================================================
   Ab Desktop
   ========================================================================== */
@media (min-width: 1080px) {
	.wp-site-blocks { padding-bottom: 0; }
	.bl-block--action-bar { display: none; }
	.site-header-inner { min-height: 84px; }
	.header-cta { display: flex !important; }
	.bl-logo-name { font-size: 50px; }
	.site-nav { margin-left: auto; }
	.site-nav .wp-block-navigation__responsive-container-open { display: none; }
	.site-nav .wp-block-navigation__responsive-container:not(.is-menu-open) { display: flex !important; }
	.site-nav .wp-block-navigation__container { gap: 30px; }
	.site-nav .wp-block-navigation-item__content { padding: 6px 0; border-bottom: 2px solid transparent; }
	.site-nav .wp-block-navigation-item__content:hover { border-bottom-color: var(--nude); }
	.site-nav a.wp-block-navigation-item__content[aria-current="page"] { border-bottom-color: var(--polish); }

	.hero { padding-bottom: 0 !important; }
	.hero > .hero-photo img { aspect-ratio: auto; height: min(82vh, 820px); max-height: none; }
	.door-sign { position: absolute; left: max(var(--gutter), calc((100vw - 1160px) / 2 + var(--gutter))); bottom: 64px; margin: 0 !important; max-width: 540px; text-align: left; }
	.door-sign .wp-block-buttons { justify-content: flex-start; }
	.section-head { display: grid !important; grid-template-columns: 1fr 1fr; gap: 48px; align-items: end; }
	.section-head > * { margin: 0 !important; }
	.page-head { padding-top: 44px; padding-bottom: 56px; }
	.blseo-prices__cat { padding: 30px 28px; }
	.blseo-prices { display: grid; grid-template-columns: 1.7fr 1fr; gap: 24px; align-items: start; }
	.blseo-prices__cat + .blseo-prices__cat { margin-top: 0; }
	.blseo-prices > :not(.blseo-prices__cat) { grid-column: 1 / -1; }
}

@media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } }
@media print { .site-header, .bl-block--action-bar, .site-footer { display: none; } }