@import url("/site-fonts.css?v=20260519-2");*,:before,:after,::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:#3b82f680;--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }*,:before,:after{box-sizing:border-box;border:0 solid #e5e7eb}:before,:after{--tw-content:""}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--font-sans),ui-sans-serif,system-ui,sans-serif;font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{line-height:inherit;margin:0}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;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-feature-settings:normal;font-variation-settings:normal;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;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}button,input,optgroup,select,textarea{font-feature-settings:inherit;font-variation-settings:inherit;font-family:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:#0000;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}ol,ul,menu{margin:0;padding:0;list-style:none}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder{opacity:1;color:#9ca3af}textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}button,[role=button]{cursor:pointer}:disabled{cursor:default}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}h1{letter-spacing:-.02em;font-size:2.25rem;font-weight:600;line-height:1.1}@media (min-width:768px){h1{letter-spacing:-.02em;font-size:3.2rem;line-height:1.05}}h2{letter-spacing:-.015em;font-size:1.9rem;font-weight:600;line-height:1.2}@media (min-width:768px){h2{letter-spacing:-.015em;font-size:2.4rem;line-height:1.15}}h3{font-size:1.35rem;font-weight:600;line-height:1.25}h4{font-size:1.15rem;font-weight:600;line-height:1.3}h1,h2,h3{text-wrap:balance}.sr-only{clip:rect(0,0,0,0);white-space:nowrap;border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.pointer-events-none{pointer-events:none}.\!visible{visibility:visible!important}.visible{visibility:visible}.invisible{visibility:hidden}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.sticky{position:sticky}.inset-0{inset:0}.inset-x-0{left:0;right:0}.inset-y-0{top:0;bottom:0}.-bottom-16{bottom:-4rem}.-bottom-20{bottom:-5rem}.-top-16{top:-4rem}.-top-20{top:-5rem}.-top-24{top:-6rem}.bottom-0{bottom:0}.bottom-4{bottom:1rem}.left-0{left:0}.left-1\/2{left:50%}.left-\[4\%\]{left:4%}.left-\[6\%\]{left:6%}.left-\[8\%\]{left:8%}.right-0{right:0}.right-4{right:1rem}.right-\[10\%\]{right:10%}.right-\[8\%\]{right:8%}.top-0{top:0}.top-1\/2{top:50%}.top-4{top:1rem}.top-full{top:100%}.z-40{z-index:40}.z-50{z-index:50}.z-\[118\]{z-index:118}.z-\[119\]{z-index:119}.z-\[120\]{z-index:120}.z-\[90\]{z-index:90}.order-1{order:1}.order-2{order:2}.order-first{order:-9999}.-mx-5{margin-left:-1.25rem;margin-right:-1.25rem}.mx-auto{margin-left:auto;margin-right:auto}.mb-4{margin-bottom:1rem}.mb-5{margin-bottom:1.25rem}.mb-6{margin-bottom:1.5rem}.mb-8{margin-bottom:2rem}.mb-\[5px\]{margin-bottom:5px}.ml-auto{margin-left:auto}.mr-2{margin-right:.5rem}.mt-0{margin-top:0}.mt-0\.5{margin-top:.125rem}.mt-1{margin-top:.25rem}.mt-10{margin-top:2.5rem}.mt-12{margin-top:3rem}.mt-14{margin-top:3.5rem}.mt-2{margin-top:.5rem}.mt-3{margin-top:.75rem}.mt-4{margin-top:1rem}.mt-5{margin-top:1.25rem}.mt-6{margin-top:1.5rem}.mt-8{margin-top:2rem}.mt-\[10px\]{margin-top:10px}.mt-auto{margin-top:auto}.line-clamp-2{-webkit-line-clamp:2;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.block{display:block}.inline{display:inline}.flex{display:flex}.inline-flex{display:inline-flex}.grid{display:grid}.hidden{display:none}.aspect-\[3\/2\]{aspect-ratio:3/2}.aspect-\[3\/4\]{aspect-ratio:3/4}.aspect-\[4\/5\]{aspect-ratio:4/5}.aspect-square{aspect-ratio:1}.aspect-video{aspect-ratio:16/9}.h-0\.5{height:.125rem}.h-1{height:.25rem}.h-10{height:2.5rem}.h-11{height:2.75rem}.h-12{height:3rem}.h-14{height:3.5rem}.h-16{height:4rem}.h-2\.5{height:.625rem}.h-20{height:5rem}.h-24{height:6rem}.h-3\.5{height:.875rem}.h-32{height:8rem}.h-4{height:1rem}.h-40{height:10rem}.h-44{height:11rem}.h-48{height:12rem}.h-5{height:1.25rem}.h-56{height:14rem}.h-6{height:1.5rem}.h-64{height:16rem}.h-7{height:1.75rem}.h-72{height:18rem}.h-8{height:2rem}.h-80{height:20rem}.h-9{height:2.25rem}.h-\[5\.5rem\]{height:5.5rem}.h-full{height:100%}.min-h-\[240px\]{min-height:240px}.min-h-\[260px\]{min-height:260px}.min-h-\[280px\]{min-height:280px}.min-h-\[50vh\]{min-height:50vh}.min-h-screen{min-height:100vh}.w-10{width:2.5rem}.w-11{width:2.75rem}.w-14{width:3.5rem}.w-2\.5{width:.625rem}.w-20{width:5rem}.w-28{width:7rem}.w-3\.5{width:.875rem}.w-32{width:8rem}.w-36{width:9rem}.w-4{width:1rem}.w-40{width:10rem}.w-44{width:11rem}.w-5{width:1.25rem}.w-56{width:14rem}.w-6{width:1.5rem}.w-64{width:16rem}.w-7{width:1.75rem}.w-72{width:18rem}.w-8{width:2rem}.w-80{width:20rem}.w-9{width:2.25rem}.w-\[1100px\]{width:1100px}.w-\[5\.5rem\]{width:5.5rem}.w-\[92\%\]{width:92%}.w-\[calc\(100vw-5\.5rem\)\]{width:calc(100vw - 5.5rem)}.w-auto{width:auto}.w-fit{width:fit-content}.w-full{width:100%}.w-max{width:max-content}.min-w-0{min-width:0}.max-w-2xl{max-width:42rem}.max-w-3xl{max-width:48rem}.max-w-4xl{max-width:56rem}.max-w-5xl{max-width:64rem}.max-w-6xl{max-width:72rem}.max-w-\[1200px\]{max-width:1200px}.max-w-\[1280px\]{max-width:1280px}.max-w-\[440px\]{max-width:440px}.max-w-\[calc\(100vw-48px\)\]{max-width:calc(100vw - 48px)}.max-w-sm{max-width:24rem}.max-w-xl{max-width:36rem}.flex-1{flex:1}.shrink-0{flex-shrink:0}.-translate-x-1\/2{--tw-translate-x:-50%;transform:translate(var(--tw-translate-x),var(--tw-translate-y))rotate(var(--tw-rotate))skewX(var(--tw-skew-x))skewY(var(--tw-skew-y))scaleX(var(--tw-scale-x))scaleY(var(--tw-scale-y))}.-translate-x-4{--tw-translate-x:-1rem;transform:translate(var(--tw-translate-x),var(--tw-translate-y))rotate(var(--tw-rotate))skewX(var(--tw-skew-x))skewY(var(--tw-skew-y))scaleX(var(--tw-scale-x))scaleY(var(--tw-scale-y))}.-translate-y-1\/2{--tw-translate-y:-50%;transform:translate(var(--tw-translate-x),var(--tw-translate-y))rotate(var(--tw-rotate))skewX(var(--tw-skew-x))skewY(var(--tw-skew-y))scaleX(var(--tw-scale-x))scaleY(var(--tw-scale-y))}.-translate-y-\[6px\]{--tw-translate-y:-6px;transform:translate(var(--tw-translate-x),var(--tw-translate-y))rotate(var(--tw-rotate))skewX(var(--tw-skew-x))skewY(var(--tw-skew-y))scaleX(var(--tw-scale-x))scaleY(var(--tw-scale-y))}.translate-x-4{--tw-translate-x:1rem;transform:translate(var(--tw-translate-x),var(--tw-translate-y))rotate(var(--tw-rotate))skewX(var(--tw-skew-x))skewY(var(--tw-skew-y))scaleX(var(--tw-scale-x))scaleY(var(--tw-scale-y))}.translate-y-\[6px\]{--tw-translate-y:6px;transform:translate(var(--tw-translate-x),var(--tw-translate-y))rotate(var(--tw-rotate))skewX(var(--tw-skew-x))skewY(var(--tw-skew-y))scaleX(var(--tw-scale-x))scaleY(var(--tw-scale-y))}.-rotate-45{--tw-rotate:-45deg;transform:translate(var(--tw-translate-x),var(--tw-translate-y))rotate(var(--tw-rotate))skewX(var(--tw-skew-x))skewY(var(--tw-skew-y))scaleX(var(--tw-scale-x))scaleY(var(--tw-scale-y))}.-rotate-90{--tw-rotate:-90deg;transform:translate(var(--tw-translate-x),var(--tw-translate-y))rotate(var(--tw-rotate))skewX(var(--tw-skew-x))skewY(var(--tw-skew-y))scaleX(var(--tw-scale-x))scaleY(var(--tw-scale-y))}.rotate-180{--tw-rotate:180deg;transform:translate(var(--tw-translate-x),var(--tw-translate-y))rotate(var(--tw-rotate))skewX(var(--tw-skew-x))skewY(var(--tw-skew-y))scaleX(var(--tw-scale-x))scaleY(var(--tw-scale-y))}.rotate-45{--tw-rotate:45deg;transform:translate(var(--tw-translate-x),var(--tw-translate-y))rotate(var(--tw-rotate))skewX(var(--tw-skew-x))skewY(var(--tw-skew-y))scaleX(var(--tw-scale-x))scaleY(var(--tw-scale-y))}.rotate-90{--tw-rotate:90deg;transform:translate(var(--tw-translate-x),var(--tw-translate-y))rotate(var(--tw-rotate))skewX(var(--tw-skew-x))skewY(var(--tw-skew-y))scaleX(var(--tw-scale-x))scaleY(var(--tw-scale-y))}.cursor-pointer{cursor:pointer}.resize-y{resize:vertical}.scroll-mt-28{scroll-margin-top:7rem}.list-disc{list-style-type:disc}.list-none{list-style-type:none}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-cols-\[56px_auto\]{grid-template-columns:56px auto}.grid-cols-\[auto_1fr_auto\]{grid-template-columns:auto 1fr auto}.grid-rows-\[0fr\]{grid-template-rows:0fr}.grid-rows-\[1fr\]{grid-template-rows:1fr}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.place-items-center{place-items:center}.items-start{align-items:flex-start}.items-center{align-items:center}.justify-start{justify-content:flex-start}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-1{gap:.25rem}.gap-10{gap:2.5rem}.gap-12{gap:3rem}.gap-2{gap:.5rem}.gap-2\.5{gap:.625rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.gap-5{gap:1.25rem}.gap-6{gap:1.5rem}.gap-8{gap:2rem}.gap-x-5{-moz-column-gap:1.25rem;column-gap:1.25rem}.gap-y-2{row-gap:.5rem}.space-y-1>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.25rem*calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.25rem*var(--tw-space-y-reverse))}.space-y-1\.5>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.375rem*calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.375rem*var(--tw-space-y-reverse))}.space-y-10>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(2.5rem*calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(2.5rem*var(--tw-space-y-reverse))}.space-y-2>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.5rem*calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.5rem*var(--tw-space-y-reverse))}.space-y-3>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.75rem*calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.75rem*var(--tw-space-y-reverse))}.space-y-4>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1rem*calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1rem*var(--tw-space-y-reverse))}.space-y-5>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1.25rem*calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1.25rem*var(--tw-space-y-reverse))}.space-y-6>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1.5rem*calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1.5rem*var(--tw-space-y-reverse))}.space-y-8>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(2rem*calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(2rem*var(--tw-space-y-reverse))}.divide-y>:not([hidden])~:not([hidden]){--tw-divide-y-reverse:0;border-top-width:calc(1px*calc(1 - var(--tw-divide-y-reverse)));border-bottom-width:calc(1px*var(--tw-divide-y-reverse))}.divide-slate\/10>:not([hidden])~:not([hidden]){border-color:#464c4e1a}.self-end{align-self:flex-end}.overflow-hidden{overflow:hidden}.overflow-visible{overflow:visible}.overflow-y-auto{overflow-y:auto}.whitespace-nowrap{white-space:nowrap}.rounded-\[10px\]{border-radius:10px}.rounded-\[20px\]{border-radius:20px}.rounded-\[6px\]{border-radius:6px}.rounded-\[8px\]{border-radius:8px}.rounded-full{border-radius:9999px}.rounded-none{border-radius:0}.rounded-xl{border-radius:12px}.border{border-width:1px}.border-b{border-bottom-width:1px}.border-r{border-right-width:1px}.border-t{border-top-width:1px}.\!border-\[\#4f5557\]{--tw-border-opacity:1!important;border-color:rgb(79 85 87/var(--tw-border-opacity,1))!important}.\!border-white\/25{border-color:#ffffff40!important}.border-\[\#4f5557\]{--tw-border-opacity:1;border-color:rgb(79 85 87/var(--tw-border-opacity,1))}.border-\[\#c7d9ea\]{--tw-border-opacity:1;border-color:rgb(199 217 234/var(--tw-border-opacity,1))}.border-emerald-200{--tw-border-opacity:1;border-color:rgb(167 243 208/var(--tw-border-opacity,1))}.border-rose-200{--tw-border-opacity:1;border-color:rgb(254 205 211/var(--tw-border-opacity,1))}.border-slate\/10{border-color:#464c4e1a}.border-slate\/15{border-color:#464c4e26}.border-slate\/20{border-color:#464c4e33}.border-slate\/25{border-color:#464c4e40}.border-white{--tw-border-opacity:1;border-color:rgb(255 255 255/var(--tw-border-opacity,1))}.border-white\/10{border-color:#ffffff1a}.border-white\/15{border-color:#ffffff26}.border-white\/20{border-color:#fff3}.border-white\/30{border-color:#ffffff4d}.border-white\/35{border-color:#ffffff59}.border-white\/45{border-color:#ffffff73}.border-white\/60{border-color:#fff9}.border-white\/70{border-color:#ffffffb3}.\!bg-\[\#0f4e75\]\/85{background-color:#0f4e75d9!important}.\!bg-\[\#25D366\]{--tw-bg-opacity:1!important;background-color:rgb(37 211 102/var(--tw-bg-opacity,1))!important}.\!bg-\[\#4f5557\]{--tw-bg-opacity:1!important;background-color:rgb(79 85 87/var(--tw-bg-opacity,1))!important}.\!bg-\[\#E1306C\]{--tw-bg-opacity:1!important;background-color:rgb(225 48 108/var(--tw-bg-opacity,1))!important}.\!bg-white{--tw-bg-opacity:1!important;background-color:rgb(255 255 255/var(--tw-bg-opacity,1))!important}.bg-\[\#00b7d8\]{--tw-bg-opacity:1;background-color:rgb(0 183 216/var(--tw-bg-opacity,1))}.bg-\[\#0f4e75\]\/60{background-color:#0f4e7599}.bg-\[\#0f4e75\]\/80{background-color:#0f4e75cc}.bg-\[\#1877F2\]{--tw-bg-opacity:1;background-color:rgb(24 119 242/var(--tw-bg-opacity,1))}.bg-\[\#1f8bcc\]{--tw-bg-opacity:1;background-color:rgb(31 139 204/var(--tw-bg-opacity,1))}.bg-\[\#1f8bcc\]\/10{background-color:#1f8bcc1a}.bg-\[\#1f8bcc\]\/5{background-color:#1f8bcc0d}.bg-\[\#1f8bcc\]\/90{background-color:#1f8bcce6}.bg-\[\#22a8ff\]{--tw-bg-opacity:1;background-color:rgb(34 168 255/var(--tw-bg-opacity,1))}.bg-\[\#25D366\]{--tw-bg-opacity:1;background-color:rgb(37 211 102/var(--tw-bg-opacity,1))}.bg-\[\#2f77a6\]{--tw-bg-opacity:1;background-color:rgb(47 119 166/var(--tw-bg-opacity,1))}.bg-\[\#313538\]{--tw-bg-opacity:1;background-color:rgb(49 53 56/var(--tw-bg-opacity,1))}.bg-\[\#454b4e\]{--tw-bg-opacity:1;background-color:rgb(69 75 78/var(--tw-bg-opacity,1))}.bg-\[\#464c4e\]{--tw-bg-opacity:1;background-color:rgb(70 76 78/var(--tw-bg-opacity,1))}.bg-\[\#4f5557\]{--tw-bg-opacity:1;background-color:rgb(79 85 87/var(--tw-bg-opacity,1))}.bg-\[\#595e60\]{--tw-bg-opacity:1;background-color:rgb(89 94 96/var(--tw-bg-opacity,1))}.bg-\[\#9ad5f0\]\/30{background-color:#9ad5f04d}.bg-\[\#9ad5f0\]\/35{background-color:#9ad5f059}.bg-\[\#9ad5f0\]\/40{background-color:#9ad5f066}.bg-\[\#9ad5f0\]\/45{background-color:#9ad5f073}.bg-\[\#E1306C\]{--tw-bg-opacity:1;background-color:rgb(225 48 108/var(--tw-bg-opacity,1))}.bg-accent{--tw-bg-opacity:1;background-color:rgb(31 139 204/var(--tw-bg-opacity,1))}.bg-accent\/10{background-color:#1f8bcc1a}.bg-black{--tw-bg-opacity:1;background-color:rgb(0 0 0/var(--tw-bg-opacity,1))}.bg-black\/20{background-color:#0003}.bg-black\/50{background-color:#00000080}.bg-cloud{--tw-bg-opacity:1;background-color:rgb(241 243 244/var(--tw-bg-opacity,1))}.bg-cloud\/60{background-color:#f1f3f499}.bg-emerald-50{--tw-bg-opacity:1;background-color:rgb(236 253 245/var(--tw-bg-opacity,1))}.bg-rose-50{--tw-bg-opacity:1;background-color:rgb(255 241 242/var(--tw-bg-opacity,1))}.bg-slate{--tw-bg-opacity:1;background-color:rgb(70 76 78/var(--tw-bg-opacity,1))}.bg-slate\/10{background-color:#464c4e1a}.bg-slate\/20{background-color:#464c4e33}.bg-slate\/5{background-color:#464c4e0d}.bg-slate\/95{background-color:#464c4ef2}.bg-transparent{background-color:#0000}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1))}.bg-white\/10{background-color:#ffffff1a}.bg-white\/15{background-color:#ffffff26}.bg-white\/20{background-color:#fff3}.bg-white\/25{background-color:#ffffff40}.bg-white\/30{background-color:#ffffff4d}.bg-white\/5{background-color:#ffffff0d}.bg-white\/90{background-color:#ffffffe6}.bg-white\/95{background-color:#fffffff2}.bg-gradient-to-b{background-image:linear-gradient(to bottom,var(--tw-gradient-stops))}.bg-gradient-to-br{background-image:linear-gradient(to bottom right,var(--tw-gradient-stops))}.bg-gradient-to-r{background-image:linear-gradient(to right,var(--tw-gradient-stops))}.from-\[\#0f4e75\]{--tw-gradient-from:#0f4e75 var(--tw-gradient-from-position);--tw-gradient-to:#0f4e7500 var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-\[\#1f8bcc\]{--tw-gradient-from:#1f8bcc var(--tw-gradient-from-position);--tw-gradient-to:#1f8bcc00 var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-slate\/10{--tw-gradient-from:#464c4e1a var(--tw-gradient-from-position);--tw-gradient-to:#464c4e00 var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.via-\[\#1f8bcc\]{--tw-gradient-to:#1f8bcc00 var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),#1f8bcc var(--tw-gradient-via-position),var(--tw-gradient-to)}.via-\[\#5ea8d2\]{--tw-gradient-to:#5ea8d200 var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),#5ea8d2 var(--tw-gradient-via-position),var(--tw-gradient-to)}.via-\[\#6cbbe6\]{--tw-gradient-to:#6cbbe600 var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),#6cbbe6 var(--tw-gradient-via-position),var(--tw-gradient-to)}.to-\[\#70c0e6\]{--tw-gradient-to:#70c0e6 var(--tw-gradient-to-position)}.to-\[\#d6eefb\]{--tw-gradient-to:#d6eefb var(--tw-gradient-to-position)}.to-\[\#dceef8\]{--tw-gradient-to:#dceef8 var(--tw-gradient-to-position)}.to-\[\#f7fcff\]{--tw-gradient-to:#f7fcff var(--tw-gradient-to-position)}.to-transparent{--tw-gradient-to:transparent var(--tw-gradient-to-position)}.bg-cover{background-size:cover}.bg-center{background-position:50%}.object-contain{-o-object-fit:contain;object-fit:contain}.object-cover{-o-object-fit:cover;object-fit:cover}.object-center{-o-object-position:center;object-position:center}.object-top{-o-object-position:top;object-position:top}.\!p-0{padding:0!important}.p-0{padding:0}.p-1{padding:.25rem}.p-2{padding:.5rem}.p-3{padding:.75rem}.p-4{padding:1rem}.p-5{padding:1.25rem}.p-6{padding:1.5rem}.p-7{padding:1.75rem}.px-0{padding-left:0;padding-right:0}.px-2\.5{padding-left:.625rem;padding-right:.625rem}.px-3{padding-left:.75rem;padding-right:.75rem}.px-4{padding-left:1rem;padding-right:1rem}.px-5{padding-left:1.25rem;padding-right:1.25rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.px-7{padding-left:1.75rem;padding-right:1.75rem}.py-0{padding-top:0;padding-bottom:0}.py-1\.5{padding-top:.375rem;padding-bottom:.375rem}.py-10{padding-top:2.5rem;padding-bottom:2.5rem}.py-12{padding-top:3rem;padding-bottom:3rem}.py-14{padding-top:3.5rem;padding-bottom:3.5rem}.py-16{padding-top:4rem;padding-bottom:4rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.py-2\.5{padding-top:.625rem;padding-bottom:.625rem}.py-20{padding-top:5rem;padding-bottom:5rem}.py-3{padding-top:.75rem;padding-bottom:.75rem}.py-3\.5{padding-top:.875rem;padding-bottom:.875rem}.py-4{padding-top:1rem;padding-bottom:1rem}.py-6{padding-top:1.5rem;padding-bottom:1.5rem}.py-8{padding-top:2rem;padding-bottom:2rem}.py-\[24px\]{padding-top:24px;padding-bottom:24px}.pb-0{padding-bottom:0}.pb-10{padding-bottom:2.5rem}.pb-12{padding-bottom:3rem}.pb-2{padding-bottom:.5rem}.pb-3{padding-bottom:.75rem}.pb-5{padding-bottom:1.25rem}.pb-6{padding-bottom:1.5rem}.pb-8{padding-bottom:2rem}.pb-\[5px\]{padding-bottom:5px}.pl-2{padding-left:.5rem}.pl-5{padding-left:1.25rem}.pt-0{padding-top:0}.pt-1{padding-top:.25rem}.pt-12{padding-top:3rem}.pt-2{padding-top:.5rem}.pt-4{padding-top:1rem}.pt-6{padding-top:1.5rem}.pt-8{padding-top:2rem}.pt-\[50px\]{padding-top:50px}.text-left{text-align:left}.text-center{text-align:center}.text-right{text-align:right}.font-sans{font-family:var(--font-sans),ui-sans-serif,system-ui,sans-serif}.text-2xl{font-size:1.5rem;line-height:2rem}.text-\[1\.01rem\]{font-size:1.01rem}.text-\[1\.02rem\]{font-size:1.02rem}.text-\[1\.04rem\]{font-size:1.04rem}.text-\[11px\]{font-size:11px}.text-\[17px\]{font-size:17px}.text-\[2\.1rem\]{font-size:2.1rem}.text-base{font-size:1rem;line-height:1.5rem}.text-body{font-size:1.05rem;line-height:1.7}.text-h1{letter-spacing:-.02em;font-size:2.25rem;line-height:1.1}.text-h2{letter-spacing:-.015em;font-size:1.9rem;line-height:1.2}.text-h3{font-size:1.35rem;line-height:1.25}.text-h4{font-size:1.15rem;line-height:1.3}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.text-xs{font-size:.75rem;line-height:1rem}.font-medium{font-weight:500}.font-semibold{font-weight:600}.uppercase{text-transform:uppercase}.leading-relaxed{line-height:1.625}.leading-tight{line-height:1.25}.tracking-\[0\.16em\]{letter-spacing:.16em}.tracking-\[0\.18em\]{letter-spacing:.18em}.tracking-\[0\.22em\]{letter-spacing:.22em}.tracking-\[0\.24em\]{letter-spacing:.24em}.tracking-\[0\.25em\]{letter-spacing:.25em}.tracking-\[0\.26em\]{letter-spacing:.26em}.tracking-\[0\.28em\]{letter-spacing:.28em}.tracking-\[0\.2em\]{letter-spacing:.2em}.tracking-\[0\.35em\]{letter-spacing:.35em}.tracking-\[0\.3em\]{letter-spacing:.3em}.tracking-tight{letter-spacing:-.025em}.\!text-\[\#1f2933\]{--tw-text-opacity:1!important;color:rgb(31 41 51/var(--tw-text-opacity,1))!important}.\!text-white{--tw-text-opacity:1!important;color:rgb(255 255 255/var(--tw-text-opacity,1))!important}.text-\[\#00b7d8\]{--tw-text-opacity:1;color:rgb(0 183 216/var(--tw-text-opacity,1))}.text-\[\#0f4e75\]\/65{color:#0f4e75a6}.text-\[\#1f8bcc\]{--tw-text-opacity:1;color:rgb(31 139 204/var(--tw-text-opacity,1))}.text-\[\#22a8ff\]{--tw-text-opacity:1;color:rgb(34 168 255/var(--tw-text-opacity,1))}.text-\[\#25D366\]{--tw-text-opacity:1;color:rgb(37 211 102/var(--tw-text-opacity,1))}.text-\[\#464c4e\]{--tw-text-opacity:1;color:rgb(70 76 78/var(--tw-text-opacity,1))}.text-\[\#464c4e\]\/60{color:#464c4e99}.text-\[\#464c4e\]\/70{color:#464c4eb3}.text-\[\#464c4e\]\/80{color:#464c4ecc}.text-\[\#464c4e\]\/85{color:#464c4ed9}.text-accent{--tw-text-opacity:1;color:rgb(31 139 204/var(--tw-text-opacity,1))}.text-emerald-400{--tw-text-opacity:1;color:rgb(52 211 153/var(--tw-text-opacity,1))}.text-emerald-700{--tw-text-opacity:1;color:rgb(4 120 87/var(--tw-text-opacity,1))}.text-red-400{--tw-text-opacity:1;color:rgb(248 113 113/var(--tw-text-opacity,1))}.text-rose-700{--tw-text-opacity:1;color:rgb(190 18 60/var(--tw-text-opacity,1))}.text-slate{--tw-text-opacity:1;color:rgb(70 76 78/var(--tw-text-opacity,1))}.text-slate\/50{color:#464c4e80}.text-slate\/55{color:#464c4e8c}.text-slate\/60{color:#464c4e99}.text-slate\/70{color:#464c4eb3}.text-slate\/75{color:#464c4ebf}.text-slate\/80{color:#464c4ecc}.text-slate\/85{color:#464c4ed9}.text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.text-white\/50{color:#ffffff80}.text-white\/60{color:#fff9}.text-white\/70{color:#ffffffb3}.text-white\/75{color:#ffffffbf}.text-white\/80{color:#fffc}.text-white\/85{color:#ffffffd9}.text-white\/90{color:#ffffffe6}.underline{text-decoration-line:underline}.decoration-white\/60{text-decoration-color:#fff9}.underline-offset-4{text-underline-offset:4px}.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.opacity-0{opacity:0}.opacity-100{opacity:1}.opacity-45{opacity:.45}.opacity-60{opacity:.6}.mix-blend-multiply{mix-blend-mode:multiply}.shadow-\[0_14px_28px_-18px_rgba\(15\,78\,117\,0\.9\)\]{--tw-shadow:0 14px 28px -18px #0f4e75e6;--tw-shadow-colored:0 14px 28px -18px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-\[0_18px_45px_-32px_rgba\(33\,128\,190\,0\.5\)\]{--tw-shadow:0 18px 45px -32px #2180be80;--tw-shadow-colored:0 18px 45px -32px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-\[0_25px_60px_-38px_rgba\(15\,78\,117\,0\.45\)\]{--tw-shadow:0 25px 60px -38px #0f4e7573;--tw-shadow-colored:0 25px 60px -38px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-\[18px_0_36px_rgba\(0\,0\,0\,0\.18\)\]{--tw-shadow:18px 0 36px #0000002e;--tw-shadow-colored:18px 0 36px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-lift{--tw-shadow:0 20px 40px #0f172a1f;--tw-shadow-colored:0 20px 40px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-soft{--tw-shadow:0 10px 30px #0f172a14;--tw-shadow-colored:0 10px 30px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.outline-none{outline-offset:2px;outline:2px solid #0000}.outline{outline-style:solid}.ring-1{--tw-ring-offset-shadow:var(--tw-ring-inset)0 0 0 var(--tw-ring-offset-width)var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset)0 0 0 calc(1px + var(--tw-ring-offset-width))var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.ring-inset{--tw-ring-inset:inset}.\!ring-white\/40{--tw-ring-color:#fff6!important}.ring-current{--tw-ring-color:currentColor}.ring-slate{--tw-ring-opacity:1;--tw-ring-color:rgb(70 76 78/var(--tw-ring-opacity,1))}.ring-slate\/10{--tw-ring-color:#464c4e1a}.ring-white\/40{--tw-ring-color:#fff6}.blur-3xl{--tw-blur:blur(64px);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)}.grayscale{--tw-grayscale:grayscale(100%);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)!important}.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-sm{--tw-backdrop-blur:blur(4px);-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,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter,backdrop-filter;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.transition-\[grid-template-rows\]{transition-property:grid-template-rows;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.transition-all{transition-property:all;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.transition-opacity{transition-property:opacity;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.transition-transform{transition-property:transform;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.duration-150{transition-duration:.15s}.duration-200{transition-duration:.2s}.duration-300{transition-duration:.3s}.ease-out{transition-timing-function:cubic-bezier(0,0,.2,1)}:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}*{box-sizing:border-box}body{color:#0a0a0a;background-color:#fff;font-size:17px}body.lens-center-bg{background:radial-gradient(circle at 82% 14%,#ffffff2e,#0000 22%),radial-gradient(circle at 14% 78%,#9ad5f038,#0000 24%),linear-gradient(135deg,#0f4e75 0%,#1f8bcc 52%,#70c0e6 100%)}a.page-fade,.page-fade{animation:.22s ease-out pageFade}@keyframes pageFade{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}@keyframes sectionReveal{0%{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}@keyframes cardSlideIn{0%{opacity:0;transform:translate(24px)}to{opacity:1;transform:translate(0)}}@keyframes brandMarquee{0%{transform:translate(0)}to{transform:translate(-50%)}}.hero-slide{opacity:0;will-change:opacity;animation:15s ease-in-out infinite heroFade}.hero-slide--one{animation-delay:0s}.hero-slide--two{animation-delay:5s}.hero-slide--three{animation-delay:10s}.team-hero-slide{opacity:0;will-change:opacity;animation:20s ease-in-out infinite teamHeroFade}.team-hero-slide--one{animation-delay:0s}.team-hero-slide--two{animation-delay:5s}.team-hero-slide--three{animation-delay:10s}.team-hero-slide--four{animation-delay:15s}@keyframes heroFade{0%,27%{opacity:1}33%,to{opacity:0}}@keyframes teamHeroFade{0%,20%{opacity:1}25%,to{opacity:0}}.brand-marquee{will-change:transform;animation:84s linear infinite brandMarquee}.section-reveal>*{animation:.95s ease-out both sectionReveal}.section-reveal>:nth-child(2){animation-delay:80ms}.section-reveal>:nth-child(3){animation-delay:.16s}.section-reveal>:nth-child(4){animation-delay:.24s}.section-reveal>:nth-child(5){animation-delay:.32s}.card-reveal{animation:.9s ease-out both cardSlideIn}.section-reveal .card-reveal:first-child{animation-delay:80ms}.section-reveal .card-reveal:nth-child(2){animation-delay:.16s}.section-reveal .card-reveal:nth-child(3){animation-delay:.24s}.section-reveal .card-reveal:nth-child(4){animation-delay:.32s}.fade-on-scroll{opacity:0;transition:opacity .9s,transform .9s;transform:translateY(12px)}.fade-on-scroll--soft{transform:translateY(16px)}.fade-on-scroll.is-visible{opacity:1;transform:translateY(0)}@media (prefers-reduced-motion:reduce){.section-reveal>*,.card-reveal{animation:none}.fade-on-scroll{opacity:1;transition:none;transform:none}.brand-marquee{animation:none}.hero-slide{opacity:0;animation:none}.hero-slide--one{opacity:1}.team-hero-slide{opacity:0;animation:none}.team-hero-slide--one{opacity:1}}a{color:inherit;text-decoration:none}::selection{color:#fff;background:#008bcf}.no-scrollbar{scrollbar-width:none;-ms-overflow-style:none}.no-scrollbar::-webkit-scrollbar{display:none}.instagram-embed-content>div{grid-template-columns:minmax(0,1fr)!important;align-items:start!important;gap:20px!important;display:grid!important}.instagram-embed-content .instagram-media{width:100%!important;min-width:0!important;max-width:100%!important;margin:0!important}.monthly-glasses-highlight{gap:24px;display:grid}.monthly-glasses-highlight__radio{opacity:0;pointer-events:none;position:absolute}.monthly-glasses-highlight__thumbs{order:2;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;display:grid}.monthly-glasses-highlight__thumb{cursor:pointer;display:block}.monthly-glasses-highlight__thumb-frame{background:#fff;border:1px solid #0f172a33;transition:border-color .18s,box-shadow .18s;display:block;overflow:hidden;box-shadow:0 12px 24px #0f172a14}.monthly-glasses-highlight__panels{order:1;position:relative}.monthly-glasses-highlight__panel{display:none}.monthly-glasses-highlight__radio:first-of-type:checked~.monthly-glasses-highlight__thumbs .monthly-glasses-highlight__thumb--1 .monthly-glasses-highlight__thumb-frame,.monthly-glasses-highlight__radio:nth-of-type(2):checked~.monthly-glasses-highlight__thumbs .monthly-glasses-highlight__thumb--2 .monthly-glasses-highlight__thumb-frame,.monthly-glasses-highlight__radio:nth-of-type(3):checked~.monthly-glasses-highlight__thumbs .monthly-glasses-highlight__thumb--3 .monthly-glasses-highlight__thumb-frame,.monthly-glasses-highlight__radio:nth-of-type(4):checked~.monthly-glasses-highlight__thumbs .monthly-glasses-highlight__thumb--4 .monthly-glasses-highlight__thumb-frame,.monthly-glasses-highlight__radio:nth-of-type(5):checked~.monthly-glasses-highlight__thumbs .monthly-glasses-highlight__thumb--5 .monthly-glasses-highlight__thumb-frame,.monthly-glasses-highlight__radio:nth-of-type(6):checked~.monthly-glasses-highlight__thumbs .monthly-glasses-highlight__thumb--6 .monthly-glasses-highlight__thumb-frame,.monthly-glasses-highlight__radio:nth-of-type(7):checked~.monthly-glasses-highlight__thumbs .monthly-glasses-highlight__thumb--7 .monthly-glasses-highlight__thumb-frame,.monthly-glasses-highlight__radio:nth-of-type(8):checked~.monthly-glasses-highlight__thumbs .monthly-glasses-highlight__thumb--8 .monthly-glasses-highlight__thumb-frame,.monthly-glasses-highlight__radio:nth-of-type(9):checked~.monthly-glasses-highlight__thumbs .monthly-glasses-highlight__thumb--9 .monthly-glasses-highlight__thumb-frame,.monthly-glasses-highlight__radio:nth-of-type(10):checked~.monthly-glasses-highlight__thumbs .monthly-glasses-highlight__thumb--10 .monthly-glasses-highlight__thumb-frame{border-color:#fffffff2;box-shadow:0 0 0 2px #ffffffe6}.monthly-glasses-highlight__radio:first-of-type:checked~.monthly-glasses-highlight__panels .monthly-glasses-highlight__panel--1,.monthly-glasses-highlight__radio:nth-of-type(2):checked~.monthly-glasses-highlight__panels .monthly-glasses-highlight__panel--2,.monthly-glasses-highlight__radio:nth-of-type(3):checked~.monthly-glasses-highlight__panels .monthly-glasses-highlight__panel--3,.monthly-glasses-highlight__radio:nth-of-type(4):checked~.monthly-glasses-highlight__panels .monthly-glasses-highlight__panel--4,.monthly-glasses-highlight__radio:nth-of-type(5):checked~.monthly-glasses-highlight__panels .monthly-glasses-highlight__panel--5,.monthly-glasses-highlight__radio:nth-of-type(6):checked~.monthly-glasses-highlight__panels .monthly-glasses-highlight__panel--6,.monthly-glasses-highlight__radio:nth-of-type(7):checked~.monthly-glasses-highlight__panels .monthly-glasses-highlight__panel--7,.monthly-glasses-highlight__radio:nth-of-type(8):checked~.monthly-glasses-highlight__panels .monthly-glasses-highlight__panel--8,.monthly-glasses-highlight__radio:nth-of-type(9):checked~.monthly-glasses-highlight__panels .monthly-glasses-highlight__panel--9,.monthly-glasses-highlight__radio:nth-of-type(10):checked~.monthly-glasses-highlight__panels .monthly-glasses-highlight__panel--10{display:block}.brand-spotlight-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;display:grid}.brand-spotlight-card{background:#fff;border:1px solid #ffffff59;min-height:118px;transition:transform .18s,box-shadow .18s;box-shadow:0 12px 24px #0f172a1f}.brand-spotlight-card[open]{transform:translateY(-2px);box-shadow:0 18px 36px #0f172a2e}.brand-spotlight-summary{cursor:pointer;text-align:center;flex-direction:column;justify-content:center;align-items:center;gap:12px;min-height:118px;padding:16px;list-style:none;display:flex}.brand-spotlight-summary::-webkit-details-marker{display:none}.brand-spotlight-detail{color:#0f172a;height:100%;padding:22px;display:none}.brand-spotlight-card[open] .brand-spotlight-detail{flex-direction:column;gap:16px;display:flex}.brand-spotlight-card[open] .brand-spotlight-summary{display:none}@media (min-width:768px){.monthly-glasses-highlight{-moz-column-gap:32px;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);align-items:start;gap:24px 32px}.monthly-glasses-highlight__thumbs{order:1;grid-column:1;grid-template-columns:repeat(3,minmax(0,1fr))}.monthly-glasses-highlight__panels{order:2;grid-area:1/2}.brand-spotlight-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.brand-spotlight-card[open]{grid-column:1/-1;min-height:248px}}@media (max-width:767px){.monthly-glasses-highlight__thumb{min-width:0}}@keyframes whatsappIntro{0%{width:56px;transform:translate(0)}25%{width:300px;transform:translate(0)}70%{width:300px;transform:translate(0)}to{width:56px;transform:translate(0)}}@keyframes whatsappLabel{0%{opacity:0;max-width:0}25%{opacity:1;max-width:240px}70%{opacity:1;max-width:240px}to{opacity:0;max-width:0}}.whatsapp-fab{gap:10px;width:56px;height:56px;overflow:hidden}.whatsapp-fab__icon{justify-content:center;align-items:center;width:56px;height:56px;display:flex}.whatsapp-fab__label{opacity:0;white-space:nowrap;max-width:0;font-size:.75rem;font-weight:600;overflow:hidden;transition:max-width .3s ease,opacity .3s ease,padding .3s ease}.whatsapp-fab-menu{opacity:0;pointer-events:none;flex-direction:column;gap:8px;transition:opacity .18s,transform .18s;display:flex;position:absolute;bottom:68px;right:0;transform:translateY(8px)}.whatsapp-fab-menu--open{opacity:1;pointer-events:auto;transform:translateY(0)}.whatsapp-fab-option{color:#0f172a;white-space:nowrap;background:#fff;border:1px solid #0f172a1f;border-radius:999px;align-items:center;gap:8px;padding:8px 12px;font-size:.75rem;font-weight:600;display:inline-flex;box-shadow:0 12px 24px #0f172a2e}.whatsapp-fab-option:hover{background:#f8fafc}.whatsapp-fab-panel{background:#fff;border:1px solid #0f172a1f;border-radius:16px;flex-direction:column;gap:10px;width:min(320px,100vw - 32px);max-height:min(70vh,460px);margin-top:6px;padding:12px;display:flex;position:relative;overflow:auto;box-shadow:0 16px 30px #0f172a33}.whatsapp-fab-panel__actions{background:#fff;padding-top:8px;padding-bottom:2px;position:sticky;bottom:0}.whatsapp-fab-panel__close{color:#475569;cursor:pointer;background:0 0;border:none;width:44px;height:44px;font-size:36px;line-height:1;position:absolute;top:4px;right:6px}.whatsapp-fab-panel__close:hover{color:#0f172a}.whatsapp-fab-panel__title{color:#0f172a;font-size:.85rem;font-weight:700}.whatsapp-fab-panel__row{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;display:grid}.whatsapp-fab-panel__field{color:#475569;flex-direction:column;gap:4px;font-size:.7rem;font-weight:600;display:flex}.whatsapp-fab-panel__field input,.whatsapp-fab-panel__field textarea,.whatsapp-fab-panel__field select{color:#0f172a;background:#fff;border:1px solid #0f172a1f;border-radius:10px;padding:6px 8px;font-size:1rem;font-weight:500}.whatsapp-fab-panel__field input:focus,.whatsapp-fab-panel__field textarea:focus,.whatsapp-fab-panel__field select:focus{border-color:#008bcf99;outline:2px solid #008bcf4d}.whatsapp-fab-panel__actions{justify-content:flex-end;gap:8px;display:flex}.whatsapp-fab-panel__ghost{color:#475569;background:0 0;border:none;font-size:.7rem;font-weight:600}.whatsapp-fab-panel__primary{color:#fff;background:#25d366;border:none;border-radius:999px;padding:10px 16px;font-size:.85rem;font-weight:700}.whatsapp-fab--intro{animation:4.6s ease-in-out both whatsappIntro}.whatsapp-fab--intro .whatsapp-fab__label{animation:4.6s ease-in-out both whatsappLabel}@media (min-width:768px){.instagram-embed-content>div{grid-template-columns:repeat(3,minmax(0,1fr))!important}}@media (prefers-reduced-motion:reduce){.whatsapp-fab--intro,.whatsapp-fab--intro .whatsapp-fab__label{animation:none}.whatsapp-fab__label{opacity:1;max-width:140px}.whatsapp-fab{width:190px}}.placeholder\:text-white\/50::placeholder{color:#ffffff80}.placeholder\:text-white\/55::placeholder{color:#ffffff8c}.after\:absolute:after{content:var(--tw-content);position:absolute}.after\:-bottom-1:after{content:var(--tw-content);bottom:-.25rem}.after\:left-0:after{content:var(--tw-content);left:0}.after\:h-\[2px\]:after{content:var(--tw-content);height:2px}.after\:w-full:after{content:var(--tw-content);width:100%}.after\:origin-left:after{content:var(--tw-content);transform-origin:0}.after\:scale-x-0:after{content:var(--tw-content);--tw-scale-x:0;transform:translate(var(--tw-translate-x),var(--tw-translate-y))rotate(var(--tw-rotate))skewX(var(--tw-skew-x))skewY(var(--tw-skew-y))scaleX(var(--tw-scale-x))scaleY(var(--tw-scale-y))}.after\:scale-x-100:after{content:var(--tw-content);--tw-scale-x:1;transform:translate(var(--tw-translate-x),var(--tw-translate-y))rotate(var(--tw-rotate))skewX(var(--tw-skew-x))skewY(var(--tw-skew-y))scaleX(var(--tw-scale-x))scaleY(var(--tw-scale-y))}.after\:bg-white:after{content:var(--tw-content);--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1))}.after\:transition-transform:after{content:var(--tw-content);transition-property:transform;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.after\:duration-200:after{content:var(--tw-content);transition-duration:.2s}.hover\:\!border-\[\#4f5557\]:hover{--tw-border-opacity:1!important;border-color:rgb(79 85 87/var(--tw-border-opacity,1))!important}.hover\:border-slate\/45:hover{border-color:#464c4e73}.hover\:border-white:hover{--tw-border-opacity:1;border-color:rgb(255 255 255/var(--tw-border-opacity,1))}.hover\:\!bg-\[\#1fb857\]:hover{--tw-bg-opacity:1!important;background-color:rgb(31 184 87/var(--tw-bg-opacity,1))!important}.hover\:\!bg-\[\#3f4547\]:hover{--tw-bg-opacity:1!important;background-color:rgb(63 69 71/var(--tw-bg-opacity,1))!important}.hover\:\!bg-\[\#c72a5f\]:hover{--tw-bg-opacity:1!important;background-color:rgb(199 42 95/var(--tw-bg-opacity,1))!important}.hover\:\!bg-white\/10:hover{background-color:#ffffff1a!important}.hover\:\!bg-white\/90:hover{background-color:#ffffffe6!important}.hover\:bg-\[\#00a6c4\]:hover{--tw-bg-opacity:1;background-color:rgb(0 166 196/var(--tw-bg-opacity,1))}.hover\:bg-\[\#1a78ad\]:hover{--tw-bg-opacity:1;background-color:rgb(26 120 173/var(--tw-bg-opacity,1))}.hover\:bg-\[\#1fb857\]:hover{--tw-bg-opacity:1;background-color:rgb(31 184 87/var(--tw-bg-opacity,1))}.hover\:bg-\[\#20bd5a\]:hover{--tw-bg-opacity:1;background-color:rgb(32 189 90/var(--tw-bg-opacity,1))}.hover\:bg-\[\#3a87ba\]:hover{--tw-bg-opacity:1;background-color:rgb(58 135 186/var(--tw-bg-opacity,1))}.hover\:bg-\[\#5b6264\]:hover{--tw-bg-opacity:1;background-color:rgb(91 98 100/var(--tw-bg-opacity,1))}.hover\:bg-\[\#c1275c\]:hover{--tw-bg-opacity:1;background-color:rgb(193 39 92/var(--tw-bg-opacity,1))}.hover\:bg-accent\/90:hover{background-color:#1f8bcce6}.hover\:bg-slate\/10:hover{background-color:#464c4e1a}.hover\:bg-slate\/5:hover{background-color:#464c4e0d}.hover\:bg-slate\/90:hover{background-color:#464c4ee6}.hover\:bg-white:hover{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1))}.hover\:bg-white\/10:hover{background-color:#ffffff1a}.hover\:text-\[\#00b7d8\]:hover{--tw-text-opacity:1;color:rgb(0 183 216/var(--tw-text-opacity,1))}.hover\:text-\[\#1fb857\]:hover{--tw-text-opacity:1;color:rgb(31 184 87/var(--tw-text-opacity,1))}.hover\:text-accent:hover{--tw-text-opacity:1;color:rgb(31 139 204/var(--tw-text-opacity,1))}.hover\:text-white:hover{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.hover\:text-white\/90:hover{color:#ffffffe6}.hover\:underline:hover{text-decoration-line:underline}.hover\:opacity-90:hover{opacity:.9}.hover\:after\:scale-x-100:hover:after{content:var(--tw-content);--tw-scale-x:1;transform:translate(var(--tw-translate-x),var(--tw-translate-y))rotate(var(--tw-rotate))skewX(var(--tw-skew-x))skewY(var(--tw-skew-y))scaleX(var(--tw-scale-x))scaleY(var(--tw-scale-y))}.focus\:border-accent:focus{--tw-border-opacity:1;border-color:rgb(31 139 204/var(--tw-border-opacity,1))}.focus\:border-white\/40:focus{border-color:#fff6}.focus\:ring-4:focus{--tw-ring-offset-shadow:var(--tw-ring-inset)0 0 0 var(--tw-ring-offset-width)var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset)0 0 0 calc(4px + var(--tw-ring-offset-width))var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.focus\:ring-white\/10:focus{--tw-ring-color:#ffffff1a}.focus-visible\:outline-none:focus-visible{outline-offset:2px;outline:2px solid #0000}.focus-visible\:ring-2:focus-visible{--tw-ring-offset-shadow:var(--tw-ring-inset)0 0 0 var(--tw-ring-offset-width)var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset)0 0 0 calc(2px + var(--tw-ring-offset-width))var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.focus-visible\:ring-accent\/40:focus-visible{--tw-ring-color:#1f8bcc66}.focus-visible\:ring-slate\/30:focus-visible{--tw-ring-color:#464c4e4d}.focus-visible\:ring-offset-2:focus-visible{--tw-ring-offset-width:2px}.focus-visible\:ring-offset-white:focus-visible{--tw-ring-offset-color:#fff}.disabled\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\:opacity-60:disabled{opacity:.6}.group[open] .group-open\:rotate-180{--tw-rotate:180deg;transform:translate(var(--tw-translate-x),var(--tw-translate-y))rotate(var(--tw-rotate))skewX(var(--tw-skew-x))skewY(var(--tw-skew-y))scaleX(var(--tw-scale-x))scaleY(var(--tw-scale-y))}.group[open] .group-open\:rotate-90{--tw-rotate:90deg;transform:translate(var(--tw-translate-x),var(--tw-translate-y))rotate(var(--tw-rotate))skewX(var(--tw-skew-x))skewY(var(--tw-skew-y))scaleX(var(--tw-scale-x))scaleY(var(--tw-scale-y))}.group[open] .group-open\:grid-rows-\[1fr\]{grid-template-rows:1fr}.group[open] .group-open\:opacity-100{opacity:1}.group:focus-within .group-focus-within\:pointer-events-auto{pointer-events:auto}.group:focus-within .group-focus-within\:visible{visibility:visible}.group:focus-within .group-focus-within\:-rotate-90{--tw-rotate:-90deg;transform:translate(var(--tw-translate-x),var(--tw-translate-y))rotate(var(--tw-rotate))skewX(var(--tw-skew-x))skewY(var(--tw-skew-y))scaleX(var(--tw-scale-x))scaleY(var(--tw-scale-y))}.group:focus-within .group-focus-within\:text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.group:focus-within .group-focus-within\:opacity-100{opacity:1}.group:hover .group-hover\:pointer-events-auto{pointer-events:auto}.group:hover .group-hover\:visible{visibility:visible}.group:hover .group-hover\:-translate-y-1{--tw-translate-y:-.25rem;transform:translate(var(--tw-translate-x),var(--tw-translate-y))rotate(var(--tw-rotate))skewX(var(--tw-skew-x))skewY(var(--tw-skew-y))scaleX(var(--tw-scale-x))scaleY(var(--tw-scale-y))}.group:hover .group-hover\:-rotate-90{--tw-rotate:-90deg;transform:translate(var(--tw-translate-x),var(--tw-translate-y))rotate(var(--tw-rotate))skewX(var(--tw-skew-x))skewY(var(--tw-skew-y))scaleX(var(--tw-scale-x))scaleY(var(--tw-scale-y))}.group:hover .group-hover\:scale-\[1\.02\]{--tw-scale-x:1.02;--tw-scale-y:1.02;transform:translate(var(--tw-translate-x),var(--tw-translate-y))rotate(var(--tw-rotate))skewX(var(--tw-skew-x))skewY(var(--tw-skew-y))scaleX(var(--tw-scale-x))scaleY(var(--tw-scale-y))}.group:hover .group-hover\:scale-\[2\.2\]{--tw-scale-x:2.2;--tw-scale-y:2.2;transform:translate(var(--tw-translate-x),var(--tw-translate-y))rotate(var(--tw-rotate))skewX(var(--tw-skew-x))skewY(var(--tw-skew-y))scaleX(var(--tw-scale-x))scaleY(var(--tw-scale-y))}.group:hover .group-hover\:border-slate\/40{border-color:#464c4e66}.group:hover .group-hover\:text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.group:hover .group-hover\:opacity-0{opacity:0}.group:hover .group-hover\:opacity-100{opacity:1}.peer:checked~.peer-checked\:pointer-events-auto{pointer-events:auto}.peer:checked~.peer-checked\:translate-x-0{--tw-translate-x:0px;transform:translate(var(--tw-translate-x),var(--tw-translate-y))rotate(var(--tw-rotate))skewX(var(--tw-skew-x))skewY(var(--tw-skew-y))scaleX(var(--tw-scale-x))scaleY(var(--tw-scale-y))}.peer:checked~.peer-checked\:opacity-100{opacity:1}@media (min-width:640px){.sm\:flex{display:flex}.sm\:aspect-\[3\/2\]{aspect-ratio:3/2}.sm\:w-auto{width:auto}.sm\:max-w-none{max-width:none}.sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.sm\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.sm\:flex-row{flex-direction:row}.sm\:flex-col{flex-direction:column}.sm\:flex-wrap{flex-wrap:wrap}.sm\:items-center{align-items:center}.sm\:justify-end{justify-content:flex-end}.sm\:justify-between{justify-content:space-between}.sm\:gap-3{gap:.75rem}.sm\:gap-4{gap:1rem}.sm\:gap-8{gap:2rem}.sm\:p-1{padding:.25rem}.sm\:p-6{padding:1.5rem}.sm\:px-5{padding-left:1.25rem;padding-right:1.25rem}.sm\:px-6{padding-left:1.5rem;padding-right:1.5rem}}@media (min-width:768px){.md\:absolute{position:absolute}.md\:inset-y-0{top:0;bottom:0}.md\:bottom-6{bottom:1.5rem}.md\:right-0{right:0}.md\:right-6{right:1.5rem}.md\:top-0{top:0}.md\:order-1{order:1}.md\:order-2{order:2}.md\:order-none{order:0}.md\:col-span-2{grid-column:span 2/span 2}.md\:mx-0{margin-left:0;margin-right:0}.md\:mb-0{margin-bottom:0}.md\:mt-0{margin-top:0}.md\:mt-16{margin-top:4rem}.md\:block{display:block}.md\:flex{display:flex}.md\:hidden{display:none}.md\:aspect-auto{aspect-ratio:auto}.md\:h-24{height:6rem}.md\:h-36{height:9rem}.md\:h-40{height:10rem}.md\:h-\[4\.5rem\]{height:4.5rem}.md\:min-h-\[300px\]{min-height:300px}.md\:min-h-\[620px\]{min-height:620px}.md\:min-h-full{min-height:100%}.md\:w-24{width:6rem}.md\:w-72{width:18rem}.md\:w-\[46\%\]{width:46%}.md\:w-\[54\%\]{width:54%}.md\:w-\[calc\(50\%-1rem\)\]{width:calc(50% - 1rem)}.md\:shrink-0{flex-shrink:0}.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-\[0\.6fr_0\.4fr\]{grid-template-columns:.6fr .4fr}.md\:grid-cols-\[1\.15fr_0\.85fr\]{grid-template-columns:1.15fr .85fr}.md\:grid-cols-\[1\.1fr_0\.9fr\]{grid-template-columns:1.1fr .9fr}.md\:grid-cols-\[1\.2fr_0\.7fr_0\.7fr_1\.2fr\]{grid-template-columns:1.2fr .7fr .7fr 1.2fr}.md\:grid-cols-\[1\.2fr_0\.8fr\]{grid-template-columns:1.2fr .8fr}.md\:grid-cols-\[1\.35fr_0\.65fr\]{grid-template-columns:1.35fr .65fr}.md\:grid-cols-\[1\.6fr_0\.9fr\]{grid-template-columns:1.6fr .9fr}.md\:grid-cols-\[52\%_48\%\]{grid-template-columns:52% 48%}.md\:flex-row{flex-direction:row}.md\:items-start{align-items:flex-start}.md\:items-center{align-items:center}.md\:items-stretch{align-items:stretch}.md\:justify-between{justify-content:space-between}.md\:gap-4{gap:1rem}.md\:p-10{padding:2.5rem}.md\:p-3{padding:.75rem}.md\:p-6{padding:1.5rem}.md\:p-8{padding:2rem}.md\:px-5{padding-left:1.25rem;padding-right:1.25rem}.md\:py-1\.5{padding-top:.375rem;padding-bottom:.375rem}.md\:py-10{padding-top:2.5rem;padding-bottom:2.5rem}.md\:py-12{padding-top:3rem;padding-bottom:3rem}.md\:py-14{padding-top:3.5rem;padding-bottom:3.5rem}.md\:py-16{padding-top:4rem;padding-bottom:4rem}.md\:py-20{padding-top:5rem;padding-bottom:5rem}.md\:py-24{padding-top:6rem;padding-bottom:6rem}.md\:py-\[56px\]{padding-top:56px;padding-bottom:56px}.md\:pb-0{padding-bottom:0}.md\:pb-12{padding-bottom:3rem}.md\:pb-16{padding-bottom:4rem}.md\:pb-20{padding-bottom:5rem}.md\:pb-24{padding-bottom:6rem}.md\:pb-6{padding-bottom:1.5rem}.md\:pr-8{padding-right:2rem}.md\:pt-0{padding-top:0}.md\:pt-10{padding-top:2.5rem}.md\:pt-12{padding-top:3rem}.md\:pt-16{padding-top:4rem}.md\:pt-24{padding-top:6rem}.md\:pt-\[50px\]{padding-top:50px}.md\:text-\[3rem\]{font-size:3rem}.md\:text-h1-md{letter-spacing:-.02em;font-size:3.2rem;line-height:1.05}.md\:text-h2-md{letter-spacing:-.015em;font-size:2.4rem;line-height:1.15}.md\:leading-\[1\.07\]{line-height:1.07}.md\:shadow-none{--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}}@media (min-width:1024px){.lg\:col-span-3{grid-column:span 3/span 3}.lg\:block{display:block}.lg\:flex{display:flex}.lg\:w-\[48\%\]{width:48%}.lg\:w-\[52\%\]{width:52%}.lg\:w-\[calc\(50\%-1\.5rem\)\]{width:calc(50% - 1.5rem)}.lg\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.lg\:grid-cols-\[1\.1fr_0\.9fr\]{grid-template-columns:1.1fr .9fr}.lg\:items-start{align-items:flex-start}.lg\:px-6{padding-left:1.5rem;padding-right:1.5rem}.lg\:pr-10{padding-right:2.5rem}}@media (min-width:1280px){.xl\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}}.\[\&\:\:-webkit-details-marker\]\:hidden::-webkit-details-marker{display:none}.\[\&\>details\>div\>div\>div\]\:text-white\/85>details>div>div>div{color:#ffffffd9}.\[\&\>details\>summary\>svg\]\:text-white\/80>details>summary>svg{color:#fffc}.\[\&\>details\>summary\]\:text-white>details>summary{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.\[\&\>details\]\:border-white\/35>details{border-color:#ffffff59}.\[\&\>details\]\:bg-\[\#0f4e75\]\/60>details{background-color:#0f4e7599}
/* Unified hero sizing: keep image and copy together without clipping tall hero content. */
.page-hero .page-hero-media{background:#dce1e3}
.page-hero .page-hero-media > picture,
.page-hero .page-hero-media > div:not(.sr-only){position:absolute;inset:0;display:block}
.page-hero .page-hero-media img{display:block;width:100%;height:100%!important;object-fit:cover}
@media (min-width:768px){
.page-hero{height:auto;min-height:clamp(34rem,70svh,52rem)}
.page-hero > .mx-auto{height:auto;min-height:inherit}
.page-hero > .mx-auto > div:first-child{height:auto;min-height:inherit;display:flex;flex-direction:column;justify-content:center;transform:translateY(-18px)}
.page-hero .page-hero-media{aspect-ratio:auto;height:100%;min-height:100%}
}
@media (max-width:767px){
.whatsapp-fab,
.whatsapp-fab--intro{
width:52px;
height:52px;
border-radius:999px;
animation:none;
}
.whatsapp-fab__icon{
width:52px;
height:52px;
}
.whatsapp-fab__label,
.whatsapp-fab--intro .whatsapp-fab__label{
display:none;
animation:none;
}
.fachgeschäft-hero{
min-height:auto;
height:auto;
}
.fachgeschäft-hero__image{
min-height:54svh;
max-height:58svh;
}
.fachgeschäft-hero__content{
padding:1.15rem 1.25rem 2rem;
}
}
/* Static service cards restored after the Next export: pure HTML/CSS/JS accordion behavior. */
.card-reveal[role="button"]{outline:none}
.card-reveal[role="button"]:focus-visible{box-shadow:0 0 0 3px rgba(31,139,204,.45)}
.card-reveal[aria-expanded="true"] .grid.transition-all{grid-template-rows:1fr!important;opacity:1!important;margin-top:1rem!important}
.card-reveal[aria-expanded="true"] .lucide-chevron-down{transform:rotate(180deg)}
.card-reveal .lucide-chevron-down{transition:transform .3s ease}
.fachgeschäft-hero{min-height:70vh;background:#3f4547}
.fachgeschäft-hero>.mx-auto{max-width:none}
.fachgeschäft-hero__content{display:flex;min-height:100%;flex-direction:column;justify-content:center;background:linear-gradient(145deg,#3f4547 0%,#4b5254 58%,#5a666d 100%);color:#fff;padding:2rem 1.25rem}
.fachgeschäft-hero__content>p,.fachgeschäft-hero__content>h2{color:#fff!important}
.fachgeschäft-hero__content>p:first-of-type{color:rgba(255,255,255,.7)!important}
.fachgeschäft-hours,.fachgeschäft-hours .text-slate,.fachgeschäft-hours .text-right{color:rgba(255,255,255,.9)!important}
.fachgeschäft-hours .border-b{border-color:rgba(255,255,255,.25)!important}
.fachgeschäft-contact,.fachgeschäft-contact .text-slate{color:rgba(255,255,255,.86)!important}
.fachgeschäft-special{margin-top:.75rem;color:#fff}
.fachgeschäft-special-link{display:inline-flex;margin-top:.75rem;color:#fff;font-size:.95rem;font-weight:700;text-decoration:underline;text-underline-offset:4px}
.fachgeschäft-special-link:hover{color:rgba(255,255,255,.85)}
.fachgeschäft-hero__content h2{margin-top:.8rem}
.fachgeschäft-hero__content h2.text-h2{font-size:2.2rem;line-height:1.08}
.fachgeschäft-hero__content p.mt-4{margin-top:.7rem}
.fachgeschäft-hero__content .mt-5{margin-top:.8rem}
.fachgeschäft-hero__content .py-3{padding-top:.5rem;padding-bottom:.5rem}
.fachgeschäft-hero__content a:hover{color:#fff!important}
.fachgeschäft-hero__content a:hover svg{color:#fff!important}
.fachgeschäft-hours.mt-6{margin-top:.9rem}
.fachgeschäft-hours{gap:.25rem}
.fachgeschäft-hours .pb-2{padding-bottom:.28rem}
.fachgeschäft-special-link{margin-top:.5rem}
.fachgeschäft-contact.mt-6{margin-top:1.15rem}
.fachgeschäft-contact.pt-4{padding-top:.65rem}
.fachgeschäft-hero__image{min-height:320px}
.fachgeschäft-hero__image img{display:block;width:100%;height:100%;min-height:inherit;object-fit:cover}
.site-faq-section{background:linear-gradient(145deg,#4a5255 0%,#586166 58%,#6d7a82 100%)!important;position:relative;overflow:hidden}
.site-faq-card{position:relative;overflow:hidden;width:100%;border:1px solid rgba(255,255,255,.26)!important;background:rgba(63,69,71,.9)!important;color:#fff;padding:1.5rem;box-shadow:0 18px 45px rgba(15,23,42,.16)}
.site-faq-card>*{position:relative}
.site-faq-card h2{color:#fff!important}
.site-faq-card>p,.site-faq-card>.relative>p{color:rgba(255,255,255,.85)!important}
.site-faq-card>p:first-child,.site-faq-card>.relative>p:first-child{color:rgba(255,255,255,.7)!important}
.site-faq-card .mt-5>div{border-color:rgba(255,255,255,.35)!important;background:rgba(255,255,255,.1)!important;color:#fff!important}
.site-faq-card .mt-5>div svg{color:#fff!important}
.site-faq-card .mt-6>details{border-color:rgba(255,255,255,.35)!important;background:rgba(15,78,117,.6)!important}
.site-faq-card details>summary{color:#fff!important}
.site-faq-card details>summary svg{color:rgba(255,255,255,.8)!important}
.site-faq-card details>div>div>div{color:rgba(255,255,255,.85)!important}
.site-faq-card details p{color:inherit!important}
.site-faq-card a{color:#fff!important;text-decoration:underline;text-underline-offset:3px}
.instagram-gallery-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem;margin-top:1.5rem}
.instagram-gallery-grid img{display:block;width:100%;height:100%;aspect-ratio:1/1;object-fit:cover;object-position:center top;border:1px solid rgba(70,76,78,.14);background:#f1f3f4}
.home-instagram-preview{padding-bottom:0!important}
#instagram{padding-bottom:2.25rem!important}
.hero-whatsapp-modal-open{overflow:hidden}
.hero-whatsapp-modal[hidden]{display:none}
.hero-whatsapp-modal{position:fixed;inset:0;z-index:140;display:grid;place-items:end center;padding:1rem;color:#464c4e}
.hero-whatsapp-modal__backdrop{position:absolute;inset:0;background:rgba(15,23,42,.46);opacity:0;transition:opacity .18s ease}
.hero-whatsapp-modal__dialog{position:relative;width:min(100%,560px);max-height:min(92vh,760px);overflow:auto;border:1px solid rgba(255,255,255,.72);background:#fff;box-shadow:0 24px 80px rgba(15,23,42,.28);transform:translateY(18px) scale(.985);opacity:0;transition:transform .18s ease,opacity .18s ease}
.hero-whatsapp-modal.is-open .hero-whatsapp-modal__backdrop{opacity:1}
.hero-whatsapp-modal.is-open .hero-whatsapp-modal__dialog{transform:translateY(0) scale(1);opacity:1}
.hero-whatsapp-modal__close{position:absolute;right:.75rem;top:.75rem;z-index:2;width:2.75rem;height:2.75rem;border:1px solid rgba(70,76,78,.16);background:#fff;color:#464c4e;transition:background .16s ease,color .16s ease,border-color .16s ease}
.hero-whatsapp-modal__close:hover{border-color:#1f8bcc;background:#1f8bcc;color:#fff}
.hero-whatsapp-modal__close span{position:absolute;left:50%;top:50%;display:block;width:1.25rem;height:2px;background:currentColor;transform:translate(-50%,-50%) rotate(45deg)}
.hero-whatsapp-modal__close span+span{transform:translate(-50%,-50%) rotate(-45deg)}
.hero-whatsapp-modal__header{padding:1.35rem 4rem 1rem 1.25rem;background:linear-gradient(135deg,#0f4e75 0%,#145f8d 50%,#1f8bcc 100%);color:#fff}
.hero-whatsapp-modal__header.is-instant{background:linear-gradient(135deg,#0f5f3f 0%,#148653 48%,#25d366 100%)}
.hero-whatsapp-status{display:inline-flex;align-items:center;gap:.45rem;border:1px solid rgba(255,255,255,.4);background:rgba(255,255,255,.16);padding:.35rem .65rem;font-size:.72rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#fff}
.hero-whatsapp-status:before{content:"";display:block;width:.5rem;height:.5rem;border-radius:999px;background:#7cffb0;box-shadow:0 0 0 4px rgba(124,255,176,.16)}
.hero-whatsapp-modal__eyebrow{font-size:.72rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.7)}
.hero-whatsapp-modal__header h2{margin-top:.7rem;color:#fff;font-size:1.55rem;line-height:1.1}
.hero-whatsapp-modal__header p{color:rgba(255,255,255,.86)}
.hero-whatsapp-modal__header #hero-whatsapp-helper{margin-top:.7rem;font-size:.98rem;line-height:1.55}
.hero-whatsapp-modal__note{margin-top:.75rem;border-left:3px solid rgba(255,255,255,.65);padding-left:.75rem;font-size:.82rem;line-height:1.45}
.hero-whatsapp-form{display:grid;gap:.9rem;padding:1.25rem}
.hero-whatsapp-form__grid{display:grid;gap:.9rem}
.hero-whatsapp-field{display:grid;gap:.35rem}
.hero-whatsapp-field[hidden],.hero-whatsapp-time-field[hidden],.hero-whatsapp-alternative-field[hidden]{display:none!important}
.hero-whatsapp-field span{font-size:.78rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#464c4e}
.hero-whatsapp-field em{font-style:normal;font-weight:600;letter-spacing:0;text-transform:none;color:rgba(70,76,78,.55)}
.hero-whatsapp-field input,.hero-whatsapp-field select,.hero-whatsapp-field textarea{width:100%;border:1px solid rgba(70,76,78,.22);background:#f8fafb;padding:.85rem .9rem;font-size:1rem;line-height:1.35;color:#313538;transition:border-color .16s ease,background .16s ease,box-shadow .16s ease}
.hero-whatsapp-field textarea{resize:vertical;min-height:6rem}
.hero-whatsapp-field input:focus,.hero-whatsapp-field select:focus,.hero-whatsapp-field textarea:focus{border-color:#1f8bcc;background:#fff;outline:none;box-shadow:0 0 0 3px rgba(31,139,204,.18)}
.hero-whatsapp-field [aria-invalid=true]{border-color:#dc2626;background:#fff7f7}
.hero-whatsapp-field small{min-height:1.05rem;color:#b91c1c;font-size:.78rem;line-height:1.3}
.hero-whatsapp-concern-field{border:0;padding:0}
.hero-whatsapp-concern-field legend{margin-bottom:.55rem;font-size:.78rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#464c4e}
.hero-whatsapp-concern-chips{display:flex;flex-wrap:wrap;gap:.5rem}
.hero-whatsapp-concern-chip{cursor:pointer}
.hero-whatsapp-concern-chip input{position:absolute;opacity:0;pointer-events:none}
.hero-whatsapp-concern-chip span{display:flex;min-height:2.45rem;align-items:center;justify-content:center;border:1px solid rgba(70,76,78,.18);background:#fff;padding:.58rem .82rem;text-align:center;font-size:.84rem;font-weight:750;line-height:1.18;letter-spacing:0;text-transform:none;color:#464c4e;box-shadow:0 8px 22px rgba(15,23,42,.05);transition:background .16s ease,border-color .16s ease,color .16s ease,box-shadow .16s ease,transform .16s ease}
.hero-whatsapp-concern-chip span:hover{border-color:rgba(31,139,204,.45);box-shadow:0 10px 26px rgba(15,23,42,.08);transform:translateY(-1px)}
.hero-whatsapp-concern-chip input:checked+span{border-color:#1f8bcc;background:#1f8bcc;color:#fff;box-shadow:0 12px 28px rgba(31,139,204,.2)}
.hero-whatsapp-concern-chip input:focus-visible+span{outline:2px solid rgba(31,139,204,.45);outline-offset:2px}
.hero-whatsapp-time-field{border:1px solid rgba(37,211,102,.28);background:rgba(37,211,102,.07);padding:.9rem}
.hero-whatsapp-time-field legend{padding:0 .35rem;font-size:.78rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#148653}
.hero-whatsapp-time-chips{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.65rem}
.hero-whatsapp-time-chip{cursor:pointer}
.hero-whatsapp-time-chip input{position:absolute;opacity:0;pointer-events:none}
.hero-whatsapp-time-chip span{display:flex;min-width:4.8rem;min-height:2.45rem;align-items:center;justify-content:center;border:1px solid rgba(20,134,83,.24);background:#fff;padding:.58rem .85rem;font-size:.9rem;font-weight:800;color:#0f5f3f;box-shadow:0 8px 22px rgba(15,23,42,.05);transition:background .16s ease,border-color .16s ease,color .16s ease,box-shadow .16s ease,transform .16s ease}
.hero-whatsapp-time-chip span:hover{border-color:rgba(20,134,83,.5);box-shadow:0 10px 26px rgba(15,23,42,.08);transform:translateY(-1px)}
.hero-whatsapp-time-chip input:checked+span{border-color:#148653;background:#148653;color:#fff;box-shadow:0 10px 24px rgba(20,134,83,.2)}
.hero-whatsapp-time-chip input:focus-visible+span{outline:2px solid rgba(31,139,204,.45);outline-offset:2px}
.hero-whatsapp-time-message{grid-column:1/-1;margin:0;border:1px solid rgba(20,134,83,.22);background:#fff;padding:.75rem .85rem;font-size:.9rem;line-height:1.45;color:#0f5f3f}
.hero-whatsapp-alternative-field{display:grid;gap:.55rem;border:1px solid rgba(70,76,78,.16);background:#f8fafb;padding:.9rem}
.hero-whatsapp-alternative-field p{margin:0;font-size:.9rem;font-weight:700;color:#464c4e}
.hero-whatsapp-alternative-field button{display:inline-flex;width:100%;align-items:center;justify-content:center;border:1px solid rgba(31,139,204,.35);background:#fff;padding:.75rem 1rem;font-size:.92rem;font-weight:800;color:#1f8bcc;transition:background .16s ease,color .16s ease,border-color .16s ease}
.hero-whatsapp-alternative-field button:hover{border-color:#1f8bcc;background:#1f8bcc;color:#fff}
.hero-whatsapp-modal__actions{display:grid;gap:.65rem;padding-top:.2rem}
.hero-whatsapp-submit,.hero-whatsapp-secondary{display:inline-flex;min-height:3.35rem;width:100%;align-items:center;justify-content:center;gap:.55rem;border:1px solid transparent;padding:.85rem 1rem;font-size:.95rem;font-weight:800;line-height:1.25;transition:background .16s ease,color .16s ease,border-color .16s ease,opacity .16s ease}
.hero-whatsapp-submit{background:#25d366;color:#fff}
.hero-whatsapp-submit:hover{background:#1fb857;color:#fff}
.hero-whatsapp-submit:disabled{cursor:wait;opacity:.72}
.hero-whatsapp-submit.is-loading span:after{content:" …"}
.hero-whatsapp-secondary{border-color:rgba(70,76,78,.24);background:#fff;color:#464c4e}
.hero-whatsapp-secondary:hover{border-color:#1f8bcc;background:#1f8bcc;color:#fff}
.opening-status-card{transition:border-color .18s ease,background .18s ease,box-shadow .18s ease}
.opening-status-card__badge{display:inline-flex;align-items:center;gap:.45rem;width:max-content;border:1px solid rgba(255,255,255,.32);background:rgba(255,255,255,.14);padding:.32rem .62rem;font-size:.68rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#fff}
.opening-status-card__badge:before{content:"";display:block;width:.5rem;height:.5rem;border-radius:999px;background:#cbd5df;box-shadow:0 0 0 4px rgba(255,255,255,.1)}
.opening-status-card.is-open{border-color:rgba(124,255,176,.5);background:linear-gradient(135deg,rgba(20,134,83,.54),rgba(37,211,102,.18))}
.opening-status-card.is-open .opening-status-card__badge{border-color:rgba(124,255,176,.55);background:rgba(20,134,83,.42)}
.opening-status-card.is-open .opening-status-card__badge:before{background:#7cffb0;box-shadow:0 0 0 4px rgba(124,255,176,.16)}
.opening-status-card.is-closed .opening-status-card__badge:before{background:#fbbf24;box-shadow:0 0 0 4px rgba(251,191,36,.16)}
.opening-status-card__cta{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;border:1px solid rgba(255,255,255,.5);background:#25d366;padding:.72rem .9rem;font-size:.82rem;font-weight:800;line-height:1.2;color:#fff;transition:background .16s ease,border-color .16s ease,color .16s ease}
.opening-status-card__cta:hover{border-color:#fff;background:#1fb857;color:#fff}
.hero-opening-reminder{display:inline-flex;align-items:center;gap:.65rem;max-width:100%;width:fit-content;margin-top:1rem;border:1px solid rgba(70,76,78,.14);background:rgba(255,255,255,.62);padding:.55rem .72rem;color:#464c4e;box-shadow:0 10px 24px rgba(15,23,42,.06);backdrop-filter:blur(10px);transition:border-color .18s ease,background .18s ease,box-shadow .18s ease}
.hero-opening-reminder__badge{display:inline-flex;align-items:center;gap:.38rem;white-space:nowrap;font-size:.68rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#464c4e}
.hero-opening-reminder__badge:before{content:"";display:block;width:.46rem;height:.46rem;flex:0 0 auto;border-radius:999px;background:#cbd5df;box-shadow:0 0 0 4px rgba(70,76,78,.08)}
.hero-opening-reminder__text{font-size:.82rem;line-height:1.35;color:rgba(70,76,78,.72)}
.hero-opening-reminder.is-open{border-color:rgba(20,134,83,.2);background:rgba(236,253,245,.76)}
.hero-opening-reminder.is-open .hero-opening-reminder__badge{color:#0f5f3f}
.hero-opening-reminder.is-open .hero-opening-reminder__badge:before{background:#25d366;box-shadow:0 0 0 4px rgba(37,211,102,.14)}
.hero-opening-reminder.is-closed .hero-opening-reminder__badge:before{background:#fbbf24;box-shadow:0 0 0 4px rgba(251,191,36,.14)}
@media (max-width:640px){
.hero-opening-reminder{align-items:flex-start;flex-direction:column;gap:.35rem;width:100%;margin-top:.9rem;padding:.7rem .78rem}
.hero-opening-reminder__text{font-size:.86rem}
}
@media (min-width:768px){
.site-faq-card{padding:2rem}
.instagram-gallery-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem}
.hero-whatsapp-modal{place-items:center;padding:2rem}
.hero-whatsapp-modal__dialog{max-height:calc(100vh - 4rem)}
.hero-whatsapp-modal__header{padding:2rem 4.5rem 1.45rem 2rem}
.hero-whatsapp-modal__header h2{font-size:2rem}
.hero-whatsapp-form{gap:1rem;padding:1.5rem 2rem 2rem}
.hero-whatsapp-form__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}
.hero-whatsapp-modal__actions{grid-template-columns:1fr;align-items:center}
.hero-whatsapp-secondary{width:auto;min-width:12rem}
.fachgeschäft-hero{height:70vh;min-height:520px}
.fachgeschäft-hero>.mx-auto{display:grid;height:100%;grid-template-columns:50% 50%}
.fachgeschäft-hero__image{height:100%;min-height:100%}
.fachgeschäft-hero__content{padding:3rem}
}
@media (min-width:1024px){
.fachgeschäft-hero__content{padding:4rem}
}
/* Review pass: tighten homepage CTA rhythm, reduce mobile image dominance, and make the store feature read as a balanced conversion block. */
.home-instagram-preview{
padding-bottom:1.5rem!important;
}
.home-instagram-preview .instagram-gallery-grid{
margin-top:1.25rem;
}
.home-instagram-preview a[href*="instagram.com"]{
margin-top:1rem!important;
margin-bottom:-1.4rem;
position:relative;
z-index:2;
min-width:16rem;
}
#instagram{
padding-bottom:0!important;
}
#instagram+section{
margin-top:0;
padding-top:3.75rem!important;
}
#instagram+section .section-reveal>div{
gap:1.75rem;
}
#instagram+section h2{
max-width:14ch;
}
#instagram+section .section-reveal>div>div:first-child{
max-width:38rem;
}
.fachgeschäft-hero{
min-height:clamp(26rem,58vh,40rem);
}
.fachgeschäft-hero>.mx-auto{
display:grid;
min-height:inherit;
}
.fachgeschäft-hero__image{
background:#4a5255;
background-image:url("/Bilder/fix/shop/kuehnis-optik-gossau-fachgeschaeft-front.webp");
background-position:center;
background-repeat:no-repeat;
background-size:cover;
}
.fachgeschäft-hero__image img{
min-height:100%;
}
.fachgeschäft-hero__content{
justify-content:flex-start;
}
@media (min-width:768px){
.fachgeschäft-hero>.mx-auto{
grid-template-columns:minmax(0,1.15fr) minmax(420px,.85fr);
}
.fachgeschäft-hero__image{
min-height:100%;
}
.fachgeschäft-hero__content{
padding:2.35rem 2.5rem 3rem;
}
.home-instagram-preview{
padding-top:3.5rem!important;
padding-bottom:1.5rem!important;
}
#instagram+section{
padding-top:3.25rem!important;
padding-bottom:4.5rem!important;
}
}
@media (max-width:767px){
.page-hero{
padding-bottom:1.5rem!important;
}
.page-hero-media{
aspect-ratio:5/4;
max-height:min(46svh,22rem);
margin-bottom:.9rem!important;
/* Edge-to-edge auf Mobile: Eltern-Container hat px-5 (1.25rem)
horizontal padding (sm:px-5 / lg:px-6). Negative Margins eat das,
sodass das Hero-Bild bis zum Bildschirmrand reicht. */
margin-left:-1.25rem!important;
margin-right:-1.25rem!important;
width:calc(100% + 2.5rem)!important;
max-width:none!important;
}
.page-hero h1{
font-size:2rem;
line-height:1.04;
}
.page-hero .mt-5.grid{
margin-top:.9rem!important;
}
.home-instagram-preview{
padding-top:2.5rem!important;
padding-bottom:1rem!important;
}
.home-instagram-preview .instagram-gallery-grid{
gap:.55rem;
margin-top:1rem;
}
.home-instagram-preview a[href*="instagram.com"]{
width:100%;
min-width:0;
margin-top:.9rem!important;
margin-bottom:-1rem;
}
#instagram+section{
padding-top:2.35rem!important;
padding-bottom:2.5rem!important;
}
#instagram+section .section-reveal>div{
gap:1.1rem;
}
#instagram+section h2{
margin-top:.7rem;
max-width:11ch;
}
#instagram+section p{
max-width:26rem;
}
.fachgeschäft-hero{
min-height:auto;
}
.fachgeschäft-hero>.mx-auto{
grid-template-columns:1fr;
}
.fachgeschäft-hero__image{
min-height:16rem;
max-height:20rem;
}
.fachgeschäft-hero__content{
padding:1.25rem 1.25rem 1.6rem;
}
}
/* Focused polish: "Brillen des Monats" and service section hierarchy. */
.monthly-glasses-highlight{
align-items:start;
gap:1.4rem 1.8rem;
}
.monthly-glasses-highlight__thumbs{
gap:.7rem;
}
.monthly-glasses-highlight__thumb-frame{
border:1px solid rgba(255,255,255,.26);
background:rgba(255,255,255,.12);
}
.monthly-glasses-highlight__panels{
align-self:start;
}
.monthly-glasses-highlight__panel{
border:1px solid rgba(255,255,255,.14);
background:rgba(63,69,71,.88);
box-shadow:0 18px 36px rgba(15,23,42,.12);
}
.monthly-glasses-highlight__panel figure{
background:#fff;
}
.monthly-glasses-highlight__panel-copy{
padding:1.2rem 1.2rem 1.1rem;
}
.monthly-glasses-highlight__panel-copy p:first-child{
color:rgba(255,255,255,.76)!important;
letter-spacing:.18em;
}
.monthly-glasses-highlight__panel-copy h3,
.monthly-glasses-highlight__panel-copy p,
.monthly-glasses-highlight__panel-copy a{
color:#fff!important;
}
.monthly-glasses-highlight__panel-copy .inline-flex + .inline-flex{
border-color:rgba(255,255,255,.22)!important;
background:rgba(255,255,255,.12)!important;
}
.monthly-glasses-highlight__panel-copy .inline-flex + .inline-flex:hover{
background:rgba(255,255,255,.2)!important;
}
.monthly-glasses-highlight__thumb-frame img{
object-fit:contain!important;
}
.card-reveal{
position:relative;
height:auto;
min-height:0;
align-self:start;
overflow:hidden;
border-color:rgba(70,76,78,.12)!important;
box-shadow:0 14px 30px rgba(15,23,42,.08);
}
.home-kpi-card{
min-height:11.75rem;
height:100%;
position:relative;
isolation:isolate;
justify-content:space-between;
color:#fff!important;
border:1px solid rgba(22,92,138,.3)!important;
background:#0f4e75!important;
background-image:linear-gradient(145deg,#0f4e75 0%,#1f8bcc 58%,#6cbbe6 100%)!important;
padding:1.3rem 1.2rem!important;
box-shadow:0 18px 34px rgba(15,78,117,.18),0 1px 0 rgba(255,255,255,.18) inset;
}
.home-kpi-card::before{
content:"";
position:absolute;
inset:0 auto 0 0;
width:3px;
background:linear-gradient(180deg,#d6eefb 0%,#ffffff 100%);
z-index:0;
}
.home-kpi-card > *{
position:relative;
z-index:1;
opacity:1!important;
filter:none!important;
}
.home-kpi-card > p:first-child{
margin:0;
color:#fff!important;
font-size:2.05rem;
line-height:.98;
font-weight:700;
letter-spacing:-.02em;
text-shadow:none!important;
}
.home-kpi-card > p:nth-child(2){
margin-top:.58rem!important;
max-width:16ch;
color:rgba(255,255,255,.86)!important;
font-size:.98rem;
line-height:1.5;
text-shadow:none!important;
}
.home-kpi-card > a{
margin-top:auto!important;
margin-left:0!important;
display:inline-flex;
align-items:center;
gap:.45rem;
width:fit-content;
min-height:2.55rem;
padding:.62rem .9rem;
border:1px solid rgba(255,255,255,.24);
background:rgba(255,255,255,.12);
color:#fff!important;
font-size:.8rem!important;
font-weight:700;
line-height:1;
text-decoration:none!important;
box-shadow:0 10px 20px rgba(15,23,42,.14);
transition:background-color 180ms ease,border-color 180ms ease,color 180ms ease,transform 180ms ease,box-shadow 180ms ease;
}
.home-kpi-card > a:hover{
border-color:rgba(255,255,255,.44);
background:rgba(255,255,255,.2);
color:#fff!important;
transform:translateY(-1px);
box-shadow:0 14px 24px rgba(15,23,42,.18);
}
/* About page: equal-height value cards and team cards aligned to the homepage style. */
#ueber-uns .grid,
#team .grid{
align-items:stretch;
}
#ueber-uns .card-reveal{
display:flex;
height:100%;
min-height:18.5rem;
flex-direction:column;
}
#team .card-reveal{
display:flex;
height:100%;
min-height:27.75rem;
flex-direction:column;
align-items:center;
justify-content:flex-start;
padding:2rem 1.75rem;
}
#team .card-reveal > h3{
margin-top:.2rem;
text-align:center;
}
#team .card-reveal > p{
width:100%;
max-width:18rem;
text-align:center;
}
#team .card-reveal > p + p{
margin-top:.7rem;
}
#team .card-reveal .mx-auto.mb-4.h-44.w-44{
margin-bottom:1.35rem;
}
#team .card-reveal:last-child{
justify-content:center;
}
#team .card-reveal:last-child > p{
max-width:20rem;
}
#team .card-reveal:last-child .mt-5{
margin-top:auto;
width:100%;
}
@media (max-width:767px){
#ueber-uns .card-reveal{
min-height:auto;
}
#team .card-reveal{
min-height:auto;
padding:1.7rem 1.35rem;
}
}
.card-reveal .group{
min-height:0;
}
.card-reveal .relative.h-64,
.card-reveal .relative.h-72,
.card-reveal .relative.h-80,
.card-reveal .relative[class*="h-"]{
height:13rem!important;
}
/* Shape consistency pass: team/Instagram boxes stay square while portraits remain round. */
#team .card-reveal,
.home-instagram-preview,
.instagram-gallery-grid img{
border-radius:0!important;
}
#team .card-reveal .mx-auto.mb-4.h-44.w-44{
border-radius:9999px!important;
}
/* Homepage team preview: square cards, circular portraits. */
section .grid > .card-reveal.text-center.border-\[\#4f5557\]{
border-radius:0!important;
}
section .grid > .card-reveal.text-center.border-\[\#4f5557\] .relative.mx-auto.mb-4.h-44.w-44{
border-radius:9999px!important;
}
/* Homepage service cards: keep all service types visually equal, including Computerbrillen. */
section .grid > .card-reveal[role="button"]{
height:100%;
min-height:100%;
border-radius:0!important;
}
section .grid > .card-reveal[role="button"] > .relative{
flex:0 0 13rem;
height:13rem!important;
}
section .grid > .card-reveal[role="button"] > .flex-1{
display:flex;
min-height:15.5rem;
flex-direction:column;
}
section .grid > .card-reveal[role="button"] h3{
min-height:3.1rem;
display:flex;
align-items:flex-start;
}
.card-reveal img{
object-position:center;
}
.card-reveal [class*="bg-black/20"],
.card-reveal [class*="bg-black/50"]{
background:linear-gradient(180deg,rgba(70,76,78,.06) 0%,rgba(70,76,78,.2) 34%,rgba(70,76,78,.86) 100%)!important;
}
.card-reveal h3{
font-size:1.28rem;
line-height:1.12;
}
.card-reveal p{
max-width:34ch;
}
.card-reveal .inline-flex.items-center.justify-center.gap-2{
min-height:2.6rem;
}
.card-reveal [aria-expanded="false"] .grid.transition-all{
opacity:.98;
}
@media (min-width:768px){
.monthly-glasses-highlight{
grid-template-columns:minmax(0,1.28fr) minmax(320px,.72fr);
gap:1.8rem 2.2rem;
}
.monthly-glasses-highlight__thumbs{
grid-template-columns:repeat(3,minmax(0,1fr));
}
.monthly-glasses-highlight__panel{
position:sticky;
top:7rem;
}
.card-reveal{
min-height:0;
}
.home-kpi-card{
min-height:10.75rem;
}
.card-reveal .relative.h-64,
.card-reveal .relative.h-72,
.card-reveal .relative.h-80,
.card-reveal .relative[class*="h-"]{
height:12.2rem!important;
}
.card-reveal h3{
min-height:2.8rem;
}
}
@media (max-width:767px){
.monthly-glasses-highlight{
gap:1rem;
}
.monthly-glasses-highlight__thumbs{
order:2;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:.55rem;
}
.monthly-glasses-highlight__panels{
order:1;
}
/* Panel-Display laeuft via Radio-:checked-Sibling-Selector (siehe Anfang
der Datei). Vorher hatten wir hier !important-Regeln, die immer Panel 1
gezeigt haben -- das hat den Radio-Mechanismus auf Mobile lahmgelegt. */
.monthly-glasses-highlight__panel figure{
max-width:15rem;
margin:0 auto;
}
.monthly-glasses-highlight__panel-copy{
padding:1rem .95rem .95rem;
}
.card-reveal{
min-height:auto;
}
.home-kpi-card{
min-height:0;
padding:1rem .95rem!important;
}
.home-kpi-card > p:first-child{
font-size:1.82rem;
}
.home-kpi-card > p:nth-child(2){
font-size:.94rem;
}
.card-reveal .relative.h-64,
.card-reveal .relative.h-72,
.card-reveal .relative.h-80,
.card-reveal .relative[class*="h-"]{
height:10.5rem!important;
}
.card-reveal h3{
font-size:1.12rem;
}
.card-reveal p{
font-size:.92rem;
line-height:1.55;
}
}
html,
body{
max-width:100%;
overflow-x:hidden;
}
.hero-whatsapp-modal{
overflow-x:hidden;
}
.hero-whatsapp-modal__dialog{
width:min(560px,calc(100vw - 1.5rem));
max-width:calc(100vw - 1.5rem);
overflow-x:hidden;
}
.hero-whatsapp-form,
.hero-whatsapp-form__grid,
.hero-whatsapp-field,
.hero-whatsapp-time-field,
.hero-whatsapp-alternative-field{
min-width:0;
}
.hero-whatsapp-field input,
.hero-whatsapp-field select,
.hero-whatsapp-field textarea{
max-width:100%;
}
.site-faq-card details,
.site-faq-card .mt-6>details{
background:#e5e7eb!important;
border-color:rgba(0,0,0,.12)!important;
}
.site-faq-card details>summary,
.site-faq-card details>div>div>div,
.site-faq-card details p,
.site-faq-card details svg{
color:#111827!important;
}
.site-faq-card details a,
.site-faq-card details a:hover{
color:#0f4e75!important;
}
/* Mehr Atemraum zwischen Icon und Text in Kontakt-Inline-Links
(Telefon, Öffnungszeiten, Anfahrt im Hero etc.). */
a.inline-flex.items-center.gap-2:has(svg.lucide){
gap:.75rem;
}
a.inline-flex.items-center.gap-3:has(svg.lucide){
gap:1rem;
}
.monthly-glasses-highlight{
grid-template-columns:minmax(0,1fr)!important;
gap:1.25rem!important;
}
.monthly-glasses-highlight__pagination{
display:flex;
align-items:center;
justify-content:flex-end;
gap:.65rem;
}
.monthly-glasses-highlight__pagination[hidden]{
display:none!important;
}
.monthly-glasses-highlight__pagination-button{
display:inline-flex;
align-items:center;
justify-content:center;
width:2.75rem;
height:2.75rem;
border:1px solid rgba(255,255,255,.28);
background:rgba(255,255,255,.14);
color:#fff;
transition:background .18s ease,border-color .18s ease,opacity .18s ease,transform .18s ease;
}
.monthly-glasses-highlight__pagination-button:hover:not(:disabled){
background:rgba(255,255,255,.22);
border-color:rgba(255,255,255,.44);
transform:translateY(-1px);
}
.monthly-glasses-highlight__pagination-button:disabled{
opacity:.45;
cursor:not-allowed;
}
.monthly-glasses-highlight__pagination-status{
min-width:5.5rem;
text-align:center;
font-size:.8rem;
font-weight:700;
letter-spacing:.08em;
text-transform:uppercase;
color:rgba(255,255,255,.82);
}
/* Order auf Mobile: erst die grosse Karten-Box (panels) mit der ausgewaehlten
Brille, DANN das kleine Thumb-Grid darunter. Auf Desktop bleibt das
Side-by-Side-Layout via grid-template-columns (siehe @media unten). */
.monthly-glasses-highlight__thumbs{
order:3;
}
.monthly-glasses-highlight__thumb.is-page-hidden{
display:none!important;
}
.monthly-glasses-highlight__panels{
order:1;
}
.monthly-glasses-highlight__panel{
position:static!important;
}
@media (min-width:768px){
.monthly-glasses-highlight__thumbs{
grid-template-columns:repeat(4,minmax(0,1fr))!important;
}
}
/* Final card-shape overrides must stay at the end of the export CSS. */
#team .card-reveal,
.home-instagram-preview,
.instagram-gallery-grid img,
section .grid > .card-reveal.text-center.border-\[\#4f5557\],
section .grid > .card-reveal[role="button"]{
border-radius:0!important;
}
#team .card-reveal .mx-auto.mb-4.h-44.w-44,
section .grid > .card-reveal.text-center.border-\[\#4f5557\] .relative.mx-auto.mb-4.h-44.w-44{
width:11rem!important;
height:11rem!important;
border-radius:9999px!important;
}
/* Requested tune-up: tighter homepage services and equal team card proportions. */
section .grid > .card-reveal[role="button"] > .relative{
flex-basis:10.75rem!important;
height:10.75rem!important;
}
section .grid > .card-reveal[role="button"] > .flex-1{
min-height:0!important;
padding:1.15rem 1.25rem 1.2rem!important;
}
section .grid > .card-reveal[role="button"] h3{
min-height:0!important;
}
section .grid > .card-reveal[role="button"] .grid.transition-all > div > div{
padding-bottom:.25rem!important;
}
section .grid > .card-reveal.text-center.border-\[\#4f5557\]{
display:flex!important;
height:100%!important;
min-height:17.25rem!important;
flex-direction:column!important;
justify-content:flex-start!important;
}
@media (min-width:768px){
#team .card-reveal{
aspect-ratio:1/1!important;
min-height:0!important;
height:auto!important;
justify-content:center!important;
padding:1.25rem!important;
}
#team .card-reveal .mx-auto.mb-4.h-44.w-44{
width:8.25rem!important;
height:8.25rem!important;
margin-bottom:1rem!important;
}
#team .card-reveal > p{
max-width:16rem!important;
font-size:.82rem!important;
line-height:1.35!important;
}
#team .card-reveal > p + p{
margin-top:.45rem!important;
}
}
.footer-cta-actions{
display:flex;
flex-direction:column;
gap:.65rem;
}
.footer-cta-actions .footer-cta-button{
display:inline-flex;
align-items:center;
justify-content:center;
gap:.5rem;
width:100%;
min-height:2.75rem;
padding:.75rem 1rem;
border:1px solid rgba(255,255,255,.18);
background:rgba(255,255,255,.08);
color:#fff!important;
font-size:.9rem;
font-weight:700;
white-space:nowrap;
text-decoration:none!important;
transition:background-color .18s ease,border-color .18s ease,transform .18s ease;
}
.footer-cta-actions .footer-cta-button:hover{
border-color:rgba(255,255,255,.34);
background:rgba(255,255,255,.14);
transform:translateY(-1px);
}
.footer-cta-actions .footer-cta-button--primary{
border-color:#1f8bcc;
background:#1f8bcc;
}
.footer-cta-actions .footer-cta-button--whatsapp{
border-color:#25D366;
background:#25D366;
}
.footer-cta-actions .footer-cta-button--instagram{
border-color:#E1306C;
background:#E1306C;
}
/* Restored homepage uses the ASCII "fachgeschaeft" class names. */
.fachgeschaeft-hero{min-height:58vh;background:#3f4547}
.fachgeschaeft-hero>.mx-auto{display:grid;min-height:inherit}
.fachgeschaeft-hero__image{min-height:16rem;background:#4a5255}
.fachgeschaeft-hero__image img{display:block;width:100%;height:100%;min-height:inherit;object-fit:cover;object-position:center top}
.fachgeschaeft-hero__content{display:flex;min-height:100%;flex-direction:column;justify-content:center;background:linear-gradient(145deg,#3f4547 0%,#4b5254 58%,#5a666d 100%);color:#fff;padding:.85rem 1.25rem}
.fachgeschaeft-hero__content h2,
.fachgeschaeft-hero__content p,
.fachgeschaeft-hero__content span{color:#fff!important}
.fachgeschaeft-hero__content p.text-slate\/60,
.fachgeschaeft-hero__content .text-slate\/60{color:#fff!important}
.fachgeschaeft-hero__content a{color:#fff}
.fachgeschaeft-hours span{color:#fff!important}
/* Homepage team preview: square cards with round portraits. */
section:has(img[alt="Anita Gysel"]) .grid > .card-reveal:has(img[alt]){
aspect-ratio:1/1!important;
min-height:0!important;
height:auto!important;
display:flex!important;
flex-direction:column!important;
justify-content:flex-start!important;
border-radius:0!important;
}
section:has(img[alt="Anita Gysel"]) .grid > .card-reveal:has(img[alt]) > .flex{
height:100%;
align-items:flex-start!important;
}
section:has(img[alt="Anita Gysel"]) .grid > .card-reveal:has(img[alt]) .relative:has(> img[alt]){
width:clamp(5.25rem,7.5vw,6rem)!important;
height:clamp(5.25rem,7.5vw,6rem)!important;
border-radius:9999px!important;
overflow:hidden!important;
}
section:has(img[alt="Anita Gysel"]) .grid > .card-reveal:has(img[alt]) img{
border-radius:9999px!important;
}
@media (min-width:768px){
.fachgeschaeft-hero>.mx-auto{grid-template-columns:minmax(0,1.15fr) minmax(420px,.85fr)}
.fachgeschaeft-hero__image{min-height:100%}
.fachgeschaeft-hero__content{padding:2.35rem 2.5rem 3rem}
}
/* Fachgeschaeft section: restore the old hero-like full-width 50/50 layout. */
.fachgeschaeft-hero{
width:100%!important;
min-height:clamp(32rem,68vh,46rem)!important;
background:#3f4547!important;
}
.fachgeschaeft-hero > .mx-auto{
width:100%!important;
max-width:none!important;
margin-left:0!important;
margin-right:0!important;
}
.fachgeschaeft-hero__image,
.fachgeschaeft-hero__content{
min-height:inherit!important;
}
.fachgeschaeft-hero__content .mt-5.grid > a{
border:1px solid rgba(255,255,255,.22)!important;
background:#4f5557!important;
color:#fff!important;
box-shadow:none!important;
}
.fachgeschaeft-hero__content .mt-5.grid > a:hover{
border-color:rgba(255,255,255,.38)!important;
background:#3f4547!important;
color:#fff!important;
}
.fachgeschaeft-hero__content .mt-5.grid > a svg{
color:#fff!important;
}
@media (min-width:768px){
.fachgeschaeft-hero > .mx-auto{
grid-template-columns:50% 50%!important;
}
.fachgeschaeft-hero__content{
padding:clamp(2.25rem,4.2vw,4.8rem)!important;
}
}
@media (max-width:767.98px){
.fachgeschaeft-hero{
min-height:0!important;
}
.fachgeschaeft-hero__image{
min-height:18rem!important;
}
.fachgeschaeft-hero__content{
min-height:0!important;
padding:1.5rem!important;
}
}
/* Team photos: reveal the second portrait on hover, focus, or click/tap. */
.team-photo-hover{
position:relative;
isolation:isolate;
cursor:pointer;
touch-action:manipulation;
}
.team-photo-hover__base,
.team-photo-hover__alt{
transition:opacity 240ms ease,transform 320ms ease;
}
.team-photo-hover__base{
z-index:0;
}
.team-photo-hover__alt{
position:absolute!important;
inset:0!important;
z-index:1;
width:100%!important;
height:100%!important;
opacity:0;
pointer-events:none;
}
.team-photo-hover:hover .team-photo-hover__base,
.team-photo-hover:focus-within .team-photo-hover__base,
.team-photo-hover--active .team-photo-hover__base,
.team-photo-hover--locked .team-photo-hover__base{
opacity:0;
}
.team-photo-hover:hover .team-photo-hover__alt,
.team-photo-hover:focus-within .team-photo-hover__alt,
.team-photo-hover--active .team-photo-hover__alt,
.team-photo-hover--locked .team-photo-hover__alt{
opacity:1;
transform:scale(1.02);
}
@media (prefers-reduced-motion:reduce){
.team-photo-hover__base,
.team-photo-hover__alt{
transition:none;
}
}
/* Mobile team cards: compact cards with stronger portraits. */
@media (max-width:767.98px){
#team .grid:has(.card-reveal img[alt]),
section:has(img[alt="Anita Gysel"]) .grid:has(> .card-reveal img[alt]){
gap:1rem!important;
}
#team .card-reveal,
section:has(img[alt="Anita Gysel"]) .grid > .card-reveal:has(img[alt]){
aspect-ratio:auto!important;
min-height:0!important;
height:auto!important;
padding:1.15rem 1rem 1.25rem!important;
display:flex!important;
flex-direction:column!important;
align-items:center!important;
justify-content:flex-start!important;
}
section:has(img[alt="Anita Gysel"]) .grid > .card-reveal:has(img[alt]) > .flex{
height:auto!important;
min-height:0!important;
align-items:center!important;
justify-content:flex-start!important;
gap:.65rem!important;
}
#team .card-reveal .relative:has(> img[alt]),
#team .card-reveal .mx-auto.mb-4.h-44.w-44,
section:has(img[alt="Anita Gysel"]) .grid > .card-reveal:has(img[alt]) .relative:has(> img[alt]){
width:clamp(7.25rem,34vw,8.75rem)!important;
height:clamp(7.25rem,34vw,8.75rem)!important;
margin-bottom:.8rem!important;
flex:0 0 auto!important;
border-radius:9999px!important;
overflow:hidden!important;
}
#team .card-reveal .relative:has(> img[alt]) img,
#team .card-reveal .mx-auto.mb-4.h-44.w-44 img,
section:has(img[alt="Anita Gysel"]) .grid > .card-reveal:has(img[alt]) .relative:has(> img[alt]) img{
width:100%!important;
height:100%!important;
object-fit:cover!important;
object-position:center!important;
border-radius:9999px!important;
}
#team .card-reveal h3,
section:has(img[alt="Anita Gysel"]) .grid > .card-reveal:has(img[alt]) h3{
margin-top:0!important;
font-size:1.15rem!important;
line-height:1.2!important;
}
#team .card-reveal p,
section:has(img[alt="Anita Gysel"]) .grid > .card-reveal:has(img[alt]) p{
max-width:22rem!important;
font-size:.92rem!important;
line-height:1.45!important;
text-align:center!important;
}
#team .card-reveal p + p,
section:has(img[alt="Anita Gysel"]) .grid > .card-reveal:has(img[alt]) p + p{
margin-top:.45rem!important;
}
}
/* Same store feature styles for the restored UTF-8 class name. */
.fachgeschäft-hero{min-height:clamp(26rem,58vh,40rem);background:#3f4547}
.fachgeschäft-hero>.mx-auto{display:grid;min-height:inherit}
.fachgeschäft-hero__image{min-height:16rem;background:#4a5255}
.fachgeschäft-hero__image img{display:block;width:100%;height:100%;min-height:inherit;object-fit:cover}
.fachgeschäft-hero__content{display:flex;min-height:100%;flex-direction:column;justify-content:center;background:linear-gradient(145deg,#3f4547 0%,#4b5254 58%,#5a666d 100%);color:#fff;padding:1.25rem}
.fachgeschäft-hero__content h2,.fachgeschäft-hero__content p{color:#fff!important}
@media (min-width:768px){
.fachgeschäft-hero>.mx-auto{grid-template-columns:minmax(0,1.15fr) minmax(420px,.85fr)}
.fachgeschäft-hero__image{min-height:100%}
.fachgeschäft-hero__content{padding:2.35rem 2.5rem 3rem}
}
/* ── koe-ui-audit 2026-04 ─────────────────────────────────────────────── */
/* Hero: tighter mobile padding, more breathing room above CTA text */
@media (max-width: 767px) {
.page-hero {
padding-bottom: 2.5rem;
}
.page-hero .mx-auto > div:first-child {
padding-top: 1.25rem;
}
}
/* Hero: larger on xl screens (1280px+) */
@media (min-width: 1280px) {
.page-hero {
height: auto;
min-height: clamp(36rem, 74svh, 52rem);
}
}
/* Nav: tighter vertical padding on mobile header */
@media (max-width: 767px) {
header.sticky {
padding-top: 0;
padding-bottom: 0;
}
}
/* Footer CTA section: ensure buttons never clip on small screens */
.footer-cta-actions {
min-width: 0;
}
.footer-cta-button {
min-width: 0;
word-break: break-word;
}
/* Touch target: hero CTA buttons are at least 48px tall on mobile */
@media (max-width: 639px) {
.page-hero a[href="/termin"],
.page-hero a[href^="tel:"] {
min-height: 3rem;
}
}
/* Mobile sidebar nav: slightly wider for readability */
@media (max-width: 767px) {
aside.fixed.inset-y-0.left-0 {
max-width: 400px;
}
}
/* Brand spotlight: smoother open/close transition */
.brand-spotlight-card {
transition: all 0.22s ease;
}.ig-post-wrap{text-decoration:none;display:block;position:relative;overflow:hidden}.ig-post-meta{position:absolute;bottom:0;left:0;right:0;display:flex;align-items:center;gap:10px;padding:6px 10px;background:linear-gradient(to top,rgba(0,0,0,.55) 0%,transparent 100%)}.ig-meta-item{display:inline-flex;align-items:center;gap:3px}.ig-meta-count{font-size:12px;font-weight:600;color:#fff;line-height:1;font-family:system-ui,sans-serif}.ig-like-heart{width:14px;height:14px;flex-shrink:0}.ig-comment-icon{width:13px;height:13px;flex-shrink:0}.ig-profile-follow-btn{display:inline-flex;align-items:center;gap:8px;flex-shrink:0;background:linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888);color:#fff;font-family:system-ui,-apple-system,sans-serif;font-size:1rem;font-weight:700;padding:10px 22px;border-radius:8px;text-decoration:none;position:relative;overflow:hidden;transition:filter .2s,transform .15s;box-shadow:0 2px 12px rgba(188,24,136,.35);white-space:nowrap}.ig-profile-follow-btn::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.3) 50%,transparent 65%);transform:translateX(-100%);transition:transform 0s}.ig-profile-follow-btn:hover{filter:brightness(1.1);transform:translateY(-1px)}.ig-profile-follow-btn:hover::after{transform:translateX(200%);transition:transform .5s ease}.ig-profile-follow-icon{width:20px;height:20px;flex-shrink:0}
/* ===== Homepage Hero Slider =====
WICHTIG: Es gibt im kompilierten Tailwind-Block (Zeile 1) eine alte
`.hero-slide{animation:15s ... heroFade}`-Regel fuer das frueher rein-CSS-
basierte 3-Slide-System mit Modifiern --one/--two/--three. Die kollidiert
mit unserem neuen JS-Slider, der nur `.hero-slide` + `.hero-slide-active`
benutzt: ohne Modifier kriegen alle Slides die Animation synchron und der
JS-Class-Toggle wird ueberstimmt. Deshalb hier `animation:none` mit
ausreichend Spezifitaet. */
.hero-slider .hero-slide,
.hero-slider .hero-slide.hero-slide-active { animation: none !important; }
.hero-slider { position: absolute; inset: 0; }
.hero-slide {
position: absolute; inset: 0;
opacity: 0;
transition: opacity 800ms ease-in-out;
pointer-events: none;
}
.hero-slide.hero-slide-active {
opacity: 1;
pointer-events: auto;
}
.hero-slide img {
width: 100%; height: 100%;
object-fit: cover; display: block;
}
.hero-dots {
position: absolute;
bottom: 12px; left: 50%;
transform: translateX(-50%);
display: flex; gap: 7px;
padding: 5px 9px;
background: rgba(0, 0, 0, .25);
border-radius: 999px;
backdrop-filter: blur(6px);
z-index: 3;
}
.hero-dot {
width: 8px; height: 8px;
border-radius: 50%;
background: rgba(255, 255, 255, .55);
border: 0;
cursor: pointer;
padding: 0;
transition: background 160ms ease, transform 160ms ease;
}
.hero-dot:hover { background: rgba(255, 255, 255, .85); }
.hero-dot.is-active {
background: #ffffff;
transform: scale(1.25);
}
@media (max-width: 767px) {
.hero-dots { display: none; }
}
@media (prefers-reduced-motion: reduce) {
.hero-slide { transition: none; }
}
/* Accessibility: Skip-to-Content + read-aloud + drawer trap (2026-05-02) */
.koe-skip-link{position:fixed;top:-100px;left:8px;z-index:200;background:#0f4e75;color:#fff;padding:12px 18px;border-radius:6px;font-weight:600;text-decoration:none;transition:top .15s ease;}
.koe-skip-link:focus{top:8px;outline:2px solid #fff;outline-offset:2px;}
@media (prefers-reduced-motion: reduce){.koe-skip-link{transition:none;}}
/* Vorlesen-Funktion (Web Speech API) — read-aloud.js
Position: immer unten links, damit kein Konflikt mit dem WhatsApp-FAB unten rechts.
Auf Mobile als kompakter Icon-Button (Label ausgeblendet), auf Desktop mit Text. */
#koe-readaloud-btn{position:fixed;bottom:1rem;left:1rem;z-index:50;display:inline-flex;align-items:center;gap:8px;border:1px solid #cbd5e1;background:#fff;color:#0f4e75;padding:10px 14px;border-radius:999px;font-family:inherit;font-size:14px;font-weight:600;cursor:pointer;box-shadow:0 8px 24px rgba(15,78,117,.18);transition:transform .15s ease,box-shadow .15s ease;}
#koe-readaloud-btn:hover{box-shadow:0 12px 28px rgba(15,78,117,.28);transform:translateY(-1px);}
#koe-readaloud-btn:focus-visible{outline:2px solid #0f4e75;outline-offset:2px;}
@media (max-width:640px){
#koe-readaloud-btn{padding:10px;font-size:0;gap:0;}
#koe-readaloud-btn .koe-ra-btn-label{display:none;}
}
@media (min-width:768px){
#koe-readaloud-btn{bottom:1.5rem;left:1.5rem;}
}
#koe-readaloud-panel{position:fixed;bottom:4.5rem;left:1rem;right:auto;z-index:51;width:280px;max-width:calc(100vw - 2rem);background:#fff;border:1px solid #e5e7eb;border-radius:12px;box-shadow:0 18px 48px rgba(15,78,117,.22);padding:14px 16px;font-family:inherit;color:#1f2937;}
@media (min-width:768px){
#koe-readaloud-panel{bottom:5rem;left:1.5rem;}
}
#koe-readaloud-panel.is-open{display:block;}
.koe-ra-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;}
#koe-ra-title{font-size:14px;font-weight:700;color:#0f4e75;margin:0;}
#koe-ra-status{font-size:12px;color:#64748b;margin:0 0 10px;}
.koe-ra-controls{display:flex;gap:6px;margin-bottom:12px;}
.koe-ra-icon-btn{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border:1px solid #cbd5e1;background:#fff;color:#0f4e75;border-radius:8px;cursor:pointer;transition:background .12s;}
.koe-ra-icon-btn:hover{background:#f1f5f9;}
.koe-ra-icon-btn:focus-visible{outline:2px solid #0f4e75;outline-offset:2px;}
.koe-ra-icon-btn.koe-ra-primary{background:#0f4e75;color:#fff;border-color:#0f4e75;}
.koe-ra-icon-btn.koe-ra-primary:hover{background:#0d4264;}
.koe-ra-row{display:flex;flex-direction:column;gap:4px;margin-bottom:8px;font-size:12px;color:#475569;}
.koe-ra-row label{font-weight:600;}
.koe-ra-row select,.koe-ra-row input[type=range]{width:100%;font-family:inherit;font-size:13px;padding:6px;border:1px solid #cbd5e1;border-radius:6px;background:#fff;}
.koe-ra-row input[type=range]{padding:0;}
@media (prefers-reduced-motion: reduce){
#koe-readaloud-btn,.koe-ra-icon-btn{transition:none;}
#koe-readaloud-btn:hover{transform:none;}
}
/* Home: Instagram-Preview-Section.
Abstand zum naechsten Block (CTA/Footer) ueber PADDING-BOTTOM produzieren,
damit das bg-slate/5 der Section bis nach unten weiterzieht (gleiches Grau
wie der Instagram-Block, kein weisser Body-Hintergrund). */
.home-instagram-preview{padding-top:2rem!important;padding-bottom:6rem!important;margin-bottom:0!important;}
@media (min-width:768px){.home-instagram-preview{padding-top:3rem!important;padding-bottom:8rem!important;margin-bottom:0!important;}}
/* Vorlesen-Button im Fachgeschaeft-Hero (Adresse + Oeffnungszeiten).
Das Hero hat haeufig text-white-Erbe vom Parent -- daher dunkle Farbe
explizit mit hoher Spezifitaet erzwingen. */
.oz-read-aloud,
.oz-read-aloud span,
.oz-read-aloud svg{color:#0f4e75 !important;}
.oz-read-aloud{display:inline-flex;align-items:center;gap:.5rem;margin-top:.85rem;border:1px solid rgba(15,78,117,.4);background:#fff;padding:.55rem 1rem;border-radius:9999px;font-family:inherit;font-size:.85rem;font-weight:600;cursor:pointer;transition:background .12s,box-shadow .12s;}
.oz-read-aloud:hover{background:#eaf3fa;box-shadow:0 6px 16px rgba(15,78,117,.16);}
/* ===========================================================================
SERVICE-PAGE POLISH (2026-05-04)
Subtile visuelle Akzente fuer Service-/Leistungs-Seiten. Keine Texteingriffe,
nur Farbe, Linien, Tile-Polish, Step-Listen, Stat-Cards, Quote-Blocks.
Hauptpalette: #0f4e75 (Primaer), #1f8bcc (Akzent), #22a8ff (Highlight).
=========================================================================== */
/* --- Hero-Polish: feiner Akzent-Strich oben + warmer Gradient-Wash unten --- */
.page-hero{position:relative;}
.page-hero::before{
content:"";
position:absolute;
top:0;left:0;right:0;
height:3px;
background:linear-gradient(90deg,#0f4e75 0%,#1f8bcc 45%,#22a8ff 75%,#70c0e6 100%);
z-index:1;
pointer-events:none;
}
.page-hero h1{position:relative;}
/* Eyebrow im Hero: feiner Akzent-Strich davor (greift automatisch auf alle
Service-Pages, da diese alle das gleiche data-edit-key="hero.eyebrow"-Pattern haben) */
.page-hero p[data-edit-key="hero.eyebrow"]::before{
content:"";
display:inline-block;
width:1.25rem;
height:1px;
background:#1f8bcc;
vertical-align:middle;
margin-right:.6rem;
transform:translateY(-2px);
}
/* --- Eyebrow-Akzent fuer alle Sections (Section-Header) --- */
.koe-eyebrow{
display:inline-block;
font-size:.72rem;
letter-spacing:.25em;
text-transform:uppercase;
color:#1f8bcc;
font-weight:600;
}
/* --- Sanfte Section-Trennlinie zwischen Bloecken --- */
.koe-divider{
display:flex;
align-items:center;
gap:1rem;
margin:1.5rem 0;
color:rgba(15,78,117,.18);
}
.koe-divider::before,
.koe-divider::after{
content:"";
flex:1;
height:1px;
background:linear-gradient(90deg,transparent,rgba(15,78,117,.22),transparent);
}
.koe-divider__dot{
width:.45rem;height:.45rem;
border-radius:50%;
background:#1f8bcc;
flex:none;
}
/* --- Stat-Card: prominenter Wert + Label fuer Statistiken --- */
.koe-stat-card{
position:relative;
border:1px solid rgba(15,78,117,.14);
background:linear-gradient(180deg,#ffffff 0%,#f4f9fc 100%);
padding:1.4rem 1.4rem 1.5rem;
overflow:hidden;
}
.koe-stat-card::before{
content:"";
position:absolute;
top:0;left:0;
width:3px;height:100%;
background:linear-gradient(180deg,#1f8bcc 0%,#22a8ff 100%);
}
.koe-stat-card__value{
font-family:"Poppins","Inter",system-ui,sans-serif;
font-size:2.4rem;
line-height:1.05;
font-weight:700;
color:#0f4e75;
letter-spacing:-.01em;
}
.koe-stat-card__value sub,
.koe-stat-card__value sup,
.koe-stat-card__unit{
font-size:1rem;
font-weight:600;
color:#1f8bcc;
vertical-align:baseline;
margin-left:.15rem;
}
.koe-stat-card__label{
margin-top:.45rem;
font-size:.85rem;
line-height:1.45;
color:#4a6174;
}
.koe-stat-card--accent{
background:linear-gradient(160deg,#0f4e75 0%,#1f8bcc 100%);
border-color:rgba(15,78,117,.4);
}
.koe-stat-card--accent::before{background:rgba(255,255,255,.3);}
.koe-stat-card--accent .koe-stat-card__value,
.koe-stat-card--accent .koe-stat-card__unit,
.koe-stat-card--accent .koe-stat-card__label{color:#fff;}
.koe-stat-card--accent .koe-stat-card__label{color:rgba(255,255,255,.85);}
/* --- Step-Liste: nummerierte Prozess-Anzeige --- */
.koe-steps{
list-style:none;
margin:0;padding:0;
counter-reset:koe-step;
display:grid;
gap:.8rem;
}
.koe-steps>li{
counter-increment:koe-step;
position:relative;
padding:1rem 1.1rem 1rem 3.5rem;
border:1px solid rgba(15,78,117,.12);
background:#fff;
transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease;
}
.koe-steps>li::before{
content:counter(koe-step,decimal-leading-zero);
position:absolute;
left:1rem;top:1rem;
width:1.85rem;height:1.85rem;
display:inline-flex;align-items:center;justify-content:center;
font-family:"Poppins","Inter",system-ui,sans-serif;
font-size:.78rem;font-weight:700;
letter-spacing:.04em;
color:#0f4e75;
border:1px solid rgba(15,78,117,.25);
background:#eaf3fa;
}
.koe-steps>li:hover{
border-color:rgba(31,139,204,.4);
box-shadow:0 6px 18px rgba(15,78,117,.07);
}
.koe-steps>li>strong,
.koe-steps>li>.koe-steps__title{
display:block;
font-weight:600;
color:#15324b;
margin-bottom:.2rem;
}
/* --- Feature-Tile: farbiges Icon-Tile statt grauer Box --- */
.koe-feature-tile{
position:relative;
display:flex;
flex-direction:column;
gap:.8rem;
padding:1.25rem 1.25rem 1.4rem;
border:1px solid rgba(15,78,117,.12);
background:#fff;
transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease;
}
.koe-feature-tile:hover{
border-color:rgba(31,139,204,.35);
box-shadow:0 10px 26px rgba(15,78,117,.08);
transform:translateY(-1px);
}
.koe-feature-tile__icon{
display:inline-flex;align-items:center;justify-content:center;
width:2.6rem;height:2.6rem;
background:linear-gradient(145deg,#eaf3fa 0%,#d1e6f3 100%);
color:#0f4e75;
border:1px solid rgba(15,78,117,.15);
}
.koe-feature-tile__icon svg{width:1.25rem;height:1.25rem;}
.koe-feature-tile__title{
font-weight:600;
color:#15324b;
font-size:1rem;
line-height:1.3;
}
.koe-feature-tile__text{
font-size:.92rem;
line-height:1.55;
color:#4a6174;
}
.koe-feature-tile--warm .koe-feature-tile__icon{
background:linear-gradient(145deg,#fef3e8 0%,#fde2c4 100%);
color:#7c2d12;
border-color:rgba(124,45,18,.15);
}
.koe-feature-tile--mint .koe-feature-tile__icon{
background:linear-gradient(145deg,#e7f6ee 0%,#cdebd7 100%);
color:#065f46;
border-color:rgba(6,95,70,.15);
}
/* --- Quote-/Highlight-Block: zentrale Aussagen visuell hervorheben --- */
.koe-quote-block{
position:relative;
border:1px solid rgba(15,78,117,.16);
background:linear-gradient(135deg,#f4f9fc 0%,#ffffff 65%);
padding:1.4rem 1.6rem 1.5rem 3.4rem;
color:#15324b;
font-size:1.05rem;
line-height:1.55;
}
.koe-quote-block::before{
content:"";
position:absolute;
left:1.4rem;top:1.45rem;
width:1.2rem;height:1px;
background:#1f8bcc;
}
.koe-quote-block::after{
content:"\201C";
position:absolute;
left:.75rem;top:.4rem;
font-family:"Poppins","Inter",serif;
font-size:3rem;
line-height:1;
color:rgba(31,139,204,.32);
font-weight:700;
}
.koe-quote-block strong{color:#0f4e75;}
.koe-quote-block__cite{
display:block;
margin-top:.7rem;
font-size:.78rem;
letter-spacing:.18em;
text-transform:uppercase;
color:#6b7f91;
}
/* --- Accent-Line: feine Linien-Trenner mit Punkt --- */
.koe-accent-line{
display:block;
width:3rem;height:2px;
background:linear-gradient(90deg,#0f4e75 0%,#1f8bcc 60%,#22a8ff 100%);
margin:.9rem 0 1.1rem;
}
/* Lift-Hover entfernt (User-Wunsch: Team-Karten unveraendert lassen). */
/* --- Highlight-Note (z.B. graue note-Boxen schoener akzentuieren) --- */
.koe-note-highlight{
position:relative;
border:1px solid rgba(31,139,204,.22);
background:linear-gradient(135deg,#f4f9fc 0%,#ffffff 100%);
padding:1rem 1.1rem 1rem 2.6rem;
font-size:.9rem;line-height:1.55;
color:#15324b;
}
.koe-note-highlight::before{
content:"";
position:absolute;
left:1rem;top:1.05rem;
width:1rem;height:1rem;
background:#1f8bcc;
-webkit-mask:url("data:image/svg+xml;utf8,") center/contain no-repeat;
mask:url("data:image/svg+xml;utf8,") center/contain no-repeat;
}
.koe-note-highlight strong{color:#0f4e75;}
/* --- Page-Mood-Akzente: warme/hoffnungsvolle Touches je Page-Typ --- */
/* Myopiekontrolle: Eltern-Zielgruppe, etwas waermerer Sand-Akzent */
body[data-page="myopiekontrolle"] .page-hero::before{
background:linear-gradient(90deg,#0f4e75 0%,#1f8bcc 35%,#e6b27a 75%,#f3cf9f 100%);
}
/* Low Vision: ruhig, hoffnungsvoll, sanftes Mint */
body[data-page="low-vision"] .page-hero::before{
background:linear-gradient(90deg,#0f4e75 0%,#1f8bcc 40%,#7fc6a8 80%,#a9d9c2 100%);
}
/* Winkelfehlsichtigkeit: praezis-fachlich, klarer Akzentbogen */
body[data-page="winkelfehlsichtigkeit"] .page-hero::before{
background:linear-gradient(90deg,#0f4e75 0%,#1f8bcc 50%,#22a8ff 85%,#70c0e6 100%);
}
/* --- Risk-Row Polish (existierende Tabellen-aehnliche Listen mit prozentualen Aussagen).
Grid statt Flex: bars und values stehen zeilenuebergreifend buendig
untereinander, unabhaengig von der Label-Laenge. --- */
.koe-risk-row{
display:grid;
grid-template-columns:minmax(0,1fr) 9rem 9rem;
align-items:center;
gap:1rem;
padding:.85rem 0;
border-bottom:1px solid rgba(15,78,117,.1);
font-size:.92rem;
color:#4a6174;
}
.koe-risk-row:last-child{border-bottom:none;}
.koe-risk-row__bar{
position:relative;
width:100%;
height:.45rem;
background:rgba(15,78,117,.08);
overflow:hidden;
}
.koe-risk-row__bar>span{
display:block;
height:100%;
background:linear-gradient(90deg,#1f8bcc 0%,#22a8ff 100%);
}
.koe-risk-row__value{
font-family:"Poppins","Inter",system-ui,sans-serif;
font-weight:700;
color:#0f4e75;
white-space:nowrap;
font-size:.92rem;
text-align:right;
}
/* --- Chip-Akzent (existing chips on myopie page) --- */
.koe-chip{
display:inline-flex;align-items:center;gap:.45rem;
padding:.45rem .9rem;
border:1px solid rgba(15,78,117,.18);
background:#f4f9fc;
font-size:.85rem;
color:#15324b;
font-weight:500;
transition:border-color .15s ease,background .15s ease;
}
.koe-chip::before{
content:"";
width:.4rem;height:.4rem;
border-radius:50%;
background:#1f8bcc;
}
.koe-chip:hover{
border-color:rgba(31,139,204,.45);
background:#eaf3fa;
}
/* --- Mobile Anpassungen Service-Polish --- */
@media (max-width:767px){
.koe-stat-card{padding:1.1rem;}
.koe-stat-card__value{font-size:2rem;}
.koe-quote-block{padding:1.1rem 1.1rem 1.2rem 2.6rem;font-size:1rem;}
.koe-quote-block::after{font-size:2.4rem;left:.55rem;top:.3rem;}
.koe-steps>li{padding:.85rem .9rem .85rem 3.1rem;}
.koe-steps>li::before{left:.85rem;top:.85rem;width:1.65rem;height:1.65rem;}
.koe-feature-tile{padding:1rem 1rem 1.2rem;}
.koe-feature-tile__icon{width:2.3rem;height:2.3rem;}
.koe-risk-row{grid-template-columns:minmax(0,1fr) 4.5rem auto;gap:.6rem;}
.page-hero::before{height:2px;}
}
@media (prefers-reduced-motion:reduce){
.koe-feature-tile,
.koe-steps>li{transition:none;}
.koe-feature-tile:hover{transform:none;}
}
/* ====================== /SERVICE-PAGE POLISH ====================== */
.oz-read-aloud:focus-visible{outline:2px solid #0f4e75;outline-offset:2px;}
/* ===========================================================================
A11y / UX final pass (2026-05-04)
- Erhoehte Kontrast-Korrekturen fuer Muted-Text und Sekundaer-Labels
- Universelle, sichtbare :focus-visible-States fuer alle interaktiven Elemente
- Touch-Target-Minimum 44x44px fuer kleine Footer-/Nav-Links auf Mobile
- Reduced-Motion-Fallback fuer alle neuen Service-Polish-Animationen
- aria-current="page"-Hervorhebung in Mega-Menue und Mobile-Nav
Hinweise:
- Wir UEBERSCHREIBEN keine Designer-Farben, sondern haerten nur grenzwertige
Tailwind-Opacities (text-slate/40..55, text-white/50..60) an.
- Brand-Akzent fuer Fokus: #1f8bcc (auf Hellem) bzw. #fff (auf Dunklem).
=========================================================================== */
/* --- 1. Kontrast-Korrekturen Muted-Text ---------------------------------- */
/* Tailwind erzeugt aus "text-slate/45" eine rgba mit Slate (#15324b) + Alpha 0.45.
Auf Weiss ergibt das ca. #828F9B = ~3.2:1 (FAIL fuer Body-Text).
Wir heben die effektive Mindeststaerke auf 0.75 an, was ~5:1 garantiert.
Selektor adressiert Inline-Tailwind-Klassen ueber das color-Property, wir
ueberschreiben gezielt nur die Opacity-Stufen unter 60. */
.text-slate\/40,
.text-slate\/45,
.text-slate\/50,
.text-slate\/55{color:#4a6174 !important;}
/* /60 ist der Schwellenwert (~4.5:1), wir lassen ihn unangetastet. */
/* Footer / dunkle Hintergruende: text-white/50 und /60 sind oft unter 4.5:1
gegen #15324b (Body-BG slate) — auf 0.7 Mindestopazitaet anheben. */
footer .text-white\/50,
footer .text-white\/55,
footer .text-white\/60,
.bg-slate .text-white\/50,
.bg-slate .text-white\/55,
.bg-slate .text-white\/60{color:rgba(255,255,255,.78) !important;}
/* Hero-/Karten-Eyebrow text-slate/60 auf weisser Karte: auf #4a6174 fixieren
(~5.4:1) — alte Werte um 60% Slate ergaben rund 4.6:1 auf Weiss, knapp.
Wir heben sicherheitshalber etwas an. */
.bg-white .text-slate\/60,
article.shadow-soft .text-slate\/60{color:#4a6174 !important;}
/* Quote-Block-Cite war #6b7f91 auf hellem Gradient (~3.6:1 auf #f4f9fc) — fix. */
.koe-quote-block__cite{color:#54657a !important;}
/* --- 2. Universelle Fokus-States ----------------------------------------- */
/* Tailwind-Reset entfernt die default-Outline. Wir setzen einen sichtbaren
:focus-visible-Ring fuer alles Interaktive mit hohem Kontrast.
- Auf hellen Hintergruenden: Ring in Akzentblau #1f8bcc.
- Auf dunklen Hintergruenden (Header / Footer / dunkle Sections): weisser Ring.
Wir respektieren existierende :focus-visible-Regeln (siehe Skip-Link, Read-Aloud). */
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible{
outline:2px solid #1f8bcc;
outline-offset:3px;
}
/* Dunkle Header-/Footer-/Slate-Sections: weisser Ring fuer Sichtbarkeit. */
header a:focus-visible,
header button:focus-visible,
header [role="button"]:focus-visible,
header [tabindex]:focus-visible,
header label:focus-visible,
footer a:focus-visible,
footer button:focus-visible,
footer [tabindex]:focus-visible,
.bg-slate a:focus-visible,
.bg-slate button:focus-visible,
[class*="bg-[#0f4e75]"] a:focus-visible,
[class*="bg-[#4f5557]"] a:focus-visible,
[class*="bg-[#4f5557]"] button:focus-visible,
[class*="bg-[#4f5557]"] summary:focus-visible{
outline:2px solid #ffffff;
outline-offset:3px;
}
/* FAQ-Summary auf weisser Karte: Akzentblau-Ring (Standard greift). */
/* Mobile-Nav-Toggle (Label statt Button): explizit fuer Tab-Sichtbarkeit. */
input[type="checkbox"]#mobile-nav-toggle:focus-visible + * label[for="mobile-nav-toggle"],
label[for="mobile-nav-toggle"]:focus-within{
outline:2px solid #1f8bcc;
outline-offset:2px;
}
/* --- 3. Touch-Target-Mindestgroesse (Mobile) ----------------------------- */
@media (max-width:767px){
/* Footer-Nav-Links: oft 14px-Text mit nur 4px vertikalem Abstand —> zu klein. */
footer ul a,
footer .space-y-2 > li > a{
display:inline-flex;
align-items:center;
min-height:44px;
padding:.35rem 0;
}
/* Mega-Menue-Links und Mobile-Nav-Items garantieren 44px. */
header nav a,
header nav button,
aside#mobile-nav-aside nav a,
aside#mobile-nav-aside nav button{
min-height:44px;
}
/* CTA-Buttons in Termin-Stack haben bereits py-3 — ok. */
/* Cookie-Settings-Button im Footer (text-only, ohne padding): aufpolstern. */
footer button[onclick*="koeOpenCookieSettings"]{
min-height:44px;
padding:.4rem .15rem;
}
/* Detail-Summaries in FAQ: schon py-4, aber Toggle-Span (+) zu klein. */
details > summary{min-height:44px;}
/* Kleine Icon-only-Links (Social-Icons) sind 40x40 — auf 44 anheben. */
footer a[aria-label="Instagram"],
footer a[aria-label="Facebook"],
footer a[aria-label="WhatsApp"]{
min-width:44px;
min-height:44px;
}
}
/* --- 4. aria-current="page"-Hervorhebung --------------------------------- */
/* Mega-Menue-Panel (.shadow-lift, weisser BG): blasses Akzent-Background. */
.shadow-lift a[aria-current="page"]{
background:rgba(15,78,117,.08) !important;
color:#0f4e75 !important;
font-weight:700;
}
/* Mobile-Nav-Drawer (dunkler BG): Akzentblau hervorheben. */
aside#mobile-nav-aside a[aria-current="page"]{
color:#22a8ff !important;
font-weight:700;
}
/* Footer-Nav (dunkler BG, weisse Links): unterstreichen + heller. */
footer nav a[aria-current="page"],
footer ul a[aria-current="page"]{
color:#ffffff !important;
text-decoration:underline;
text-underline-offset:4px;
text-decoration-thickness:2px;
text-decoration-color:#22a8ff;
font-weight:600;
}
/* --- 5. Reduced-Motion-Catch-All fuer neue Polish-Interaktionen ---------- */
@media (prefers-reduced-motion:reduce){
.koe-chip,
.koe-stat-card,
.koe-quote-block,
.koe-feature-tile,
.koe-steps>li{
transition:none !important;
transform:none !important;
}
.koe-feature-tile:hover,
.koe-steps>li:hover{
transform:none !important;
}
}
/* --- 6. Decorative-Element-Fixes ---------------------------------------- */
/* Risk-Row-Bar wird visuell gerendert, ist aber rein dekorativ — bereits
im Markup mit aria-hidden="true" versehen. CSS-only-Decoratives wie
.koe-quote-block::after (oeffnendes Anfuehrungszeichen) sind ::after =
pointer-events:none, fuer Screenreader unsichtbar. OK. */
/* --- 7. Form-Field-Fokus haerten ---------------------------------------- */
/* Generic Inputs (z.B. in Service-Page-Termin-Anfrage-Forms) bekommen
einen klaren Focus-Ring, falls keine spezifische Komponente greift. */
input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):focus-visible,
select:focus-visible,
textarea:focus-visible{
outline:none;
border-color:#1f8bcc;
box-shadow:0 0 0 3px rgba(31,139,204,.25);
}
/* --- 8. Skip-Link AA-Hardening ------------------------------------------ */
/* #0f4e75 auf #fff = 8.5:1 (AA Pass). Outline auf weiss bei :focus stellen
wir auf hellen Akzent um, damit der Ring auf dem dunklen BG sichtbar bleibt. */
.koe-skip-link:focus,
.koe-skip-link:focus-visible{
outline:3px solid #22a8ff;
outline-offset:2px;
box-shadow:0 0 0 1px #fff inset;
}
/* ====================== /A11y / UX final pass ====================== */
/* Gradient-Linie zwischen Header und Main entfernen (User-Wunsch). */
.h-1.w-full.bg-gradient-to-r{display:none;}
/* Team-Karten in /about: Bilder groesser, Inhalt vertikal zentriert.
Padding asymmetrisch (oben 1.25rem, unten 0.5rem), damit der Leerraum
unter dem letzten Text-Block visuell knapper wirkt. */
#team .card-reveal{
justify-content:center;
padding-top:1.25rem;
padding-bottom:0.5rem;
}
#team .card-reveal > div.group{
height:20rem;
width:20rem;
margin-bottom:1.25rem;
}
@media (max-width:1023px){
#team .card-reveal > div.group{
height:17rem;
width:17rem;
}
}
@media (max-width:639px){
#team .card-reveal > div.group{
height:14rem;
width:14rem;
}
}
/* Team-Karten auf der Startseite (Home): Bilder ~30% groesser, Inhalt
horizontal+vertikal zentriert. Selektor matcht ueber den Foto-Kreis
mit h-32 w-32 (Original-Tailwind-Groesse), damit nur Home-Karten
getroffen werden -- About hat h-64. */
.card-reveal:has(> div.h-32.w-32.rounded-full){
justify-content:center;
padding-top:1.25rem;
padding-bottom:0.5rem;
}
.card-reveal > div.h-32.w-32.rounded-full{
height:10.4rem;
width:10.4rem;
margin-bottom:1rem;
}
@media (max-width:639px){
.card-reveal > div.h-32.w-32.rounded-full{
height:9rem;
width:9rem;
}
}
/* Myopiekontrolle: drei Vorteils-Boxen in Brand-Blau mit weisser Schrift. */
.koe-myo-card{
background:linear-gradient(135deg,#0f4e75 0%,#1f8bcc 100%);
border:1px solid transparent;
border-radius:6px;
color:#fff;
}
.koe-myo-card > p{color:#fff;font-weight:500;}
/* Heading nur fett, wenn die Box mehr als einen Paragraphen hat (Vorteils-
Karten); reine Erkennen-Tiles bleiben auf medium fuer ruhigeres Schriftbild. */
.koe-myo-card > p:first-child:not(:only-child){font-weight:700;}
.koe-myo-card > p + p{color:rgba(255,255,255,.88);}
/* Tailwind-JIT hat auto-rows-fr nicht kompiliert -- raw CSS-Fallback,
damit alle Reihen in 2-spaltigen Grids gleich hoch werden. */
.md\:grid-cols-2.md\:auto-rows-fr{
grid-auto-rows:1fr;
}
@media (max-width:767px){
.md\:grid-cols-2.md\:auto-rows-fr{
grid-auto-rows:auto;
}
}
/* Service-Page Step/Feature-Boxen: mit bg-slate/5 + text-accent
Eyebrow -> Brand-Blau-Gradient mit weisser Schrift.
Trifft 10 Service-Pages: brillenberatung, computerbrillen, gleitsicht,
kontaktlinsen, low-vision, sehtest, service-garantie, sonnenbrillen,
sportbrillen, winkelfehlsichtigkeit. */
article.bg-slate\/5:has(> p.text-accent){
background:linear-gradient(135deg,#0f4e75 0%,#1f8bcc 100%);
border-color:transparent;
color:#fff;
}
article.bg-slate\/5:has(> p.text-accent) > p{color:#fff;}
article.bg-slate\/5:has(> p.text-accent) > p.text-accent{color:rgba(255,255,255,.78);}
article.bg-slate\/5:has(> p.text-accent) > p.text-slate\/75,
article.bg-slate\/5:has(> p.text-accent) > p.text-slate\/70,
article.bg-slate\/5:has(> p.text-accent) > p.text-slate\/80{color:#fff;}
article.bg-slate\/5:has(> p.text-accent) h2,
article.bg-slate\/5:has(> p.text-accent) h3,
article.bg-slate\/5:has(> p.text-accent) h4,
article.bg-slate\/5:has(> p.text-accent) strong{color:#fff;}
/* === Termin-/Lens-Center-Forms: Mobile-Robustheit ====================
Stellt sicher, dass Submit-Buttons auf kleinen Mobiles erreichbar
und tappable sind, ohne dass die Tastatur sie verdeckt. */
/* Termin-Form: Step-2-Button-Reihe stackt auf < 480px (sonst zu eng) */
@media (max-width:480px){
#form-step-2 .flex.gap-3{flex-direction:column;align-items:stretch;}
#form-step-2 .flex.gap-3 > #btn-zurueck{order:2;}
#form-step-2 .flex.gap-3 > button[type="submit"]{order:1;}
}
/* Termin-Form: Time-Chips passen sich kleinen Viewports an */
@media (max-width:480px){
#time-chips{
grid-template-columns:repeat(auto-fill, minmax(4.25rem, 1fr))!important;
gap:0.5rem!important;
}
#time-chips .time-chip{min-height:44px;padding:0.5rem 0.5rem;}
}
/* iOS-Auto-Zoom bei Inputs verhindern: alle Form-Inputs auf der Termin-Seite
und im Lens-Center bekommen min. 16px Schriftgröße, damit Safari nicht
reinzoomt, wenn der User antippt. */
@media (max-width:480px){
form[action="/api/appointments.php"] input,
form[action="/api/appointments.php"] select,
form[action="/api/appointments.php"] textarea,
.fitment-form input,
.fitment-form select,
.fitment-form textarea{font-size:16px!important;}
}
/* Zusätzliches Bottom-Padding auf der Termin-Seite, damit beim
Scrollen-zum-Submit-Button ein bisschen Luft unter ihm bleibt
(verhindert das "Klebt-an-Tastatur"-Gefühl auf iOS). */
@media (max-width:760px){
form[action="/api/appointments.php"]{padding-bottom:env(safe-area-inset-bottom);}
}
/* === Termin-Seite: Horizontal-Scroll auf Mobile verhindern ============
Manche Inputs/Buttons mit zu langem Text wie "Terminanfrage senden"
plus zu wenig padding lassen den Body breiter werden als der Viewport.
Plus: HTML-Body bekommt overflow-x:hidden. */
html,
body{overflow-x:hidden;max-width:100vw;}
/* Form-Container und Form selbst auf Mobile: niemals breiter als der Viewport */
@media (max-width:760px){
form[action="/api/appointments.php"],
form[action="/api/appointments.php"] *{max-width:100%;}
form[action="/api/appointments.php"]{
box-sizing:border-box;width:100%;
/* margin-l/r auf 0 falls eine Klasse weitergibt */
}
/* Termin-Hero-Outer Container darf nicht überstehen */
main#main > div > section.relative.overflow-hidden{overflow-x:hidden;}
/* Form-Inner-Container niemals 100vw überschreiten */
main#main .max-w-3xl{max-width:100%;width:100%;}
/* Time-Chips-Grid niemals horizontal scrollen */
#time-chips{max-width:100%;overflow-x:hidden;}
/* Zwei-Spalten-Inputs auf Mobile in eine Spalte */
#form-step-2 .grid.sm\:grid-cols-2{grid-template-columns:1fr!important;}
/* Inputs und Selects: explizit width:100% + box-sizing */
form[action="/api/appointments.php"] input,
form[action="/api/appointments.php"] select,
form[action="/api/appointments.php"] textarea{
width:100%;box-sizing:border-box;min-width:0;
}
}
/* === Instagram-"Folgen"-Button: auf Mobile UNTER der Headline statt
daneben. Gleicher Abstand oberhalb (zwischen Headline und Button) wie
unterhalb (zwischen Button und naechstem Absatz). 25px je Seite. */
@media (max-width:767px){
.home-instagram-preview .flex.items-start.justify-between{
flex-direction:column;
align-items:flex-start;
gap:0;
margin-bottom:0;
}
.ig-profile-follow-btn{
align-self:flex-start;
margin-top:1.5625rem; /* 25px ueber dem Button */
margin-bottom:1.5625rem; /* 25px unter dem Button */
}
}
/* === Service-Cards Accordion -- NUKLEARE Variante: collapsed = wirklich 0.
height + max-height + padding + margin alles 0, plus alle direkten Kinder
visibility:hidden, damit kein min-content-Trick die Karte aufbaut. */
.card-reveal .grid.transition-all{
display:block !important;
height:0 !important;
max-height:0 !important;
min-height:0 !important;
opacity:0 !important;
margin:0 !important;
padding:0 !important;
overflow:hidden !important;
transition: height .35s ease-out, max-height .35s ease-out, opacity .25s ease-out, margin .3s ease-out !important;
}
.card-reveal .grid.transition-all > *{
min-height:0 !important;
height:0 !important;
overflow:hidden !important;
visibility:hidden !important;
transition: visibility 0s linear .25s, height .3s ease-out !important;
}
/* Expanded: alles aufmachen. Selektoren decken alle Wrapper-Tiefen ab. */
.card-reveal[aria-expanded="true"] .grid.transition-all{
height:auto !important;
max-height:2000px !important;
opacity:1 !important;
margin-top:1rem !important;
overflow:visible !important;
}
.card-reveal[aria-expanded="true"] .grid.transition-all > *{
height:auto !important;
overflow:visible !important;
visibility:visible !important;
display:flex !important;
flex-direction:column !important;
transition: visibility 0s linear 0s, height .3s ease-out !important;
}
/* === Leistungen-Karten Buttons (z.B. Fuehrerschein-Sehtest mit 3 Buttons):
sauber als Grid stacken, alle Buttons gleiche Breite, voll-breit auf Mobile. */
.card-reveal .mt-auto.flex.flex-wrap.gap-2.self-end{
display:grid !important;
grid-template-columns:1fr !important;
gap:0.5rem !important;
align-self:stretch !important;
width:100%;
}
.card-reveal .mt-auto.flex.flex-wrap.gap-2.self-end > a,
.card-reveal .mt-auto.flex.flex-wrap.gap-2.self-end > button{
width:100% !important;
justify-content:center !important;
text-align:center;
}
@media (min-width: 640px){
.card-reveal .mt-auto.flex.flex-wrap.gap-2.self-end{
grid-template-columns:repeat(auto-fit, minmax(8rem, 1fr)) !important;
}
}
/* Card-Container darf wachsen, kein height-clipping */
.card-reveal{
height:auto !important;
min-height:0;
overflow:visible !important;
}
/* Card-Image-Container behaelt feste Hoehe, Card-Body waechst */
.card-reveal > .h-40{
flex-shrink:0;
}
/* "Zur Seite"-Button unten rechts in der expandierten Karte: explizit Margin-
Top + self-end + space davor, damit er nicht in der Mitte schwebt. */
.card-reveal[aria-expanded="true"] .grid.transition-all > div > a:last-of-type,
.card-reveal[aria-expanded="true"] .grid.transition-all > div > .mt-auto{
margin-top:1.5rem !important;
align-self:flex-end !important;
}
/* === Sehtest-Leistungen-Karten: alle Buttons unten stacken (vertikal,
full-width) auf kleinen Mobiles. Vorher ergab das Mix aus 2 PDF-Buttons
plus Termin ein unuebersichtliches Wrap-Layout. */
@media (max-width:480px){
section.bg-\[\#454b4e\] .card-reveal .mt-auto.flex.flex-wrap{
flex-direction:column;
align-items:stretch;
gap:0.5rem;
}
section.bg-\[\#454b4e\] .card-reveal .mt-auto.flex.flex-wrap > a{
width:100%;
text-align:center;
justify-content:center;
}
}
/* === Vertrauen-Stat-Cards (29+ Marken / 8 Fachpersonen / Seit 32 Jahren)
Blauer Hintergrund mit weisser Schrift -- konsistent mit den uebrigen
blauen Service-Karten (sehtest, kontaktlinsen, etc.). */
.koe-vertrauen-card{
background:linear-gradient(135deg,#0f4e75 0%,#1f8bcc 100%);
color:#fff;
}
.koe-vertrauen-card *{color:#fff;}
/* === Footer: Cookie-Button mit Impressum/Datenschutz auf gleicher Linie ===
Der Cookie-Einstellungen-Button rutscht auf Mobile auf eine zweite Linie,
weil flex ohne wrap und unterschiedliche Baseline. Wrap erlauben + center. */
footer .flex.gap-4{
flex-wrap:wrap;
align-items:center;
row-gap:0.5rem;
}
/* === Maintenance/Privacy: Tabelle nicht aus Container ragen lassen ====== */
.legal-page table,
main table,
.privacy-content table{
max-width:100%;
display:block;
overflow-x:auto;
-webkit-overflow-scrolling:touch;
}
@media (max-width:760px){
main table,
.legal-page table{
font-size:0.85rem;
}
}
/* === Hero-Footer-Icons (Telefon / Öffnungszeiten / Anfahrt): 3px Abstand
zwischen Icon und Text gemaess User-Wunsch. Tailwind gap-1.5 = 6px,
gap-2 = 8px; ueberschreiben auf 3px. */
.page-hero a[href^="tel:"],
.page-hero a[href*="oeffnungszeiten"],
.page-hero a[href*="anfahrt"],
.page-hero a[href*="maps"],
section[data-edit-key^="hero"] a[href^="tel:"],
main a[href^="tel:"].inline-flex.gap-1\.5,
main a[href*="oeffnungszeiten"].inline-flex.gap-1\.5,
main a[href*="anfahrt"].inline-flex.gap-1\.5{
gap:3px !important;
}
/* iOS-Fix: input[type="date"] und input[type="time"] kommen auf iOS Safari
mit nativem -webkit-appearance:textfield-Look, der das Feld breiter
macht als andere Inputs (wenn leer) und schmaler (wenn gefuellt).
appearance:none normalisiert das. Wir muessen aber width/height
explizit setzen, da iOS sonst die Box auf "natuerliche Content-Breite"
schrumpft (=leeres Feld zu schmal, gefuelltes Feld zu hoch). */
form[action="/api/appointments.php"] input[type="date"],
form[action="/api/appointments.php"] input[type="time"]{
-webkit-appearance:none !important;
appearance:none !important;
box-sizing:border-box !important;
display:block !important;
width:100% !important;
min-width:100% !important;
max-width:100% !important;
/* Gleiche Hoehe wie andere Inputs (px-4 py-3 + text-17px = ~52px) */
min-height:52px;
font-family:inherit;
}
/* Datums-Anzeige innen linksbuendig + nicht beschneiden */
form[action="/api/appointments.php"] input[type="date"]::-webkit-date-and-time-value{
text-align:left;
min-width:0;
width:100%;
}
form[action="/api/appointments.php"] input[type="date"]::-webkit-calendar-picker-indicator{
margin-left:auto;
filter:invert(1) brightness(2);
cursor:pointer;
width:1.25rem;
height:1.25rem;
}
/* iOS rendert leere date-Inputs sonst mit "kein Wert"-Platzhaltertext;
Datum-Format-Pseudoelement bekommt einheitliche Hoehe damit das Feld
sich nicht visuell unterscheidet je nach Befuellung. */
form[action="/api/appointments.php"] input[type="date"]::-webkit-datetime-edit{
display:inline-flex;
align-items:center;
height:auto;
padding:0;
}
/* === Buttons: sehr leichte Abrundung fuer ehemals eckige CTAs =========
Die Seite nutzt an vielen Stellen Tailwind "rounded-none" und einzelne
spaetere Overrides mit !important. Diese Regel greift nur bei echten
Button-/CTA-Elementen und laesst bewusst runde FABs/Toggle-Kreise in Ruhe. */
button.rounded-none,
a.rounded-none,
[role="button"].rounded-none,
input[type="button"].rounded-none,
input[type="submit"].rounded-none,
.footer-cta-button,
.monthly-glasses-highlight__panel-copy a,
.hero-whatsapp-alternative-field button,
.sb-quiz-opt{
border-radius:2px!important;
}
/* === Dunkles Royalblau-Overlay (20 %) fuer Leistungs-Karten-Bilder
Wirkt auf die 6 Service-Karten auf der Startseite (Unsere Leistungen)
sowie auf die Karten der Sehtest-Seite. Pattern .card-reveal > .h-40
wird ausschliesslich von diesen beiden Bereichen verwendet.
Beim Aufklappen der jeweiligen Karte verschwindet das Overlay nur
fuer DIESE Karte (aria-expanded="true"). */
.card-reveal > .h-40{
position:relative;
}
.card-reveal > .h-40::after{
content:"";
position:absolute;
inset:0;
background:rgba(30,58,138,.2);
pointer-events:none;
transition:opacity .3s ease;
}
.card-reveal[aria-expanded="true"] > .h-40::after{
opacity:0;
}
/* Sehtest-Bild neu zentrieren, damit die Koepfe nicht abgeschnitten werden */
.card-reveal .bg-cover[style*="sehtest-optiker-gossau-desktop"]{
background-position:center top!important;
}
/* === "Service auf einen Blick" - 4 Action-Karten -- 1:1 wie Wartungsseite.
Grund: arbitrary Tailwind-Farben (bg-[#0f7a5c] usw.) sind im
kompilierten site.css nur teilweise vorhanden, deshalb erscheinen drei
der vier Karten ohne Fuellfarbe. Hier die exakten Farben aus
maintenance.php fest verdrahtet. */
.service-blick{
grid-template-columns:repeat(4,minmax(0,1fr))!important;
margin-top:-10px;
margin-bottom:-6px;
}
/* Mobile: 2x2 statt 4-spaltig, sonst sind die 4 Buttons zu gequetscht. */
@media (max-width:767px){
.service-blick{
grid-template-columns:repeat(2,minmax(0,1fr))!important;
gap:10px!important;
}
}
.service-blick > a{
display:flex !important;
flex-direction:column;
align-items:center;
justify-content:center;
gap:8px;
padding:18px 12px;
border-radius:12px;
text-decoration:none;
font-weight:700;
font-size:14px;
border:1px solid;
transition:transform .15s, box-shadow .15s, background-color .15s;
text-align:center;
box-shadow:0 2px 8px rgba(15,78,117,.06);
}
.service-blick > a svg{width:26px;height:26px;}
.service-blick > a:hover{transform:translateY(-2px);}
.service-blick > a span:last-child{
font-size:11px;font-weight:500;opacity:.85;
}
.service-blick > a[href="/termin"]{
background:#0f4e75!important;color:#fff!important;border-color:#0f4e75!important;
}
.service-blick > a[href="/termin"]:hover{
background:#0d3f60!important;box-shadow:0 8px 20px rgba(15,78,117,.28);
}
.service-blick > a[href^="/lens-center"],
.service-blick > a[href="/kontaktlinsen"]{
background:#0f7a5c!important;color:#fff!important;border-color:#0f7a5c!important;
}
.service-blick > a[href^="/lens-center"]:hover,
.service-blick > a[href="/kontaktlinsen"]:hover{
background:#0a6248!important;box-shadow:0 8px 20px rgba(15,122,92,.32);
}
.service-blick > a[href^="https://wa.me"],
.service-blick > a[href^="https://api.whatsapp"],
.service-blick > a[data-whatsapp-soforttermin],
.service-blick > a[href="#whatsapp-soforttermin"]{
background:#25d366!important;color:#fff!important;border-color:#25d366!important;
}
.service-blick > a[href^="https://wa.me"]:hover,
.service-blick > a[href^="https://api.whatsapp"]:hover,
.service-blick > a[data-whatsapp-soforttermin]:hover,
.service-blick > a[href="#whatsapp-soforttermin"]:hover{
background:#1fb957!important;box-shadow:0 8px 20px rgba(37,211,102,.32);
}
.service-blick > a[href^="tel:"]{
background:#fff!important;color:#0f4e75!important;border-color:#0f4e75!important;
}
.service-blick > a[href^="tel:"]:hover{
background:#eef5fb!important;box-shadow:0 8px 20px rgba(15,78,117,.15);
}
/* Events-Nav: default hidden until /api/events-public.php confirms active events. */
html:not(.koe-has-events) header a[href="/events/"],
html:not(.koe-has-events) header a[href="/events"],
html:not(.koe-has-events) #mobile-nav-aside li:has(> a[href="/events/"]),
html:not(.koe-has-events) #mobile-nav-aside li:has(> a[href="/events"]) {
display:none !important;
}
/* Scroll-driven reveal: the page should feel alive, not static.
JS toggles .is-visible on .section-reveal / .fade-on-scroll via IntersectionObserver.
Honors prefers-reduced-motion below. */
/* Pure-CSS Fade-In, damit der Inhalt auch ohne scroll-reveal.js sichtbar wird
(z. B. /termin, wo das Skript nicht eingebunden ist). `both` setzt den
Start-Zustand sofort, das Ende bleibt auf opacity:1 stehen. */
@keyframes koePageFadeIn {
from { opacity:0; transform:translateY(8px); }
to { opacity:1; transform:none; }
}
.page-fade {
animation: koePageFadeIn .9s cubic-bezier(.22,.61,.36,1) both;
}
.page-fade.is-visible,
.page-fade.is-loaded {
opacity:1;
transform:none;
}
.section-reveal {
opacity:0;
transform:translateY(20px);
transition:opacity .8s cubic-bezier(.22,.61,.36,1), transform .8s cubic-bezier(.22,.61,.36,1);
will-change:opacity, transform;
}
.section-reveal.is-visible {
opacity:1;
transform:none;
}
/* Gentle child stagger inside revealed sections. */
.section-reveal > * {
opacity:0;
transform:translateY(14px);
transition:opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1);
}
.section-reveal.is-visible > * {
opacity:1;
transform:none;
}
.section-reveal.is-visible > *:nth-child(1) { transition-delay:.05s; }
.section-reveal.is-visible > *:nth-child(2) { transition-delay:.13s; }
.section-reveal.is-visible > *:nth-child(3) { transition-delay:.21s; }
.section-reveal.is-visible > *:nth-child(4) { transition-delay:.29s; }
.section-reveal.is-visible > *:nth-child(5) { transition-delay:.37s; }
.section-reveal.is-visible > *:nth-child(6) { transition-delay:.45s; }
.section-reveal.is-visible > *:nth-child(n+7) { transition-delay:.5s; }
/* Generic fade-on-scroll utility (cards, isolated blocks). */
.fade-on-scroll {
opacity:0;
transform:translateY(18px);
transition:opacity .75s cubic-bezier(.22,.61,.36,1), transform .75s cubic-bezier(.22,.61,.36,1);
}
.fade-on-scroll.is-visible {
opacity:1;
transform:none;
}
/* Hero typography & CTAs: light upward fade on first paint, independent of the observer. */
.page-hero h1,
.page-hero > div > div > p,
.page-hero .hero-opening-reminder,
.page-hero a.inline-flex {
opacity:0;
transform:translateY(12px);
animation:koeHeroFadeUp .85s cubic-bezier(.22,.61,.36,1) forwards;
}
.page-hero > div > div > p { animation-delay:.12s; }
.page-hero a.inline-flex { animation-delay:.22s; }
.page-hero .hero-opening-reminder { animation-delay:.32s; }
@keyframes koeHeroFadeUp {
to { opacity:1; transform:none; }
}
/* Card reveal: a soft fade-in when the surrounding section becomes visible. */
.section-reveal.is-visible .card-reveal {
animation:koeCardSettle .7s cubic-bezier(.22,.61,.36,1) both;
}
.section-reveal.is-visible .card-reveal:nth-child(1) { animation-delay:.08s; }
.section-reveal.is-visible .card-reveal:nth-child(2) { animation-delay:.16s; }
.section-reveal.is-visible .card-reveal:nth-child(3) { animation-delay:.24s; }
.section-reveal.is-visible .card-reveal:nth-child(4) { animation-delay:.32s; }
.section-reveal.is-visible .card-reveal:nth-child(n+5) { animation-delay:.4s; }
@keyframes koeCardSettle {
from { opacity:0; transform:translateY(12px); }
to { opacity:1; transform:none; }
}
/* No-JS fallback: show everything immediately so content is never hidden. */
html.no-js .page-fade,
html.no-js .section-reveal,
html.no-js .section-reveal > *,
html.no-js .fade-on-scroll {
opacity:1 !important;
transform:none !important;
}
/* Respect user motion preferences. */
@media (prefers-reduced-motion:reduce) {
.page-fade,
.section-reveal,
.section-reveal > *,
.fade-on-scroll,
.page-hero h1,
.page-hero > div > div > p,
.page-hero .hero-opening-reminder,
.page-hero a.inline-flex,
.section-reveal.is-visible .card-reveal {
opacity:1 !important;
transform:none !important;
animation:none !important;
transition:none !important;
}
}
/* Critical first-paint styles for the special-hours banner when it is pre-rendered. */
.special-hours-banner {
background:#366a9f;
color:#fff;
}
.special-hours-banner__inner {
max-width:min(100%,120rem);
margin:0 auto;
padding:.75rem 2rem;
}
.special-hours-banner__message {
margin:0;
font-size:.9rem;
font-weight:600;
line-height:1.35;
text-align:center;
text-wrap:balance;
}
@media (max-width:767px) {
.special-hours-banner__inner {
padding:.75rem 1rem;
}
.special-hours-banner__message {
font-size:.88rem;
}
}
/* Mobile fixes 2026-05-21 */
.card-reveal[aria-expanded="false"] .grid.transition-all{
grid-template-rows:0fr!important;
opacity:0!important;
margin-top:0!important;
}
.card-reveal[aria-expanded="false"] .lucide-chevron-down{
transform:rotate(0deg)!important;
}
@media (max-width:767px){
.card-reveal{
align-self:start;
height:fit-content!important;
min-height:0!important;
max-height:none!important;
}
.card-reveal > .flex-1{
flex:0 0 auto!important;
height:auto!important;
min-height:0!important;
}
.card-reveal .grid.transition-all{
display:block!important;
grid-template-rows:none!important;
max-height:0!important;
min-height:0!important;
overflow:hidden!important;
opacity:0!important;
margin-top:0!important;
transition:max-height .28s ease, opacity .2s ease, margin-top .2s ease!important;
}
.card-reveal .grid.transition-all > div{
height:auto!important;
min-height:0!important;
}
.card-reveal[aria-expanded="false"] .grid.transition-all > div{
overflow:hidden!important;
visibility:hidden;
}
.card-reveal[aria-expanded="true"] .grid.transition-all{
max-height:48rem!important;
opacity:1!important;
margin-top:1rem!important;
}
.card-reveal[aria-expanded="true"] .grid.transition-all > div{
overflow:visible!important;
visibility:visible;
}
.home-instagram-preview .ig-profile-follow-btn{
margin-bottom:3px!important;
}
}
.brand-mobile-modal[hidden]{
display:none!important;
}
.brand-mobile-modal{
position:fixed;
inset:0;
z-index:180;
display:flex;
align-items:center;
justify-content:center;
padding:18px;
}
.brand-mobile-modal-backdrop{
position:absolute;
inset:0;
background:rgba(15,23,42,.58);
}
.brand-mobile-modal-panel{
position:relative;
width:min(100%,390px);
max-height:calc(100dvh - 72px);
overflow:auto;
background:#fff;
color:#464c4e;
padding:28px 24px 24px;
box-shadow:0 24px 70px rgba(15,23,42,.32);
}
.brand-mobile-modal-close{
position:absolute;
top:8px;
right:10px;
width:44px;
height:44px;
color:#64748b;
font-size:34px;
line-height:1;
}
.brand-mobile-modal-logo{
display:flex;
align-items:center;
justify-content:center;
min-height:86px;
margin:6px 28px 20px;
}
.brand-mobile-modal-logo img{
max-width:100%;
max-height:86px;
object-fit:contain;
}
.brand-mobile-modal-kicker{
color:#0f4e75a6;
font-size:.74rem;
font-weight:700;
letter-spacing:.2em;
text-transform:uppercase;
}
.brand-mobile-modal-title{
margin-top:8px;
font-size:1.75rem;
font-weight:700;
line-height:1.15;
}
.brand-mobile-modal-text{
margin-top:14px;
font-size:1rem;
line-height:1.65;
color:rgba(70,76,78,.78);
}
.brand-mobile-modal-cta{
display:inline-flex;
align-items:center;
justify-content:center;
margin-top:22px;
background:#1f8bcc;
color:#fff;
padding:12px 18px;
font-size:.9rem;
font-weight:700;
text-decoration:none;
}
body.has-brand-modal{
overflow:hidden;
}
body.has-brand-modal .whatsapp-fab,
body.has-brand-modal #koe-readaloud-btn{
display:none!important;
}
@media (max-width:760px){
.brand-spotlight-card[open] .brand-spotlight-detail{
display:none!important;
}
}