/*
Theme Name: Schlafberatung Innconcept
Theme URI: https://6p-marketing.de/
Author: 6P Marketing GmbH
Author URI: https://6p-marketing.de/
Description: Conversion-optimierte Single-Page-Landingpage fuer Schlafberatung innconcept (Griesheim bei Darmstadt). Auf dem White-Label-Schlafberater-Theme von 6P Marketing aufgebaut; alle berater-spezifischen Inhalte (Marke, Kontakt, Bilder, Testimonials, Reviews, FAQ, Impressum, Booking-API, Farben) werden im Backend unter "Landingpage" gepflegt (CMB2, gebuendelt). Inkl. VSL-Hero, Schlafprofil-Quiz, Custom-Booking via HighLevel-API, Schema.org, Tailwind v4 inline, Bunny Fonts (DSGVO).
Version: 2.15.23
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 8.0
License: Proprietary
License URI: https://6p-marketing.de/
Text Domain: schlafberatung-innconcept-lp
Tags: landing-page, single-page, custom-colors, custom-logo, threaded-comments
*/

/* ============================================================
   IMAGIFY PICTURE-WRAPPER FIX – v1.0.10
   – Default: picture wie inline-Container (Logo, Avatar, Icon)
   – Override fuer absolute/cover layouts: img fills container
   ============================================================ */
picture {
  display: inline-block;
  max-width: 100%;
  vertical-align: middle;
  overflow: hidden;
}
picture > img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
}

/* Cover/Container-Layouts: picture wird block + img fills picture */
picture[class*="absolute"] {
  position: absolute;
  display: block;
}
picture[class*="object-cover"],
picture[class*="object-contain"] {
  display: block;
}

picture[class*="absolute"] > img,
picture[class*="object-cover"] > img,
picture[class*="object-contain"] > img {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: inherit;
}

picture[class*="object-cover"]   { object-fit: cover; }
picture[class*="object-contain"] { object-fit: contain; }

/* Rounded-Corners auf picture -> img */
picture[class*="rounded-full"]    > img { border-radius: 9999px; }
picture[class*="rounded-\\[2rem\\]"] > img { border-radius: 2rem; }
picture[class*="rounded-3xl"]     > img { border-radius: 1.5rem; }
picture[class*="rounded-2xl"]     > img { border-radius: 1rem; }
picture[class*="rounded-xl"]      > img { border-radius: 0.75rem; }

/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */
@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-space-y-reverse:0;--tw-space-x-reverse:0;--tw-border-style:solid;--tw-gradient-position:initial;--tw-gradient-from:#0000;--tw-gradient-via:#0000;--tw-gradient-to:#0000;--tw-gradient-stops:initial;--tw-gradient-via-stops:initial;--tw-gradient-from-position:0%;--tw-gradient-via-position:50%;--tw-gradient-to-position:100%;--tw-leading:initial;--tw-font-weight:initial;--tw-tracking:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial;--tw-backdrop-blur:initial;--tw-backdrop-brightness:initial;--tw-backdrop-contrast:initial;--tw-backdrop-grayscale:initial;--tw-backdrop-hue-rotate:initial;--tw-backdrop-invert:initial;--tw-backdrop-opacity:initial;--tw-backdrop-saturate:initial;--tw-backdrop-sepia:initial;--tw-duration:initial;--tw-scale-x:1;--tw-scale-y:1;--tw-scale-z:1}}}@layer theme{:root,:host{--font-sans:"Inter", ui-sans-serif, system-ui, sans-serif;--font-mono:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--color-black:#000;--color-white:#fff;--spacing:.25rem;--container-xs:20rem;--container-md:28rem;--container-xl:36rem;--container-2xl:42rem;--container-3xl:48rem;--container-4xl:56rem;--container-5xl:64rem;--container-7xl:80rem;--text-xs:.75rem;--text-xs--line-height:calc(1 / .75);--text-sm:.875rem;--text-sm--line-height:calc(1.25 / .875);--text-base:1rem;--text-base--line-height:calc(1.5 / 1);--text-lg:1.125rem;--text-lg--line-height:calc(1.75 / 1.125);--text-xl:1.25rem;--text-xl--line-height:calc(1.75 / 1.25);--text-2xl:1.5rem;--text-2xl--line-height:calc(2 / 1.5);--text-3xl:1.875rem;--text-3xl--line-height:calc(2.25 / 1.875);--text-4xl:2.25rem;--text-4xl--line-height:calc(2.5 / 2.25);--text-5xl:3rem;--text-5xl--line-height:1;--text-7xl:4.5rem;--text-7xl--line-height:1;--text-8xl:6rem;--text-8xl--line-height:1;--font-weight-medium:500;--font-weight-semibold:600;--tracking-tight:-.025em;--tracking-wide:.025em;--tracking-wider:.05em;--leading-tight:1.25;--leading-snug:1.375;--leading-relaxed:1.625;--radius-2xl:1rem;--radius-3xl:1.5rem;--animate-ping:ping 1s cubic-bezier(0, 0, .2, 1) infinite;--blur-sm:8px;--blur-md:12px;--blur-lg:16px;--blur-xl:24px;--blur-2xl:40px;--blur-3xl:64px;--aspect-video:16 / 9;--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4, 0, .2, 1);--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono);--color-brand:#023893;--color-brand-fg:#01245d;--color-cream:#f7f6f3;--color-ink:#1e2521;--color-muted:#5c6560;--color-line:#eceae4;--font-display:"Newsreader", ui-serif, Georgia, serif}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab, red, red)){::placeholder{color:color-mix(in oklab, currentcolor 50%, transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer components;@layer utilities{.pointer-events-auto{pointer-events:auto}.pointer-events-none{pointer-events:none}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.sticky{position:sticky}.-inset-4{inset:calc(var(--spacing) * -4)}.inset-0{inset:calc(var(--spacing) * 0)}.inset-x-0{inset-inline:calc(var(--spacing) * 0)}.-top-12{top:calc(var(--spacing) * -12)}.-top-20{top:calc(var(--spacing) * -20)}.-top-40{top:calc(var(--spacing) * -40)}.top-0{top:calc(var(--spacing) * 0)}.top-4{top:calc(var(--spacing) * 4)}.top-5{top:calc(var(--spacing) * 5)}.-right-20{right:calc(var(--spacing) * -20)}.right-0{right:calc(var(--spacing) * 0)}.right-4{right:calc(var(--spacing) * 4)}.right-5{right:calc(var(--spacing) * 5)}.-bottom-40{bottom:calc(var(--spacing) * -40)}.bottom-0{bottom:calc(var(--spacing) * 0)}.bottom-3{bottom:calc(var(--spacing) * 3)}.bottom-4{bottom:calc(var(--spacing) * 4)}.bottom-20{bottom:calc(var(--spacing) * 20)}.-left-20{left:calc(var(--spacing) * -20)}.left-3{left:calc(var(--spacing) * 3)}.left-4{left:calc(var(--spacing) * 4)}.isolate{isolation:isolate}.-z-10{z-index:calc(10 * -1)}.z-10{z-index:10}.z-20{z-index:20}.z-30{z-index:30}.z-40{z-index:40}.z-50{z-index:50}.order-1{order:1}.order-2{order:2}.mx-auto{margin-inline:auto}.mt-0\.5{margin-top:calc(var(--spacing) * .5)}.mt-1{margin-top:calc(var(--spacing) * 1)}.mt-2{margin-top:calc(var(--spacing) * 2)}.mt-3{margin-top:calc(var(--spacing) * 3)}.mt-4{margin-top:calc(var(--spacing) * 4)}.mt-5{margin-top:calc(var(--spacing) * 5)}.mt-6{margin-top:calc(var(--spacing) * 6)}.mt-7{margin-top:calc(var(--spacing) * 7)}.mt-8{margin-top:calc(var(--spacing) * 8)}.mt-9{margin-top:calc(var(--spacing) * 9)}.mt-10{margin-top:calc(var(--spacing) * 10)}.mt-12{margin-top:calc(var(--spacing) * 12)}.mt-14{margin-top:calc(var(--spacing) * 14)}.mt-24{margin-top:calc(var(--spacing) * 24)}.mr-2{margin-right:calc(var(--spacing) * 2)}.mb-2{margin-bottom:calc(var(--spacing) * 2)}.mb-3{margin-bottom:calc(var(--spacing) * 3)}.mb-4{margin-bottom:calc(var(--spacing) * 4)}.mb-5{margin-bottom:calc(var(--spacing) * 5)}.mb-10{margin-bottom:calc(var(--spacing) * 10)}.ml-0\.5{margin-left:calc(var(--spacing) * .5)}.ml-1{margin-left:calc(var(--spacing) * 1)}.ml-2{margin-left:calc(var(--spacing) * 2)}.ml-6{margin-left:calc(var(--spacing) * 6)}.block{display:block}.flex{display:flex}.grid{display:grid}.hidden{display:none}.inline-block{display:inline-block}.inline-flex{display:inline-flex}.aspect-\[4\/3\]{aspect-ratio:4/3}.aspect-\[4\/5\]{aspect-ratio:4/5}.aspect-video{aspect-ratio:var(--aspect-video)}.h-1{height:calc(var(--spacing) * 1)}.h-1\.5{height:calc(var(--spacing) * 1.5)}.h-2{height:calc(var(--spacing) * 2)}.h-3{height:calc(var(--spacing) * 3)}.h-3\.5{height:calc(var(--spacing) * 3.5)}.h-4{height:calc(var(--spacing) * 4)}.h-5{height:calc(var(--spacing) * 5)}.h-6{height:calc(var(--spacing) * 6)}.h-7{height:calc(var(--spacing) * 7)}.h-8{height:calc(var(--spacing) * 8)}.h-9{height:calc(var(--spacing) * 9)}.h-10{height:calc(var(--spacing) * 10)}.h-11{height:calc(var(--spacing) * 11)}.h-12{height:calc(var(--spacing) * 12)}.h-13{height:calc(var(--spacing) * 13)}.h-14{height:calc(var(--spacing) * 14)}.h-16{height:calc(var(--spacing) * 16)}.h-20{height:calc(var(--spacing) * 20)}.h-24{height:calc(var(--spacing) * 24)}.h-28{height:calc(var(--spacing) * 28)}.h-80{height:calc(var(--spacing) * 80)}.h-\[30rem\]{height:30rem}.h-\[40rem\]{height:40rem}.h-auto{height:auto}.h-full{height:100%}.w-1{width:calc(var(--spacing) * 1)}.w-2{width:calc(var(--spacing) * 2)}.w-3{width:calc(var(--spacing) * 3)}.w-3\.5{width:calc(var(--spacing) * 3.5)}.w-4{width:calc(var(--spacing) * 4)}.w-5{width:calc(var(--spacing) * 5)}.w-6{width:calc(var(--spacing) * 6)}.w-7{width:calc(var(--spacing) * 7)}.w-8{width:calc(var(--spacing) * 8)}.w-9{width:calc(var(--spacing) * 9)}.w-10{width:calc(var(--spacing) * 10)}.w-11{width:calc(var(--spacing) * 11)}.w-12{width:calc(var(--spacing) * 12)}.w-14{width:calc(var(--spacing) * 14)}.w-16{width:calc(var(--spacing) * 16)}.w-20{width:calc(var(--spacing) * 20)}.w-24{width:calc(var(--spacing) * 24)}.w-28{width:calc(var(--spacing) * 28)}.w-80{width:calc(var(--spacing) * 80)}.w-\[30rem\]{width:30rem}.w-\[40rem\]{width:40rem}.w-auto{width:auto}.w-full{width:100%}.max-w-2xl{max-width:var(--container-2xl)}.max-w-3xl{max-width:var(--container-3xl)}.max-w-4xl{max-width:var(--container-4xl)}.max-w-5xl{max-width:var(--container-5xl)}.max-w-7xl{max-width:var(--container-7xl)}.max-w-md{max-width:var(--container-md)}.max-w-xl{max-width:var(--container-xl)}.max-w-xs{max-width:var(--container-xs)}.min-w-0{min-width:calc(var(--spacing) * 0)}.flex-1{flex:1}.shrink-0{flex-shrink:0}.translate-y-full{--tw-translate-y:100%;translate:var(--tw-translate-x) var(--tw-translate-y)}.transform{transform:var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,)}.animate-ping{animation:var(--animate-ping)}.cursor-pointer{cursor:pointer}.scroll-mt-24{scroll-margin-top:calc(var(--spacing) * 24)}.list-disc{list-style-type:disc}.list-none{list-style-type:none}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-baseline{align-items:baseline}.items-center{align-items:center}.items-start{align-items:flex-start}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.gap-1\.5{gap:calc(var(--spacing) * 1.5)}.gap-2{gap:calc(var(--spacing) * 2)}.gap-3{gap:calc(var(--spacing) * 3)}.gap-4{gap:calc(var(--spacing) * 4)}.gap-5{gap:calc(var(--spacing) * 5)}.gap-6{gap:calc(var(--spacing) * 6)}.gap-8{gap:calc(var(--spacing) * 8)}.gap-10{gap:calc(var(--spacing) * 10)}.gap-12{gap:calc(var(--spacing) * 12)}:where(.space-y-1>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 1) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 1) * calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-3>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 3) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-4>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-5>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 5) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 5) * calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-6>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 6) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-10>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 10) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 10) * calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-12>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 12) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 12) * calc(1 - var(--tw-space-y-reverse)))}.gap-x-5{column-gap:calc(var(--spacing) * 5)}:where(.-space-x-2>:not(:last-child)){--tw-space-x-reverse:0;margin-inline-start:calc(calc(var(--spacing) * -2) * var(--tw-space-x-reverse));margin-inline-end:calc(calc(var(--spacing) * -2) * calc(1 - var(--tw-space-x-reverse)))}.gap-y-2{row-gap:calc(var(--spacing) * 2)}.overflow-hidden{overflow:hidden}.rounded-2xl{border-radius:var(--radius-2xl)}.rounded-3xl{border-radius:var(--radius-3xl)}.rounded-\[2rem\]{border-radius:2rem}.rounded-full{border-radius:3.40282e38px}.border{border-style:var(--tw-border-style);border-width:1px}.border-2{border-style:var(--tw-border-style);border-width:2px}.border-t{border-top-style:var(--tw-border-style);border-top-width:1px}.border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.border-\[color\:var\(--color-brand\)\]\/20{border-color:#02389333}@supports (color:color-mix(in lab, red, red)){.border-\[color\:var\(--color-brand\)\]\/20{border-color:color-mix(in oklab, var(--color-brand) 20%, transparent)}}.border-\[color\:var\(--color-brand\)\]\/30{border-color:#0238934d}@supports (color:color-mix(in lab, red, red)){.border-\[color\:var\(--color-brand\)\]\/30{border-color:color-mix(in oklab, var(--color-brand) 30%, transparent)}}.border-\[color\:var\(--color-ink\)\]\/15{border-color:#141b2426}@supports (color:color-mix(in lab, red, red)){.border-\[color\:var\(--color-ink\)\]\/15{border-color:color-mix(in oklab, var(--color-ink) 15%, transparent)}}.border-\[color\:var\(--color-line\)\]{border-color:var(--color-line)}.border-white\/10{border-color:#ffffff1a}@supports (color:color-mix(in lab, red, red)){.border-white\/10{border-color:color-mix(in oklab, var(--color-white) 10%, transparent)}}.border-white\/15{border-color:#ffffff26}@supports (color:color-mix(in lab, red, red)){.border-white\/15{border-color:color-mix(in oklab, var(--color-white) 15%, transparent)}}.border-white\/40{border-color:#fff6}@supports (color:color-mix(in lab, red, red)){.border-white\/40{border-color:color-mix(in oklab, var(--color-white) 40%, transparent)}}.bg-\[color\:var\(--color-brand\)\]{background-color:var(--color-brand)}.bg-\[color\:var\(--color-brand\)\]\/8{background-color:#02389314}@supports (color:color-mix(in lab, red, red)){.bg-\[color\:var\(--color-brand\)\]\/8{background-color:color-mix(in oklab, var(--color-brand) 8%, transparent)}}.bg-\[color\:var\(--color-brand\)\]\/15{background-color:#02389326}@supports (color:color-mix(in lab, red, red)){.bg-\[color\:var\(--color-brand\)\]\/15{background-color:color-mix(in oklab, var(--color-brand) 15%, transparent)}}.bg-\[color\:var\(--color-brand\)\]\/20{background-color:#02389333}@supports (color:color-mix(in lab, red, red)){.bg-\[color\:var\(--color-brand\)\]\/20{background-color:color-mix(in oklab, var(--color-brand) 20%, transparent)}}.bg-\[color\:var\(--color-brand\)\]\/40{background-color:#02389366}@supports (color:color-mix(in lab, red, red)){.bg-\[color\:var\(--color-brand\)\]\/40{background-color:color-mix(in oklab, var(--color-brand) 40%, transparent)}}.bg-\[color\:var\(--color-brand-fg\)\]{background-color:var(--color-brand-fg)}.bg-\[color\:var\(--color-cream\)\]{background-color:var(--color-cream)}.bg-\[color\:var\(--color-cream\)\]\/85{background-color:#fdfaf4d9}@supports (color:color-mix(in lab, red, red)){.bg-\[color\:var\(--color-cream\)\]\/85{background-color:color-mix(in oklab, var(--color-cream) 85%, transparent)}}.bg-\[color\:var\(--color-ink\)\]{background-color:var(--color-ink)}.bg-\[color\:var\(--color-ink\)\]\/8{background-color:#141b2414}@supports (color:color-mix(in lab, red, red)){.bg-\[color\:var\(--color-ink\)\]\/8{background-color:color-mix(in oklab, var(--color-ink) 8%, transparent)}}.bg-\[color\:var\(--color-ink\)\]\/10{background-color:#141b241a}@supports (color:color-mix(in lab, red, red)){.bg-\[color\:var\(--color-ink\)\]\/10{background-color:color-mix(in oklab, var(--color-ink) 10%, transparent)}}.bg-\[color\:var\(--color-ink\)\]\/85{background-color:#141b24d9}@supports (color:color-mix(in lab, red, red)){.bg-\[color\:var\(--color-ink\)\]\/85{background-color:color-mix(in oklab, var(--color-ink) 85%, transparent)}}.bg-\[color\:var\(--color-line\)\]{background-color:var(--color-line)}.bg-black{background-color:var(--color-black)}.bg-black\/20{background-color:#0003}@supports (color:color-mix(in lab, red, red)){.bg-black\/20{background-color:color-mix(in oklab, var(--color-black) 20%, transparent)}}.bg-black\/75{background-color:#000000bf}@supports (color:color-mix(in lab, red, red)){.bg-black\/75{background-color:color-mix(in oklab, var(--color-black) 75%, transparent)}}.bg-black\/90{background-color:#000000e6}@supports (color:color-mix(in lab, red, red)){.bg-black\/90{background-color:color-mix(in oklab, var(--color-black) 90%, transparent)}}.bg-white{background-color:var(--color-white)}.bg-white\/5{background-color:#ffffff0d}@supports (color:color-mix(in lab, red, red)){.bg-white\/5{background-color:color-mix(in oklab, var(--color-white) 5%, transparent)}}.bg-white\/10{background-color:#ffffff1a}@supports (color:color-mix(in lab, red, red)){.bg-white\/10{background-color:color-mix(in oklab, var(--color-white) 10%, transparent)}}.bg-white\/40{background-color:#fff6}@supports (color:color-mix(in lab, red, red)){.bg-white\/40{background-color:color-mix(in oklab, var(--color-white) 40%, transparent)}}.bg-white\/60{background-color:#fff9}@supports (color:color-mix(in lab, red, red)){.bg-white\/60{background-color:color-mix(in oklab, var(--color-white) 60%, transparent)}}.bg-white\/80{background-color:#fffc}@supports (color:color-mix(in lab, red, red)){.bg-white\/80{background-color:color-mix(in oklab, var(--color-white) 80%, transparent)}}.bg-white\/85{background-color:#ffffffd9}@supports (color:color-mix(in lab, red, red)){.bg-white\/85{background-color:color-mix(in oklab, var(--color-white) 85%, transparent)}}.bg-gradient-to-br{--tw-gradient-position:to bottom right in oklab;background-image:linear-gradient(var(--tw-gradient-stops))}.bg-gradient-to-t{--tw-gradient-position:to top in oklab;background-image:linear-gradient(var(--tw-gradient-stops))}.from-\[color\:var\(--color-brand\)\]\/15{--tw-gradient-from:#02389326}@supports (color:color-mix(in lab, red, red)){.from-\[color\:var\(--color-brand\)\]\/15{--tw-gradient-from:color-mix(in oklab, var(--color-brand) 15%, transparent)}}.from-\[color\:var\(--color-brand\)\]\/15{--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))}.from-black\/55{--tw-gradient-from:#0000008c}@supports (color:color-mix(in lab, red, red)){.from-black\/55{--tw-gradient-from:color-mix(in oklab, var(--color-black) 55%, transparent)}}.from-black\/55{--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))}.from-black\/60{--tw-gradient-from:#0009}@supports (color:color-mix(in lab, red, red)){.from-black\/60{--tw-gradient-from:color-mix(in oklab, var(--color-black) 60%, transparent)}}.from-black\/60{--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))}.via-black\/10{--tw-gradient-via:#0000001a}@supports (color:color-mix(in lab, red, red)){.via-black\/10{--tw-gradient-via:color-mix(in oklab, var(--color-black) 10%, transparent)}}.via-black\/10{--tw-gradient-via-stops:var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-via-stops)}.to-transparent{--tw-gradient-to:transparent;--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))}.fill-\[color\:var\(--color-brand\)\]{fill:var(--color-brand)}.fill-\[color\:var\(--color-brand\)\]\/30{fill:#0238934d}@supports (color:color-mix(in lab, red, red)){.fill-\[color\:var\(--color-brand\)\]\/30{fill:color-mix(in oklab, var(--color-brand) 30%, transparent)}}.fill-current{fill:currentColor}.object-contain{object-fit:contain}.object-cover{object-fit:cover}.p-4{padding:calc(var(--spacing) * 4)}.p-5{padding:calc(var(--spacing) * 5)}.p-6{padding:calc(var(--spacing) * 6)}.p-8{padding:calc(var(--spacing) * 8)}.px-3{padding-inline:calc(var(--spacing) * 3)}.px-3\.5{padding-inline:calc(var(--spacing) * 3.5)}.px-4{padding-inline:calc(var(--spacing) * 4)}.px-5{padding-inline:calc(var(--spacing) * 5)}.px-6{padding-inline:calc(var(--spacing) * 6)}.px-7{padding-inline:calc(var(--spacing) * 7)}.px-8{padding-inline:calc(var(--spacing) * 8)}.px-10{padding-inline:calc(var(--spacing) * 10)}.py-1\.5{padding-block:calc(var(--spacing) * 1.5)}.py-2{padding-block:calc(var(--spacing) * 2)}.py-3{padding-block:calc(var(--spacing) * 3)}.py-14{padding-block:calc(var(--spacing) * 14)}.py-16{padding-block:calc(var(--spacing) * 16)}.py-20{padding-block:calc(var(--spacing) * 20)}.pt-3{padding-top:calc(var(--spacing) * 3)}.pt-4{padding-top:calc(var(--spacing) * 4)}.pt-8{padding-top:calc(var(--spacing) * 8)}.pt-10{padding-top:calc(var(--spacing) * 10)}.pr-5{padding-right:calc(var(--spacing) * 5)}.pb-6{padding-bottom:calc(var(--spacing) * 6)}.pb-20{padding-bottom:calc(var(--spacing) * 20)}.pl-2{padding-left:calc(var(--spacing) * 2)}.text-center{text-align:center}.text-left{text-align:left}.font-display{font-family:var(--font-display)}.text-2xl{font-size:var(--text-2xl);line-height:var(--tw-leading,var(--text-2xl--line-height))}.text-3xl{font-size:var(--text-3xl);line-height:var(--tw-leading,var(--text-3xl--line-height))}.text-4xl{font-size:var(--text-4xl);line-height:var(--tw-leading,var(--text-4xl--line-height))}.text-7xl{font-size:var(--text-7xl);line-height:var(--tw-leading,var(--text-7xl--line-height))}.text-base{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height))}.text-lg{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height))}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.text-xl{font-size:var(--text-xl);line-height:var(--tw-leading,var(--text-xl--line-height))}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}.text-\[10px\]{font-size:10px}.leading-\[1\.04\]{--tw-leading:1.04;line-height:1.04}.leading-\[1\.08\]{--tw-leading:1.08;line-height:1.08}.leading-\[3rem\]{--tw-leading:3rem;line-height:3rem}.leading-none{--tw-leading:1;line-height:1}.leading-relaxed{--tw-leading:var(--leading-relaxed);line-height:var(--leading-relaxed)}.leading-snug{--tw-leading:var(--leading-snug);line-height:var(--leading-snug)}.leading-tight{--tw-leading:var(--leading-tight);line-height:var(--leading-tight)}.font-medium{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.font-semibold{--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.tracking-\[-0\.01em\]{--tw-tracking:-.01em;letter-spacing:-.01em}.tracking-\[-0\.02em\]{--tw-tracking:-.02em;letter-spacing:-.02em}.tracking-tight{--tw-tracking:var(--tracking-tight);letter-spacing:var(--tracking-tight)}.tracking-wide{--tw-tracking:var(--tracking-wide);letter-spacing:var(--tracking-wide)}.tracking-wider{--tw-tracking:var(--tracking-wider);letter-spacing:var(--tracking-wider)}.whitespace-nowrap{white-space:nowrap}.text-\[color\:var\(--color-brand\)\]{color:var(--color-brand)}.text-\[color\:var\(--color-ink\)\]{color:var(--color-ink)}.text-\[color\:var\(--color-ink\)\]\/40{color:#141b2466}@supports (color:color-mix(in lab, red, red)){.text-\[color\:var\(--color-ink\)\]\/40{color:color-mix(in oklab, var(--color-ink) 40%, transparent)}}.text-\[color\:var\(--color-ink\)\]\/60{color:#141b2499}@supports (color:color-mix(in lab, red, red)){.text-\[color\:var\(--color-ink\)\]\/60{color:color-mix(in oklab, var(--color-ink) 60%, transparent)}}.text-\[color\:var\(--color-muted\)\]{color:var(--color-muted)}.text-\[color\:var\(--color-muted\)\]\/50{color:#69737d80}@supports (color:color-mix(in lab, red, red)){.text-\[color\:var\(--color-muted\)\]\/50{color:color-mix(in oklab, var(--color-muted) 50%, transparent)}}.text-white{color:var(--color-white)}.text-white\/50{color:#ffffff80}@supports (color:color-mix(in lab, red, red)){.text-white\/50{color:color-mix(in oklab, var(--color-white) 50%, transparent)}}.text-white\/60{color:#fff9}@supports (color:color-mix(in lab, red, red)){.text-white\/60{color:color-mix(in oklab, var(--color-white) 60%, transparent)}}.text-white\/70{color:#ffffffb3}@supports (color:color-mix(in lab, red, red)){.text-white\/70{color:color-mix(in oklab, var(--color-white) 70%, transparent)}}.text-white\/80{color:#fffc}@supports (color:color-mix(in lab, red, red)){.text-white\/80{color:color-mix(in oklab, var(--color-white) 80%, transparent)}}.text-white\/90{color:#ffffffe6}@supports (color:color-mix(in lab, red, red)){.text-white\/90{color:color-mix(in oklab, var(--color-white) 90%, transparent)}}.uppercase{text-transform:uppercase}.underline-offset-4{text-underline-offset:4px}.opacity-0{opacity:0}.opacity-5{opacity:.05}.opacity-10{opacity:.1}.opacity-15{opacity:.15}.shadow-2xl{--tw-shadow:0 25px 50px -12px var(--tw-shadow-color,#00000040);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-\[0_10px_30px_-10px_oklch\(0\.72_0\.13_75\/0\.6\)\]{--tw-shadow:0 10px 30px -10px var(--tw-shadow-color,color-mix(in oklch, var(--color-brand) 60%, transparent));box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-\[0_15px_40px_-10px_oklch\(0\.72_0\.13_75\/0\.5\)\]{--tw-shadow:0 15px 40px -10px var(--tw-shadow-color,color-mix(in oklch, var(--color-brand) 50%, transparent));box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-\[0_15px_40px_-12px_oklch\(0\.72_0\.13_75\/0\.55\)\]{--tw-shadow:0 15px 40px -12px var(--tw-shadow-color,color-mix(in oklch, var(--color-brand) 55%, transparent));box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-\[0_15px_40px_-15px_oklch\(0\.22_0\.02_250\/0\.3\)\]{--tw-shadow:0 15px 40px -15px var(--tw-shadow-color,oklch(22% .02 250/.3));box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-\[0_15px_40px_-15px_oklch\(0\.72_0\.13_75\/0\.6\)\]{--tw-shadow:0 15px 40px -15px var(--tw-shadow-color,color-mix(in oklch, var(--color-brand) 60%, transparent));box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-\[0_20px_40px_-15px_oklch\(0\.22_0\.02_250\/0\.25\)\]{--tw-shadow:0 20px 40px -15px var(--tw-shadow-color,oklch(22% .02 250/.25));box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-\[0_20px_50px_-10px_oklch\(0\.72_0\.13_75\/0\.6\)\]{--tw-shadow:0 20px 50px -10px var(--tw-shadow-color,color-mix(in oklch, var(--color-brand) 60%, transparent));box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-\[0_20px_50px_-20px_oklch\(0\.72_0\.13_75\/0\.25\)\]{--tw-shadow:0 20px 50px -20px var(--tw-shadow-color,color-mix(in oklch, var(--color-brand) 25%, transparent));box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-\[0_30px_60px_-25px_oklch\(0\.22_0\.02_250\/0\.3\)\]{--tw-shadow:0 30px 60px -25px var(--tw-shadow-color,oklch(22% .02 250/.3));box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-\[0_30px_60px_-30px_oklch\(0\.22_0\.02_250\/0\.2\)\]{--tw-shadow:0 30px 60px -30px var(--tw-shadow-color,oklch(22% .02 250/.2));box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-\[0_40px_80px_-30px_oklch\(0\.22_0\.02_250\/0\.25\)\]{--tw-shadow:0 40px 80px -30px var(--tw-shadow-color,oklch(22% .02 250/.25));box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-lg{--tw-shadow:0 10px 15px -3px var(--tw-shadow-color,#0000001a), 0 4px 6px -4px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-sm{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a), 0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-xl{--tw-shadow:0 20px 25px -5px var(--tw-shadow-color,#0000001a), 0 8px 10px -6px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.ring-2{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.ring-4{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.ring-\[color\:var\(--color-brand\)\]\/40{--tw-ring-color:#02389366}@supports (color:color-mix(in lab, red, red)){.ring-\[color\:var\(--color-brand\)\]\/40{--tw-ring-color:color-mix(in oklab, var(--color-brand) 40%, transparent)}}.ring-white{--tw-ring-color:var(--color-white)}.blur-2xl{--tw-blur:blur(var(--blur-2xl));filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.blur-3xl{--tw-blur:blur(var(--blur-3xl));filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.drop-shadow-\[0_4px_12px_rgba\(0\,0\,0\,0\.4\)\]{--tw-drop-shadow-size:drop-shadow(0 4px 12px var(--tw-drop-shadow-color,#0006));--tw-drop-shadow:var(--tw-drop-shadow-size);filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.drop-shadow-\[0_8px_20px_rgba\(0\,0\,0\,0\.45\)\]{--tw-drop-shadow-size:drop-shadow(0 8px 20px var(--tw-drop-shadow-color,#00000073));--tw-drop-shadow:var(--tw-drop-shadow-size);filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.filter{filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.backdrop-blur{--tw-backdrop-blur:blur(8px);-webkit-backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,)}.backdrop-blur-2xl{--tw-backdrop-blur:blur(var(--blur-2xl));-webkit-backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,)}.backdrop-blur-lg{--tw-backdrop-blur:blur(var(--blur-lg));-webkit-backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,)}.backdrop-blur-md{--tw-backdrop-blur:blur(var(--blur-md));-webkit-backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,)}.backdrop-blur-sm{--tw-backdrop-blur:blur(var(--blur-sm));-webkit-backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,)}.backdrop-blur-xl{--tw-backdrop-blur:blur(var(--blur-xl));-webkit-backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,)}.transition{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-all{transition-property:all;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.duration-300{--tw-duration:.3s;transition-duration:.3s}.duration-700{--tw-duration:.7s;transition-duration:.7s}.group-open\:rotate-45:is(:where(.group):is([open],:popover-open,:open) *){rotate:45deg}@media (hover:hover){.group-hover\:translate-x-0\.5:is(:where(.group):hover *){--tw-translate-x:calc(var(--spacing) * .5);translate:var(--tw-translate-x) var(--tw-translate-y)}.group-hover\:scale-105:is(:where(.group):hover *){--tw-scale-x:105%;--tw-scale-y:105%;--tw-scale-z:105%;scale:var(--tw-scale-x) var(--tw-scale-y)}.group-hover\:scale-\[1\.02\]:is(:where(.group):hover *){scale:1.02}.group-hover\:scale-\[1\.03\]:is(:where(.group):hover *){scale:1.03}}.open\:border-\[color\:var\(--color-brand\)\]\/30:is([open],:popover-open,:open){border-color:#0238934d}@supports (color:color-mix(in lab, red, red)){.open\:border-\[color\:var\(--color-brand\)\]\/30:is([open],:popover-open,:open){border-color:color-mix(in oklab, var(--color-brand) 30%, transparent)}}.open\:bg-white:is([open],:popover-open,:open){background-color:var(--color-white)}.open\:shadow-\[0_10px_30px_-15px_oklch\(0\.22_0\.02_250\/0\.15\)\]:is([open],:popover-open,:open){--tw-shadow:0 10px 30px -15px var(--tw-shadow-color,oklch(22% .02 250/.15));box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}@media (hover:hover){.hover\:scale-105:hover{--tw-scale-x:105%;--tw-scale-y:105%;--tw-scale-z:105%;scale:var(--tw-scale-x) var(--tw-scale-y)}.hover\:border-\[color\:var\(--color-brand\)\]:hover{border-color:var(--color-brand)}.hover\:bg-\[color\:var\(--color-brand\)\]:hover{background-color:var(--color-brand)}.hover\:bg-black\/30:hover{background-color:#0000004d}@supports (color:color-mix(in lab, red, red)){.hover\:bg-black\/30:hover{background-color:color-mix(in oklab, var(--color-black) 30%, transparent)}}.hover\:bg-white:hover{background-color:var(--color-white)}.hover\:bg-white\/20:hover{background-color:#fff3}@supports (color:color-mix(in lab, red, red)){.hover\:bg-white\/20:hover{background-color:color-mix(in oklab, var(--color-white) 20%, transparent)}}.hover\:text-\[color\:var\(--color-brand\)\]:hover{color:var(--color-brand)}.hover\:text-\[color\:var\(--color-ink\)\]:hover{color:var(--color-ink)}.hover\:text-white:hover{color:var(--color-white)}.hover\:underline:hover{text-decoration-line:underline}.hover\:shadow-\[0_20px_50px_-20px_oklch\(0\.22_0\.02_250\/0\.2\)\]:hover{--tw-shadow:0 20px 50px -20px var(--tw-shadow-color,oklch(22% .02 250/.2));box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.hover\:brightness-105:hover{--tw-brightness:brightness(105%);filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}}.disabled\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\:opacity-40:disabled{opacity:.4}.disabled\:shadow-none:disabled{--tw-shadow:0 0 #0000;box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}@media (min-width:40rem){.sm\:top-6{top:calc(var(--spacing) * 6)}.sm\:right-6{right:calc(var(--spacing) * 6)}.sm\:bottom-6{bottom:calc(var(--spacing) * 6)}.sm\:bottom-24{bottom:calc(var(--spacing) * 24)}.sm\:left-6{left:calc(var(--spacing) * 6)}.sm\:mt-32{margin-top:calc(var(--spacing) * 32)}.sm\:block{display:block}.sm\:hidden{display:none}.sm\:inline{display:inline}.sm\:inline-flex{display:inline-flex}.sm\:h-24{height:calc(var(--spacing) * 24)}.sm\:h-28{height:calc(var(--spacing) * 28)}.sm\:w-24{width:calc(var(--spacing) * 24)}.sm\:w-28{width:calc(var(--spacing) * 28)}.sm\:w-auto{width:auto}.sm\:flex-row{flex-direction:row}.sm\:flex-wrap{flex-wrap:wrap}.sm\:items-center{align-items:center}.sm\:gap-3{gap:calc(var(--spacing) * 3)}.sm\:gap-5{gap:calc(var(--spacing) * 5)}.sm\:p-6{padding:calc(var(--spacing) * 6)}.sm\:p-7{padding:calc(var(--spacing) * 7)}.sm\:p-10{padding:calc(var(--spacing) * 10)}.sm\:px-4{padding-inline:calc(var(--spacing) * 4)}.sm\:py-24{padding-block:calc(var(--spacing) * 24)}.sm\:py-28{padding-block:calc(var(--spacing) * 28)}.sm\:text-2xl{font-size:var(--text-2xl);line-height:var(--tw-leading,var(--text-2xl--line-height))}.sm\:text-3xl{font-size:var(--text-3xl);line-height:var(--tw-leading,var(--text-3xl--line-height))}.sm\:text-4xl{font-size:var(--text-4xl);line-height:var(--tw-leading,var(--text-4xl--line-height))}.sm\:text-5xl{font-size:var(--text-5xl);line-height:var(--tw-leading,var(--text-5xl--line-height))}.sm\:text-8xl{font-size:var(--text-8xl);line-height:var(--tw-leading,var(--text-8xl--line-height))}.sm\:text-lg{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height))}.sm\:text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}}@media (min-width:48rem){.md\:col-span-4{grid-column:span 4/span 4}.md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.md\:grid-cols-12{grid-template-columns:repeat(12,minmax(0,1fr))}.md\:gap-8{gap:calc(var(--spacing) * 8)}}@media (min-width:64rem){.lg\:order-1{order:1}.lg\:order-2{order:2}.lg\:col-span-5{grid-column:span 5/span 5}.lg\:col-span-6{grid-column:span 6/span 6}.lg\:col-span-7{grid-column:span 7/span 7}.lg\:block{display:block}.lg\:hidden{display:none}.lg\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.lg\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.lg\:grid-cols-12{grid-template-columns:repeat(12,minmax(0,1fr))}.lg\:gap-12{gap:calc(var(--spacing) * 12)}.lg\:gap-16{gap:calc(var(--spacing) * 16)}.lg\:pt-16{padding-top:calc(var(--spacing) * 16)}.lg\:pr-4{padding-right:calc(var(--spacing) * 4)}.lg\:pb-28{padding-bottom:calc(var(--spacing) * 28)}}}@property --tw-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-y{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-z{syntax:"*";inherits:false;initial-value:0}@property --tw-rotate-x{syntax:"*";inherits:false}@property --tw-rotate-y{syntax:"*";inherits:false}@property --tw-rotate-z{syntax:"*";inherits:false}@property --tw-skew-x{syntax:"*";inherits:false}@property --tw-skew-y{syntax:"*";inherits:false}@property --tw-space-y-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-space-x-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-gradient-position{syntax:"*";inherits:false}@property --tw-gradient-from{syntax:"<color>";inherits:false;initial-value:#0000}@property --tw-gradient-via{syntax:"<color>";inherits:false;initial-value:#0000}@property --tw-gradient-to{syntax:"<color>";inherits:false;initial-value:#0000}@property --tw-gradient-stops{syntax:"*";inherits:false}@property --tw-gradient-via-stops{syntax:"*";inherits:false}@property --tw-gradient-from-position{syntax:"<length-percentage>";inherits:false;initial-value:0%}@property --tw-gradient-via-position{syntax:"<length-percentage>";inherits:false;initial-value:50%}@property --tw-gradient-to-position{syntax:"<length-percentage>";inherits:false;initial-value:100%}@property --tw-leading{syntax:"*";inherits:false}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-tracking{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-blur{syntax:"*";inherits:false}@property --tw-brightness{syntax:"*";inherits:false}@property --tw-contrast{syntax:"*";inherits:false}@property --tw-grayscale{syntax:"*";inherits:false}@property --tw-hue-rotate{syntax:"*";inherits:false}@property --tw-invert{syntax:"*";inherits:false}@property --tw-opacity{syntax:"*";inherits:false}@property --tw-saturate{syntax:"*";inherits:false}@property --tw-sepia{syntax:"*";inherits:false}@property --tw-drop-shadow{syntax:"*";inherits:false}@property --tw-drop-shadow-color{syntax:"*";inherits:false}@property --tw-drop-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-drop-shadow-size{syntax:"*";inherits:false}@property --tw-backdrop-blur{syntax:"*";inherits:false}@property --tw-backdrop-brightness{syntax:"*";inherits:false}@property --tw-backdrop-contrast{syntax:"*";inherits:false}@property --tw-backdrop-grayscale{syntax:"*";inherits:false}@property --tw-backdrop-hue-rotate{syntax:"*";inherits:false}@property --tw-backdrop-invert{syntax:"*";inherits:false}@property --tw-backdrop-opacity{syntax:"*";inherits:false}@property --tw-backdrop-saturate{syntax:"*";inherits:false}@property --tw-backdrop-sepia{syntax:"*";inherits:false}@property --tw-duration{syntax:"*";inherits:false}@property --tw-scale-x{syntax:"*";inherits:false;initial-value:1}@property --tw-scale-y{syntax:"*";inherits:false;initial-value:1}@property --tw-scale-z{syntax:"*";inherits:false;initial-value:1}@keyframes ping{75%,to{opacity:0;transform:scale(2)}}

html { scroll-behavior: smooth; }
    body {
      background: var(--color-cream);
      color: var(--color-ink);
      font-family: var(--font-sans);
      font-feature-settings: "ss01", "cv11";
      margin: 0;
    }
    .font-display { font-family: var(--font-display); }
    @keyframes ping {
      75%, 100% { transform: scale(2); opacity: 0; }
    }
    .animate-ping { animation: ping 1.5s cubic-bezier(0,0,0.2,1) infinite; }
    @keyframes fadeSlide {
      from { opacity: 0; transform: translateY(8px); }
      to { opacity: 1; transform: translateY(0); }
    }
    .animate-fade-slide { animation: fadeSlide .4s ease-out both; }

/* Quiz-spezifische Animationen und Custom Styles */
  @keyframes quizFadeSlide {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
  }
  .quiz-animate-fade-slide { animation: quizFadeSlide .45s cubic-bezier(0.16, 1, 0.3, 1) both; }

  @keyframes quizPulseRing {
    0% { transform: scale(0.95); opacity: 1; }
    100% { transform: scale(1.5); opacity: 0; }
  }
  .quiz-pulse-ring::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 9999px;
    background: var(--color-brand);
    animation: quizPulseRing 1.8s cubic-bezier(0,0,0.2,1) infinite;
    z-index: -1;
  }

  .quiz-option input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
  }
  .quiz-option label {
    cursor: pointer;
    transition: all .2s ease;
  }
  .quiz-option input[type="radio"]:focus-visible + label {
    outline: 2px solid var(--color-brand);
    outline-offset: 2px;
  }
  .quiz-option input[type="radio"]:checked + label {
    border-color: var(--color-brand);
    background: color-mix(in oklch, var(--color-brand) 6%, transparent);
    box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-brand) 15%, transparent);
  }
  .quiz-option input[type="radio"]:checked + label .check-circle {
    background: var(--color-brand);
    border-color: var(--color-brand);
  }
  .quiz-option input[type="radio"]:checked + label .check-circle svg {
    opacity: 1;
  }
  .quiz-option label:hover {
    border-color: color-mix(in oklch, var(--color-brand) 50%, transparent);
    transform: translateY(-1px);
  }

  .progress-fill {
    transition: width .5s cubic-bezier(0.16, 1, 0.3, 1);
  }
/* ============================================================
   BOOKING SECTION – Custom Calendar UI (HighLevel API direkt)
   ============================================================ */
.sb-booking {
  margin-top: 1.5rem;
  font-family: var(--font-sans, 'Inter', sans-serif);
  color: var(--color-ink);
}
.sb-booking [hidden] { display: none !important; }

/* ===== Smart-Suggest Card ===== */
.sb-suggest {
  position: relative;
  border-radius: 1.5rem;
  overflow: hidden;
  background: linear-gradient(135deg, color-mix(in oklch, var(--color-brand) 12%, transparent), color-mix(in oklch, var(--color-brand) 4%, transparent));
  border: 1px solid color-mix(in oklch, var(--color-brand) 25%, transparent);
  box-shadow:
    0 1px 0 0 oklch(100% 0 0 / .8) inset,
    0 30px 60px -30px color-mix(in oklch, var(--color-brand) 35%, transparent);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
}
.sb-suggest__inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1.25rem;
  padding: 1.25rem 1.5rem;
}
.sb-suggest__icon {
  width: 3rem; height: 3rem;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 9999px;
  background: var(--color-brand);
  color: #fff;
  box-shadow: 0 8px 24px -8px color-mix(in oklch, var(--color-brand) 55%, transparent);
}
.sb-suggest__icon svg { width: 1.5rem; height: 1.5rem; }
.sb-suggest__eyebrow {
  font-size: .75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--color-brand);
}
.sb-suggest__title {
  margin-top: .15rem;
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--color-ink);
  line-height: 1.3;
}
.sb-suggest__meta {
  margin-top: .25rem;
  font-size: .8rem;
  color: var(--color-muted);
}
.sb-suggest__cta {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .85rem 1.5rem;
  border-radius: 2px;
  background: var(--color-brand);
  color: #fff;
  font-weight: 600;
  font-size: .95rem;
  border: 0;
  cursor: pointer;
  box-shadow: 0 8px 24px -8px color-mix(in oklch, var(--color-brand) 55%, transparent);
  transition: transform .15s ease, box-shadow .15s ease;
}
.sb-suggest__cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 32px -8px color-mix(in oklch, var(--color-brand) 55%, transparent);
}
.sb-suggest__cta svg { width: 1.1rem; height: 1.1rem; }

/* ===== Divider ===== */
.sb-divider {
  margin: 2rem 0 1.25rem;
  display: flex;
  align-items: center;
  text-align: center;
  font-size: .8rem;
  color: var(--color-muted);
}
.sb-divider::before,
.sb-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--color-line);
}
.sb-divider span { padding: 0 1rem; }

/* ===== Week-Navigation ===== */
.sb-weeknav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}
.sb-weeknav__label {
  font-size: .95rem;
  font-weight: 600;
  color: var(--color-ink);
  letter-spacing: -.01em;
}
.sb-weeknav__btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.5rem; height: 2.5rem;
  border-radius: 9999px;
  border: 1px solid var(--color-line);
  background: #fff;
  color: var(--color-ink);
  cursor: pointer;
  transition: all .15s ease;
}
.sb-weeknav__btn:hover {
  border-color: var(--color-brand);
  color: var(--color-brand);
  transform: translateY(-1px);
}
.sb-weeknav__btn svg { width: 1.1rem; height: 1.1rem; }

/* ===== Day-Pills ===== */
.sb-days {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: .5rem;
  margin-bottom: 1.25rem;
}
.sb-day {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .15rem;
  padding: .75rem .25rem;
  border-radius: 1rem;
  border: 1px solid var(--color-line);
  background: #fff;
  cursor: pointer;
  transition: all .18s cubic-bezier(.4, 0, .2, 1);
  font-family: inherit;
}
.sb-day__wd {
  font-size: .7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--color-muted);
}
.sb-day__num {
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--color-ink);
  line-height: 1;
}
.sb-day__slots {
  font-size: .65rem;
  font-weight: 500;
  color: var(--color-brand);
  margin-top: .1rem;
}
.sb-day:hover:not(.is-disabled) {
  border-color: var(--color-brand);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px -8px oklch(22% .02 250 / .15);
}
.sb-day.is-active {
  background: var(--color-brand);
  border-color: var(--color-brand);
  box-shadow: 0 10px 24px -8px color-mix(in oklch, var(--color-brand) 50%, transparent);
}
.sb-day.is-active .sb-day__wd,
.sb-day.is-active .sb-day__num,
.sb-day.is-active .sb-day__slots { color: #fff; }
.sb-day.is-today:not(.is-active) {
  outline: 2px solid color-mix(in oklch, var(--color-brand) 25%, transparent);
  outline-offset: -2px;
}
.sb-day.is-disabled {
  opacity: .4;
  cursor: not-allowed;
  background: oklch(95% .005 250 / .5);
}
.sb-day.is-disabled .sb-day__slots { color: var(--color-muted); }

/* Skeleton */
.sb-day--skeleton {
  height: 5.25rem;
  background: linear-gradient(90deg, oklch(95% .005 250) 25%, oklch(98% .002 250) 50%, oklch(95% .005 250) 75%);
  background-size: 200% 100%;
  animation: sb-skeleton 1.4s infinite linear;
  border: none;
}
@keyframes sb-skeleton {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ===== Slots ===== */
.sb-slots-wrap { margin-bottom: 1rem; }
.sb-slots-label {
  font-size: .85rem;
  font-weight: 600;
  color: var(--color-muted);
  margin-bottom: .65rem;
}
.sb-slots {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(5.5rem, 1fr));
  gap: .5rem;
}
.sb-slot {
  padding: .65rem .25rem;
  border-radius: .75rem;
  border: 1px solid var(--color-line);
  background: #fff;
  color: var(--color-ink);
  font-weight: 500;
  font-size: .9rem;
  cursor: pointer;
  transition: all .15s ease;
  font-family: inherit;
}
.sb-slot:hover {
  border-color: var(--color-brand);
  color: var(--color-brand);
  transform: translateY(-1px);
}
.sb-slot.is-active {
  background: var(--color-brand);
  border-color: var(--color-brand);
  color: #fff;
  box-shadow: 0 6px 16px -6px color-mix(in oklch, var(--color-brand) 50%, transparent);
}

/* ===== Empty State ===== */
.sb-empty {
  padding: 2rem 1.25rem;
  border-radius: 1rem;
  border: 1px dashed var(--color-line);
  text-align: center;
  background: rgb(246 245 242 / .5);
  color: var(--color-muted);
  font-size: .95rem;
}
.sb-empty a { color: var(--color-brand); font-weight: 600; }

/* ===== Quick-Skip-Hint zur nächsten Woche bei voll-Woche ===== */
.sb-week-hint {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin: -.5rem auto 1rem;
  padding: .55rem 1rem;
  border: 0;
  border-radius: 9999px;
  background: color-mix(in oklch, var(--color-brand) 10%, transparent);
  color: var(--color-brand);
  font-size: .82rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s ease, transform .15s ease;
  font-family: inherit;
}
.sb-week-hint:hover {
  background: color-mix(in oklch, var(--color-brand) 20%, transparent);
  transform: translateY(-1px);
}
.sb-week-hint svg { width: .9rem; height: .9rem; }
/* Centered container */
.sb-booking .sb-week-hint {
  display: flex;
  margin-left: auto;
  margin-right: auto;
  width: fit-content;
}

/* ===== Anchor Confirmation ===== */
.sb-form-area {
  margin-top: 1.75rem;
}
.sb-form-area.is-entering .sb-anchor,
.sb-form-area.is-entering .sb-form {
  animation: sb-slide-in .45s cubic-bezier(.2, .8, .2, 1) both;
}
.sb-form-area.is-entering .sb-form { animation-delay: .08s; }
@keyframes sb-slide-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.sb-anchor {
  display: flex; align-items: center; gap: 1rem;
  padding: 1rem 1.25rem;
  border-radius: 1.25rem;
  background: linear-gradient(135deg, color-mix(in oklch, var(--color-brand) 8%, transparent), color-mix(in oklch, var(--color-brand) 2%, transparent));
  border: 1px solid color-mix(in oklch, var(--color-brand) 20%, transparent);
  margin-bottom: 1.25rem;
}
.sb-anchor__check {
  width: 2rem; height: 2rem;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 9999px;
  background: var(--color-brand);
  color: #fff;
  flex-shrink: 0;
}
.sb-anchor__check svg { width: 1rem; height: 1rem; }
.sb-anchor__text { flex: 1; min-width: 0; }
.sb-anchor__eyebrow {
  font-size: .7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--color-brand);
}
.sb-anchor__when {
  margin-top: .1rem;
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-ink);
}
.sb-anchor__change {
  background: none;
  border: 0;
  color: var(--color-muted);
  font-size: .85rem;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  padding: .25rem .5rem;
  font-family: inherit;
}
.sb-anchor__change:hover { color: var(--color-ink); }

/* ===== Form ===== */
.sb-form {
  background: #fff;
  border-radius: 1.5rem;
  padding: 1.75rem;
  border: 1px solid var(--color-line);
  box-shadow: 0 30px 60px -40px oklch(22% .02 250 / .2);
}
.sb-honey { display: none; }
.sb-retry { margin-top: .85rem; display: inline-flex; align-items: center; justify-content: center; padding: .6rem 1.3rem; border-radius: 2px; background: var(--color-brand); color: #fff; border: 0; font-weight: 600; font-size: .95rem; cursor: pointer; }
.sb-retry:hover { filter: brightness(1.08); }

.sb-field { margin-bottom: 1.25rem; }
.sb-field:last-of-type { margin-bottom: 0; }
.sb-field__label {
  display: block;
  font-size: .85rem;
  font-weight: 600;
  color: var(--color-ink);
  margin-bottom: .5rem;
}
.sb-field__hint {
  color: var(--color-muted);
  font-weight: 400;
  font-size: .8rem;
}
.sb-field__error {
  margin-top: .35rem;
  font-size: .8rem;
  color: oklch(55% .22 25);
}
.sb-field__note {
  margin-top: .3rem;
  font-size: .75rem;
  color: var(--color-muted);
  line-height: 1.45;
}

/* Inputs */
.sb-input {
  width: 100%;
  padding: .85rem 1rem;
  border-radius: .75rem;
  border: 1px solid var(--color-line);
  background: #fff;
  font-size: 1rem;
  font-family: inherit;
  color: var(--color-ink);
  transition: border-color .15s ease, box-shadow .15s ease;
}
/* Bewusst NICHT var(--color-muted): der Token wurde fuer Fliesstext auf #454d48 gehoben
   (Lesbarkeit 50+, siehe Dateiende). Ein Placeholder ist aber kein Lesetext, sondern ein
   zurueckgenommener Hinweis – er muss vom ausgefuellten Wert (--color-ink) unterscheidbar
   bleiben. Mit dem Token faellt der Unterschied Hinweis-vs-Wert von 2,60:1 auf 1,79:1,
   der Placeholder liest sich dann wie ein bereits gefuelltes Feld. #5c6560 = der alte
   Muted-Wert, 6,03:1 auf Weiss, weiterhin AA. */
.sb-input::placeholder { color: #5c6560; }
.sb-input:focus {
  outline: 0;
  border-color: var(--color-brand);
  box-shadow: 0 0 0 4px color-mix(in oklch, var(--color-brand) 15%, transparent);
}

/* Phone */
.sb-phone {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--color-line);
  border-radius: .75rem;
  overflow: hidden;
  background: #fff;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.sb-phone:focus-within {
  border-color: var(--color-brand);
  box-shadow: 0 0 0 4px color-mix(in oklch, var(--color-brand) 15%, transparent);
}
.sb-phone__prefix {
  display: inline-flex; align-items: center;
  padding: 0 .9rem;
  background: #f7f6f4;
  color: var(--color-muted);
  font-size: .9rem;
  border-right: 1px solid var(--color-line);
  font-variant-numeric: tabular-nums;
}
.sb-input--phone { border: 0; border-radius: 0; }
.sb-input--phone:focus { box-shadow: none; }

/* Segmented (Pill-Toggles) */
.sb-segmented {
  display: inline-flex;
  background: #f1f0ed;
  border-radius: 9999px;
  padding: .25rem;
  gap: .25rem;
}
.sb-segmented__btn {
  padding: .55rem 1.25rem;
  border-radius: 9999px;
  border: 0;
  background: transparent;
  color: var(--color-muted);
  font-weight: 500;
  font-size: .9rem;
  cursor: pointer;
  transition: all .15s ease;
  font-family: inherit;
}
.sb-segmented__btn:hover { color: var(--color-ink); }
.sb-segmented__btn.is-active {
  background: #fff;
  color: var(--color-ink);
  box-shadow: 0 2px 8px -2px oklch(22% .02 250 / .15);
}

/* Submit-Button */
.sb-submit {
  margin-top: 1.5rem;
  width: 100%;
  padding: 1rem 1.5rem;
  border-radius: 2px;
  background: var(--color-brand);
  color: #fff;
  font-weight: 600;
  font-size: 1.05rem;
  border: 0;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  font-family: inherit;
  box-shadow: 0 12px 28px -10px color-mix(in oklch, var(--color-brand) 60%, transparent);
  transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease;
}
.sb-submit:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 16px 32px -10px color-mix(in oklch, var(--color-brand) 60%, transparent);
}
.sb-submit:disabled { opacity: .85; cursor: wait; }
.sb-submit__label,
.sb-submit__loading {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
}
.sb-submit__icon { width: 1.1rem; height: 1.1rem; }
.sb-submit__loading { display: none; }
.sb-submit.is-loading .sb-submit__label { display: none; }
.sb-submit.is-loading .sb-submit__loading { display: inline-flex; }

.sb-fineprint {
  margin-top: .85rem;
  font-size: .75rem;
  text-align: center;
  color: var(--color-muted);
}
.sb-fineprint a {
  color: var(--color-muted);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.sb-form__error {
  margin-top: 1rem;
  padding: .75rem 1rem;
  border-radius: .75rem;
  background: oklch(95% .03 25);
  border: 1px solid oklch(80% .12 25);
  color: oklch(40% .15 25);
  font-size: .9rem;
}

/* ===== Spinner ===== */
.sb-spinner {
  display: inline-block;
  width: 1rem; height: 1rem;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: sb-spin .7s linear infinite;
}
.sb-spinner--large { width: 2rem; height: 2rem; border-width: 3px; }
@keyframes sb-spin { to { transform: rotate(360deg); } }

.sb-loading-state {
  text-align: center;
  padding: 3rem 1.5rem;
  color: var(--color-muted);
}
.sb-loading-state p { margin-top: 1rem; }

/* ===== Mobile-Tweaks ===== */
@media (max-width: 640px) {
  .sb-suggest__inner {
    grid-template-columns: 1fr;
    gap: 1rem;
    padding: 1.25rem;
    text-align: center;
  }
  .sb-suggest__icon { margin: 0 auto; }
  .sb-suggest__cta { width: 100%; justify-content: center; }
  .sb-days { gap: .35rem; }
  .sb-day { padding: .6rem .15rem; border-radius: .85rem; }
  .sb-day__num { font-size: 1.15rem; }
  .sb-day__wd, .sb-day__slots { font-size: .62rem; }
  .sb-slots { grid-template-columns: repeat(auto-fill, minmax(4.5rem, 1fr)); gap: .4rem; }
  .sb-form { padding: 1.25rem; border-radius: 1.25rem; }
  .sb-anchor { padding: .85rem 1rem; border-radius: 1rem; }
  .sb-anchor__when { font-size: .92rem; }
}

/* ============================================================
   SCHLAF-QUIZ FUNNEL (Meta-Ads-LP) – sbq-* Components
   ============================================================ */

.sbq-funnel { font-family: var(--font-sans, 'Inter', sans-serif); }

/* Question Card */
.sbq-card {
  background: #fff;
  border: 1px solid var(--color-line);
  border-radius: 1.75rem;
  padding: 1.75rem 1.5rem;
  box-shadow: 0 30px 80px -40px oklch(22% .02 250 / .25);
}
@media (min-width: 640px) {
  .sbq-card { padding: 2.25rem 2rem; }
}

/* Fade-In Animation für Frage-Wechsel */
.sbq-fade-in { animation: sbq-fade-slide .35s cubic-bezier(.16, 1, .3, 1) both; }
@keyframes sbq-fade-slide {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Option-Button (Antwort-Card) */
.sbq-option {
  display: flex;
  align-items: center;
  gap: 1rem;
  width: 100%;
  padding: 1rem 1.15rem;
  border-radius: 1rem;
  border: 1.5px solid var(--color-line);
  background: #fff;
  color: var(--color-ink);
  cursor: pointer;
  transition: all .15s ease;
  text-align: left;
  font-family: inherit;
}
.sbq-option:hover {
  border-color: color-mix(in oklch, var(--color-brand) 55%, transparent);
  transform: translateY(-1px);
  box-shadow: 0 12px 24px -12px oklch(22% .02 250 / .2);
}
.sbq-option:focus-visible {
  outline: 0;
  border-color: var(--color-brand);
  box-shadow: 0 0 0 4px color-mix(in oklch, var(--color-brand) 20%, transparent);
}
.sbq-option.is-active {
  border-color: var(--color-brand);
  background: color-mix(in oklch, var(--color-brand) 8%, transparent);
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-brand) 15%, transparent);
}
.sbq-option__icon {
  font-size: 1.5rem;
  line-height: 1;
  flex-shrink: 0;
  width: 2.25rem;
  text-align: center;
}
.sbq-option__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: .1rem;
}
.sbq-option__label {
  font-size: .98rem;
  font-weight: 500;
  color: var(--color-ink);
  line-height: 1.35;
}
.sbq-option__hint {
  font-size: .8rem;
  color: var(--color-muted);
  line-height: 1.3;
}
.sbq-option__check {
  shrink-0: 1;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 9999px;
  border: 1.5px solid var(--color-line);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: transparent;
  transition: all .15s ease;
  flex-shrink: 0;
}
.sbq-option.is-active .sbq-option__check {
  background: var(--color-brand);
  border-color: var(--color-brand);
  color: #fff;
}
.sbq-option__check svg { width: 0.9rem; height: 0.9rem; }

/* Calculating Spinner */
.sbq-spinner {
  display: inline-block;
  width: 2.5rem;
  height: 2.5rem;
  border: 3px solid color-mix(in oklch, var(--color-brand) 25%, transparent);
  border-top-color: var(--color-brand);
  border-radius: 50%;
  animation: sbq-spin 0.9s linear infinite;
}
@keyframes sbq-spin { to { transform: rotate(360deg); } }

/* Result Card */
.sbq-result-card {
  background: linear-gradient(135deg, #f8f7f4 0%, #fff 100%);
  border: 1px solid color-mix(in oklch, var(--color-brand) 25%, transparent);
  border-radius: 2rem;
  padding: 2rem 1.75rem;
  box-shadow:
    0 0 0 1px color-mix(in oklch, var(--color-brand) 8%, transparent) inset,
    0 30px 80px -30px color-mix(in oklch, var(--color-brand) 35%, transparent);
  animation: sbq-fade-slide .55s cubic-bezier(.2, .9, .2, 1) both;
}
@media (min-width: 640px) {
  .sbq-result-card { padding: 2.75rem 2.5rem; }
}

/* Mobile-Tweaks für Option-Buttons */
@media (max-width: 480px) {
  .sbq-option { padding: .9rem 1rem; gap: .75rem; }
  .sbq-option__icon { font-size: 1.3rem; width: 1.8rem; }
  .sbq-option__label { font-size: .92rem; }
  .sbq-option__check { width: 1.5rem; height: 1.5rem; }
  .sbq-option__check svg { width: 0.8rem; height: 0.8rem; }
}

/* ============================================================
   QUIZ-FUNNEL Layout-Garantien (failsafe ohne Tailwind-Arbitrary)
   ============================================================ */

/* Header: korrektes Padding sicherstellen */
body.sbq-funnel > header {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}
body.sbq-funnel > header > div {
  padding-left: 0;
  padding-right: 0;
}

/* Quiz-Hero: Mindesthöhe + Vertical Centering hart setzen */
body.sbq-funnel #quiz {
  min-height: calc(100svh - 60px);
  min-height: 88vh; /* fallback für ältere Browser ohne svh */
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 3rem;
  padding-bottom: 3rem;
}
@media (min-width: 640px) {
  body.sbq-funnel #quiz {
    padding-top: 5rem;
    padding-bottom: 5rem;
  }
}
@media (min-width: 1024px) {
  body.sbq-funnel #quiz {
    padding-top: 6rem;
    padding-bottom: 6rem;
  }
}

/* Quiz-Container: zentriert + max-width
   Wichtig: NUR den Content-Wrapper treffen, NICHT den Gradient-Overlay
   (sonst würde der absolute Overlay auf 42rem geschrumpft + max-width hindert
   den gradient daran die volle Section auszufüllen) */
body.sbq-funnel #quiz > div:not([aria-hidden]) {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: 42rem; /* = max-w-2xl */
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  position: relative;
  z-index: 1;
}

/* Intro-Block: vertikales Spacing zwischen Headline und Trust-Text */
body.sbq-funnel #sbq-intro h1 {
  margin-top: 0.75rem;
  line-height: 1.05;
}

/* Wenn alle Sektionen unter dem Quiz noch hidden sind und Footer direkt
   anschliesst → mind. einen kleinen Puffer */
body.sbq-funnel footer {
  margin-top: 0;
}

/* ============================================================
   QUIZ-FUNNEL Refinements (Result-Detail + Option-Spacing)
   ============================================================ */

/* Spacing zwischen Quiz-Antwort-Optionen (Tailwind space-y-2.5
   wurde nicht in die kompilierte CSS aufgenommen) */
body.sbq-funnel .sbq-option + .sbq-option {
  margin-top: 0.75rem;
}

/* ===== Result-Card: Sections (Layer 1 + Layer 2) ===== */
.sbq-result-section {
  margin-top: 2rem;
  padding-top: 1.75rem;
  border-top: 1px solid color-mix(in oklch, var(--color-brand) 18%, transparent);
}
.sbq-result-section__label {
  display: flex;
  align-items: center;
  gap: .65rem;
  font-size: .78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--color-ink);
  margin-bottom: 1rem;
}
.sbq-result-section__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 9999px;
  background: var(--color-brand);
  color: #fff;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: 0;
  flex-shrink: 0;
}

/* Layer 1: Matratzen-Specs (3 Features) */
.sbq-result-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: .75rem;
}
.sbq-result-feature {
  display: flex;
  align-items: flex-start;
  gap: .9rem;
  padding: .9rem 1rem;
  border-radius: 1rem;
  background: #fff;
  border: 1px solid var(--color-line);
}
.sbq-result-feature__icon {
  flex-shrink: 0;
  font-size: 1.5rem;
  line-height: 1;
  width: 2.25rem;
  text-align: center;
}
.sbq-result-feature__body { flex: 1; min-width: 0; }
.sbq-result-feature__label {
  font-size: .95rem;
  font-weight: 600;
  color: var(--color-ink);
  line-height: 1.3;
}
.sbq-result-feature__sub {
  font-size: .82rem;
  color: var(--color-muted);
  line-height: 1.4;
  margin-top: .15rem;
}

/* Layer 2: Consult-Checks (3 Items) */
.sbq-result-checks {
  display: flex;
  flex-direction: column;
  gap: .65rem;
}
.sbq-result-check {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
}
.sbq-result-check__icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 9999px;
  background: var(--color-brand);
  color: #fff;
}
.sbq-result-check__icon svg { width: .8rem; height: .8rem; }
.sbq-result-check__text {
  font-size: .92rem;
  color: var(--color-ink);
  line-height: 1.5;
  padding-top: .1rem;
}

/* Fineprint unter CTA */
.sbq-result-fineprint {
  margin-top: .85rem;
  font-size: .78rem;
  color: var(--color-muted);
  text-align: center;
}

/* Sekundär-Aktion: Quiz neu starten – klar sichtbar, dem Haupt-CTA untergeordnet */
.sbq-result-restart {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin-top: 1.15rem;
  padding: .7rem 1.3rem;
  border: 1.5px solid color-mix(in oklch, var(--color-ink) 22%, transparent);
  border-radius: 9999px;
  background: #fff;
  color: var(--color-ink);
  font-size: .92rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color .2s, color .2s, transform .2s, box-shadow .2s;
}
.sbq-result-restart svg { width: 1.05rem; height: 1.05rem; }
.sbq-result-restart:hover {
  border-color: var(--color-brand);
  color: var(--color-brand);
  transform: translateY(-1px);
  box-shadow: 0 10px 24px -16px color-mix(in oklch, var(--color-brand) 60%, transparent);
}
.sbq-result-restart:focus-visible {
  outline: 2px solid var(--color-brand);
  outline-offset: 2px;
}

/* ============================================================
   HERO-BILD FOKUS (CMB2-Picker → object-position)
   Wirkt auf das echte <img> – auch wenn ein WebP-/Bild-Optimierer
   (z. B. LiteSpeed) das <img> in ein <picture> wrappt und Klassen/Style
   auf das <picture> verschiebt (dort wirkt object-fit/-position NICHT).
   Der Fokuswert kommt als CSS-Variable --sb-focus vom <picture>/<img>.
   ============================================================ */
.sbh-video picture {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.sbh-video img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--sb-focus, 50% 50%);
}

/* ============================================================
   QUIZ-FUNNEL Result – Liegedruck-Messung Visual + Explainer
   ============================================================ */

/* 3-Step Process Image-Strip */
.sbq-result-process {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .75rem;
  margin: .5rem 0 1.25rem 0;
}
.sbq-process-step {
  margin: 0;
  border-radius: 1rem;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--color-line);
  display: flex;
  flex-direction: column;
}
.sbq-process-step img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4/3;
  object-fit: cover;
}
.sbq-process-step figcaption {
  display: flex;
  align-items: center;
  gap: .45rem;
  padding: .55rem .7rem;
  font-size: .72rem;
  font-weight: 600;
  color: var(--color-ink);
  background: #f8f7f4;
  letter-spacing: -0.005em;
  line-height: 1.2;
}
.sbq-process-step__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.05rem;
  height: 1.05rem;
  border-radius: 9999px;
  background: var(--color-brand);
  color: #fff;
  font-size: .65rem;
  font-weight: 700;
  flex-shrink: 0;
}

/* Explainer Text */
.sbq-result-process-desc {
  margin-top: 0;
  margin-bottom: 1.5rem;
  padding: 1rem 1.15rem;
  border-radius: 1rem;
  background: linear-gradient(135deg, color-mix(in oklch, var(--color-brand) 8%, transparent), color-mix(in oklch, var(--color-brand) 2%, transparent));
  border: 1px solid color-mix(in oklch, var(--color-brand) 20%, transparent);
  font-size: .92rem;
  line-height: 1.55;
  color: var(--color-ink);
}
.sbq-result-process-desc strong {
  color: var(--color-brand);
  font-weight: 700;
}

/* Sub-Label vor Consult-Checks */
.sbq-result-checks-label {
  font-size: .85rem;
  font-weight: 600;
  color: var(--color-ink);
  margin-bottom: .7rem;
}

/* Mobile: Process-Strip kleiner */
@media (max-width: 480px) {
  .sbq-result-process { gap: .5rem; }
  .sbq-process-step figcaption {
    padding: .45rem .5rem;
    font-size: .65rem;
    gap: .3rem;
  }
  .sbq-process-step__num { width: .9rem; height: .9rem; font-size: .58rem; }
  .sbq-result-process-desc { font-size: .85rem; padding: .85rem 1rem; }
}

/* ============================================================
   QUIZ-FUNNEL Result – Modell-Empfehlungs-Badge (Vitario-Modell)
   ============================================================ */
.sbq-result-model {
  padding: .9rem 1.1rem;
  margin-bottom: 1rem;
  border-radius: 1rem;
  background: linear-gradient(135deg, color-mix(in oklch, var(--color-brand) 12%, transparent), color-mix(in oklch, var(--color-brand) 4%, transparent));
  border: 1px solid color-mix(in oklch, var(--color-brand) 25%, transparent);
}
.sbq-result-model__main {
  display: flex;
  align-items: baseline;
  gap: .75rem;
  flex-wrap: wrap;
}
.sbq-result-model__eyebrow {
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--color-muted);
  flex-shrink: 0;
}
.sbq-result-model__name {
  font-family: var(--font-display, "Fraunces", Georgia, serif);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--color-ink);
  letter-spacing: -0.01em;
  line-height: 1.15;
}
.sbq-result-model__note {
  margin-top: .35rem;
  font-size: .82rem;
  color: var(--color-muted);
  line-height: 1.4;
}
@media (max-width: 480px) {
  .sbq-result-model { padding: .75rem 1rem; }
  .sbq-result-model__main { gap: .25rem; flex-direction: column; align-items: flex-start; }
  .sbq-result-model__name { font-size: 1.05rem; }
}


/* ============================================================
   HERO 2026 – ruhiger, zentrierter Mobile-First-Hero (sbh-*)
   Eigene Klassen statt neuer Tailwind-Utilities: style.css ist
   ein kompiliertes Artefakt, ein Rebuild steht hier nicht bereit.
   ============================================================ */
.sbh-wrap {
  max-width: 80rem; /* = max-w-7xl, gleiche Breite wie die übrigen Sektionen */
  margin: 0 auto;
  padding: 2.25rem 1.5rem 3rem;
}
/* Ab Tablet: Sektion läuft voll breit, aber Button/Video bleiben Elemente,
   keine 1200px-Balken. */
@media (min-width: 640px) {
  .sbh-cta   { max-width: 24rem; margin-left: auto; margin-right: auto; }
  .sbh-video { max-width: 56rem; margin-left: auto; margin-right: auto; }
}
.sbh-eyebrow {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--color-brand);
  text-align: center;
}
.sbh-h1 {
  margin: 1.25rem 0 0;
  font-family: var(--font-display);
  font-weight: 500;
  /* Fallback fuer Browser ohne min()/calc-Division. */
  font-size: 2.25rem;
  /* Fluide Groesse, mobil auf (Viewport - 3rem) / 10.75, gedeckelt auf 3rem (greift ab ~564px).
     HISTORIE, damit der Teiler niemanden mehr in die Irre fuehrt: 10.75 war exakt auf den
     alten Wortlaut („Endlich erholt und" / „schmerzfreier aufwachen") gerechnet, damit der
     mobil GENAU zweizeilig bricht. Dieser Wortlaut existiert nicht mehr, der Teiler ist
     seitdem nur noch ein fluider Groessen-Deckel ohne Zeilen-Bedeutung.
     Gemessen mit dem heutigen Text (Newsreader 500, 390px): 31,8px, 6 Zeilen, CTA bleibt
     bei 647px trotzdem ueber der Falz – deshalb bewusst NICHT neu getunt.
     ponytail: Kein Nachrechnen auf Verdacht. Wer die mobile Zeilenzahl wirklich steuern will,
     kuerzt hero_h1 – die Schriftgroesse ist dafuer das falsche Werkzeug.
     Desktop-Umbrueche steuert der Redakteur per Enter im Feld (-> <br class="hidden sm:block">,
     siehe index.php); mobil sind die ausgeblendet, dort bricht die Zeile von selbst. */
  font-size: min(calc((100vw - 3rem) / 10.75), 3rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--color-ink);
  text-align: center;
}
@media (min-width: 640px) {
  .sbh-h1 { font-size: 3rem; }
}
.sbh-sub {
  margin: 1.25rem auto 0;
  max-width: 34rem;
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-muted);
  text-align: center;
}
.sbh-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-top: 1.5rem;
  padding: 1rem 1.5rem;
  border-radius: 2px;
  background: var(--color-brand);
  color: #fff;
  font-weight: 600;
  font-size: 1.0625rem;
  text-decoration: none;
  transition: filter .15s ease;
}
.sbh-cta:hover { filter: brightness(1.12); }
/* Erhöhte Proof-Pill – „laut" durch Elevation (weiße Karte + Schatten), nicht durch Farbe. */
.sbh-proof {
  display: flex;
  align-items: center;
  gap: 12px;
  width: fit-content;
  max-width: 100%;
  margin: 1.25rem auto 0;
  padding: 8px 18px;
  background: #fff;
  border: 1px solid var(--color-line, #efe7d6);
  border-radius: 16px;
  box-shadow: 0 12px 28px -16px rgba(20, 27, 36, .32);
  text-align: left;
}
/* Enger links, damit die Avatare an den Rand rücken – nur wenn welche da sind (sonst symmetrisch). */
.sbh-proof--ava { padding-left: 10px; }
.sbh-proof__avatars { display: inline-flex; flex: none; }
.sbh-proof__av {
  width: 30px; height: 30px; border-radius: 50%;
  border: 2px solid #fff; background: var(--color-line, #efe7d6);
  object-fit: cover; display: block;
}
.sbh-proof__av + .sbh-proof__av { margin-left: -10px; }
.sbh-proof__meta { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.sbh-proof__rating { font-size: 13px; line-height: 1.3; color: var(--color-ink, #141b24); text-decoration: none; }
.sbh-proof__rating strong { font-weight: 600; }
a.sbh-proof__rating:hover { text-decoration: underline; text-underline-offset: 2px; }
/* 13px statt 12px – die Pill bleibt kompakt (Avatare geben die Hoehe vor), aber
   der Social-Proof ist Lesetext. 6,03:1 auf Weiss. */
.sbh-proof__text { font-size: 13px; line-height: 1.35; color: var(--color-muted, #69737d); }
/* Der EINZIGE verbleibende Gold-Ton der Seite (Vorgabe). */
.sbh-star { color: #b07a0a; }
.sbh-video {
  position: relative;
  display: block;
  width: 100%;
  margin-top: 1.75rem;
  padding: 0;
  border: 0;
  /* Bewusste Ausnahme vom 2px-Radius der Buttons: das Vorschau-Bild liest sich
     als Medien-Karte (wie die Testimonial-Videos, rounded-2xl), nicht als Button. */
  border-radius: 1rem;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  background: var(--color-line);
  cursor: pointer;
}
/* Bild-/Picture-Füllung + --sb-focus konsumiert der Block „HERO-BILD FOKUS" weiter oben. */
.sbh-video__shade {
  position: absolute;
  inset: 0;
  /* Kräftiger als die ursprünglichen .65: an der Caption-Position (12px-Meta,
     ~20-30px über der Unterkante) braucht weiße Schrift auch über hellem Bild
     AA-Kontrast – der Verlauf bleibt optisch ein dunkler Bodensatz. */
  background: linear-gradient(to top, rgba(20,25,22,.85) 0%, rgba(20,25,22,.45) 45%, transparent 75%);
}
.sbh-video__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -60%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 3.5rem;
  width: 3.5rem;
  border-radius: 9999px;
  background: rgba(255,255,255,.92);
  color: var(--color-brand);
  box-shadow: 0 10px 30px -10px rgba(0,0,0,.4);
}
.sbh-video__play svg { width: 1.35rem; height: 1.35rem; margin-left: 2px; }
.sbh-video__caption {
  position: absolute;
  inset: auto 0 0 0;
  padding: 1rem 1.1rem;
  text-align: left;
}
.sbh-video__quote {
  display: block;
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.125rem;
  line-height: 1.3;
  color: #fff;
}
.sbh-video__meta {
  display: block;
  margin: .3rem 0 0;
  font-size: .75rem;
  /* .92 statt .75: bei hellem Bild unter der Caption fiele der Kontrast sonst unter AA. */
  color: rgba(255,255,255,.92);
}
/* Bewusst ohne Trennlinie darunter – ein Strich las sich wie ein Seitenende. */
.sbh-trust {
  margin-top: 1.5rem;
  font-size: 12px;
  text-align: center;
  color: #8a857a;
}
/* Microcopy direkt unter dem Hero-CTA (Vertrauens-Trio).
   14px statt 12px: das ist Ueberzeugungstext, kein Kleingedrucktes.
   Farbe von #8a857a auf den Muted-Token: #8a857a auf Weiss ergab nur 3,67:1 und
   verfehlte damit WCAG AA (4,5:1 gilt hier, denn „large text" beginnt erst bei
   24px bzw. 18,5px bold). --color-muted #5c6560 liefert 6,03:1. */
.sbh-cta-micro {
  margin-top: .85rem;
  font-size: 14px;
  text-align: center;
  color: var(--color-muted);
}
/* Termin-CTA im Sticky-Header, ab lg (dort ist die Sticky-Bar per lg:hidden weg).
   KEIN `display` hier: die Sichtbarkeit steuern `hidden` + `lg:block` im Markup, und
   dieser Block ist unlayered – ein display-Wert wuerde das `hidden` mobil ueberstimmen.
   Vertikal zentriert ueber line-height statt flex (gleiches Muster wie die Sticky-Bar,
   index.php: `block ... h-12 leading-[3rem]`) – `lg:inline-flex` ist nicht kompiliert. */
.sbh-hcta {
  height: 2.5rem;
  line-height: 2.5rem;
  padding: 0 1.1rem;
  border-radius: 2px;
  background: var(--color-brand);
  color: #fff;
  font-weight: 600;
  font-size: .875rem;
  white-space: nowrap;
  text-decoration: none;
  transition: filter .15s ease;
}
.sbh-hcta:hover { filter: brightness(1.12); }
/* ============================================================
   PROBLEM-KARTE „Kennen Sie das?" (Design-Handoff 5b, Sektion 1b)
   Eigene Klassen statt neuer Tailwind-Utilities: style.css ist ein
   kompiliertes Artefakt, ein Rebuild steht hier nicht bereit.
   Die Handoff-Tokens decken sich exakt mit den Theme-Tokens
   (brand #023893, ink #1e2521, muted #5c6560, line #eceae4) – nur das
   warme Beige der Box hat keinen Token und steht deshalb hier direkt.
   Mobil = Bild oben + eine Spalte; ab 768px = Bild links + Text rechts.
   ============================================================ */
.sbp-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  /* Breite folgt dem Sektions-Container (max-w-7xl), damit die Karte buendig mit
     allen anderen Sektionen steht – der Handoff nennt 760px ausdruecklich nur als
     Referenz und verlangt die Anpassung an die Content-Breite. */
  margin: 0 auto;
  background: #fff;
  /* 4px kam aus dem Handoff; alle uebrigen Karten der Seite sind rounded-2xl
     (1rem). Seiten-Einheitlichkeit schlaegt hier die Handoff-Vorgabe. */
  border-radius: 1rem;
  box-shadow: 0 2px 24px rgba(30, 37, 33, .10);
}
/* .sbp-card__img traegt die BOX-Geometrie und sitzt entweder auf dem <img> (roh)
   oder – wenn ein WebP-/Bild-Optimierer wie LiteSpeed das <img> in ein <picture>
   wrappt – auf dem <picture>. Genau dieselbe Falle wie beim Hero (siehe Block
   „HERO-BILD FOKUS" oben): auf einem <picture> wirkt object-fit/-position NICHT.
   Deshalb fuellt die Regel darunter zusaetzlich ein evtl. eingewrapptes <img>.
   Live nachgewiesen: <picture class="…" …><source …><img …></picture>. */
/* Fokus kommt als --sb-focus vom Element (Feld „Problem-Karte – Bild-Fokus"), wie beim
   Hero. Der Wert war vorher auf 50% 30% hartkodiert – getunt auf ein Portraet mit Gesicht
   im oberen Drittel. Beim Motivwechsel (gestapelte Matratzen, Motiv unten) zeigte der
   Ausschnitt mobil zu ~60% leere Wand und schnitt die Matratzen unten ab. Ein Bildausschnitt
   haengt am Bild, nicht am Stylesheet – deshalb jetzt Feld statt Konstante.
   Fallback 50% 100% = bodenbuendig, passt zum aktuellen Motiv. */
.sbp-card__img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: var(--sb-focus, 50% 100%);
}
.sbp-card picture.sbp-card__img > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--sb-focus, 50% 100%);
}
/* __body traegt kein Top-Padding mehr: mobil sitzt darueber das Bild (randlos), und
   den oberen Abstand der Karte setzt jetzt .sbp-head. */
.sbp-card__body {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 32px 26px 40px;
}
/* Eigenes Kind der Karte (nicht mehr in __body), damit mobil Headline VOR Bild steht.
   Padding hier statt in __body – ohne das klebte die Headline am Kartenrand. */
.sbp-head { display: flex; flex-direction: column; gap: 12px; padding: 32px 26px 24px; }
.sbp-eyebrow {
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--color-brand);
}
.sbp-h2 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 30px;
  line-height: 1.12;
  color: var(--color-ink);
}
.sbp-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.sbp-list__item { display: flex; gap: 12px; align-items: flex-start; }
.sbp-check { flex: none; color: var(--color-brand); font-size: 16px; line-height: 1.5; }
.sbp-list__text { font-size: 15px; line-height: 1.5; color: #454d48; }
.sbp-box {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 20px;
  border-radius: 3px;
  background: #f4f1ea; /* warmes Beige – bewusst kein --color-cream (zu hell auf Weiss) */
}
.sbp-box__lead { margin: 0; font-size: 14px; line-height: 1.5; color: var(--color-muted); }
.sbp-box__lead strong { font-weight: 600; color: var(--color-ink); }
.sbp-box__answer {
  margin: 0;
  font-family: var(--font-display);
  font-size: 22px;
  color: var(--color-brand);
}
.sbp-closer {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  font-weight: 600;
  color: var(--color-ink);
}
@media (min-width: 768px) {
  /* Explizite Platzierung statt DOM-Folge: im Markup steht head VOR dem Bild (fuer Mobil),
     auf dem Desktop gehoert das Bild aber nach links neben BEIDE Textbloecke. */
  .sbp-card { display: grid; grid-template-columns: 300px 1fr; }
  .sbp-card--noimg { grid-template-columns: 1fr; }
  .sbp-card__img { grid-column: 1; grid-row: 1 / span 2; height: 100%; aspect-ratio: auto; }
  .sbp-head      { grid-column: 2; grid-row: 1; gap: 14px; padding: 56px 48px 0; }
  .sbp-card__body { grid-column: 2; grid-row: 2; gap: 36px; padding: 36px 48px 56px; }
  /* Ohne Bild gibt es keine Spalte 2 – sonst rutschten beide Bloecke ins Leere. */
  .sbp-card--noimg .sbp-head,
  .sbp-card--noimg .sbp-card__body { grid-column: 1; }
  .sbp-eyebrow { font-size: 13px; }
  .sbp-h2 { font-size: 40px; line-height: 1.1; }
  .sbp-list { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 40px; }
  .sbp-list__item { gap: 14px; border-top: 1px solid var(--color-line); padding-top: 16px; }
  .sbp-check { font-size: 18px; }
  .sbp-list__text { font-size: 16px; }
  .sbp-box { flex-direction: row; align-items: center; gap: 32px; padding: 28px 32px; }
  .sbp-box__lead { flex: 1; font-size: 16px; line-height: 1.6; }
  .sbp-box__answer { font-size: 26px; white-space: nowrap; }
  .sbp-closer { font-size: 16px; }
}

/* ============================================================
   SEKTION „Für Paare" (Design-Handoff, Split-Diagramm)
   Wie die Mechanik-Sektion: KEINE Card, Breite kommt vom
   Sektions-Container. Hintergrund cream liegt an der Sektion
   (Nachbarn sind weiss), nicht hier.
   ============================================================ */
.sbpa-row { display: flex; flex-direction: column; gap: 20px; }
.sbpa-eyebrow {
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--color-brand);
}
.sbpa-h2 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 32px;
  line-height: 1.12;
  color: var(--color-ink);
}
.sbpa-figur { margin: 4px 0; }
.sbpa-svg { width: 100%; height: auto; display: block; }
.sbpa-caption { margin: 8px 0 0; font-size: 11px; color: #8a857a; text-align: center; }
.sbpa-text { margin: 0; font-size: 16px; line-height: 1.65; color: var(--color-muted); }
.sbpa-trust { margin: 0; font-size: 13px; line-height: 1.5; color: var(--color-muted); text-align: center; }
.sbpa-trust strong { font-weight: 600; color: var(--color-ink); }
.sbpa-cta-row { display: flex; flex-direction: column; align-items: stretch; gap: 16px; margin-top: 32px; }
/* Mobil Markup-Reihenfolge: CTA zuerst, Schlusssatz DARUNTER. Das fruehere
   order:-1 (Handoff) stellte den Satz ueber den Button – unerwuenscht. */
@media (min-width: 768px) {
  /* Links Eyebrow/H2/Absaetze, rechts das Diagramm ueber alle Textzeilen.
     Explizite Platzierung, damit die DOM-Reihenfolge mobil (Diagramm VOR den
     Absaetzen) unabhaengig davon stimmen kann. */
  .sbpa-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 64px;
    row-gap: 16px;
    align-items: center;
  }
  .sbpa-eyebrow { grid-column: 1; grid-row: 1; font-size: 13px; }
  .sbpa-h2      { grid-column: 1; grid-row: 2; font-size: 46px; line-height: 1.06; }
  /* Eigene Klassen statt :nth-of-type — das zaehlt ALLE <p> der Reihe mit
     (auch den Eyebrow) und vertauschte dadurch Problem- und Loesungsabsatz. */
  .sbpa-text { font-size: 17px; }
  .sbpa-text--1 { grid-column: 1; grid-row: 3; }
  .sbpa-text--2 { grid-column: 1; grid-row: 4; }
  .sbpa-figur   { grid-column: 2; grid-row: 1 / span 4; align-self: center; margin: 0; }
  .sbpa-cta-row { flex-direction: row; align-items: center; gap: 28px; margin-top: 40px; }
  /* Desktop: Button links, Trust-Text rechts (Markup-Reihenfolge). */
  .sbpa-trust { font-size: 15px; text-align: left; }
}

/* ============================================================
   MECHANIK „So kann eine Matratze passgenau sein" (Design-Handoff)
   HARTE VORGABE: KEINE Card. Die Sektion liegt direkt auf dem
   Seitenhintergrund; nur die beiden inneren Boxen haben Rahmen/Flaeche.
   Breite kommt vom Sektions-Container (max-w-7xl), nicht von hier.
   Drei Farben des Handoffs haben keinen Theme-Token und stehen deshalb
   direkt: #9a968b (grau „Von der Stange"), #f5f8fe (helle Flaeche),
   #c9d6ee (Rahmen der Mass-Box).
   ============================================================ */
.sbm-h2 {
  margin: 0 0 40px;
  max-width: 45rem;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 32px;
  line-height: 1.12;
  color: var(--color-ink);
}
.sbm-row { display: flex; flex-direction: column; gap: 24px; }
.sbm-row + .sbm-row { margin-top: 40px; }
.sbm-boxen { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.sbm-box {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 18px;
  border-radius: 4px;
  border: 1px solid var(--color-line);
}
.sbm-box--mass { border-color: #c9d6ee; background: #f5f8fe; }
.sbm-box__label { margin: 0; font-size: 13px; font-weight: 600; color: #9a968b; }
.sbm-box--mass .sbm-box__label { color: var(--color-brand); }
.sbm-box__zahl {
  margin: 0;
  font-family: var(--font-display);
  font-size: 34px;
  line-height: 1;
  color: #9a968b;
}
.sbm-box--mass .sbm-box__zahl { color: var(--color-brand); }
.sbm-box__text { margin: 0; font-size: 14px; line-height: 1.45; color: #9a968b; }
.sbm-box--mass .sbm-box__text { color: var(--color-ink); }
.sbm-erklaer { margin: 0; font-size: 16px; line-height: 1.65; color: var(--color-muted); }
.sbm-foto { display: block; width: 100%; height: auto; }
.sbm-info {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 28px;
  border-radius: 4px;
  background: #f5f8fe;
}
.sbm-info__titel { margin: 0; font-size: 17px; font-weight: 600; color: var(--color-ink); }
.sbm-info__text { margin: 0; font-size: 16px; line-height: 1.55; color: var(--color-muted); }
.sbm-merksatz {
  margin: 0;
  font-family: var(--font-display);
  font-size: 21px;
  line-height: 1.25;
  color: var(--color-brand);
}
/* Beweis-Zitat unter dem Merksatz. Cardfrei (Handoff-Vorgabe fuer den Mechanik-Block):
   die Markenlinie links traegt die Abgrenzung, keine Box, kein Schatten. */
.sbm-beweis { margin: 40px 0 0; padding: 0 0 0 20px; border-left: 2px solid var(--color-brand); }
.sbm-beweis__zitat {
  margin: 0;
  font-family: var(--font-display);
  font-size: 20px;
  line-height: 1.4;
  color: var(--color-ink);
}
.sbm-beweis__quelle { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.sbm-beweis__name { font-size: 14px; font-weight: 600; color: var(--color-ink); }
@media (min-width: 768px) {
  .sbm-beweis__zitat { font-size: 22px; }
}
.sbm-cta-row { display: flex; flex-direction: column; align-items: stretch; gap: 16px; margin-top: 40px; }
.sbm-trust { font-size: 13px; color: var(--color-muted); text-align: center; }
.sbm-trust__sterne { color: var(--color-brand); letter-spacing: 1px; }
.sbm-trust__stark { font-weight: 600; color: var(--color-ink); }
@media (min-width: 768px) {
  .sbm-h2 { font-size: 44px; line-height: 1.1; }
  .sbm-row { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
  /* Erste Reihe: links Boxen (Zeile 1) + Erklaerabsatz (Zeile 2), rechts das Foto
     ueber beide Zeilen. Explizite Platzierung, damit die DOM-Reihenfolge mobil
     (Boxen, Foto, Absatz) unabhaengig davon stimmen kann. */
  .sbm-row--split { grid-template-rows: auto auto; gap: 24px 56px; }
  .sbm-row--split .sbm-boxen  { grid-column: 1; grid-row: 1; }
  .sbm-row--split .sbm-erklaer { grid-column: 1; grid-row: 2; }
  .sbm-row--split .sbm-foto   { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
  .sbm-box { padding: 24px; }
  .sbm-box__zahl { font-size: 46px; }
  .sbm-erklaer { font-size: 17px; }
  .sbm-merksatz { font-size: 28px; }
  .sbm-cta-row { flex-direction: row; align-items: center; gap: 28px; margin-top: 48px; }
  .sbm-trust { font-size: 15px; text-align: left; }
}

/* ============================================================
   KARTE „Individuell statt Massenware" (Design-Handoff, Sektion 2)
   Teilt sich Chrome und den <picture>-Schutz mit der Problem-Karte oben –
   deshalb Selektor-Gruppen statt einer zweiten Kopie.
   ABWEICHUNG vom Handoff: Der Handoff zeigt die weisse Karte auf #ECE9E2.
   Diese Sektion ist aber bg-white (der Band-Rhythmus cream/white haengt dran:
   cream faerben hiesse DREI cream-Baender in Folge). Weiss auf Weiss traegt
   der 10%-Schatten allein nicht – daher zusaetzlich eine 1px-Kontur, wie sie
   die Simulator-Karten derselben Sektion bereits nutzen.
   ============================================================ */
.sbi-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--color-line);
  /* wie .sbp-card: Seiten-Einheitlichkeit statt der 4px aus dem Handoff */
  border-radius: 1rem;
  box-shadow: 0 2px 24px rgba(30, 37, 33, .10);
}
/* Box-Geometrie sitzt auf <img> ODER – bei LiteSpeed-WebP – auf dem <picture>;
   die zweite Regel fuellt das eingewrappte <img> (object-fit wirkt auf <picture> nicht). */
.sbi-card__img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: 50% 45%;
  /* Markup ist Text-dann-Bild (Desktop: Text links, Foto rechts, ohne order).
     Mobil verlangt der Handoff das Foto OBEN – deshalb hier vorziehen und im
     Grid unten wieder zuruecksetzen. */
  order: -1;
}
.sbi-card picture.sbi-card__img > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 45%;
}
.sbi-card__body {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 32px 26px 40px;
}
.sbi-head { display: flex; flex-direction: column; gap: 12px; }
.sbi-eyebrow {
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--color-brand);
}
.sbi-h2 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 30px;
  line-height: 1.12;
  color: var(--color-ink);
}
.sbi-body { margin: 0; font-size: 15px; line-height: 1.6; color: var(--color-muted); }
.sbi-body strong { font-weight: 600; color: var(--color-ink); }
@media (min-width: 768px) {
  .sbi-card { display: grid; grid-template-columns: 1fr 1fr; }
  .sbi-card--noimg { grid-template-columns: 1fr; }
  /* Text links, Foto rechts – Reihenfolge kommt aus dem Markup, kein order noetig. */
  .sbi-card__body { gap: 20px; padding: 56px 48px; justify-content: center; }
  .sbi-eyebrow { font-size: 13px; }
  .sbi-h2 { font-size: 40px; line-height: 1.1; }
  .sbi-body { font-size: 16px; line-height: 1.65; }
  /* order zurueck auf Markup-Reihenfolge: Text Spalte 1, Foto Spalte 2. */
  .sbi-card__img { order: 0; height: 100%; aspect-ratio: auto; object-position: 55% 50%; }
  .sbi-card picture.sbi-card__img > img { object-position: 55% 50%; }
}

/* Markenblau #023893 ist auf den dunklen Ink-Flächen (Garantie-Sektion,
   USP-Karte, Quiz-Ergebnis, Footer) unlesbar – dort übernimmt eine helle
   CD-Variante desselben Blaus. */
.bg-\[color\:var\(--color-ink\)\] .text-\[color\:var\(--color-brand\)\] {
  color: #9db9e8;
}
.bg-\[color\:var\(--color-ink\)\] .hover\:text-\[color\:var\(--color-brand\)\]:hover {
  color: #9db9e8;
}

/* Sektions-Rhythmus gestrafft: 56px mobil / 80px ab Tablet statt 80/112px.
   Zusammen mit der dezenten Hintergrund-Alternierung (--color-cream #f7f6f3)
   liest sich die Seite als durchgehende Bänder statt großer Weißflächen. */
section[class*="py-20"] {
  padding-top: 3.5rem;
  padding-bottom: 3.5rem;
}
@media (min-width: 640px) {
  section[class*="py-20"] {
    padding-top: 5rem;
    padding-bottom: 5rem;
  }
}

/* Kein Funnel-Look: Pill-Text-CTAs (Tailwind rounded-full) werden seitenweit
   eckig (2px) – markenfarbene UND ink-farbene (Kalender-Buttons der Danke-Seite),
   damit keine gemischten Radien in einer Button-Gruppe entstehen. Der Substring-
   Match trifft bewusst auch hover:bg-…-Varianten (weiße CTAs mit Brand-Hover).
   Icon-/Avatar-Kreise (span/div/img) bleiben unberührt – nur a/button. */
a[class*="rounded-full"][class*="bg-[color:var(--color-brand)]"],
button[class*="rounded-full"][class*="bg-[color:var(--color-brand)]"],
a[class*="rounded-full"][class*="bg-[color:var(--color-ink)]"],
#quiz-restart {
  border-radius: 2px;
}

/* Quiz-Restart-Button: seine Utility-Klassen (py-2.5, hover:*, focus-visible:*)
   wurden nie kompiliert – Preflight setzt button{padding:0}. Minimal-Styling hier. */
#quiz-restart { padding: .55rem 1.25rem; }
#quiz-restart:hover {
  border-color: var(--color-brand);
  color: var(--color-brand);
}
/* mb-7 ist im kompilierten Tailwind nicht enthalten (Markup nutzt es aber). */
.mb-7 { margin-bottom: 1.75rem; }

/* Sticky-Bar: deckender als bg-white/80, sonst fällt die Microcopy über dunklen
   Sektionen (Garantie/Footer) unter AA-Kontrast. */
[data-sticky-mobile-bar] { background: rgba(255,255,255,.95); }

/* Die höhere Sticky-Bar (Button + Microcopy ≈ 93px) verdeckt am Seitenende sonst
   die letzte Footer-Zeile – mobil unten Platz schaffen (Bar ist lg:hidden).
   :has()-Scope: nur Seiten, die die Bar überhaupt rendern (nur die LP) –
   Unterseiten (Impressum, Quiz, Danke) behalten ihre 4rem. */
@media (max-width: 1023.98px) {
  body:has([data-sticky-mobile-bar]) footer > div { padding-bottom: 9rem !important; }
}

/* ============================================================
   LESBARKEIT 50+ – Fliesstext eine Stufe dunkler
   ============================================================
   Kernsegment ist 45–70 (Ableitung aus dem Produkt, nicht aus Analytics).
   #5c6560 bestand AA (6,03:1 auf Weiss), war aber der hellste zulaessige Ton.
   #454d48 hebt auf 8,72:1 (Weiss) bzw. 8,07:1 (Cream) – AAA auf beiden Baendern.
   Kein neuer Ton im System: der Wert steht bereits in .sbp-list__text.

   Bewusst der GLOBALE Token statt Einzelregeln – aber der Blast-Radius ist groesser, als
   er beim Anfassen aussieht: 79 Fundstellen in 8 Templates (index.php 43, page-schlaf-quiz 18,
   page-termin-erfolgreich-gebucht 8, page-danke-fuers-feedback 3, 404/impressum/datenschutz je 2,
   theme-fields.php 1) plus 29 Regeln in diesem Tail. Zusammen 108 Stellen, nicht nur die LP.
   Einzeln nachziehen haette den Token als Token entwertet – wer aber eine Stelle findet, an der
   Grau ZUSTAND bedeutet statt Lesetext, koppelt sie explizit ab, statt sie mitzuziehen.

   Bereits abgekoppelt: .sb-input::placeholder – dort ist der helle Ton Absicht
   (Hinweis vs. ausgefuellter Wert), nicht Nachlaessigkeit.
   Geprueft und bewusst mitgezogen: .sb-day.is-disabled .sb-day__slots (Elternteil daempft per
   opacity:.4) und .sb-segmented__btn (Aktiv-Zustand haengt an background+shadow, nicht an der
   Textfarbe) – beide bleiben unterscheidbar.

   Ueberschreibt @layer theme (Z.68): dieser Block ist unlayered und schlaegt jede
   layered Regel, unabhaengig von Spezifitaet. Deshalb hier und NICHT oben im
   kompilierten Teil – ein Rebuild wuerde die Aenderung dort still verschlucken.
   ponytail: ein Token statt 108 Fundstellen; Einzelregeln nur, wo Grau nachweislich
   Zustand kodiert (bisher genau eine: der Placeholder). */
:root { --color-muted: #454d48; }