/* ============================================================
chdes — Baustein-Styles (components)
Layout & Aussehen. Responsive = reines CSS, mobile-first.
============================================================ */
/* ============================================================
MUSTER-BAUSTEINE (fertige Blöcke) — headsub, columns,
imageleft, imageright, imagebottom. Mobile-first, BP 768px.
============================================================ */
/* gemeinsamer Außenabstand + bold Headline für alle Muster-Bausteine */
.blk { padding: clamp(3rem, 8vw, 6rem) var(--outer, 6vw); }
.blk-headline { font-weight: var(--headline-weight, 900); letter-spacing: var(--headline-letterspacing, -.02em); line-height: var(--headline-lineheight, 1.1); margin: 0 0 1.25rem; font-size: var(--headline-size, clamp(1.7rem, 5vw, 2.6rem)); }
.blk-text { font-weight: var(--subline-weight, 400); font-size: var(--subline-size, 1.05rem); line-height: var(--subline-lineheight, 1.7); letter-spacing: var(--subline-letterspacing, normal); opacity: .85; }
.blk-text p { margin: 0 0 1rem; }
.blk-text p:last-child { margin-bottom: 0; }
/* ── headsub: Headline + Absatz, 80% breit, zentriert ─────── */
.blk-headsub-inner { width: 80%; max-width: 80%; margin-inline: auto; }
/* Subline schmaler halten (Lesbarkeit ~60 Zeichen/Zeile), zentriert */
.blk-headsub .blk-text { max-width: var(--subline-maxw, 60ch); margin-inline: auto; }
/* ── columns: Headline + 2–5 Spalten (Mobile gestapelt) ───── */
.blk-columns-inner { max-width: 1200px; margin-inline: auto; }
.blk-columns .blk-headline { text-align: center; }
.blk-cols { display: grid; gap: var(--blk-gap, 2rem); grid-template-columns: 1fr; }
@media (min-width: 768px) {
.blk-cols-2 { grid-template-columns: repeat(2, 1fr); }
.blk-cols-3 { grid-template-columns: repeat(3, 1fr); }
.blk-cols-4 { grid-template-columns: repeat(4, 1fr); }
.blk-cols-5 { grid-template-columns: repeat(5, 1fr); }
}
/* ── imageleft / imageright: Bild + Text, vertikal mittig ─── */
.blk-image-inner { max-width: 1100px; margin-inline: auto; display: flex; flex-direction: column; gap: 2rem; }
.blk-image-media img { width: 100%; height: auto; display: block; border-radius: 18px; }
.blk-image-text { display: flex; flex-direction: column; justify-content: center; }
@media (min-width: 768px) {
.blk-image-inner { flex-direction: row; align-items: center; gap: clamp(2rem, 5vw, 4rem); }
.blk-image-media, .blk-image-text { flex: 1 1 0; min-width: 0; }
}
/* ── imagebottom: Headline + Bild darunter ────────────────── */
.blk-imagebottom-inner { max-width: 1100px; margin-inline: auto; }
.blk-imagebottom-img { width: 100%; height: auto; display: block; border-radius: 18px; margin-inline: auto; }
/* ── Inhalte innerhalb der Muster-Bausteine (columns/image) ── */
.blk-col h3, .blk-image-text h2 { font-weight: var(--headline-weight, 800); line-height: 1.2; margin: 0 0 .6rem; }
.blk-col h3 { font-size: 1.25rem; }
.blk-image-text h2 { font-size: clamp(1.5rem, 4vw, 2.2rem); }
.blk-col p, .blk-image-text p { font-weight: var(--subline-weight, 400); font-size: var(--subline-size, 1.05rem); line-height: var(--subline-lineheight, 1.7); letter-spacing: var(--subline-letterspacing, normal); opacity: .85; margin: 0 0 1rem; }
.blk-col p:last-child, .blk-image-text p:last-child { margin-bottom: 0; }
/* ── Text-Effekte: Gradient-Wörter ────────────────────────────
Statisch: Wort
Animiert: Wort (wandernder Verlauf)
(beides auch als class="v-ocean" / "v-ocean-ani" nutzbar) */
v-ocean,v-sunset,v-aurora,v-purple,v-arctic,v-lava,v-magenta,v-rose,v-forest,v-green,v-orangia,v-multi,
v-ocean-ani,v-sunset-ani,v-aurora-ani,v-purple-ani,v-arctic-ani,v-lava-ani,v-magenta-ani,v-rose-ani,v-forest-ani,v-green-ani,v-orangia-ani,v-multi-ani,
.v-ocean,.v-sunset,.v-aurora,.v-purple,.v-arctic,.v-lava,.v-magenta,.v-rose,.v-forest,.v-green,.v-orangia,.v-multi,
.v-ocean-ani,.v-sunset-ani,.v-aurora-ani,.v-purple-ani,.v-arctic-ani,.v-lava-ani,.v-magenta-ani,.v-rose-ani,.v-forest-ani,.v-green-ani,.v-orangia-ani,.v-multi-ani {
display: inline;
background-image: linear-gradient(90deg, var(--fx));
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent; color: transparent;
}
/* Animierte Varianten: wandernder Verlauf */
v-ocean-ani,v-sunset-ani,v-aurora-ani,v-purple-ani,v-arctic-ani,v-lava-ani,v-magenta-ani,v-rose-ani,v-forest-ani,v-green-ani,v-orangia-ani,v-multi-ani,
.v-ocean-ani,.v-sunset-ani,.v-aurora-ani,.v-purple-ani,.v-arctic-ani,.v-lava-ani,.v-magenta-ani,.v-rose-ani,.v-forest-ani,.v-green-ani,.v-orangia-ani,.v-multi-ani {
display: inline-block; /* wichtig: inline repaintet den geclippten Text nicht zuverlässig */
background-size: 200% auto;
animation: v-fx-shimmer 3s ease-in-out infinite alternate;
}
/* Standard = animiert. Der Observer pausiert nur Elemente, die NICHT in der Bildschirmmitte sind. */
.fx-paused { animation-play-state: paused; }
@keyframes v-fx-shimmer { from { background-position: 0% center; } to { background-position: 200% center; } }
/* Farben — gelten für statische UND animierte Variante */
v-ocean,.v-ocean,v-ocean-ani,.v-ocean-ani { --fx: #1976d2,#00acc1,#4dd0e1; }
v-sunset,.v-sunset,v-sunset-ani,.v-sunset-ani { --fx: #ff4d4d,#ff8b41,#ffd93d; }
v-aurora,.v-aurora,v-aurora-ani,.v-aurora-ani { --fx: #00d4ff,#5cffd6,#e040fb; }
v-purple,.v-purple,v-purple-ani,.v-purple-ani { --fx: #a78df1,#7b5ce7,#882ff4; }
v-arctic,.v-arctic,v-arctic-ani,.v-arctic-ani { --fx: #7ab8ff,#b6c1f8,#ce93d8; }
v-lava,.v-lava,v-lava-ani,.v-lava-ani { --fx: #ffeb3b,#f44336,#ff80ab; }
v-magenta,.v-magenta,v-magenta-ani,.v-magenta-ani { --fx: #f4a3eb,#f48be3,#cc29bc; }
v-rose,.v-rose,v-rose-ani,.v-rose-ani { --fx: #ff9bb5,#ff6b9d,#c2185b; }
v-forest,.v-forest,v-forest-ani,.v-forest-ani { --fx: #aacb4b,#4caf50,#66ddaa; }
v-green,.v-green,v-green-ani,.v-green-ani { --fx: #c5de7b,#8dbe57,#0a861a; }
v-orangia,.v-orangia,v-orangia-ani,.v-orangia-ani { --fx: #ff6600,#ff66cc,#0099ff; }
v-multi,.v-multi,v-multi-ani,.v-multi-ani { --fx: #0090f7,#ba62fc,#f2416b,#f55600; }
/* ── slider (Plugin-Baustein, aus WP übernommen) ──────────── */
.chdes-slider2-wrap{position:relative;left:50%;transform:translateX(-50vw);width:100vw;max-width:100vw;min-height:100vh;display:flex;flex-direction:column;justify-content:safe center;opacity:0;translate:0 48px;transition:opacity .7s cubic-bezier(.25,.46,.45,.94),translate .7s cubic-bezier(.25,.46,.45,.94);will-change:opacity,translate}
.chdes-slider2-wrap.chdes-visible{opacity:1;translate:0 0}
.chdes-slider2-outer{overflow-x:scroll;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.chdes-slider2-outer::-webkit-scrollbar{display:none}
.chdes-slider2-track{display:flex;gap:16px}
.chdes-slide2{flex:0 0 auto;scroll-snap-align:center}
.chdes-slide2-img{height:var(--vsl2-height,60vh);width:0;min-width:100px;overflow:hidden;border-radius:28px;background:#000}
.chdes-slide2-img img{width:100%;height:100%;object-fit:cover;object-position:center;display:block}
.chdes-slide2-caption{padding:.75rem .25rem 0}
.chdes-slide2-subtext{margin:0}
/* Navbar (controls/btn/dot) → geteilter „Slider-Navi"-Block weiter unten */
/* ── dunkle Seite (für Slider-Demo o. ä.) ─────────────────── */
/* Farben aus site.json (--site-bg / --site-fc), Fallback = dunkles Default-Theme.
Headlines & Texte erben die Schriftfarbe → zentral über fontcolor steuerbar. */
.page-dark { background: var(--site-bg, #0b0b0f); color: var(--site-fc, #fff); }
.page-dark .blk:first-of-type { padding-top: calc(64px + clamp(2rem, 6vw, 4rem)); }
/* ── Slider-Navi: Controls + Pill-Morph (kompletter Block, gehört zum slider-Baustein) ── */
/* Geteilt von slider1 (.chdes-slider-*) und slider2 (.chdes-slider2-*): visuell identisch,
getrennte Klassennamen nur, weil das JS sie braucht. */
.chdes-slider-controls,
.chdes-slider2-controls {
position: sticky;
bottom: 24px;
min-height: 56px;
width: fit-content;
pointer-events: auto;
display: flex; align-items: center; justify-content: center; gap: 20px; padding: 20px 0;
}
.chdes-slider-btn,
.chdes-slider2-btn { width: 40px; height: 40px; border: 1px solid rgba(255,255,255,.25); background: transparent; color: #fff; cursor: pointer; font-size: 18px; border-radius: 28px; display: flex; align-items: center; justify-content: center; transition: opacity .2s; }
.chdes-dot,
.chdes-slider2-dot { width: 8px; height: 8px; background: rgba(255,255,255,.4); border: none; border-radius: 50%; cursor: pointer; padding: 0; transition: width .4s ease, border-radius .4s ease, background .4s ease; }
.chdes-dot.active,
.chdes-slider2-dot.active { background: #fff; width: 32px; border-radius: 28px; }
/* Echte Buttons/Dots: initial unsichtbar (visibility + opacity), oberhalb der Pill. */
.chdes-slider-controls > button,
.chdes-slider2-controls > button,
.chdes-slider-controls > .chdes-dot,
.chdes-slider2-controls > .chdes-slider2-dot {
position: relative;
z-index: 1;
visibility: hidden;
opacity: 0;
}
/* Pfeil-Buttons: sanfter Fade-In ohne dramatisches Scale (sonst werden sie winzig). */
.chdes-slider-controls > button:not(.chdes-dot),
.chdes-slider2-controls > button:not(.chdes-slider2-dot) {
transform: translateY(4px);
transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s linear 0.3s;
}
.chdes-slider-controls.chdes-pill-ready > button:not(.chdes-dot),
.chdes-slider2-controls.chdes-pill-ready > button:not(.chdes-slider2-dot) {
visibility: visible;
animation: chdes-nav-arrow-in 0.4s cubic-bezier(.25,.46,.45,.94) forwards;
transition: none;
}
@keyframes chdes-nav-arrow-in {
from { opacity: 0; transform: translateY(4px); }
to { opacity: 1; transform: translateY(0); }
}
/* Dots: bouncender Pop-In + smooth active-state morph.
transition für width/border-radius/background = active-state morph (Dot → Strich).
animation für opacity/transform/visibility = initial Pop-In bei pill-ready. */
.chdes-slider-controls > .chdes-dot,
.chdes-slider2-controls > .chdes-slider2-dot {
transform: translateY(8px) scale(0.3);
transition: width .4s ease, border-radius .4s ease, background .4s ease;
}
.chdes-slider-controls.chdes-pill-ready > .chdes-dot,
.chdes-slider2-controls.chdes-pill-ready > .chdes-slider2-dot {
visibility: visible;
animation: chdes-nav-pop 0.45s cubic-bezier(0.68, -0.1, 0.27, 1.25) forwards;
}
@keyframes chdes-nav-pop {
0% { opacity: 0; transform: translateY(8px) scale(0.3); }
60% { opacity: 1; transform: translateY(-3px) scale(1.2); }
100% { opacity: 1; transform: translateY(0) scale(1); }
}
/* Stagger der Navi-Kinder (60ms zwischen jedem Element) */
.chdes-slider-controls.chdes-pill-ready > *:nth-child(1),
.chdes-slider2-controls.chdes-pill-ready > *:nth-child(1) { animation-delay: 0.00s; }
.chdes-slider-controls.chdes-pill-ready > *:nth-child(2),
.chdes-slider2-controls.chdes-pill-ready > *:nth-child(2) { animation-delay: 0.06s; }
.chdes-slider-controls.chdes-pill-ready > *:nth-child(3),
.chdes-slider2-controls.chdes-pill-ready > *:nth-child(3) { animation-delay: 0.12s; }
.chdes-slider-controls.chdes-pill-ready > *:nth-child(4),
.chdes-slider2-controls.chdes-pill-ready > *:nth-child(4) { animation-delay: 0.18s; }
.chdes-slider-controls.chdes-pill-ready > *:nth-child(5),
.chdes-slider2-controls.chdes-pill-ready > *:nth-child(5) { animation-delay: 0.24s; }
.chdes-slider-controls.chdes-pill-ready > *:nth-child(6),
.chdes-slider2-controls.chdes-pill-ready > *:nth-child(6) { animation-delay: 0.30s; }
.chdes-slider-controls.chdes-pill-ready > *:nth-child(7),
.chdes-slider2-controls.chdes-pill-ready > *:nth-child(7) { animation-delay: 0.36s; }
.chdes-slider-controls.chdes-pill-ready > *:nth-child(8),
.chdes-slider2-controls.chdes-pill-ready > *:nth-child(8) { animation-delay: 0.42s; }
.chdes-slider-controls.chdes-pill-ready > *:nth-child(9),
.chdes-slider2-controls.chdes-pill-ready > *:nth-child(9) { animation-delay: 0.48s; }
.chdes-slider-controls.chdes-pill-ready > *:nth-child(10),
.chdes-slider2-controls.chdes-pill-ready > *:nth-child(10) { animation-delay: 0.54s; }
.chdes-slider-controls.chdes-pill-ready > *:nth-child(11),
.chdes-slider2-controls.chdes-pill-ready > *:nth-child(11) { animation-delay: 0.60s; }
.chdes-slider-controls.chdes-pill-ready > *:nth-child(12),
.chdes-slider2-controls.chdes-pill-ready > *:nth-child(12) { animation-delay: 0.66s; }
.chdes-slider-controls.chdes-pill-ready > *:nth-child(n+13),
.chdes-slider2-controls.chdes-pill-ready > *:nth-child(n+13){ animation-delay: 0.72s; }
@media (prefers-reduced-motion: reduce) {
.chdes-slider-controls > *,
.chdes-slider2-controls > * {
opacity: 1 !important;
transform: none !important;
animation: none !important;
}
}
/* ── Pill-Morph: wiederverwendbare Klasse für alle Module ──── */
/* Wird vom JS-Modul ChdesPillMorph orchestriert. CSS-Vars:
--pill-s = scale (0 → 1, opacity folgt)
--pill-w = aktuelle Breite (initial 56px = Kreis)
--pill-h = Höhe (Standard 56px wie Apple AAP)
--pill-r = border-radius (28px = halb von 56)
--pill-ring= blauer Ring spread (px) */
.chdes-pill-bg {
position: absolute;
left: 50%;
top: 50%;
width: var(--pill-w, 56px);
height: var(--pill-h, 56px);
border-radius: var(--pill-r, 28px);
background: rgba(50, 50, 50, 0.72);
backdrop-filter: blur(7px);
-webkit-backdrop-filter: blur(7px);
box-shadow:
inset 0 0 .5px 0 rgba(232, 232, 237, 0.11),
0 0 0 calc(var(--pill-ring, 0) * 1px) #4071de;
transform: translate3d(-50%, -50%, 0) scale(var(--pill-s, 0));
opacity: var(--pill-s, 0);
z-index: 0;
pointer-events: none;
will-change: transform, opacity, box-shadow, width, height, border-radius;
transition:
width 0.45s cubic-bezier(.22, 1, .36, 1),
height 0.45s cubic-bezier(.22, 1, .36, 1),
border-radius 0.45s cubic-bezier(.22, 1, .36, 1);
}
.chdes-pill-bg.chdes-pill-morphing {
box-shadow: inset 0 0 .5px 0 rgba(232, 232, 237, 0.11) !important;
/* iOS/iPad-Fix: scale(1) im transform weglassen, sobald Width-Morph läuft.
Grund: translate3d(-50%) hängt von Width ab; in Kombination mit scale + will-change
produziert WebKit Sub-Pixel-Drift, der nach Animation-Ende sichtbar bleibt. */
transform: translate3d(-50%, -50%, 0);
}
/* GPU-Layer-Hints zurückziehen, wenn alles ruhig steht — sonst friert iOS den
verschobenen Layer ein. */
.chdes-pill-bg.chdes-pill-ready {
will-change: auto;
transform: translate3d(-50%, -50%, 0);
}
/* Sticky-Zone: zentriert die Controls am Boden des Sliders */
.chdes-slider-sticky-zone,
.chdes-slider2-sticky-zone {
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 75%;
display: flex;
align-items: flex-end;
justify-content: center;
pointer-events: none;
z-index: 5;
}
/* ============================================================
slider1 — Vollbild-Bild-Slider mit Text-Overlay (aus WP)
============================================================ */
.chdes-slider-wrap{position:relative;left:50%;transform:translateX(-50vw);width:100vw;max-width:100vw;min-height:100vh;display:flex;flex-direction:column;justify-content:flex-start;opacity:0;translate:0 48px;transition:opacity .7s cubic-bezier(.25,.46,.45,.94),translate .7s cubic-bezier(.25,.46,.45,.94);will-change:opacity,translate}
.chdes-slider-wrap.chdes-visible{opacity:1;translate:0 0}
.chdes-slider-outer{overflow-x:scroll;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.chdes-slider-outer::-webkit-scrollbar{display:none}
.chdes-slider-track{display:flex;gap:16px}
.chdes-slide{position:relative;flex:0 0 var(--vsl-width,88vw);height:var(--vsl-height,70vh);border-radius:28px;overflow:hidden;scroll-snap-align:center;background:#000}
.vsl-bg-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.vsl-bg-img.fit-contain{object-fit:contain;background:#000}
/* Navbar (controls/btn/dot) → geteilter „Slider-Navi"-Block weiter oben */
.vsl-overlay{position:absolute;inset:0;background:#000;pointer-events:none}
.vsl-text{position:absolute;z-index:2;left:0;right:0;padding:clamp(1rem,4vw,2.5rem)}
.vsl-text.pos-bottom-left{bottom:0;text-align:left}
.vsl-text.pos-bottom-center{bottom:0;text-align:center}
.vsl-text.pos-bottom-right{bottom:0;text-align:right}
.vsl-text.pos-top-left{top:0;text-align:left}
.vsl-text.pos-top-center{top:0;text-align:center}
.vsl-text.pos-top-right{top:0;text-align:right}
.vsl-text.pos-center{top:50%;transform:translateY(-50%);text-align:center}
.vsl-heading{color:#fff;margin:0 0 .625rem !important;line-height:1.2}
.vsl-text.anim-fade-in,.vsl-text.anim-slide-up,.vsl-text.anim-slide-from-left,.vsl-text.anim-slide-from-right{opacity:0;transition:opacity .8s ease,transform .8s ease}
.vsl-text.anim-slide-up{transform:translateY(28px)}
.vsl-text.anim-slide-from-left{transform:translateX(-36px)}
.vsl-text.anim-slide-from-right{transform:translateX(36px)}
.chdes-slide.is-active .vsl-text.anim-fade-in{opacity:1;transition-delay:.3s}
.chdes-slide.is-active .vsl-text.anim-slide-up{opacity:1;transform:translateY(0);transition-delay:.3s}
.chdes-slide.is-active .vsl-text.anim-slide-from-left{opacity:1;transform:translateX(0);transition-delay:.3s}
.chdes-slide.is-active .vsl-text.anim-slide-from-right{opacity:1;transform:translateX(0);transition-delay:.3s}
.vsl-bg-img.img-anim-zoom-in{transform:scale(0.8);transition:transform 2s ease}
.chdes-slide.is-active .vsl-bg-img.img-anim-zoom-in{transform:scale(var(--vsl-zoom-end,1))}
.vsl-bg-img.img-anim-pan-left{transform:scale(1.15) translateX(4%);transition:transform 7s ease}
.chdes-slide.is-active .vsl-bg-img.img-anim-pan-left{transform:scale(1.15) translateX(-4%)}
.vsl-bg-img.img-anim-pan-right{transform:scale(1.15) translateX(-4%);transition:transform 7s ease}
.chdes-slide.is-active .vsl-bg-img.img-anim-pan-right{transform:scale(1.15) translateX(4%)}
@media (max-width:700px){.chdes-slider-wrap{--vsl-width:88vw !important}}
/* ============================================================
slider3 — Morph-Stage (Glas-Pills + Bühne, aus WP)
JS: js/chdes-slider3.js (Auto-Init via [data-morph-stage])
============================================================ */
.mbs-widget{
--mbs-morph-dur:.4s;
--mbs-morph-ease:cubic-bezier(.7,0,.2,1);
--mbs-text-fade-dur:.1s;
--mbs-text-fade-delay:.5s;
--mbs-img-fade-out-dur:.5s;
--mbs-img-fade-in-dur:.5s;
--mbs-img-fade-ease:cubic-bezier(.3,1.4,.4,1);
--mbs-stage-radius:28px;
--mbs-pill-h:60px;
--mbs-pill-h-mobile:44px;
--mbs-pill-w-desktop:400px;
--mbs-pill-pct-mobile:.95;
--mbs-menu-w-desktop:360px;
--mbs-glass-bg:rgba(210,210,215,.42);
--mbs-glass-border:rgba(210,210,215,.4);
--mbs-glass-bg-hover:rgba(210,210,215,.6);
--mbs-glass-bg-expanded:rgba(210,210,215,.78);
--mbs-glass-border-expanded:rgba(210,210,215,.65);
--mbs-text:#000;
--mbs-focus:#2997ff;
--mbs-f:-apple-system,BlinkMacSystemFont,"SF Pro Display","Helvetica Neue",Arial,sans-serif;
display:flex;flex-direction:column;align-items:center;justify-content:safe center;gap:16px;
position:relative;left:50%;width:100vw;max-width:100vw;min-width:0;
min-height:100vh;
padding-left:clamp(20px,4vw,90px);padding-right:clamp(20px,4vw,90px);
opacity:0;transform:translateX(-50vw) translateY(48px);
transition:opacity .7s cubic-bezier(.25,.46,.45,.94),transform .7s cubic-bezier(.25,.46,.45,.94);
will-change:opacity,transform;
-webkit-tap-highlight-color:transparent;
}
.mbs-widget.mbs-visible{opacity:1;transform:translateX(-50vw) translateY(0)}
.mbs-widget *,.mbs-widget *::before,.mbs-widget *::after{box-sizing:border-box}
.mbs-widget .stage{
position:relative;width:100%;min-height:var(--mbs-stage-h, clamp(520px, 80vh, 900px));max-width:100%;
border-radius:var(--mbs-stage-radius);overflow:hidden;background:#fff;isolation:isolate;
}
.mbs-widget .stage__layer{
position:absolute;inset:0;background-size:cover;background-position:center;
opacity:0;transform:translateX(50%) scale(1.1);
transition:opacity var(--mbs-img-fade-in-dur) cubic-bezier(.25,.46,.45,.94),transform var(--mbs-img-fade-in-dur) cubic-bezier(.25,.46,.45,.94);
will-change:opacity,transform;
}
.mbs-widget .stage__layer.active{opacity:1;transform:translateX(0) scale(1)}
.mbs-widget .stage__layer.leaving{opacity:0;transform:translateX(-50%) scale(1.1);transition:opacity var(--mbs-img-fade-out-dur) cubic-bezier(.25,.46,.45,.94),transform var(--mbs-img-fade-out-dur) cubic-bezier(.25,.46,.45,.94)}
.mbs-widget .stage__close{
position:absolute;top:14px;right:14px;z-index:10;width:36px;height:36px;border-radius:50%;
background:rgba(20,20,25,.82);border:1px solid rgba(255,255,255,.25);color:#fff;
display:none;align-items:center;justify-content:center;cursor:pointer;
box-shadow:0 2px 10px rgba(0,0,0,.18);transition:background .2s ease,border-color .2s ease,transform .15s ease;
}
.mbs-widget .stage__close svg{width:16px;height:16px;display:block}
.mbs-widget .stage__close:hover{background:rgba(20,20,25,.95)}
.mbs-widget .stage__close:active{transform:scale(.93)}
.mbs-widget.mbs-detail .stage__close{display:flex}
.mbs-widget .stage__overlay{position:absolute;inset:0;background:none;pointer-events:none;transition:opacity .4s ease}
.mbs-widget .stage__inner{position:relative;padding:60px 60px 80px 24px;display:flex;flex-direction:column;gap:28px}
.mbs-widget .stage__title{font:600 12px/1 var(--mbs-f);align-self:flex-start;text-align:left}
.mbs-widget .wrap{display:block}
.mbs-widget .nav-cell{display:none}
.mbs-widget .menu{display:flex;flex-direction:column;align-items:flex-start;width:var(--mbs-menu-w-desktop);overflow:visible}
.mbs-widget .menu__track{display:flex;flex-direction:column;align-items:flex-start;gap:14px;width:100%}
.mbs-widget .nav__btn{
width:44px;height:44px;border-radius:50%;background:var(--mbs-glass-bg);
backdrop-filter:blur(24px) saturate(170%);-webkit-backdrop-filter:blur(24px) saturate(170%);
border:1px solid var(--mbs-glass-border);color:var(--mbs-text);cursor:pointer;
display:flex;align-items:center;justify-content:center;
opacity:0;transform:scale(.5);animation:mbs-navIn .45s cubic-bezier(.68,-0.1,.27,1.25) forwards 1.1s;
transition:background .2s ease,border-color .2s ease,transform .18s ease;
touch-action:manipulation;-webkit-tap-highlight-color:transparent;
}
.mbs-widget .nav-cell--next .nav__btn{animation-delay:1.22s}
.mbs-widget .nav__btn:hover{background:var(--mbs-glass-bg-hover);border-color:rgba(255,255,255,.45);transform:translateY(-1px)}
.mbs-widget .nav__btn:active{transform:scale(.92)}
.mbs-widget .nav__btn svg{width:16px;height:16px;display:block}
@keyframes mbs-navIn{0%{opacity:0;transform:scale(.5)}70%{opacity:1;transform:scale(1.06)}100%{opacity:1;transform:scale(1)}}
.mbs-widget .pop{
position:relative;overflow:hidden;width:0;height:0;border-radius:50%;opacity:0;
background:var(--mbs-glass-bg);
backdrop-filter:blur(22px) saturate(170%);-webkit-backdrop-filter:blur(22px) saturate(170%);
border:1px solid var(--mbs-glass-border);color:var(--mbs-text);pointer-events:none;
touch-action:manipulation;-webkit-tap-highlight-color:transparent;
}
.mbs-widget .pop.go{animation:mbs-pop .9s cubic-bezier(.68,-0.1,.27,1.25) forwards}
.mbs-widget .pop.ready{
animation:none;width:var(--pill-w,280px);height:var(--mbs-pill-h);border-radius:28px;opacity:1;
pointer-events:auto;cursor:pointer;
transition:width var(--mbs-morph-dur) var(--mbs-morph-ease),height var(--mbs-morph-dur) var(--mbs-morph-ease),border-radius var(--mbs-morph-dur) var(--mbs-morph-ease),background .25s ease,border-color .25s ease,transform .2s ease;
}
.mbs-widget .pop.ready:hover{background:var(--mbs-glass-bg-hover);border-color:rgba(255,255,255,.45)}
.mbs-widget .pop.ready:active{transform:scale(.985)}
.mbs-widget .pop.ready:focus-visible{outline:2px solid var(--mbs-focus);outline-offset:3px}
.mbs-widget .pop.ready.expanded{
width:min(var(--mbs-pill-w-desktop),90vw);border-radius:28px;cursor:default;
background:var(--mbs-glass-bg-expanded);border-color:var(--mbs-glass-border-expanded);
}
.mbs-widget .pop.ready.expanded .pop__content{width:100%}
.mbs-widget .pop.ready.expanded .c-right{flex:1;min-width:0}
.mbs-widget .pop__label{
position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
font:700 18px/1 var(--mbs-f);letter-spacing:.14em;text-transform:uppercase;
color:var(--mbs-text);white-space:nowrap;pointer-events:none;
opacity:0;transform:translateY(6px) scale(.95);
}
.mbs-widget .pop.go .pop__label{animation:mbs-txt .9s ease forwards}
.mbs-widget .pop.ready .pop__label{animation:none;opacity:1;transform:translateY(0) scale(1);letter-spacing:.14em;transition:opacity .2s ease,transform .2s ease,letter-spacing .2s ease}
.mbs-widget .pop.ready.expanded .pop__label{opacity:0;transform:translateY(-8px) scale(.92);letter-spacing:.04em}
.mbs-widget .pop__content{
display:inline-flex;flex-direction:row;align-items:center;gap:20px;
padding:0px 10px;white-space:nowrap;opacity:0;transform:translateY(6px);pointer-events:none;
transition:opacity .2s ease,transform .2s ease;
}
.mbs-widget .pop.ready.expanded .pop__content{
opacity:1;transform:translateY(0);pointer-events:auto;
transition:opacity var(--mbs-text-fade-dur) ease var(--mbs-text-fade-delay),transform var(--mbs-text-fade-dur) cubic-bezier(.7,0,.2,1) var(--mbs-text-fade-delay);
}
.mbs-widget .c-right{display:flex;flex-direction:column;gap:6px;align-items:flex-start;text-align:left;white-space:normal}
.mbs-widget .c-desc{font:400 18px/1.35 var(--mbs-f);color:rgba(0,0,0,.85)}
.mbs-widget .c-desc strong{font-weight:700;color:var(--mbs-text)}
@keyframes mbs-pop{
0%{width:0;height:0;border-radius:50%;opacity:0;transform:scale(.2)}
6%{opacity:1}
30%{width:50px;height:50px;border-radius:50%;transform:scale(1)}
75%{width:var(--pill-w,280px);height:var(--mbs-pill-h);border-radius:28px}
100%{width:var(--pill-w,280px);height:var(--mbs-pill-h);border-radius:28px;opacity:1}
}
@keyframes mbs-txt{
0%,70%{opacity:0;transform:translateY(8px) scale(.94);letter-spacing:.04em}
90%{opacity:1;transform:translateY(0) scale(1);letter-spacing:.16em}
100%{opacity:1;transform:translateY(0) scale(1);letter-spacing:.14em}
}
@media (max-width:700px){
.mbs-widget .stage{width:100%;min-height:var(--mbs-stage-h, clamp(520px, 80vh, 900px));border-radius:28px}
.mbs-widget .stage__inner{padding:22px 0 24px;gap:18px;min-height:520px}
.mbs-widget .wrap{width:100%;margin-top:auto;padding:0;position:relative}
.mbs-widget .menu{display:block;width:100%;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;padding:0;margin:0;touch-action:pan-x;position:relative}
.mbs-widget .menu::-webkit-scrollbar{display:none}
.mbs-widget .menu__track{flex-direction:row;align-items:flex-end;gap:10px;padding:0 16px;transform:none;will-change:auto}
.mbs-widget .pop{margin:0;flex-shrink:0;touch-action:manipulation}
.mbs-widget.mbs-detail .menu{overflow:hidden;touch-action:none}
.mbs-widget.mbs-detail .menu__track{padding:0 50%;will-change:transform}
.mbs-widget.mbs-detail .pop{touch-action:none}
.mbs-widget .pop.ready{height:var(--mbs-pill-h-mobile);border-radius:28px}
.mbs-widget .pop__label{font-size:14px;letter-spacing:.08em}
.mbs-widget .pop.ready.expanded{width:calc((100vw - 20px) * var(--mbs-pill-pct-mobile));max-width:calc((100vw - 20px) * var(--mbs-pill-pct-mobile))}
.mbs-widget .c-desc{font-size:14px;line-height:1.4}
}