/*
 * AFACIAL – globale Styles: Grundlagen, gemeinsame Bausteine der Sections,
 * Aktionsleiste, Kopfzeile mit Mega-Menü, Fußzeile.
 * Nur Token-Variablen aus theme.json. Mobil zuerst; Tablet ab 700px, Desktop ab 1100px.
 * Block-spezifische Styles liegen in blocks/<name>/style.css und laden NACH dieser Datei.
 */

/* ------------------------------------------------------------ Grundlagen */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-padding-top: 5rem; -webkit-text-size-adjust: 100%; }
/* Versalziffern überall (Cormorant hat sonst Mediävalziffern: kleine 1, hängende 3).
   Achtung: die Kurzform `font:` setzt font-variant-numeric zurück – deshalb im ganzen Theme nur Einzelangaben. */
body { -webkit-font-smoothing: antialiased; font-variant-numeric: lining-nums; }
a { text-underline-offset: 0.25em; }
::selection { background: var(--wp--preset--color--contrast); color: var(--wp--preset--color--contrast-light); }
:where(a, button, summary, input, select, textarea, [tabindex]):focus-visible { outline: 2px solid var(--wp--preset--color--contrast); outline-offset: 3px; border-radius: 4px; }
h1, h2, h3 { text-wrap: balance; }
p, li, blockquote, dd, figcaption { text-wrap: pretty; }

@media (prefers-reduced-motion: no-preference) {
	html { scroll-behavior: smooth; }
}

@media (min-width: 1100px) {
	html { scroll-padding-top: 6.5rem; }
}

/* Block-Theme-Abstände zwischen Kopfzeile, Inhalt und Sections abschalten –
   Sections bringen ihren Abstand selbst mit. */
.wp-site-blocks > * + *,
.wp-block-post-content > .alignfull { margin-block-start: 0; }

/* Sections, Kopf- und Fußzeile setzen ihre Abstände selbst: Browser- und WordPress-Standardabstände dort
   zurücksetzen. Gewichtung bewusst = eine Klasse: stärker als die :where()-Regeln von WordPress
   (z. B. figure-Abstand), schwächer bzw. früher als jede Block-Regel. Fließtext-Seiten bleiben unberührt. */
.section :where(h1, h2, h3, p, ul, ol, dl, dd, figure, blockquote),
.promo, .head :where(p, ul, ol), .foot :where(p, ul) { margin: 0; padding: 0; }
.section :where(ul, ol), .head :where(ul, ol) { list-style: none; }
.section :where(img, svg), .head :where(img, svg), .foot :where(img, svg) { display: block; max-width: 100%; height: auto; }

/* Kopfzeile bleibt immer sichtbar (Entscheidung Elias); die Aktionsleiste darüber scrollt weg. */
.wp-site-blocks > header.wp-block-template-part { position: sticky; top: var(--wp-admin--admin-bar--height, 0px); z-index: 50; }

/* ------------------------------------------------------------ Textseiten (Impressum, Datenschutz …), Blogartikel-Rahmen, 404
   Noch nicht gestaltet – nur Seitenrand, Lesebreite und Abstand, damit nichts am Rand klebt. */
.text-page, .error-page { padding: var(--wp--preset--spacing--section) var(--wp--preset--spacing--gutter); }
.text-page > *, .error-page__inner { max-width: 46rem; margin-inline: auto; }
/* Lange Adressen im Fließtext (Datenschutz) brechen um, statt die Seite zu verbreitern. */
.text-page { overflow-wrap: break-word; }
.error-page__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; margin-top: 2rem; }

/* ------------------------------------------------------------ Gemeinsame Bausteine */
.panel--dark :where(a, button):focus-visible, .foot :where(a):focus-visible { outline-color: var(--wp--preset--color--contrast-light); }
.screen-reader-text:not(:focus) { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.only-desktop { display: none; }
.only-mobile { display: inline; }
.display { font-family: var(--wp--preset--font-family--display); font-size: var(--wp--preset--font-size--title); font-weight: 600; letter-spacing: -0.03em; color: var(--wp--preset--color--contrast); text-wrap: balance; line-height: 1.1; }
.lead { font-size: var(--wp--preset--font-size--lead); line-height: 1.5; color: var(--wp--preset--color--contrast); }
.kicker { font-family: var(--wp--preset--font-family--sans); font-size: var(--wp--preset--font-size--sm); font-weight: 600; line-height: 1.3; letter-spacing: 0.01em; color: var(--wp--preset--color--primary); text-wrap: initial; margin-bottom: 0.625rem; }
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: var(--wp--custom--button--height); padding: 0 var(--wp--custom--button--padding-x); border: 1.5px solid var(--wp--preset--color--primary); border-radius: var(--wp--custom--radius--pill); background: var(--wp--preset--color--primary); color: var(--wp--preset--color--contrast-light); font-family: var(--wp--preset--font-family--sans); font-size: var(--wp--preset--font-size--button); font-weight: 600; line-height: 1.2; text-decoration: none; transition: background-color 200ms ease, border-color 200ms ease, color 200ms ease, transform 300ms var(--wp--custom--ease); }
.btn:hover { background: var(--wp--preset--color--contrast); border-color: var(--wp--preset--color--contrast); color: var(--wp--preset--color--contrast-light); transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn--small { min-height: var(--wp--custom--button--height-small); padding: 0 1.25rem; font-size: 0.9375rem; }
.btn--light { background: var(--wp--preset--color--contrast-light); border-color: var(--wp--preset--color--contrast-light); color: var(--wp--preset--color--contrast); }
.btn--light:hover { background: var(--wp--preset--color--accent); border-color: var(--wp--preset--color--accent); color: var(--wp--preset--color--contrast); }
.btn--ghost { background: transparent; color: var(--wp--preset--color--contrast); border-color: var(--wp--preset--color--contrast); }
.btn--ghost:hover { background: var(--wp--preset--color--contrast); color: var(--wp--preset--color--contrast-light); }
.textlink { font-weight: 600; color: var(--wp--preset--color--contrast); text-decoration-thickness: 1.5px; text-decoration-color: var(--wp--preset--color--accent); transition: text-decoration-color 200ms ease; padding-block: 0.75rem; display: inline-block; }
.textlink:hover { text-decoration-color: var(--wp--preset--color--contrast); }
/* ------------------------------------------------------------ Dunkles Vorteile-Band
   (Vorteile der Behandlung und „Warum AFACIAL" auf der Startseite) */
.benefits { background: var(--wp--preset--color--contrast); color: var(--wp--preset--color--accent-light); padding: clamp(2.5rem, 2.1rem + 1.6vw, 3.5rem) var(--wp--preset--spacing--gutter); }
.benefits__title { font-family: var(--wp--preset--font-family--sans); font-size: var(--wp--preset--font-size--sm); font-weight: 600; line-height: 1.3; letter-spacing: 0; color: var(--wp--preset--color--accent); margin-bottom: 2rem; }
.benefits:has(.benefits__text) .benefits__title { margin-bottom: 0.75rem; }
.benefits__text { max-width: 52ch; margin-bottom: 2rem; text-wrap: pretty; }
.benefits__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.5rem 1.5rem; }
.benefits__grid li { display: grid; gap: 0.5rem; align-content: start; }
.benefits__grid :where(.ico, .ico-s) { width: 2rem; height: 2rem; color: var(--wp--preset--color--contrast-light); margin-bottom: 0.75rem; }
.benefits h3 { color: var(--wp--preset--color--contrast-light); font-size: clamp(1.375rem, 1.2rem + 0.8vw, 2rem); }
.benefits h3, .benefits__grid p { overflow-wrap: break-word; hyphens: auto; }

/* ------------------------------------------------------------ Beratungs-Band
   (Block „Persönliche Beratung" auf den Behandlungsseiten und „Kostenlose Beratung" auf der
   Flat-Rate-Seite – deshalb hier und nicht im Block) */
.consult { padding: var(--wp--preset--spacing--section) var(--wp--preset--spacing--inset); }
/* Tafel-Sections (Flat-Rate-Band, Angebot des Monats, Beratungs-Band) bringen oben bewusst
   keinen Abstand mit – sie hängen am Abschnitt darüber. Treffen zwei davon aufeinander
   (Angebote-Seite: Flat-Rate-Band direkt vor dem Beratungs-Band), fehlt der Abstand: hier nachholen. */
.consult__panel { display: grid; gap: 1.75rem; border-radius: var(--wp--custom--radius--panel); background: var(--wp--preset--color--primary); color: var(--wp--preset--color--accent-light); padding: 2.5rem max(1.5rem, calc(var(--wp--preset--spacing--gutter) - var(--wp--preset--spacing--inset))); }
.consult__text { display: grid; gap: 0.625rem; }
.consult__text .display { color: var(--wp--preset--color--contrast-light); font-size: clamp(1.875rem, 1.5rem + 1.6vw, 2.75rem); }
.consult__cta { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.consult :where(a):focus-visible { outline-color: var(--wp--preset--color--contrast-light); }
/* Fokusring auf den dunklen Flächen der Flat-Rate-Seite (Beratungs-Tafel, hervorgehobene Stufe) */
.fr-consult :where(a):focus-visible, .tier--featured :where(a):focus-visible { outline-color: var(--wp--preset--color--contrast-light); }

/* ------------------------------------------------------------ Hero-Bausatz
   (Behandlungsseiten, Startseite, Flat-Rate-Seite – deshalb hier und nicht im Block) */
.hero { padding: 1.5rem var(--wp--preset--spacing--gutter) 2.5rem; display: grid; gap: 2.5rem; }
.hero__h1 { font-family: var(--wp--preset--font-family--sans); font-size: 0.9375rem; font-weight: 600; line-height: 1.3; letter-spacing: 0.02em; color: var(--wp--preset--color--primary); }
.hero__claim { margin-top: 0.75rem; font-family: var(--wp--preset--font-family--display); font-size: var(--wp--preset--font-size--hero); font-weight: 600; line-height: var(--wp--custom--line-height--tight); letter-spacing: -0.035em; color: var(--wp--preset--color--contrast); text-wrap: balance; }
.hero__cta { margin-top: 1.75rem; display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.5rem; }
.hero__cta .btn { flex: 1 1 14rem; }
.hero__offer { margin-top: 0.75rem; font-size: var(--wp--preset--font-size--sm); color: var(--wp--preset--color--neutral); }
.trust { margin-top: 1.75rem; display: grid; gap: 1.125rem; }
.trust__rating { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; font-size: var(--wp--preset--font-size--sm); }
.trust__rating strong { color: var(--wp--preset--color--contrast); font-weight: 600; }
.trust__rating a { color: var(--wp--preset--color--neutral); }
.press__label { color: var(--wp--preset--color--neutral); margin-bottom: 0.5rem; font-size: 0.875rem; white-space: nowrap; flex: none; }
.press__logos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; align-items: center; padding-block: 0.75rem; border-block: 1px solid var(--wp--preset--color--neutral-light); }
.press__logos img { max-height: 1rem; width: auto; margin-inline: auto; opacity: 0.85; }
.hero__visual { position: relative; width: min(100%, 26rem); margin-inline: auto; padding: 0 1.25rem 2.5rem 0; }
.hero__photo { aspect-ratio: 4 / 5; border-radius: var(--wp--custom--radius--card); }
.hero__photo img { transition: transform 1900ms var(--wp--custom--ease); }
.hero__photo:hover img { transform: scale(1.04); }
@media (prefers-reduced-motion: no-preference) {
	.hero__text > * { animation: rise 900ms var(--wp--custom--ease) backwards; }
	.hero__text > :nth-child(1) { animation-delay: 60ms; }
	.hero__text > :nth-child(2) { animation-delay: 140ms; }
	.hero__text > :nth-child(3) { animation-delay: 260ms; }
	.hero__text > :nth-child(4) { animation-delay: 340ms; }
	.hero__text > :nth-child(5) { animation-delay: 400ms; }
	.hero__text > :nth-child(6) { animation-delay: 480ms; }
	.hero__photo img { animation: photo-in 1300ms var(--wp--custom--ease) backwards; }
}
@media (min-width: 700px) {
	.press__logos { display: flex; gap: 2rem; border: 0; padding: 0; }
	.press__logos img { max-height: 1.25rem; margin: 0; }
	.press { display: flex; align-items: center; gap: 1.25rem; }
	.press__label { margin: 0; }
	.hero__cta .btn { flex: none; }
}
@media (min-width: 1100px) {
	.hero { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); align-items: center; gap: 4rem; padding-block: 2.5rem 3.5rem; }
	.hero__h1 { font-size: 1.0625rem; }
	.hero__claim { margin-top: 1.25rem; }
	.hero__cta { margin-top: 2.25rem; }
	.trust { margin-top: 2rem; gap: 1.375rem; }
	.hero__visual { width: 100%; max-width: 32rem; margin-inline: auto 0; padding: 0 2rem 3.5rem 0; }
}
@media (max-width: 699px) {
	.hero__visual { padding-right: 0; }
	/* Am Handy nur ein Knopf im Hero – der zweite („Behandlungen ansehen“) ist dort unnötig (Elias). */
	.hero__cta .btn--ghost, .intro__cta .btn--ghost { display: none; }
}
@media (min-width: 700px) and (max-width: 1099px) {
	.hero__visual { width: 100%; max-width: none; padding-right: 0; }
	.hero__photo { aspect-ratio: 16 / 9; }
	.hero__photo img { object-position: 50% 30%; }
}

/* Kleine Zeile auf dunklem Grund (Foto-Band, Beratungs-Tafel) */
.kicker--light { color: var(--wp--preset--color--accent); }

/* ------------------------------------------------------------ Handy-Menü (Logik wie Northstar)
   Burger in der Kopfzeile öffnet ein Vollbild-Menü unter der Kopfzeile. Wurzel-Panel: Hauptpunkte,
   Termin-Button, WhatsApp/Sprache. „Behandlungen" schiebt ein zweites Panel herein (Zurück, Bereiche
   als Aufklapper, Link zur Übersicht). Öffnen/Schieben macht assets/js/mobile-nav.js. */
.mnav-toggle { width: 2.75rem; height: 2.75rem; margin-right: -0.75rem; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; border: 0; background: transparent; cursor: pointer; }
.mnav-toggle i { display: block; width: 22px; height: 1.5px; background: var(--wp--preset--color--contrast); transition: transform 300ms var(--wp--custom--ease); }
.mnav-toggle[aria-expanded="true"] i:nth-of-type(1) { transform: translateY(3.75px) rotate(45deg); }
.mnav-toggle[aria-expanded="true"] i:nth-of-type(2) { transform: translateY(-3.75px) rotate(-45deg); }
body.mnav-open { overflow: hidden; }
.mnav { display: none; position: fixed; left: 0; right: 0; top: var(--mnav-top, 4.5rem); bottom: 0; z-index: 90; background: var(--wp--preset--color--base); color: var(--wp--preset--color--contrast); }
.mnav:not([hidden]) { display: block; }
.mnav__panels { position: relative; height: 100%; overflow: hidden; }
.mnav :where(ul, p) { margin: 0; padding: 0; list-style: none; }
.mnav__panel { position: absolute; inset: 0; padding: 1rem var(--wp--preset--spacing--gutter) 2rem; overflow-y: auto; transform: translateX(100%); opacity: 0; pointer-events: none; transition: transform 450ms var(--wp--custom--ease), opacity 300ms ease; }
.mnav__panel.is-active { transform: translateX(0); opacity: 1; pointer-events: auto; }
.mnav__panel--root.is-left { transform: translateX(-30%); opacity: 0; pointer-events: none; }
.mnav__rootlist { display: grid; }
.mnav__rootitem { display: flex; align-items: center; justify-content: space-between; gap: 1rem; width: 100%; padding: 1rem 0; border: 0; border-bottom: 1px solid var(--wp--preset--color--neutral-light); background: transparent; font-family: var(--wp--preset--font-family--display); font-size: 1.75rem; font-weight: 600; line-height: 1.1; color: var(--wp--preset--color--contrast); text-align: left; text-decoration: none; cursor: pointer; }
.mnav__rootitem svg { flex: none; color: var(--wp--preset--color--neutral); }
.mnav__rootitem[aria-current] { color: var(--wp--preset--color--primary); }
.mnav__cta { margin-top: 1.5rem; width: 100%; }
.mnav__foot { margin-top: 1.25rem; display: flex; gap: 1.5rem; font-size: var(--wp--preset--font-size--sm); }
.mnav__foot a { color: var(--wp--preset--color--neutral); text-decoration: none; }
.mnav__back { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0; border: 0; background: transparent; font-family: inherit; font-size: var(--wp--preset--font-size--sm); font-weight: 600; color: var(--wp--preset--color--neutral); cursor: pointer; }
.mnav__back svg { transform: rotate(180deg); }
.mnav__title { margin: 0.5rem 0 0.75rem; font-family: var(--wp--preset--font-family--display); font-size: 1.75rem; font-weight: 600; line-height: 1.1; color: var(--wp--preset--color--contrast); }
.mnav__group { border-bottom: 1px solid var(--wp--preset--color--neutral-light); }
.mnav__group-title { list-style: none; display: flex; align-items: center; justify-content: space-between; padding: 0.875rem 0; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--wp--preset--color--contrast); cursor: pointer; }
.mnav__group-title::-webkit-details-marker { display: none; }
.mnav__group-title svg { color: var(--wp--preset--color--neutral); transform: rotate(90deg); transition: transform 300ms var(--wp--custom--ease); }
.mnav__group[open] .mnav__group-title svg { transform: rotate(-90deg); }
.mnav__list { display: grid; padding-bottom: 0.75rem; }
.mnav__list a { display: block; padding: 0.5rem 0; font-size: 1.0625rem; font-weight: 500; line-height: 1.3; color: var(--wp--preset--color--contrast); text-decoration: none; }
.mnav__list a[aria-current] { color: var(--wp--preset--color--primary); }
.mnav__all { display: block; margin-top: 1rem; padding: 0.625rem 0; font-size: 1rem; font-weight: 600; color: var(--wp--preset--color--primary); text-decoration: none; }

/* ------------------------------------------------------------ Häkchen-Liste
   (Hero der Behandlungsseiten, Flat-Rate-Hero – deshalb hier und nicht im Block) */
.checks { display: grid; gap: 0.75rem; }
.hero__text .checks { margin-top: 1.5rem; }
.checks li { display: flex; align-items: center; gap: 0.75rem; line-height: 1.35; color: var(--wp--preset--color--neutral); }
.checks__icon { flex: none; width: 1.625rem; height: 1.625rem; border-radius: var(--wp--custom--radius--pill); background: var(--wp--preset--color--accent); color: var(--wp--preset--color--contrast); display: grid; place-items: center; }
.checks__icon svg { width: 0.875rem; height: 0.875rem; }

.photo { overflow: hidden; border-radius: var(--wp--custom--radius--card); background: var(--wp--preset--color--accent-light); }
.photo img { width: 100%; height: 100%; object-fit: cover; }
.promo { background: var(--wp--preset--color--contrast); text-align: center; font-size: var(--wp--preset--font-size--sm); font-weight: 500; line-height: 1.3; }
.promo a { display: block; padding: 0.75rem var(--wp--preset--spacing--gutter); color: var(--wp--preset--color--contrast-light); text-decoration: none; }
.promo a:hover { color: var(--wp--preset--color--contrast-light); text-decoration: underline; text-underline-offset: 0.25em; }
.promo a:focus-visible { outline-color: var(--wp--preset--color--contrast-light); outline-offset: -4px; }
.head { position: relative; background: color-mix(in srgb, var(--wp--preset--color--base) 92%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--wp--preset--color--neutral-light); }
.head__progress { position: absolute; left: 0; bottom: -1px; height: 2px; width: 100%; background: var(--wp--preset--color--primary); transform-origin: left; transform: scaleX(var(--progress, 0)); }
.head__row { height: var(--wp--custom--header--height-mobile); padding-inline: var(--wp--preset--spacing--gutter); display: flex; align-items: center; gap: 1rem; }
.head__logo img { height: 1.5rem; width: auto; }
.head__nav { display: none; }
.head__tools { margin-left: auto; display: flex; align-items: center; gap: 0.75rem; }
.lang { display: none; gap: 0.375rem; font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.04em; }
.lang a { color: var(--wp--preset--color--neutral); text-decoration: none; }
.lang__off { color: var(--wp--preset--color--neutral-light); }
.lang a[aria-current] { color: var(--wp--preset--color--contrast); font-weight: 600; }
.stars { display: inline-flex; gap: 2px; color: var(--wp--preset--color--contrast); }
.stars svg { width: 0.9375rem; height: 0.9375rem; fill: currentColor; }
.sec { padding: var(--wp--preset--spacing--section) var(--wp--preset--spacing--gutter); }
.sec--ice { background: var(--wp--preset--color--ice); }
.sec__head { display: grid; gap: 1rem; margin-bottom: clamp(2rem, 1.2rem + 3vw, 4rem); max-width: 56rem; }
.sec__head p { max-width: 34rem; }
/* Zentrierter Abschnittskopf – nur auf der Laser-Flat-Rate-Vorlage (Wunsch Elias, 18.09.2026).
   Dort sind ALLE Köpfe zentriert und gleich breit; die Behandlungsseiten bleiben linksbündig. */
.sec__head--center { max-width: 46rem; margin-inline: auto; justify-items: center; text-align: center; }
.sec__head--center p { margin-inline: auto; }
.panel { margin-inline: var(--wp--preset--spacing--inset); border-radius: var(--wp--custom--radius--panel); padding: clamp(2rem, 1.5rem + 2vw, 3.25rem) calc(var(--wp--preset--spacing--gutter) - var(--wp--preset--spacing--inset)); padding-inline: max(1.5rem, calc(var(--wp--preset--spacing--gutter) - var(--wp--preset--spacing--inset))); }
.panel--dark { background: var(--wp--preset--color--contrast); color: var(--wp--preset--color--accent-light); }
.panel--dark h2, .panel--dark h3 { color: var(--wp--preset--color--contrast-light); }
.panel--ice { background: var(--wp--preset--color--ice); color: var(--wp--preset--color--neutral); }
.panel--line { background: var(--wp--preset--color--base); border: 1px solid var(--wp--preset--color--neutral-light); }
.ico-s { width: 1em; height: 1em; flex: none; }
.ico { width: 1.75rem; height: 1.75rem; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.card { background: var(--wp--preset--color--base); border-radius: var(--wp--custom--radius--card); padding: 1.75rem 1.5rem; display: grid; gap: 1rem; align-content: start; }
.card__title { font-family: var(--wp--preset--font-family--display); font-size: var(--wp--preset--font-size--heading); font-weight: 500; line-height: 1.1; font-style: italic; letter-spacing: -0.015em; color: var(--wp--preset--color--contrast); }
.dots { display: grid; gap: 0.625rem; }
.dots li { display: grid; grid-template-columns: auto 1fr; gap: 0.75rem; align-items: baseline; }
.dots li::before { content: ""; width: 0.4375rem; height: 0.4375rem; border-radius: var(--wp--custom--radius--pill); background: var(--wp--preset--color--primary); transform: translateY(-0.125rem); }
.sec__head--split { max-width: none; }
.snap { display: flex; gap: 1rem; margin-inline: calc(var(--wp--preset--spacing--gutter) * -1); padding-inline: var(--wp--preset--spacing--gutter); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--wp--preset--spacing--gutter); scrollbar-width: none; }
.snap::-webkit-scrollbar { display: none; }
.snapnav { display: flex; gap: 0.5rem; }
.snapnav[hidden] { display: none; }
.snapnav button { display: grid; place-items: center; border-radius: var(--wp--custom--radius--pill); border: 1.5px solid var(--wp--preset--color--contrast); background: transparent; color: var(--wp--preset--color--contrast); cursor: pointer; transition: background-color 200ms ease, color 200ms ease, transform 300ms var(--wp--custom--ease); width: 2.75rem; height: 2.75rem; }
.snapnav button:hover { background: var(--wp--preset--color--contrast); color: var(--wp--preset--color--contrast-light); }
.snapnav button:active { transform: scale(0.94); }
.snapnav button[disabled] { opacity: 0.3; pointer-events: none; }
.btn--ghost-light { background: transparent; border-color: color-mix(in srgb, var(--wp--preset--color--contrast-light) 70%, transparent); color: var(--wp--preset--color--contrast-light); }
.btn--ghost-light:hover { background: var(--wp--preset--color--contrast-light); border-color: var(--wp--preset--color--contrast-light); color: var(--wp--preset--color--contrast); }
.foot { background: var(--wp--preset--color--contrast); color: var(--wp--preset--color--accent-light); padding: clamp(3.5rem, 2.5rem + 4vw, 6rem) var(--wp--preset--spacing--gutter) 2rem; border-radius: var(--wp--custom--radius--panel) var(--wp--custom--radius--panel) 0 0; }
.foot a { color: var(--wp--preset--color--contrast-light); display: inline-block; padding-block: 0.375rem; }
.foot__grid { display: grid; gap: 2.5rem; }
.foot__brand { display: grid; gap: 1.25rem; max-width: 22rem; }
.foot__brand img { height: 1.5rem; width: auto; }
.foot__title { font-family: var(--wp--preset--font-family--sans); font-size: 0.875rem; font-weight: 600; line-height: 1.3; letter-spacing: 0; color: var(--wp--preset--color--accent); margin-bottom: 0.75rem; }
.foot p { line-height: 1.5; }
.foot__legal { margin-top: 3.5rem; padding-top: 1.5rem; border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast-light) 18%, transparent); display: flex; flex-wrap: wrap; justify-content: space-between; font-size: var(--wp--preset--font-size--sm); gap: 0.5rem 1.5rem; }
.foot__legal a { margin-right: 0; }
.nowrap { white-space: nowrap; }
.promo a, .card__title { text-wrap: balance; }
.foot a[href^="https://wa.me"] { white-space: nowrap; }
.foot__legal p:last-child { display: flex; gap: 1.5rem; }
.head__logo { display: block; flex: none; padding-block: 0.75rem; }
.mega__panel { display: none; }

@media (min-width: 700px) {
	.card { padding: 2.5rem; }
	.foot__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1100px) {
	.benefits__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 3rem; }
	.benefits__grid :where(.ico, .ico-s) { width: 2.25rem; height: 2.25rem; }
	.consult__panel { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 3rem; padding-block: 3rem; }
	.checks__icon { width: 1.875rem; height: 1.875rem; }
	.only-desktop { display: inline; }
	.only-mobile { display: none; }
	.head__row { height: var(--wp--custom--header--height-desktop); gap: 2.75rem; }
	.head__logo img { height: 1.875rem; }
	.head__nav { display: flex; gap: 1.75rem; align-self: stretch; align-items: stretch; }
	.head__nav a { position: relative; font-size: 0.9375rem; font-weight: 500; color: var(--wp--preset--color--contrast); text-decoration: none; padding-block: 0.75rem; }
	.head__nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1.5px; background: var(--wp--preset--color--contrast); transform: scaleX(0); transform-origin: right; transition: transform 400ms var(--wp--custom--ease); }
	.head__nav a:hover::after { transform: scaleX(1); transform-origin: left; }
	.lang { display: flex; }
	.mnav-toggle, .mnav { display: none; }
	.head__tools { gap: 1.5rem; }
	.sec__head--split { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.6fr); gap: 4rem; align-items: end; }
	.foot__grid { gap: 3rem; grid-template-columns: 1.4fr 0.9fr 0.9fr 0.9fr 1.1fr; }
	.head__nav > a, .mega { display: flex; align-items: center; }
	.mega__trigger { display: inline-flex; align-items: center; gap: 0.4375rem; }
	.mega__trigger svg { width: 0.625rem; height: auto; transition: transform 300ms var(--wp--custom--ease); }
	.mega:hover .mega__trigger svg, .mega:focus-within .mega__trigger svg, .mega.is-open .mega__trigger svg { transform: rotate(180deg); }
	.mega:hover .mega__trigger::after, .mega:focus-within .mega__trigger::after, .mega.is-open .mega__trigger::after { transform: scaleX(1); transform-origin: left; }
	.mega__panel { display: block; position: absolute; left: 0; right: 0; top: 100%; background: var(--wp--preset--color--base); border-top: 1px solid var(--wp--preset--color--neutral-light); border-bottom: 1px solid var(--wp--preset--color--neutral-light); opacity: 0; visibility: hidden; transform: translateY(-0.375rem); transition: opacity 220ms ease, transform 300ms var(--wp--custom--ease), visibility 0s linear 220ms; }
	.mega:hover .mega__panel, .mega:focus-within .mega__panel, .mega.is-open .mega__panel { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
	.mega.is-closed .mega__panel { opacity: 0; visibility: hidden; }
	.mega__inner { padding: 2.5rem var(--wp--preset--spacing--gutter) 2.75rem; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(17rem, 1.15fr); gap: 2.5rem; align-items: start; }
	.mega__group { margin-bottom: 0.75rem; padding-bottom: 0.75rem; border-bottom: 1px solid var(--wp--preset--color--neutral-light); font-family: var(--wp--preset--font-family--sans); font-size: 0.8125rem; font-weight: 600; line-height: 1.3; letter-spacing: 0.08em; text-transform: uppercase; color: var(--wp--preset--color--primary); }
	.mega__col ul { display: grid; gap: 0.125rem; }
	.head__nav .mega__col a { display: inline-block; padding-block: 0.3125rem; font-family: var(--wp--preset--font-family--display); font-size: clamp(1.125rem, 0.4rem + 1.1vw, 1.375rem); font-weight: 600; line-height: 1.2; letter-spacing: -0.01em; }
	.head__nav .mega__col a[aria-current] { color: var(--wp--preset--color--primary); }
	.mega__aside { padding: 1.75rem; border-radius: var(--wp--custom--radius--card); background: var(--wp--preset--color--ice); display: grid; gap: 0.75rem; justify-items: start; font-size: var(--wp--preset--font-size--sm); line-height: 1.5; color: var(--wp--preset--color--neutral); }
	.mega__aside-title { font-family: var(--wp--preset--font-family--display); font-size: 1.5rem; font-weight: 600; line-height: 1.1; letter-spacing: -0.015em; color: var(--wp--preset--color--contrast); text-wrap: balance; }
	.head__nav .mega__aside .btn { position: static; margin-top: 0.25rem; padding-block: 0; font-size: 0.9375rem; font-weight: 600; }
	.head__nav .mega__aside .btn::after, .head__nav .mega__aside .textlink::after { content: none; }
	.head__nav .mega__aside .btn--ghost:hover { color: var(--wp--preset--color--contrast-light); }
	.head__nav .mega__aside .textlink { padding-block: 0.25rem; font-size: var(--wp--preset--font-size--sm); font-weight: 600; text-decoration: underline; text-decoration-color: var(--wp--preset--color--accent); text-underline-offset: 0.25em; }
}

@media (prefers-reduced-motion: reduce) {
	.mega__panel, .mega__trigger svg { transition: none; }
}

/* Cookie-Abfrage (CookieYes).
   Das Plugin stellt den Kasten unten links. Wir holen ihn in die Bildschirmmitte und legen einen
   abgedunkelten Schleier darüber, damit die Entscheidung bewusst getroffen wird (Vorbild: Northstar
   Media). Der Schleier ist ein ::before des Kastens – er hat keinen Klick-Handler, man kommt also
   nur über einen der Knöpfe weiter. Das Plugin blendet den Kasten über .cky-hide aus, damit
   verschwindet der Schleier automatisch mit. */
/* Die Plugin-CSS wird nach unserer geladen und ist gleich stark – deshalb steht der Klassenname
   doppelt. Das hebt unsere Regel darüber, ohne !important zu benutzen. Zentriert wird über
   inset+margin statt über transform: ein transform würde den Schleier (position: fixed) an den
   Kasten binden, statt ihn über den ganzen Bildschirm zu legen. */
.cky-consent-container.cky-consent-container { position: fixed; inset: 0; margin: auto; width: 27.5rem; max-width: calc(100vw - 2rem); height: fit-content; max-height: calc(100vh - 2rem); overflow-y: auto; }
.cky-consent-container:not(.cky-hide)::before { content: ""; position: fixed; inset: 0; z-index: -1; background: color-mix(in srgb, var(--wp--preset--color--contrast) 70%, transparent); backdrop-filter: blur(3px); }
.cky-consent-container .cky-consent-bar { border-radius: var(--wp--custom--radius--card); }