/*
Theme Name: la femme
Description: Schlankes Block-Theme für das Kosmetik-Institut la femme. Ohne Page-Builder, bearbeitbar im WordPress-Editor und Site-Editor.
Version: 1.0.0
Requires at least: 6.6
Requires PHP: 8.1
Text Domain: la-femme
License: GPL-2.0-or-later
*/

/*
BREITEN (zentral in theme.json, "settings.layout"):
  contentSize 51rem = Lesebreite für Fließtext
  wideSize    72rem = "breite" Breite: Banner, Spalten, Karten, Preislisten UND Fußbereich
Banner und Fußbereich übernehmen wideSize über var(--wp--style--global--wide-size).
Soll sich die Breite ändern, nur wideSize in theme.json anpassen.
*/

html { scroll-behavior: smooth; }
img { height: auto; }
h1, h2, h3, h4 { text-wrap: balance; }
body { font-variant-numeric: lining-nums; }
h1, h2, h3, h4, .lf-wordmark { font-variant-numeric: lining-nums; }

/* Kopfzeile */
/* Kopfzeile: weiße Box in Banner-Breite (wideSize), bleibt beim Scrollen oben stehen.
   Sticky sitzt am Vorlagenbereich (header.wp-block-template-part), weil dieser so hoch ist wie die ganze Seite. */
header.wp-block-template-part { position: sticky; top: calc(-1 * var(--lf-topleiste) + .4rem); z-index: 50; background: var(--wp--preset--color--base); padding: 0 0 .6rem; --lf-topleiste: 2.3rem; }
.admin-bar header.wp-block-template-part { top: calc(32px - var(--lf-topleiste) + .4rem); }
/* Schmale Zeile über der Box: "offizieller MARIA GALLAND PARIS Depositär" als echter Text (scharf, im Site-Editor änderbar).
   Scrollt weg, nur die Box bleibt oben. */
.lf-topleiste { width: min(100% - 2rem, var(--wp--style--global--wide-size)); max-width: none !important; margin: 0 auto !important; height: var(--lf-topleiste); display: flex; align-items: center; justify-content: flex-end; padding: 0 !important; }
.lf-depositaer { margin: 0 !important; font-size: .82rem; font-weight: 300; letter-spacing: .04em; color: #6f665b; white-space: nowrap; line-height: 1.1; text-align: right; }
.lf-depositaer .lf-mg { display: inline-block; position: relative; font-weight: 400; letter-spacing: .14em; }
.lf-depositaer .lf-paris { position: absolute; left: 0; right: 0; top: 100%; margin-top: -.1em; text-align: center; font-size: .5rem; font-weight: 400; letter-spacing: .4em; padding-left: .4em; }
@media (max-width: 600px) { .lf-depositaer { font-size: .72rem; } header.wp-block-template-part { --lf-topleiste: 2rem; } }
.lf-header { position: static !important; width: min(100% - 2rem, var(--wp--style--global--wide-size)); max-width: none !important; margin: 0 auto !important; padding-inline: var(--wp--preset--spacing--40) !important; border: 1px solid rgba(140, 127, 115, .3) !important; border-radius: 10px; background: var(--wp--preset--color--white) !important; box-shadow: var(--wp--preset--shadow--soft); }
.lf-header .lf-nav .wp-block-navigation__container { column-gap: .15rem !important; }
/* Unter 1180 px passen Logo und acht Menüpunkte nicht mehr in eine Zeile: früher auf den Menü-Knopf umschalten
   (WordPress selbst tut das erst unter 600 px). */
@media (max-width: 1180px) {
	.lf-header .wp-block-navigation__responsive-container-open { display: flex !important; }
	.lf-header .wp-block-navigation__responsive-container:not(.is-menu-open) { display: none !important; }
}
.lf-wordmark, .lf-wordmark a {
	font-family: var(--wp--preset--font-family--serif);
	font-style: italic;
	font-weight: 400;
	font-size: clamp(1.9rem, 4vw, 2.5rem);
	line-height: 1;
	color: #75685d;
	text-decoration: none;
	margin: 0;
}
.lf-tagline { margin: 0; color: var(--wp--preset--color--muted); letter-spacing: .03em; }
@media (max-width: 600px) { .lf-tagline { display: none; } }
.lf-nav a { text-decoration: none; }
.lf-nav { font-size: .92rem; }
.lf-nav .wp-block-navigation__submenu-container { background: var(--wp--preset--color--white) !important; border-radius: 10px; border: 1px solid rgba(140, 127, 115, .3); box-shadow: var(--wp--preset--shadow--soft); padding: .5rem 0; text-transform: none; letter-spacing: 0; }
.lf-nav .wp-block-navigation-item__content { border-radius: 8px; padding: .4rem .5rem; transition: background-color .15s ease, color .15s ease; }
.lf-nav .wp-block-navigation-item__content:hover, .lf-nav .wp-block-navigation-item__content:focus-visible, .lf-nav .wp-block-navigation-item.has-child:hover > .wp-block-navigation-item__content { background-color: rgba(181, 35, 138, .12); color: var(--wp--preset--color--accent-dark); }
.lf-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content { margin-inline: .4rem; padding: .4rem .7rem; }

/* Mobiles Menü: Untermenüs ohne Kästen, einheitlich rechtsbündig */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container { border: 0 !important; box-shadow: none !important; background: transparent !important; padding: 0 !important; min-width: 0; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item { align-items: flex-end; text-align: right; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content { padding: .35rem 0; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container { padding-right: 1rem !important; }

/* Titelbereich */
.lf-pagehero .wp-block-post-title { margin: 0; }

/* Banner: Foto (Originalbild ohne Schrift) + echter, editierbarer Text als Cover-Block in der Seite */
.lf-banner { max-width: var(--wp--style--global--wide-size); margin-inline: auto !important; aspect-ratio: 4 / 1; min-height: 0 !important; padding: 0 !important; border-radius: 6px; overflow: hidden; box-shadow: var(--wp--preset--shadow--soft); margin-bottom: var(--wp--preset--spacing--50); }
.lf-banner .wp-block-cover__inner-container { width: 52%; max-width: 52%; margin: 0; padding-left: 5%; }
.lf-banner-text { margin: 0; color: #fff; font-size: clamp(1.1rem, 3vw, 2rem); line-height: 1.3; text-shadow: 0 2px 8px rgba(0, 0, 0, .35); }
.lf-banner--foto .wp-block-cover__background { opacity: 1 !important; background: linear-gradient(90deg, rgba(47, 41, 38, .75) 0%, rgba(47, 41, 38, .35) 45%, rgba(47, 41, 38, 0) 75%) !important; }
/* Mobil: Foto-Seite zeigen (die Originale haben links eine einfarbige Fläche) und Text mit dunklem Verlauf auf das Foto legen */
@media (max-width: 600px) {
	.lf-banner { aspect-ratio: 2.2 / 1; }
	.lf-banner .wp-block-cover__image-background { object-position: right center; }
	.lf-banner .wp-block-cover__background { opacity: 1 !important; background: linear-gradient(90deg, rgba(47, 41, 38, .72) 0%, rgba(47, 41, 38, .5) 55%, rgba(47, 41, 38, .12) 100%) !important; }
	.lf-banner .wp-block-cover__inner-container { width: 64%; max-width: 64%; padding-left: 4%; }
	.lf-banner-text { font-size: 1.05rem; }
}
/* Seitentitel (H1) bleibt für Suchmaschinen/Screenreader im Code */
.lf-sr { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Startseite */
.lf-hero { min-height: 0; }
.lf-hero .wp-block-cover__inner-container { max-width: 46rem; }
/* Overlay: links dunkler (Textseite), rechts das Bild */
.lf-hero .wp-block-cover__background { opacity: 1 !important; background: rgba(47, 41, 38, .6) !important; }
@media (min-width: 782px) { .lf-hero .wp-block-cover__background { background: linear-gradient(90deg, rgba(47, 41, 38, .78) 0%, rgba(47, 41, 38, .5) 45%, rgba(47, 41, 38, .12) 100%) !important; } }
.lf-card { height: 100%; border: 1px solid rgba(140, 127, 115, .3); border-radius: 10px; background: var(--wp--preset--color--white); transition: box-shadow .2s, transform .2s; }
.lf-card:hover { box-shadow: var(--wp--preset--shadow--soft); transform: translateY(-2px); }
.lf-card h3 { margin-top: 0; }
.lf-card a { text-decoration: none; }
.lf-card > :last-child { margin-bottom: 0; }

/* Preislisten (Tabellen) */
.wp-block-table.lf-preise table { border-collapse: collapse; width: 100%; border: 0; }
.wp-block-table.lf-preise td { border: 0; border-bottom: 1px solid rgba(140, 127, 115, .3); padding: 1rem .5rem; vertical-align: top; }
.wp-block-table.lf-preise td:last-child { text-align: right; white-space: nowrap; font-family: var(--wp--preset--font-family--serif); font-size: 1.35rem; font-weight: 600; color: var(--wp--preset--color--accent); }
.wp-block-table.lf-preise small { display: block; margin-top: .25rem; color: var(--wp--preset--color--muted); font-size: .9rem; line-height: 1.5; }

/* Team */
.lf-team .lf-card { padding: var(--wp--preset--spacing--40); }
.lf-team h3 { margin-bottom: .2rem; }
.lf-team .lf-role { color: var(--wp--preset--color--accent); margin-top: 0; }

/* Kontaktformular */
.lf-form { display: grid; gap: 1.1rem; }
.lf-form label { display: grid; gap: .35rem; font-weight: 500; }
.lf-form input[type=text], .lf-form input[type=email], .lf-form input[type=tel], .lf-form textarea {
	font: inherit; padding: .8rem 1rem; border: 1px solid var(--wp--preset--color--taupe); border-radius: 6px; background: var(--wp--preset--color--white); color: inherit; width: 100%; box-sizing: border-box;
}
.lf-form input:focus, .lf-form textarea:focus { outline: 2px solid var(--wp--preset--color--accent); outline-offset: 2px; }
.lf-form .lf-check { display: flex; gap: .6rem; align-items: flex-start; font-weight: 400; font-size: .95rem; }
.lf-form .lf-check input { margin-top: .35rem; }
.lf-form .lf-hp { position: absolute; left: -9999px; height: 0; overflow: hidden; }
.lf-form button { justify-self: start; font: inherit; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; background: var(--wp--preset--color--accent); color: #fff; border: 0; border-radius: 999px; padding: .85em 2em; cursor: pointer; }
.lf-form button:hover { background: var(--wp--preset--color--accent-dark); }
.lf-notice { padding: 1rem 1.25rem; border-radius: 6px; border-left: 4px solid var(--wp--preset--color--accent); background: var(--wp--preset--color--sand); }
.lf-notice.is-error { border-color: #b3261e; }

/* Fußzeile */
.lf-footer a { color: var(--wp--preset--color--base); }
.lf-footer a:hover { color: #fff; text-decoration: underline; }
.lf-footer .wp-block-button__link { background: transparent; border: 1px solid var(--wp--preset--color--base); color: var(--wp--preset--color--base); }
.lf-footer .wp-block-button__link:hover { background: var(--wp--preset--color--base); color: var(--wp--preset--color--contrast); }

/* Hochformat-Video begrenzen */


/* Preislisten: Beschreibung nutzt die volle Breite */
.wp-block-table.lf-preise td:first-child { width: 100%; }

/* Kompakter: Karten und Zwischenräume */
.lf-card h3 { font-size: 1.25rem; margin-bottom: .35rem; }
.lf-card p { margin-block: .4rem; line-height: 1.5; }
.lf-siegel { margin-block: 0; }

/* Kontaktseite: Karte füllt die Spaltenhöhe des Formulars */
.lf-kontakt-unten > .wp-block-column:last-child { display: flex; flex-direction: column; }
.lf-kontakt-unten .lf-ext--maps { flex: 1; display: flex; flex-direction: column; justify-content: center; min-height: 22rem; }
.lf-kontakt-unten .lf-ext--maps.is-geladen { justify-content: flex-start; }
.lf-kontakt-unten .lf-ext--maps .lf-ext__rahmen { flex: 1; height: auto; min-height: 22rem; }
.lf-anfahrt { margin: .9rem 0 0; font-size: .85rem; line-height: 1.55; color: var(--wp--preset--color--muted); }
.lf-anfahrt strong { font-weight: 500; color: var(--wp--preset--color--contrast); }

/* Spalten mittig ausrichten, damit unterschiedlich hohe Inhalte ruhig wirken */
/* Alle Spalten beginnen oben auf einer Linie */
.wp-block-columns { align-items: flex-start !important; }
.lf-cards, .lf-team, .lf-kontakt-unten { align-items: stretch !important; }
.lf-produkte .wp-block-image { margin: 0; }
.lf-produkte .wp-block-image img { width: 100%; max-height: 26rem; object-fit: cover; border-radius: 6px; }

/* Zusammengehörige Angaben (Telefon, Uhrzeit, Adresse) nicht mitten umbrechen */
.lf-nowrap { white-space: nowrap; }

/* Startseiten-Banner: Überschrift (h1) im Stil des Bannertextes der anderen Seiten */
h1.lf-banner-text { font-family: inherit; font-weight: inherit; letter-spacing: inherit; }

/* Video und Facebook nebeneinander: beide Spalten gleich aufgebaut (Überschrift, Text, Knopf, Inhalt) */
.lf-home-duo h2 { margin-top: 0; }
.lf-home-duo .wp-block-buttons { margin-bottom: var(--wp--preset--spacing--30); }
.lf-home-duo .wp-block-video, .lf-home-duo .lf-ext--facebook.is-geladen { margin-inline: 0; }
/* Ab Tablet: Überschriften, Texte, Knöpfe und Medien beider Spalten stehen jeweils auf einer Linie (gemeinsames Zeilenraster) */
@media (min-width: 782px) {
	.lf-home-duo { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: column; grid-template-rows: auto auto auto 1fr; column-gap: var(--wp--preset--spacing--50); }
	.lf-home-duo > .wp-block-column { display: contents; }
}

/* Video: größer, mit sichtbarem Vollbild-Knopf */
.wp-block-video { position: relative; display: block; max-width: 22rem; margin-inline: auto; }
.wp-block-video video { display: block; width: 100%; height: auto; max-height: 34rem; border-radius: 8px; background: #000; box-shadow: var(--wp--preset--shadow--soft); }

/* Fußbereich: gleiche Breite wie Banner und Spalten (wideSize), als abgerundete Fläche */
.lf-footer { width: min(100% - 2rem, var(--wp--style--global--wide-size)); max-width: none !important; margin: 0 auto var(--wp--preset--spacing--50) !important; padding-inline: var(--wp--preset--spacing--50) !important; border-radius: 10px; }

/* Lotus-Logo als Vektorgrafik (Inline-SVG in parts/header.html; Datei zusätzlich unter assets/img/lotus.svg) */
.lf-logo { display: block; flex: none; width: 3.1rem; line-height: 0; color: var(--wp--preset--color--accent); }
.lf-logo svg { display: block; width: 100%; height: auto; }
.lf-logo:hover, .lf-logo:focus-visible { color: var(--wp--preset--color--accent-dark); }

/* Lotus dezent im Fußbereich (hell) und auf der Fehlerseite */
.lf-fuss-logo { display: block; width: 2.5rem; line-height: 0; color: var(--wp--preset--color--base); opacity: .92; }
.lf-fuss-logo svg { display: block; width: 100%; height: auto; }
.lf-fuss-marke h2 { margin: 0; }
.lf-404-logo { width: 7.5rem; margin: 0 auto var(--wp--preset--spacing--40); line-height: 0; color: var(--wp--preset--color--accent); opacity: .85; }
.lf-404-logo svg { display: block; width: 100%; height: auto; }

/* Querverweise unter Behandlungsseiten (Plugin lf-seo) */
.lf-weitere { max-width: var(--wp--style--global--content-size); margin: var(--wp--preset--spacing--60) auto 0; padding: var(--wp--preset--spacing--40); border: 1px solid rgba(140, 127, 115, .3); border-radius: 10px; background: var(--wp--preset--color--sand); }
.lf-weitere h2 { margin: 0 0 .6rem; font-size: 1.35rem; }
.lf-weitere ul { margin: 0 0 .8rem; padding-left: 1.2rem; columns: 2 14rem; column-gap: 2rem; }
.lf-weitere li { margin-bottom: .25rem; break-inside: avoid; }
.lf-weitere p { margin: 0; }