/* Hausschrift Bjork (nur Buchstaben, keine Ziffern/Satzzeichen/Ä Ü ß) */ @font-face{font-family:'Bjork';src:url(data:font/ttf;base64,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BQUGBQQGBgMGBQIEBgIIBQUGBQQGBQUFCAUDBAYFBAYGAwYFAgQGAggFBQYFBAYFBQUIBQMEBQUKCQUABQUGBgUGBgQGBgMEBgMJBgUGBgUGBgYFCQYEBQYGBQYGBAYGAwQGAwkGBQYGBQYGBgUJBgQFBQULCgYABgYHBwUHBwQHBgMFBwMKBgYHBwUHBgYGCgYEBQcHBQcHBAcGAwUHAwoGBgcHBQcGBgYKBgQFBgYMCwYABgYHBwYHBwUHBwMFCAMKBwYHBwYHBwcHCwcFBgcHBgcHBQcHAwUIAwoHBgcHBgcHBwcLBwUGBgYNCwcABwcICAYICAUIBwMGCAQLBwcICAYIBwcHCwgFBggIBggIBQgHAwYIBAsHBwgIBggHBwcLCAUGBwcODAcABwcJCQcJCQUJCAQGCQQMCAcJCQcJCAgIDAgFBwkJBwkJBQkIBAYJBAwIBwkJBwkICAgMCAUHBwcPDQgACAgJCQcJCQYJCAQHCQQNCAgJCQcJCQgIDQkGBwkJBwkJBgkIBAcJBA0ICAkJBwkJCAgNCQYHCAgQDggACAgKCggKCgYKCQQHCgQOCQgKCgcKCQkJDgkGCAoKCAoKBgoJBAcKBA4JCAoKBwoJCQkOCQYICAgRDwkACQkKCggKCwYKCQUHCwUPCQkLCggLCgkJDwoHCAoKCAoLBgoJBQcLBQ8JCQsKCAsKCQkPCgcICQkSEAkACQkLCwgLCwcLCgUICwUQCgkLCwgLCgoKEAsHCQsLCAsLBwsKBQgLBRAKCQsLCAsKCgoQCwcJCQkTEQoACgoMDAkMDAcMCwUIDAURCwoMDAkMCwsKEQsHCQwMCQwMBwwLBQgMBRELCgwMCQwLCwoRCwcJCgoUEgoACgoMDAkMDAgMCwUJDQURCwoMDAkMDAsLEgwICgwMCQwMCAwLBQkNBRELCgwMCQwMCwsSDAgKCgoVEgsACwsNDQoNDQgNDAYJDQYSDAsNDQoNDAwLEgwICg0NCg0NCA0MBgkNBhIMCw0NCg0MDAsSDAgKCwsWEwsACwsODQoODggODAYKDgYTDAsODQoODQwMEw0JCw4NCg4OCA4MBgoOBhMMCw4NCg4NDAwTDQkLCwsXFAwADAwODgsODgkODQYKDgYUDQwODgsODQ0MFA4JCw4OCw4OCQ4NBgoOBhQNDA4OCw4NDQwUDgkLDAwYFQwADAwPDwsPDwkPDQYKDwYVDQwPDwsPDg0NFQ4JDA8PCw8PCQ8NBgoPBhUNDA8PCw8ODQ0VDgkMDAwAAQAAAZAABQACArwCigAAAI8CvAKKAAABxQAyAQMAAAAABAAAAAAAAAAAAAADAAAAAAAAAAAAAAAATUFDUgBAACAA9gIi/mUAAAIiAZsAAAABAAAAAAAAAAEAAIAAAAAB9AIAAABgAAIiAnVCam9yayAgICAgICAgICAg/////zf///5CSk9SMDAAAAAAAAAAAQAAAAEAALFlNnFfDzz1ABsD6AAAAACxuxCPAAAAALG7EI/+Tf5lBBYDIAAAAAsAAgABAAAAAAABAAADIP5lAAADbP5N/lsEFgABAAAAAAAAAAAAAAAAAAAAOgABAAAAOgA5AA8AAAAAAAIACABAAAoAAAB8APwAAQAB) format('truetype');font-display:swap} :root{ color-scheme:dark; --black:#0A0705; --ground:#1B120C; --ground-2:#140D08; --panel:#241810; --panel-2:#2E2016; --line:#3A2A1D; --line-2:#57412E; --cream:#F3EADB; --cream-2:#CFC1AC; --dust:#A08E78; --yellow:#F7C548; --yellow-hi:#FFD467; --yellow-ink:#1D1305; --rec:#FF5A3C; --led:#86E0A4; --paper:#F3EADB; --ink:#1B120C; --ink-2:#7B6A56; --glow:247 197 72; --f-display:'Bjork','Saira',system-ui,sans-serif; --f-strong:'Saira',system-ui,sans-serif; --f-body:'Saira',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif; --f-mono:'Martian Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; --ease:cubic-bezier(.2,.8,.2,1); --spring:cubic-bezier(.34,1.45,.64,1); --gut:clamp(16px,5vw,28px); } *{box-sizing:border-box} [hidden]{display:none!important} html{background:var(--ground);overscroll-behavior-y:none} body{ background:var(--ground); background-attachment:fixed; color:var(--cream);font-family:var(--f-body);font-size:16px;line-height:1.5; -webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;overflow-x:clip; } button{-webkit-appearance:none;appearance:none;font:inherit;color:inherit;background:none;border:0;padding:0;margin:0;cursor:pointer;touch-action:manipulation;text-align:inherit} button:disabled{cursor:not-allowed} :focus-visible{outline:2px solid var(--yellow);outline-offset:2px;border-radius:8px} h1,h2,h3,p{margin:0} h1,h2,h3{text-wrap:balance} ul{margin:0;padding:0;list-style:none} .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} .i{width:22px;height:22px;flex:none} .i .f{fill:currentColor;stroke:none} .logo{display:block;height:auto} .mono{font-family:var(--f-mono);font-stretch:87.5%;font-variant-numeric:tabular-nums} .dim{color:var(--dust)} .amber{color:var(--yellow)} .eyebrow,.label{font:500 10.5px/1.3 var(--f-mono);font-stretch:87.5%;letter-spacing:.1em;text-transform:uppercase;color:var(--dust)} .eyebrow.amber,.label.amber{color:var(--yellow)} /* Deckenlicht im Hintergrund: 4 Streifen im echten Abstand 0,75 · 1 · 0,5 · 1 · 0,75 m */ .ambient{position:fixed;top:0;bottom:0;left:50%;width:min(100%,620px);transform:translateX(-50%);pointer-events:none;z-index:0;transition:opacity .5s} /* Auf der Startseite zeigt die Bühne das echte Deckenlicht, dort keine zweiten Linien */ body.on-studio .ambient{opacity:0} .ambient i{position:absolute;top:0;height:70vh;width:2px;margin-left:-1px;border-radius:2px;background:linear-gradient(to bottom,rgb(var(--glow) / .34),rgb(var(--glow) / .07) 45%,transparent);box-shadow:0 0 24px 3px rgb(var(--glow) / .09);transition:background .6s,box-shadow .6s} .ambient i:nth-child(1){left:18.75%}.ambient i:nth-child(2){left:43.75%}.ambient i:nth-child(3){left:56.25%}.ambient i:nth-child(4){left:81.25%} /* ---------- Studio-Status ---------- */ .status{display:inline-flex;align-items:center;gap:7px;height:32px;padding:0 11px;border-radius:99px;border:1px solid var(--line);background:#ffffff05;font:500 9.5px/1 var(--f-mono);font-stretch:87.5%;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;color:var(--cream-2);overflow:hidden} .dot{width:7px;height:7px;border-radius:50%;background:var(--led);box-shadow:0 0 8px var(--led);flex:none} .dot.rec{background:var(--rec);box-shadow:0 0 10px var(--rec);animation:blink 1.6s ease-in-out infinite} .dot.off{background:var(--dust);box-shadow:none} @keyframes blink{50%{opacity:.35}} /* ---------- App ---------- */ .app{max-width:620px;margin-inline:auto;padding-inline:var(--gut);position:relative;z-index:2} .view{display:grid;gap:46px;padding-block:14px 116px} .view[data-view="buchen"]{padding-bottom:190px} .view,.bk-head,.bk-body,.field,.cards,.groups,.toggles,.choice-list,.form,.sh,.bk-list,.bkc,.svc-card,.ticket,.konto,.auth,.famblock{grid-template-columns:minmax(0,1fr)} .view > *,.field > *,.bk-body > *,.konto > *{min-width:0} .view.leaving{opacity:0;transform:translateY(-6px);transition:opacity .14s ease,transform .14s ease} .view.entering > *{animation:viewIn .55s var(--ease) both} .view.entering > *:nth-child(2){animation-delay:.05s} .view.entering > *:nth-child(3){animation-delay:.1s} .view.entering > *:nth-child(4){animation-delay:.15s} .view.entering > *:nth-child(n+5){animation-delay:.2s} @keyframes viewIn{from{opacity:0;transform:translateY(16px)}} .fadein{animation:viewIn .38s var(--ease) both} /* Horizontal-Leisten: laufen bis zum Rand, starten aber bündig mit dem Inhalt (auch beim Einrasten) */ .hscroll{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x proximity;scroll-padding-inline:var(--gut);margin-inline:calc(-1 * var(--gut));padding-inline:var(--gut);padding-block:4px 10px;scrollbar-width:none} .hscroll::after{content:"";flex:0 0 1px;margin-left:calc(var(--gut) - 11px)} .hscroll::-webkit-scrollbar{display:none} .hscroll > *{scroll-snap-align:start} .sec-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:14px} .h-sec{font:italic 900 21px/1.05 var(--f-strong);font-stretch:125%;text-transform:uppercase} .link{font:500 11px/1 var(--f-mono);font-stretch:87.5%;letter-spacing:.08em;text-transform:uppercase;color:var(--yellow);display:inline-flex;align-items:center;gap:5px;padding:8px 0} .link .i{width:15px;height:15px;transition:transform .25s var(--ease)} .link:hover .i{transform:translateX(3px)} .page-head{display:grid;padding-top:26px} .view > .page-head{margin-bottom:-22px} .page-title{color:var(--cream)} /* ---------- Buttons ---------- */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:52px;padding-inline:22px;border-radius:12px;font:700 15.5px/1 var(--f-body);font-stretch:112%;letter-spacing:.01em;white-space:nowrap;transition:transform .18s var(--ease),background-color .2s,box-shadow .25s,opacity .2s,border-color .2s,color .2s} .btn:active{transform:scale(.96)} .btn .i{width:18px;height:18px;transition:transform .25s var(--ease)} .btn:hover .i.arr{transform:translateX(3px)} .btn.primary{background:var(--yellow);color:var(--yellow-ink);box-shadow:0 10px 26px -12px #F7C548AA,inset 0 -2px 0 #00000030} .btn.primary:hover{background:var(--yellow-hi)} .btn.ghost{border:1px solid var(--line-2);color:var(--cream)} .btn.ghost:hover{border-color:var(--cream-2)} .btn.small{height:42px;padding-inline:16px;font-size:14px;border-radius:10px} .btn.wide{width:100%} .btn[aria-disabled="true"]{opacity:.5;box-shadow:none} .btn.arm{border-color:var(--rec);color:var(--rec)} .btn.shake{animation:shake .38s ease} @keyframes shake{20%{transform:translateX(-6px)}40%{transform:translateX(5px)}60%{transform:translateX(-3px)}80%{transform:translateX(2px)}} /* ---------- Bühne: Deckenlicht ---------- */ .hero{display:grid;gap:18px} .view[data-view="studio"]{padding-top:0} .stage{position:relative;margin-inline:calc(-1 * var(--gut));height:clamp(270px,74vw,390px);overflow:hidden;isolation:isolate} /* Das Bild verläuft zu allen Rändern ins Seitenbraun: Ellipsen-Maske, oben zusätzlich weichgezeichnet */ .stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block; -webkit-mask-image:radial-gradient(ellipse 54% 58% at 50% 50%,#000 30%,rgba(0,0,0,.55) 62%,transparent 100%); mask-image:radial-gradient(ellipse 54% 58% at 50% 50%,#000 30%,rgba(0,0,0,.55) 62%,transparent 100%)} /* sanfter Übergang nach unten, mehrere Stufen gegen sichtbare Kanten */ .stage::after{content:"";position:absolute;left:0;right:0;bottom:0;height:42%;pointer-events:none;z-index:1; background:linear-gradient(to bottom,rgba(27,18,12,0) 0%,rgba(27,18,12,.35) 35%,rgba(27,18,12,.75) 65%,var(--ground) 100%)} .stage-center{position:absolute;inset:0;z-index:2;display:grid;align-content:center;justify-items:center;gap:18px;padding:4% var(--gut) 0} /* Leuchten hinter dem Logo als weicher Verlauf statt CSS-Filter: iOS schneidet Filter-Schatten sonst eckig ab */ .logo-btn{position:relative;display:block;width:min(90%,470px);color:var(--cream);border-radius:20px;animation:logoIn 1.1s .1s var(--ease) backwards} .logo-btn::before{content:"";position:absolute;inset:-45% -14%;z-index:-1;pointer-events:none;background:radial-gradient(closest-side,rgb(var(--glow) / .26),rgb(var(--glow) / .08) 55%,transparent);transition:opacity .4s} .logo-btn .logo{width:100%;transition:transform .35s var(--spring)} .logo-btn:active .logo{transform:scale(.94)} .logo-btn.pulse .logo{animation:logoPulse .65s var(--spring)} .logo-btn.pulse::before{animation:glowPulse .7s ease-out} @keyframes logoPulse{0%{transform:scale(.92)}45%{transform:scale(1.04)}100%{transform:none}} @keyframes glowPulse{30%{opacity:1;transform:scale(1.25)}0%,100%{transform:none}} @keyframes logoIn{from{opacity:0;transform:translateY(16px) scale(.96)}} .tagline{text-align:center;animation:logoIn 1s .35s var(--ease) backwards} /* Gelber Lichtstreif, der gleichmäßig durch „Mix Create Connect“ läuft */ .sweep{color:var(--cream);background:linear-gradient(90deg,var(--cream) 0 34%,var(--yellow) 44%,var(--yellow) 56%,var(--cream) 66% 100%);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:sweep 6s linear infinite} @keyframes sweep{from{background-position:0 0}to{background-position:-200% 0}} @media (min-width:660px){.stage{margin-inline:0}} .label-row{display:flex;justify-content:space-between;align-items:baseline;gap:10px} .lead{color:var(--cream-2);max-width:38ch;font-size:16.5px} .cta-row{display:flex;flex-wrap:wrap;gap:10px} .cta-row .btn{flex:1 1 150px} /* ---------- Freie Slots ---------- */ .slotcard{flex:0 0 150px;display:grid;gap:6px;padding:14px 14px 12px;border-radius:14px;border:1px solid var(--line);background:linear-gradient(180deg,var(--panel),var(--ground-2));text-align:left;transition:transform .25s var(--ease),border-color .2s} .slotcard:hover{border-color:var(--line-2);transform:translateY(-2px)} .slotcard:active{transform:scale(.97)} .sc-day{font:500 10.5px/1 var(--f-mono);font-stretch:87.5%;letter-spacing:.1em;text-transform:uppercase;color:var(--dust)} .sc-date{font:italic 900 32px/.95 var(--f-strong);font-stretch:112%} .sc-time{font-size:12px;color:var(--cream)} .sc-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:4px;font-size:10.5px;color:var(--led)} .leds{display:inline-flex;gap:2px} .leds i{width:6px;height:3px;border-radius:1px;background:#ffffff1c} .leds i.on{background:var(--led);box-shadow:0 0 6px #86E0A480} /* ---------- Leistungen ---------- */ .ico{width:46px;height:46px;border-radius:12px;border:1px solid var(--line-2);display:grid;place-items:center;color:var(--yellow);background:#ffffff04;transition:transform .3s var(--spring),background-color .2s;flex:none} .price{font-size:11px;color:var(--cream-2);text-align:right;white-space:nowrap;display:grid;gap:3px} .price s{color:var(--dust);font-size:10px} .price .famp{color:var(--yellow)} /* ---------- Stoofam ---------- */ .famblock{position:relative;display:grid;gap:18px;padding:26px 20px 22px;border-radius:22px;border:1px solid var(--line);background:radial-gradient(120% 90% at 100% 0%,#F7C5481c,transparent 60%),linear-gradient(160deg,#120C08,var(--black));overflow:hidden} .fam-logo{position:relative;color:var(--cream);width:min(100%,440px);padding:4px 6px} .fam-logo .logo{width:100%} .spark{position:absolute;width:var(--s,14px);height:var(--s,14px);color:var(--yellow);animation:twinkle 3s ease-in-out infinite;animation-delay:var(--d,0s);pointer-events:none} @keyframes twinkle{0%,100%{transform:scale(.35) rotate(0deg);opacity:.15}50%{transform:scale(1) rotate(90deg);opacity:1}} .famblock p{color:var(--cream-2)} .fam-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:14px;overflow:hidden} .fam-stats div{background:#0E0906;padding:12px 10px;display:grid;gap:4px} .fam-stats b{font:italic 900 22px/1 var(--f-strong);font-stretch:112%;color:var(--yellow)} .fam-stats span{font-size:12.5px;color:var(--cream-2);line-height:1.3} .famcard{position:relative;aspect-ratio:1.586;width:100%;max-width:440px;border-radius:18px;padding:18px 20px;display:grid;grid-template-rows:auto 1fr auto;background:radial-gradient(90% 70% at 100% 0%,#F7C54826,transparent 60%),linear-gradient(135deg,#0B0806 0%,#241810 55%,#0B0806 100%);border:1px solid var(--line-2);color:var(--cream);overflow:hidden;transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .5s var(--ease);box-shadow:0 30px 60px -30px #000,inset 0 1px 0 #ffffff14} .famcard.tilting{transition:transform .08s linear} .famcard::after{content:"";position:absolute;inset:-20%;background:linear-gradient(115deg,transparent 38%,rgb(255 238 200 / .16) 48%,transparent 58%);transform:translateX(var(--sx,-70%));transition:transform .6s var(--ease);pointer-events:none} .famcard.fresh{animation:cardIn .9s var(--spring) both} .famcard.fresh::after{animation:shine 1.4s .4s var(--ease) both} @keyframes cardIn{from{transform:perspective(900px) rotateX(24deg) translateY(30px) scale(.9);opacity:0}} @keyframes shine{from{transform:translateX(-70%)}to{transform:translateX(70%)}} .famcard-top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px} .famcard-top .logo{width:62%} .famcard-top .mono{font-size:11px;color:var(--cream-2);letter-spacing:.08em} .famcard-name{font:italic 900 clamp(20px,6vw,26px)/1 var(--f-strong);font-stretch:125%;text-transform:uppercase;align-self:end} .famcard-row{display:flex;justify-content:space-between;gap:10px;margin-top:12px} .famcard-row div{display:grid;gap:3px} .famcard-row b{font:700 13.5px/1.1 var(--f-body);font-stretch:108%} /* Bewerbungsstatus */ .app-status{display:grid;gap:16px;padding:22px 20px;border-radius:20px;border:1px solid #F7C54855;background:var(--panel)} .app-status .fam-logo{width:min(70%,300px);padding:0} .app-status h3{font:italic 900 21px/1.05 var(--f-strong);font-stretch:125%;text-transform:uppercase;margin-top:4px} .steps{display:grid;gap:0;counter-reset:s} .steps li{position:relative;display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:10px 0 10px 26px;border-left:2px solid var(--line-2);margin-left:6px} .steps li::before{content:"";position:absolute;left:-7px;top:13px;width:12px;height:12px;border-radius:50%;background:var(--panel);border:2px solid var(--line-2)} .steps li.ok::before{background:var(--led);border-color:var(--led)} .steps li.now::before{background:var(--yellow);border-color:var(--yellow);box-shadow:0 0 0 4px #F7C54833;animation:blink 1.6s ease-in-out infinite} .steps li:last-child{border-left-color:transparent} .steps b{font:700 15px/1.2 var(--f-body);font-stretch:108%} .steps .mono{font-size:11px;color:var(--dust)} /* Auswahl-Chips im Formular */ .opts{display:flex;flex-wrap:wrap;gap:8px;border:0;margin:0;padding:0;min-width:0} .opts legend{padding:0;margin-bottom:8px;width:100%} .opt{position:relative;cursor:pointer} .opt input{position:absolute;opacity:0;width:1px;height:1px} .opt span{display:inline-flex;align-items:center;height:40px;padding:0 14px;border-radius:99px;border:1px solid var(--line-2);font:600 13.5px/1 var(--f-body);color:var(--cream-2);transition:background-color .2s,color .2s,border-color .2s} .opt input:checked + span{background:var(--yellow);color:var(--yellow-ink);border-color:var(--yellow)} .opt input:focus-visible + span{outline:2px solid var(--yellow);outline-offset:2px} /* Offene Sessions */ .open-list{display:grid;border-top:1px solid var(--line)} .open-row{display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:center;padding:13px 0;border-bottom:1px solid var(--line)} .open-when{display:grid;gap:4px;min-width:104px} .open-when b{font-size:12px;color:var(--cream)} .open-what{font:700 15.5px/1.2 var(--f-body);font-stretch:108%} .famhint{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;width:100%;padding:14px 16px;border-radius:14px;border:1px dashed #F7C54866;background:#F7C54810;color:var(--cream-2);text-align:left;font-size:14.5px;transition:background-color .2s} .famhint:hover{background:#F7C5481c} .famhint b{color:var(--yellow)} .famhint .i{width:18px;height:18px;color:var(--yellow)} .pill{font:500 9.5px/1 var(--f-mono);font-stretch:87.5%;letter-spacing:.06em;text-transform:uppercase;padding:5px 8px;border-radius:99px;border:1px solid var(--line-2);color:var(--cream-2);white-space:nowrap} .pill.fam{border-color:#F7C54888;color:var(--yellow)} /* ---------- Säulen & Küche ---------- */ /* „Warum Stoo“ als Mini-Mischpult: drei Kanäle, der aktive Fader fährt hoch, sein Pegel läuft */ .desk{position:relative;display:grid;gap:18px;padding:22px 18px 20px;border-radius:20px;border:1px solid var(--line);background:var(--panel);box-shadow:inset 0 1px 0 #ffffff0d,0 24px 44px -30px #000} .screw{position:absolute;width:8px;height:8px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#6b5540,#241810 72%);box-shadow:inset 0 0 0 1px #00000080} .screw::after{content:"";position:absolute;left:1.5px;right:1.5px;top:50%;height:1.2px;margin-top:-.6px;background:#140D08;transform:rotate(var(--r,35deg))} .screw.tl{top:9px;left:9px}.screw.tr{top:9px;right:9px;--r:-20deg}.screw.bl{bottom:9px;left:9px;--r:70deg}.screw.br{bottom:9px;right:9px;--r:10deg} .strips{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;padding:0 6px} .strip{display:grid;grid-template-columns:auto auto;justify-content:center;column-gap:9px;row-gap:12px;padding:10px 0 4px;border-radius:12px;transition:background-color .3s} .strip:active{background:#ffffff06} .fader{position:relative;width:30px;height:96px} .fader::before{content:"";position:absolute;left:50%;top:0;bottom:0;width:4px;margin-left:-2px;border-radius:2px;background:#0B0705;box-shadow:inset 0 1px 2px #000} .fader::after{content:"";position:absolute;left:3px;right:3px;top:4px;bottom:4px;background:repeating-linear-gradient(to bottom,#ffffff1f 0 1px,transparent 1px 11px);-webkit-mask:linear-gradient(90deg,#000 22%,transparent 22% 78%,#000 78%);mask:linear-gradient(90deg,#000 22%,transparent 22% 78%,#000 78%)} .knob{position:absolute;left:0;top:0;z-index:1;width:30px;height:16px;border-radius:4px;background:linear-gradient(#EDE5D7,#B3A895);box-shadow:0 4px 8px #000b,inset 0 -2px 0 #0003;transform:translateY(64px);transition:transform .6s var(--spring),background .3s} .knob::after{content:"";position:absolute;left:4px;right:4px;top:7px;height:2px;border-radius:1px;background:#1B120C} .strip[aria-selected="true"] .knob{transform:translateY(8px);background:linear-gradient(#FFD467,#E0A93A)} .vu{position:relative;width:6px;height:96px;background:#ffffff10;-webkit-mask:repeating-linear-gradient(to top,#000 0 5px,transparent 5px 7px);mask:repeating-linear-gradient(to top,#000 0 5px,transparent 5px 7px)} .vu::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,var(--led) 0 58%,var(--yellow) 58% 84%,var(--rec) 84%);clip-path:inset(100% 0 0 0);transition:clip-path .4s} .strip[aria-selected="true"] .vu::after{animation:vu 1.1s ease-in-out infinite} @keyframes vu{0%{clip-path:inset(46% 0 0 0)}18%{clip-path:inset(14% 0 0 0)}32%{clip-path:inset(34% 0 0 0)}50%{clip-path:inset(20% 0 0 0)}68%{clip-path:inset(42% 0 0 0)}84%{clip-path:inset(10% 0 0 0)}100%{clip-path:inset(46% 0 0 0)}} .ch{grid-column:1/-1;justify-self:center;font:italic 900 12.5px/1 var(--f-strong);font-stretch:125%;text-transform:uppercase;letter-spacing:.02em;color:var(--dust);transition:color .3s} .strip[aria-selected="true"] .ch{color:var(--yellow)} .why-out{display:grid;justify-items:center;text-align:center;gap:12px;padding-top:16px;border-top:1px dashed var(--line-2);min-height:112px;align-content:start} .why-out.swap{animation:whyIn .45s var(--ease)} @keyframes whyIn{from{opacity:0;transform:translateY(8px)}} .why-word{font-family:var(--f-display);font-size:clamp(40px,13vw,58px);line-height:.5;padding-top:.08em;color:var(--cream);font-synthesis:none} .why-out p{color:var(--cream-2);font-size:15px;max-width:32ch} .kitchen{display:grid;grid-template-columns:auto 1fr;gap:20px;align-items:center;padding:20px;border-radius:18px;border:1px solid var(--line);background:linear-gradient(160deg,var(--panel),var(--ground-2))} .kitchen p{color:var(--cream-2);font-size:14.5px} /* Kleiner Finger, der zum Antippen des Kühlschranks einlädt; verschwindet nach dem ersten Öffnen */ .tap-cue{position:absolute;right:-12px;bottom:26px;z-index:3;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--yellow);color:var(--yellow-ink);box-shadow:0 6px 16px -4px #000;pointer-events:none;animation:tapCue 2.2s ease-in-out infinite;transition:opacity .3s,transform .3s} .tap-cue svg{width:20px;height:20px} .tap-cue::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid var(--yellow);animation:tapRing 2.2s ease-out infinite} @keyframes tapCue{0%,55%,100%{transform:translate(0,0) scale(1)}20%{transform:translate(-4px,-3px) scale(.88)}30%{transform:translate(-4px,-3px) scale(.94)}} @keyframes tapRing{0%,18%{transform:scale(.9);opacity:0}24%{opacity:.9}60%,100%{transform:scale(1.9);opacity:0}} .fridge.seen .tap-cue{opacity:0;transform:scale(.5)} .fridge{position:relative;width:104px;height:164px;perspective:620px;flex:none} .fr-body{position:absolute;inset:0;border-radius:10px;background:#080504;border:1px solid var(--line-2);display:grid;grid-template-rows:repeat(3,1fr);padding:10px 8px 8px;gap:4px;overflow:hidden} .fr-body::before{content:"";position:absolute;inset:0;background:radial-gradient(90px 70px at 50% 0%,#FFF1D455,transparent 70%);opacity:0;transition:opacity .5s .15s} .fridge.open .fr-body::before{opacity:1} .fr-shelf{display:flex;align-items:flex-end;justify-content:center;gap:3px;border-bottom:2px solid #ffffff1c;position:relative} .btl{width:var(--w,9px);height:var(--h,30px);border-radius:3px 3px 2px 2px;background:var(--c);position:relative;transform-origin:bottom;transform:scaleY(.6);opacity:.4;transition:transform .45s var(--spring),opacity .3s;transition-delay:calc(var(--d) * 40ms + 200ms)} .btl::before{content:"";position:absolute;left:50%;top:-4px;width:40%;height:5px;margin-left:-20%;border-radius:1px;background:inherit;filter:brightness(.8)} .btl.can::before{display:none} .fridge.open .btl{transform:none;opacity:1} .fr-door{position:absolute;inset:0;border-radius:10px;background:linear-gradient(135deg,#3a2a1d,#241810 70%);border:1px solid var(--line-2);transform-origin:left center;transition:transform .8s cubic-bezier(.3,1.25,.5,1);box-shadow:inset -1px 0 0 #ffffff10;display:grid;place-items:center} .fridge.open .fr-door{transform:rotateY(-112deg)} .fr-handle{position:absolute;right:8px;top:18px;width:4px;height:44px;border-radius:3px;background:#6b5540} .fr-sticker{font:italic 900 15px/.95 var(--f-strong);font-stretch:112%;text-transform:uppercase;color:var(--yellow-ink);background:var(--yellow);padding:6px 7px 4px;border-radius:3px;transform:rotate(-7deg);text-align:center} /* ---------- Angebot ---------- */ .cards{display:grid;gap:14px} .svc-card{display:grid;gap:14px;padding:18px;border-radius:18px;border:1px solid var(--line);background:linear-gradient(180deg,var(--panel),var(--ground-2));text-align:left;width:100%} .svc-card-top{display:flex;align-items:center;justify-content:space-between;gap:12px} .svc-card h2{font:italic 900 22px/1.05 var(--f-strong);font-stretch:125%;text-transform:uppercase} .svc-card .claim{color:var(--cream-2)} .checks{display:grid;gap:7px} .checks li{display:grid;grid-template-columns:18px 1fr;gap:10px;align-items:start;font-size:14.5px;color:var(--cream-2)} .checks .i{width:16px;height:16px;color:var(--led);margin-top:3px} .card-actions{display:flex;gap:10px} .card-actions .btn{flex:1} .pricetag{display:inline-flex;gap:8px;align-items:center;font-size:11.5px;color:var(--yellow);border:1px solid #F7C54844;border-radius:99px;padding:6px 10px;white-space:nowrap} .pricetag s{color:var(--dust)} /* ---------- Sheet ---------- */ .sheet-wrap{position:fixed;inset:0;z-index:60} .scrim{position:absolute;inset:0;background:#000000b8;opacity:0;transition:opacity .3s} .sheet{position:absolute;left:50%;bottom:0;width:min(100%,600px);max-height:90vh;max-height:90dvh;overflow:auto;overscroll-behavior:contain;background:var(--panel);border:1px solid var(--line);border-bottom:0;border-radius:24px 24px 0 0;transform:translate(-50%,100%);transition:transform .45s cubic-bezier(.2,.9,.2,1);padding:0 var(--gut) calc(26px + env(safe-area-inset-bottom,0px))} .sheet-wrap.open .scrim{opacity:1} .sheet-wrap.open .sheet{transform:translate(-50%,0)} .grab-zone{position:sticky;top:0;z-index:3;padding:10px 0 6px;background:linear-gradient(var(--panel) 70%,transparent);touch-action:none;cursor:grab;display:flex;justify-content:center} .grab{width:42px;height:4px;border-radius:4px;background:var(--line-2)} .sheet-close{position:absolute;right:0;top:6px;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;color:var(--dust);background:#ffffff08} .sheet-close .i{width:18px;height:18px} .sh{display:grid;gap:18px;padding-top:6px} .sh-head{display:flex;gap:14px;align-items:center} .sh-head h2,.sh-title{font:italic 900 30px/.95 var(--f-strong);font-stretch:125%;text-transform:uppercase} .sh-lead{font:700 18px/1.3 var(--f-body);font-stretch:112%} .sh p{color:var(--cream-2)} .specs{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--line);border-radius:14px;overflow:hidden} .specs > div{padding:12px;display:grid;gap:4px;border-right:1px solid var(--line)} .specs > div:last-child{border-right:0} .specs b{font:800 16px/1.15 var(--f-body);font-stretch:112%} .chips{display:flex;flex-wrap:wrap;gap:6px} .chip{font:500 11px/1 var(--f-mono);font-stretch:87.5%;padding:8px 10px;border-radius:8px;border:1px solid var(--line-2);color:var(--cream-2)} .fam-price{display:flex;align-items:baseline;gap:10px} .fam-price b{font:italic 900 48px/.9 var(--f-strong);font-stretch:112%;color:var(--yellow)} /* ---------- Buchen ---------- */ .bk-head{display:grid;gap:12px;padding-top:26px} .dock-ico{display:grid;place-items:center;width:22px;height:22px} .dock-ico .avatar{width:23px;height:23px;font-size:8.5px;border-width:1.5px} .bk-top{display:flex;justify-content:space-between;align-items:center;gap:10px} .step-title{font:italic 900 clamp(26px,7.6vw,36px)/1 var(--f-strong);font-stretch:125%;text-transform:uppercase} .progress{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:6px} .pg{display:grid;gap:6px;text-align:left;cursor:default} .pg.pg-done{cursor:pointer} .pg i{height:4px;border-radius:2px;background:#ffffff14;transition:background .35s,box-shadow .35s} .pg.pg-done i{background:#F7C54870} .pg.now i{background:var(--yellow);box-shadow:0 0 12px #F7C54899} .pg span{font:500 9.5px/1 var(--f-mono);font-stretch:87.5%;letter-spacing:.08em;text-transform:uppercase;color:var(--dust);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .pg.now span{color:var(--cream)} .bk-body{display:grid;gap:26px} .bk-body.in-fwd{animation:inFwd .42s var(--ease) both} .bk-body.in-back{animation:inBack .42s var(--ease) both} @keyframes inFwd{from{opacity:0;transform:translateX(28px)}} @keyframes inBack{from{opacity:0;transform:translateX(-28px)}} .field{display:grid;gap:10px} .hint{color:var(--dust);font-size:14px} .hint-box{padding:14px 16px;border-radius:12px;border:1px dashed var(--line-2);color:var(--dust);font-size:14px} .choice-list{display:grid;gap:8px} .choice{display:grid;grid-template-columns:46px 1fr auto;gap:14px;align-items:center;width:100%;padding:12px 14px 12px 12px;border-radius:14px;border:1px solid var(--line);background:var(--panel);transition:border-color .2s,background-color .2s,transform .2s var(--ease)} .choice:active{transform:scale(.98)} .choice b{display:block;font:700 16px/1.2 var(--f-body);font-stretch:112%} .choice small{display:block;color:var(--dust);font-size:13px;margin-top:2px} .choice.on{border-color:var(--yellow);background:linear-gradient(90deg,#F7C54814,var(--panel))} .choice.on .ico{background:var(--yellow);color:var(--yellow-ink);border-color:var(--yellow);transform:rotate(-6deg)} .days{gap:8px} .day{flex:0 0 62px;display:grid;justify-items:center;gap:3px;padding:10px 0 9px;border-radius:12px;border:1px solid var(--line);background:var(--panel);transition:border-color .2s,background .25s,transform .2s var(--ease)} .day:active{transform:scale(.95)} .day-wd,.day-m{font:500 9.5px/1 var(--f-mono);font-stretch:87.5%;letter-spacing:.08em;text-transform:uppercase;color:var(--dust)} .day-n{font:italic 900 27px/.95 var(--f-strong);font-stretch:112%} .day .leds{margin-top:5px} .day.on{border-color:var(--yellow);background:linear-gradient(180deg,#F7C54824,#F7C54806)} .day.on .day-wd{color:var(--yellow)} .day.full{opacity:.38} .day.lock{border-style:dashed;border-color:#F7C54866;color:var(--yellow);align-content:center;gap:6px} .day.lock .i{width:18px;height:18px} .day.lock .day-m,.day.lock .day-wd{color:var(--yellow)} .times{display:grid;grid-template-columns:repeat(4,1fr);gap:6px} .t{height:44px;display:grid;place-items:center;text-align:center;padding:0;border-radius:10px;border:1px solid var(--line);background:var(--panel);font:500 12.5px/1 var(--f-mono);font-stretch:87.5%;font-variant-numeric:tabular-nums;transition:background-color .2s,border-color .2s,color .2s,transform .15s} .t:not(:disabled):active{transform:scale(.94)} .t.inrange{background:#F7C5481c;border-color:#F7C54859;color:var(--yellow)} .t.on{background:var(--yellow);border-color:var(--yellow);color:var(--yellow-ink);font-weight:600} .t.busy{background:repeating-linear-gradient(135deg,#ffffff09 0 4px,transparent 4px 8px);color:#ffffff38;text-decoration:line-through} .t.past{opacity:.28} .t.short{color:#ffffff55} .dur{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap} .dur:empty{display:none} .dur > .label{flex-basis:100%} .stepper{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:12px;background:var(--panel);overflow:hidden} .stepper button{width:48px;height:48px;font:500 22px/1 var(--f-mono);display:grid;place-items:center;transition:background-color .2s} .stepper button:not(:disabled):active{background:#ffffff10} .stepper button:disabled{color:#ffffff30} .stepper output{min-width:78px;text-align:center;font:500 12px/1 var(--f-mono);color:var(--dust)} .stepper output b{font:italic 900 27px/1 var(--f-strong);font-stretch:112%;color:var(--cream);display:inline-block;margin-right:4px} .stepper output b.tick{animation:tick .3s var(--ease)} @keyframes tick{from{transform:translateY(-8px);opacity:.2}} .range{font-size:13px;color:var(--yellow)} .lane{position:relative;height:58px;border-radius:10px;border:1px solid var(--line);background:var(--panel) repeating-linear-gradient(90deg,#ffffff0b 0 1px,transparent 1px 6.25%);overflow:hidden} .clip{position:absolute;top:9px;bottom:9px;border-radius:6px;padding:0 7px;display:flex;align-items:center;font:500 9px/1.1 var(--f-mono);font-stretch:75%;white-space:nowrap;overflow:hidden} .clip span{overflow:hidden;text-overflow:ellipsis} .clip.busy{background:repeating-linear-gradient(135deg,#ffffff12 0 5px,#ffffff07 5px 10px);border:1px solid #ffffff14;color:var(--dust)} .clip.mine{border-color:#86E0A466;color:var(--led)} .clip.sel{background:var(--yellow);color:var(--yellow-ink);font-weight:600;box-shadow:0 6px 22px -6px #F7C548AA;transition:left .38s var(--ease),width .38s var(--ease),opacity .25s} .clip.sel.gone{opacity:0} .playhead{position:absolute;top:0;bottom:0;width:2px;margin-left:-1px;background:var(--rec);box-shadow:0 0 8px var(--rec)} .lane-ticks{display:flex;justify-content:space-between;font:500 9.5px/1 var(--f-mono);font-stretch:87.5%;color:var(--dust);margin-top:-2px} .legend{display:flex;gap:16px;flex-wrap:wrap;font:500 10px/1 var(--f-mono);font-stretch:87.5%;color:var(--dust)} .legend span{display:inline-flex;align-items:center;gap:6px} .legend i{width:14px;height:8px;border-radius:2px} .legend .lg-busy{background:repeating-linear-gradient(135deg,#ffffff30 0 3px,#ffffff10 3px 6px)} .legend .lg-sel{background:var(--yellow)} .legend .lg-now{width:2px;height:10px;background:var(--rec)} .seg{position:relative;display:grid;grid-auto-flow:column;grid-auto-columns:1fr;padding:4px;border-radius:12px;border:1px solid var(--line);background:var(--panel)} .seg::before{content:"";position:absolute;top:4px;bottom:4px;left:4px;width:calc((100% - 8px) / var(--n));border-radius:9px;background:var(--panel-2);border:1px solid var(--line-2);transform:translateX(calc(var(--i) * 100%));transition:transform .4s var(--spring)} .seg button{position:relative;z-index:1;height:44px;border-radius:9px;font:600 14px/1.1 var(--f-body);color:var(--dust);text-align:center;transition:color .25s;padding:0 6px} .seg button[aria-pressed="true"]{color:var(--cream)} .seg button small{display:block;font:500 10px/1.2 var(--f-mono);font-stretch:87.5%;color:inherit;opacity:.8;margin-top:2px} .groups{display:grid;gap:10px} .group{display:grid;gap:8px;text-align:left;width:100%;padding:14px 16px;border-radius:14px;border:1px solid var(--line);background:var(--panel);transition:border-color .2s,box-shadow .25s,transform .2s var(--ease)} .group:not(:disabled):active{transform:scale(.98)} .group.on{border-color:var(--yellow);box-shadow:inset 0 0 0 1px var(--yellow)} .group:disabled{opacity:.45} .group b{font:700 17px/1.2 var(--f-body);font-stretch:112%} .group-top,.group-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap} .group-top .mono,.group-foot .mono{font-size:11px} .seats{display:inline-flex;gap:4px} .seats i{width:10px;height:10px;border-radius:50%;border:1.5px solid var(--led)} .seats i.taken{background:#ffffff26;border-color:transparent} .toggles{display:grid;gap:8px} .tg{display:grid;grid-template-columns:1fr auto;gap:14px;align-items:center;width:100%;padding:14px 16px;border-radius:14px;border:1px solid var(--line);background:var(--panel);text-align:left;transition:border-color .2s,background-color .25s} .tg b{display:block;font:700 15.5px/1.25 var(--f-body);font-stretch:108%} .tg small{display:block;color:var(--dust);font-size:13px;margin-top:2px} .tg .tg-price{font:500 11px/1 var(--f-mono);font-stretch:87.5%;color:var(--yellow);margin-top:6px;display:block} .sw{width:46px;height:28px;border-radius:14px;background:#ffffff16;position:relative;transition:background-color .25s;flex:none} .sw::after{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:var(--cream);transition:transform .38s var(--spring),background-color .25s} .tg.on{border-color:#F7C54866;background:linear-gradient(90deg,#F7C54810,var(--panel))} .tg.on .sw{background:var(--yellow)} .tg.on .sw::after{transform:translateX(18px);background:var(--yellow-ink)} .tg.incl{cursor:default} .incl-pill{font:500 9.5px/1 var(--f-mono);font-stretch:87.5%;letter-spacing:.08em;text-transform:uppercase;color:var(--led);border:1px solid #86E0A455;padding:6px 8px;border-radius:99px} .fridge-note{display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:14px;background:#86E0A40d;border:1px solid #86E0A433;font-size:14px;color:var(--cream-2)} .fridge-note b{color:var(--cream)} .form{display:grid;gap:14px} .inp{display:grid;gap:7px} .inp input,.inp textarea{width:100%;height:52px;border-radius:12px;border:1px solid var(--line);background:var(--ground-2);color:var(--cream);padding:0 14px;font:400 16px/1.3 var(--f-body);transition:border-color .2s,box-shadow .2s;outline:none} .inp textarea{height:auto;min-height:100px;padding:13px 14px;resize:vertical} .inp input:focus,.inp textarea:focus{border-color:var(--yellow);box-shadow:0 0 0 3px #F7C54826} .inp input::placeholder,.inp textarea::placeholder{color:#ffffff38} .inp.bad input{border-color:var(--rec)} .two{display:grid;grid-template-columns:1fr 1fr;gap:12px} .auth{display:grid;gap:16px;padding:18px;border-radius:18px;border:1px solid var(--line);background:var(--panel)} .me-card{display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:center;padding:16px;border-radius:16px;border:1px solid var(--line);background:var(--panel)} .me-card b{display:block;font:700 17px/1.2 var(--f-body);font-stretch:112%} .me-card .mono{font-size:11px;display:block;margin-top:3px} .me-card .pill{display:inline-block;margin-top:8px} .ticket{display:grid;color:var(--ink);animation:ticketIn .6s var(--spring) backwards;filter:drop-shadow(0 18px 30px #00000080)} @keyframes ticketIn{from{transform:translateY(18px) rotate(-1.5deg);opacity:0}} .tk-a,.tk-b{background:var(--paper);display:grid;gap:14px;padding:22px 20px} .tk-a{border-radius:14px 14px 0 0; -webkit-mask:radial-gradient(circle 11px at 0 100%,#0000 98%,#000) left/51% 100% no-repeat,radial-gradient(circle 11px at 100% 100%,#0000 98%,#000) right/51% 100% no-repeat; mask:radial-gradient(circle 11px at 0 100%,#0000 98%,#000) left/51% 100% no-repeat,radial-gradient(circle 11px at 100% 100%,#0000 98%,#000) right/51% 100% no-repeat} .tk-b{position:relative;border-radius:0 0 14px 14px; -webkit-mask:radial-gradient(circle 11px at 0 0,#0000 98%,#000) left/51% 100% no-repeat,radial-gradient(circle 11px at 100% 0,#0000 98%,#000) right/51% 100% no-repeat; mask:radial-gradient(circle 11px at 0 0,#0000 98%,#000) left/51% 100% no-repeat,radial-gradient(circle 11px at 100% 0,#0000 98%,#000) right/51% 100% no-repeat} .tk-b::before{content:"";position:absolute;top:0;left:18px;right:18px;border-top:2px dashed #1B120C38} .ticket-top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;color:var(--ink)} .ticket-top .logo{width:120px} .ticket .t-label{font:500 9.5px/1 var(--f-mono);font-stretch:87.5%;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2)} .ticket-meta{display:grid;grid-template-columns:1fr 1fr;gap:12px 16px} .ticket-meta div{display:grid;gap:4px} .ticket-meta .wide{grid-column:1/-1} .ticket-meta b{font:700 15px/1.2 var(--f-body);font-stretch:108%} .ticket-meta s{color:var(--ink-2);font-weight:500} .lines{display:grid;gap:8px;font:500 12px/1.35 var(--f-mono);font-stretch:87.5%;font-variant-numeric:tabular-nums} .line{display:flex;align-items:baseline;gap:8px} .line .ld{flex:1;border-bottom:1px dotted #1B120C4d;transform:translateY(-4px);min-width:12px} .line .free{color:#2E7A4B} .line .minus{color:#A3620A;font-weight:600} .total{display:flex;justify-content:space-between;align-items:baseline;gap:12px} .total b{font:italic 900 36px/.9 var(--f-strong);font-stretch:112%} .agree{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start;font-size:14px;color:var(--cream-2);cursor:pointer} .agree input{appearance:none;-webkit-appearance:none;width:24px;height:24px;margin:0;border-radius:7px;border:1.5px solid var(--line-2);background:var(--panel);display:grid;place-items:center;transition:background-color .2s,border-color .2s;cursor:pointer} .agree input::after{content:"";width:6px;height:11px;border:solid var(--yellow-ink);border-width:0 2.5px 2.5px 0;transform:rotate(45deg) scale(0);margin-top:-3px;transition:transform .3s var(--spring)} .agree input:checked{background:var(--yellow);border-color:var(--yellow)} .agree input:checked::after{transform:rotate(45deg) scale(1)} .demo-note{font:500 10.5px/1.5 var(--f-mono);font-stretch:87.5%;color:var(--dust)} /* ---------- Aktionsleiste & Dock ---------- */ .actionbar{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(88px + env(safe-area-inset-bottom,0px));width:min(calc(100% - 20px),480px);z-index:39;animation:barIn .45s var(--spring) both} @keyframes barIn{from{transform:translate(-50%,24px);opacity:0}} .ab-in{display:flex;align-items:center;gap:8px;padding:8px 8px 8px 16px;border-radius:18px;background:color-mix(in srgb,var(--panel-2) 92%,transparent);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border:1px solid var(--line-2);box-shadow:0 18px 40px -14px #000} .ab-back{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;color:var(--cream-2);border:1px solid var(--line-2);flex:none;transition:transform .15s;animation:pop .35s var(--spring)} /* Mix & Master: Trackliste */ .trks{display:grid;gap:10px} .trk{display:grid;gap:12px;padding:14px;border-radius:14px;border:1px solid var(--line);background:var(--panel)} .trk-top{display:flex;justify-content:space-between;align-items:center;min-height:34px} .trk-top b{font:italic 900 15px/1 var(--f-strong);font-stretch:125%;text-transform:uppercase} .trk-del{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;color:var(--dust);border:1px solid var(--line-2)} .trk-del .i{width:16px;height:16px} .trk-src{display:grid;grid-template-columns:auto auto minmax(0,1fr);gap:10px;align-items:center} .trk-file{cursor:pointer;padding-inline:12px;gap:6px} .trk-file .i{width:16px;height:16px} .trk-or{font-size:12px} .trk-link{display:flex;align-items:center;gap:8px;height:42px;padding:0 12px;border-radius:10px;border:1px solid var(--line);background:var(--ground-2);min-width:0;cursor:text;transition:border-color .2s} .trk-link:focus-within{border-color:var(--yellow)} .trk-link .i{width:16px;height:16px;color:var(--dust);flex:none} .trk-link input{flex:1;min-width:0;background:none;border:0;outline:none;color:var(--cream);font:400 16px/1 var(--f-body)} .trk-link input::placeholder{color:#ffffff38} .trk-name{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--led);overflow:hidden} .trk-name span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .trk-name .i{width:14px;height:14px;flex:none} .trk-file:has(+ input:focus-visible){outline:2px solid var(--yellow);outline-offset:2px} .ab-back:active{transform:scale(.92)} .ab-back .i{width:18px;height:18px} .ab-total{flex:1;min-width:0;display:grid;gap:3px} .ab-total span{font:500 9.5px/1.2 var(--f-mono);font-stretch:87.5%;letter-spacing:.06em;text-transform:uppercase;color:var(--dust);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .ab-total b{font:italic 900 26px/.95 var(--f-strong);font-stretch:112%;font-variant-numeric:tabular-nums;display:inline-block;transform-origin:left center} .ab-total b.bump{animation:bump .35s var(--ease)} @keyframes bump{40%{transform:scale(1.08);color:var(--yellow)}} .actionbar .btn{height:46px;flex:none} .dock{position:fixed;left:50%;bottom:calc(10px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);width:min(calc(100% - 20px),480px);z-index:40;display:grid;grid-template-columns:repeat(5,1fr);align-items:center;padding:6px;border-radius:22px;background:color-mix(in srgb,var(--panel) 86%,transparent);-webkit-backdrop-filter:blur(18px) saturate(1.3);backdrop-filter:blur(18px) saturate(1.3);border:1px solid var(--line);box-shadow:0 18px 44px -12px #000000d0} .dock > button{position:relative;display:grid;justify-items:center;gap:4px;padding:9px 0 7px;border-radius:15px;color:var(--dust);font:500 9px/1 var(--f-mono);font-stretch:87.5%;letter-spacing:.06em;text-transform:uppercase;transition:color .25s} .dock > button .i{width:22px;height:22px;transition:transform .35s var(--spring)} .dock > button[aria-current="page"]{color:var(--cream)} .dock > button[aria-current="page"] .i{transform:translateY(-1px) scale(1.06)} .dock > button:active .i{transform:scale(.88)} .dock .book{margin-inline:4px;background:var(--yellow);color:var(--yellow-ink);box-shadow:0 8px 22px -8px #F7C548AA} .dock .book[aria-current="page"]{color:var(--yellow-ink)} .dock-led{position:absolute;top:4px;left:0;width:5px;height:5px;margin-left:-2.5px;border-radius:50%;background:var(--yellow);box-shadow:0 0 10px var(--yellow);transition:transform .5s var(--spring),opacity .25s;pointer-events:none} .badge{position:absolute;top:3px;left:calc(50% + 6px);min-width:17px;height:17px;padding:0 4px;border-radius:9px;background:var(--yellow);color:var(--yellow-ink);font:600 9.5px/17px var(--f-mono);text-align:center} .badge.pop{animation:pop .5s var(--spring)} @keyframes pop{from{transform:scale(0)}} /* ---------- Setup ---------- */ .ctabs{gap:8px} .ctab{flex:none;height:40px;padding:0 15px;border-radius:99px;border:1px solid var(--line);font:600 13.5px/1 var(--f-body);color:var(--cream-2);white-space:nowrap;transition:background-color .25s,color .25s,border-color .25s} .ctab[aria-pressed="true"]{background:var(--cream);color:var(--ground);border-color:var(--cream)} .gear{border-top:1px solid var(--line)} .gear-row{display:grid;grid-template-columns:46px 1fr;gap:12px;align-items:baseline;padding:15px 0;border-bottom:1px solid var(--line);animation:viewIn .45s var(--ease) both;animation-delay:calc(var(--k) * 45ms)} .gear-row .q{font-size:13px;color:var(--yellow)} .gear-row b{font:700 16.5px/1.25 var(--f-body);font-stretch:108%;display:block} .gear-row small{display:block;color:var(--dust);font-size:13.5px;margin-top:2px} .rooms{display:grid;gap:16px} .room{border-radius:18px;border:1px solid var(--line);background:linear-gradient(180deg,var(--panel),var(--ground-2));overflow:hidden} .room-shots{display:grid;grid-template-columns:1fr 1fr;gap:3px;background:var(--line)} .room-shots img,.shot-ph{display:block;width:100%;aspect-ratio:4/3;object-fit:cover} /* Ein Bild über die volle Breite, gleiche Höhe wie die Bilderpaare */ .room-shots.single > *{grid-column:1/-1;aspect-ratio:8/3} .shot-ph{display:grid;place-content:center;justify-items:center;gap:6px;color:var(--dust);background:repeating-linear-gradient(135deg,#ffffff07 0 8px,transparent 8px 16px),var(--panel-2);font:500 10px/1 var(--f-mono);font-stretch:87.5%;letter-spacing:.1em;text-transform:uppercase} .shot-ph .i{width:24px;height:24px;opacity:.8} .room-body{display:grid;gap:8px;padding:16px 18px 18px} .room-body h3{font:italic 900 21px/1.05 var(--f-strong);font-stretch:125%;text-transform:uppercase} .room-body p{color:var(--cream-2);font-size:14.5px} .room-body .chips{margin-top:4px} .facts{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:16px;overflow:hidden} .facts > div{background:var(--panel);padding:15px 14px;display:grid;gap:5px;align-content:start} .facts b{font:700 15.5px/1.25 var(--f-body);font-stretch:108%} .rules{display:grid;border-top:1px solid var(--line)} .rules li{display:grid;grid-template-columns:22px 1fr;gap:12px;padding:14px 0;border-bottom:1px solid var(--line);color:var(--cream-2);font-size:15px} .rules li::before{content:"";width:8px;height:8px;margin-top:8px;border-radius:2px;background:var(--yellow);transform:rotate(45deg)} /* ---------- Konto ---------- */ .konto{display:grid;gap:30px} .me{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:center} .me h2{font:italic 900 clamp(24px,7vw,32px)/1 var(--f-strong);font-stretch:125%;text-transform:uppercase;margin-top:4px;overflow-wrap:anywhere} .me .mono{font-size:11px;display:block;margin-top:4px} .me-actions{display:flex;gap:8px;flex-wrap:wrap} .avatar{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--panel-2);border:2px solid var(--line-2);font:italic 900 15px/1 var(--f-strong);font-stretch:112%;color:var(--cream);flex:none} .avatar.big{width:64px;height:64px;font-size:22px} .avatar.fam{border-color:var(--yellow);box-shadow:0 0 0 3px #F7C54822} .next{display:grid;gap:6px;padding:18px;border-radius:18px;background:linear-gradient(135deg,var(--yellow),#E6A52C);color:var(--yellow-ink);box-shadow:0 18px 40px -20px #F7C548AA} .next .t-label{font:500 10px/1 var(--f-mono);font-stretch:87.5%;letter-spacing:.1em;text-transform:uppercase;opacity:.75} .next b{font:italic 900 26px/1 var(--f-strong);font-stretch:125%;text-transform:uppercase} .next .mono{font-size:12px} .bk-list{display:grid;gap:12px} .bkc{display:grid;gap:12px;padding:16px;border-radius:16px;border:1px solid var(--line);background:linear-gradient(180deg,var(--panel),var(--ground-2));animation:viewIn .45s var(--ease) both;animation-delay:calc(var(--k) * 50ms)} .bkc-top{display:flex;justify-content:space-between;align-items:center;gap:10px} .bkc h3{font:italic 900 19px/1.05 var(--f-strong);font-stretch:125%;text-transform:uppercase} .bkc .when{font-size:12px;color:var(--cream-2)} .bkc-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;padding-top:12px;border-top:1px dashed var(--line-2)} .bkc-foot > b{font:italic 900 24px/.95 var(--f-strong);font-stretch:112%} .bkc-actions{display:flex;gap:8px;flex-wrap:wrap} .bkc-actions .btn{height:38px;padding-inline:12px;font-size:13px} .bkc-actions .i{width:16px;height:16px} .st{display:inline-flex;align-items:center;gap:7px;font:500 9.5px/1 var(--f-mono);font-stretch:87.5%;letter-spacing:.08em;text-transform:uppercase;padding:6px 9px;border-radius:99px;background:#F7C5481a;color:var(--yellow);white-space:nowrap} .st::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;animation:blink 1.8s ease-in-out infinite} .st.off{background:#ffffff0d;color:var(--dust)} .st.off::before{animation:none} .bkc.cancelled{opacity:.62} .bkc.cancelled h3{text-decoration:line-through;text-decoration-thickness:2px} .empty{display:grid;gap:14px;justify-items:start;padding:24px 20px;border-radius:18px;border:1px dashed var(--line-2)} .empty .big{font:italic 900 56px/.85 var(--f-strong);font-stretch:125%;text-transform:uppercase;color:#ffffff14} /* ---------- Bestätigung ---------- */ .confirm{position:fixed;inset:0;z-index:80;background:var(--ground);display:grid;place-items:center;padding:24px var(--gut);opacity:0;transition:opacity .3s} .confirm.show{opacity:1} .done-in{display:grid;justify-items:center;gap:18px;text-align:center;max-width:420px;position:relative} .ring{position:absolute;top:40px;left:50%;width:220px;height:220px;margin-left:-110px;border-radius:50%;border:2px solid var(--yellow);opacity:0;pointer-events:none} .confirm.show .ring{animation:ring 1.1s .25s var(--ease) both} @keyframes ring{from{transform:scale(.3);opacity:.9}to{transform:scale(1.8);opacity:0}} .stamp{font:italic 900 clamp(38px,12vw,64px)/.9 var(--f-strong);font-stretch:125%;text-transform:uppercase;color:var(--yellow);border:5px solid var(--yellow);border-radius:12px;padding:12px 18px 8px;transform:rotate(-6deg)} .confirm.show .stamp{animation:stamp .6s .1s cubic-bezier(.2,1.35,.4,1) both} @keyframes stamp{0%{transform:scale(2.3) rotate(-16deg);opacity:0}60%{opacity:1}100%{transform:scale(1) rotate(-6deg)}} .done-code{font-size:14px;letter-spacing:.14em;color:var(--cream);margin-top:10px} .confirm p{color:var(--cream-2)} .done-actions{display:grid;gap:10px;width:100%;margin-top:6px} .toast{position:fixed;left:50%;top:calc(12px + env(safe-area-inset-top,0px));z-index:90;transform:translate(-50%,-160%);max-width:calc(100% - 32px);padding:12px 16px;border-radius:14px;background:var(--panel-2);border:1px solid var(--line-2);color:var(--cream);font-size:14px;box-shadow:0 14px 34px -10px #000;opacity:0;visibility:hidden;transition:transform .45s var(--spring),opacity .25s,visibility 0s .45s;pointer-events:none} .toast.show{transform:translate(-50%,0);opacity:1;visibility:visible;transition:transform .45s var(--spring),opacity .2s,visibility 0s} .foot{display:grid;justify-items:center;gap:12px;text-align:center;border-top:1px solid var(--line);padding-block:26px 0;color:var(--dust)} .foot .logo{width:104px;color:var(--cream)} .foot-claim{font-family:var(--f-display);font-size:19px;line-height:.6;color:var(--cream-2);font-synthesis:none} .foot small{font-size:10px;letter-spacing:.08em} .burst{position:fixed;z-index:95;pointer-events:none;width:18px;height:18px;color:var(--yellow);animation:burst .9s var(--ease) forwards} @keyframes burst{from{transform:translate(0,0) scale(.2) rotate(0);opacity:1}to{transform:translate(var(--bx),var(--by)) scale(1) rotate(180deg);opacity:0}} /* ---------- Bjork: nur für kurze Wortmarken aus Buchstaben ---------- */ .page-title,.tagline,.stamp,.empty .big{font-family:var(--f-display);font-style:normal;font-weight:400;font-stretch:normal;text-transform:none;letter-spacing:0;font-synthesis:none} /* Bjork-Glyphen sind nur ~0,36 em hoch: enge Zeilenhöhe, damit der Abstand zum Inhalt stimmt */ .page-title{font-size:clamp(54px,20.5vw,118px);line-height:.5;padding-block:.05em .12em} .sec-head{flex-wrap:wrap;row-gap:8px;align-items:center} .tagline{font-size:clamp(22px,8vw,38px);line-height:.62} .kitchen-title{grid-column:1/-1;font:italic 900 19px/1.1 var(--f-strong);font-stretch:125%;text-transform:uppercase;color:var(--yellow)} .stamp{font-size:clamp(38px,13.5vw,64px);line-height:.8;padding:20px 22px 18px} .empty .big{font-size:84px;line-height:.7} @media (min-width:700px){.view{gap:60px}.kitchen{padding:26px}} @media (max-width:360px){ .two{grid-template-columns:1fr} .times{grid-template-columns:repeat(3,1fr)} .specs{grid-template-columns:1fr} .specs > div{border-right:0;border-bottom:1px solid var(--line)} } /* ---------- Nur Desktop sichtbar ---------- */ .deskbar,.bk-aside{display:none} .k-side,.k-main{display:grid;gap:30px;align-content:start;min-width:0} /* ========================================================= DESKTOP ab 960 px ========================================================= */ @media (min-width:960px){ :root{--gut:40px} .dock{display:none} .ambient{width:min(100%,1120px)} /* Kopfleiste */ .deskbar{display:block;position:sticky;top:env(safe-area-inset-top,0px);z-index:30;background:color-mix(in srgb,var(--ground) 84%,transparent);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid #ffffff0a} .deskbar-in{max-width:1200px;margin-inline:auto;padding:14px var(--gut);display:flex;align-items:center;gap:24px} .db-logo{display:block;color:var(--cream)} .db-logo .logo{width:116px} .db-nav{display:flex;gap:4px;margin-left:auto} .db-nav button{position:relative;height:40px;padding:0 16px;border-radius:10px;font:600 15px/1 var(--f-body);font-stretch:108%;color:var(--cream-2);transition:color .2s,background-color .2s} .db-nav button:hover{color:var(--cream);background:#ffffff08} .db-nav button[aria-current]{color:var(--cream)} .db-nav button[aria-current]::after{content:"";position:absolute;left:50%;bottom:-3px;width:5px;height:5px;margin-left:-2.5px;border-radius:50%;background:var(--yellow);box-shadow:0 0 10px var(--yellow)} .db-nav .badge{top:0;left:auto;right:0} .db-book[aria-current]{box-shadow:0 0 0 2px var(--ground),0 0 0 4px #F7C54866} /* Grundraster */ .app{max-width:1200px} .view{gap:72px;padding-block:32px 96px} .view[data-view="buchen"]{padding-bottom:96px} .view[data-view="studio"]{padding-top:24px} .hscroll{margin-inline:0;padding-inline:0;overflow:visible;flex-wrap:wrap} .hscroll::after{display:none} /* Studio */ .hero{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);column-gap:64px;row-gap:32px;align-items:center} .hero .stage{grid-column:1/-1;height:clamp(420px,38vw,520px)} .logo-btn{width:min(62%,580px)} .lead{font-size:19px;max-width:46ch} .cta-row{justify-content:flex-end} .cta-row .btn{flex:0 1 220px} #freeSlots{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:12px} #freeSlots .sc-date{font-size:28px} #v-studio{grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:32px} #v-studio > *{grid-column:1/-1} #v-studio > .why-sec{grid-column:1;display:grid;grid-template-rows:auto 1fr} #v-studio > .kitchen{grid-column:2;align-self:stretch;margin-top:36px;align-content:center;padding:28px} /* Angebot */ /* 5 Angebote: oben drei, darunter zwei breitere, ohne leeren Platz */ .cards{grid-template-columns:repeat(6,minmax(0,1fr));gap:20px} .svc-card{grid-column:span 2} .svc-card:nth-child(n+4){grid-column:span 3} .svc-card{grid-template-rows:auto auto auto 1fr auto} .card-actions{align-self:end} #groupList{grid-template-columns:repeat(3,minmax(0,1fr))} #groupList > .btn{grid-column:1/-1;justify-self:start;width:auto;padding-inline:28px} /* Setup */ #v-setup{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);column-gap:56px} #v-setup > *{grid-column:1/-1} #v-setup > .setup-gear{grid-column:1;grid-row:span 2} #v-setup > .setup-facts,#v-setup > .setup-rules{grid-column:2} .rooms{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px} /* Buchen: links Schritte, rechts mitlaufende Zusammenfassung */ #v-buchen{grid-template-columns:minmax(0,1fr) 360px;column-gap:56px;align-items:start} #v-buchen > .bk-head,#v-buchen > .bk-body{grid-column:1} #v-buchen > .bk-aside{display:grid;gap:12px;grid-column:2;grid-row:1 / span 2;position:sticky;top:96px} .bk-aside .actionbar{position:static;transform:none;width:auto;animation:none} .bk-aside .ab-in{padding:12px 12px 12px 18px;background:var(--panel-2)} .sum{display:grid;gap:8px;padding:20px;border-radius:18px;border:1px solid var(--line);background:var(--panel)} .sum-title{font:italic 900 20px/1.1 var(--f-strong);font-stretch:125%;text-transform:uppercase} .sum-when{font-size:12px;color:var(--yellow)} .sum-lines{margin-top:8px;padding-top:12px;border-top:1px dashed var(--line-2);color:var(--cream-2)} .sum-lines .ld{border-bottom-color:var(--line-2)} .sum-lines .free{color:var(--led)} .sum-lines .minus{color:var(--yellow)} .days{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px} .times{grid-template-columns:repeat(8,minmax(0,1fr))} .choice-list,.toggles{grid-template-columns:1fr 1fr} /* Konto: links Profil und Stoofam, rechts Sessions */ .konto{grid-template-columns:minmax(0,400px) minmax(0,1fr);column-gap:56px;align-items:start} .k-side{grid-column:1;grid-row:1} .k-main{grid-column:2;grid-row:1} /* Details als Dialog in der Mitte statt Bottom-Sheet */ .sheet{top:50%;bottom:auto;width:min(calc(100% - 48px),600px);max-height:86vh;border-radius:24px;border-bottom:1px solid var(--line);opacity:0;transform:translate(-50%,-46%) scale(.98);transition:transform .35s var(--ease),opacity .25s} .sheet-wrap.open .sheet{transform:translate(-50%,-50%);opacity:1} .grab{visibility:hidden} .grab-zone{cursor:default} /* Maus: leichtes Anheben */ .svc-card,.room,.group{transition:border-color .2s,transform .3s var(--ease),box-shadow .25s} .svc-card:hover,.room:hover{border-color:var(--line-2);transform:translateY(-3px)} } @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;animation-delay:0ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important} } /* ---------- Preismodell (alles unter .stoo-pricing bzw. eigenen Klassen) ---------- */ .stoo-pricing{display:grid;gap:14px;grid-template-columns:minmax(0,1fr);scroll-margin-top:90px} .sp-card{display:grid;gap:16px;grid-template-columns:minmax(0,1fr);padding:20px 18px;border-radius:18px;border:1px solid #F7C54855;background:radial-gradient(120% 80% at 100% 0%,#F7C5481f,transparent 60%),linear-gradient(180deg,var(--panel),var(--ground-2));box-shadow:0 24px 50px -30px #F7C54866} .sp-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px} .sp-top > div{flex:1;min-width:0} .sp-top .pricetag{flex:none} .sp-top h2{font:italic 900 26px/1.05 var(--f-strong);font-stretch:112%;margin-top:6px} .sp-seats{display:grid;gap:8px} .sp-friends{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start;padding:14px 16px;border-radius:14px;border:1px dashed var(--line-2);color:var(--cream-2);font-size:14px} .sp-friends b{color:var(--cream)} .sp-friends .i{color:var(--led);width:18px;height:18px;margin-top:2px} .meter{height:6px;border-radius:99px;background:#ffffff0d;border:1px solid var(--line);overflow:hidden} .meter i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--yellow),#E6A52C);box-shadow:0 0 12px #F7C54866;transition:width .6s var(--ease)} .meter.extra i{background:linear-gradient(90deg,#FF8A5C,var(--rec));box-shadow:0 0 10px #FF5A3C55} .quota{display:grid;gap:8px;padding:16px;border-radius:16px;border:1px solid var(--line);background:linear-gradient(180deg,var(--panel),var(--ground-2))} .quota-main{font-size:14px;color:var(--cream-2)} .quota-main b{color:var(--cream)} .quota-cost{font-size:11px} .quota-line{font-size:11px;line-height:1.5;color:var(--cream-2)} .cost-sum{color:var(--cream-2)} .label.led{color:var(--led)} .sc-room{font:500 9.5px/1 var(--f-mono);font-stretch:87.5%;letter-spacing:.08em;text-transform:uppercase;color:var(--yellow)} .lane-name{margin-top:4px} .lane + .lane-name{margin-top:10px} @media (min-width:960px){ .stoo-pricing{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);column-gap:32px;align-items:start} #spaceCards .svc-card{grid-column:span 3} .quota-line{grid-column:1/-1} } .lane-ticks.abs{position:relative;display:block;height:12px} .lane-ticks.abs span{position:absolute;top:0;transform:translateX(-50%);white-space:nowrap} .lane-ticks.abs span.first{transform:none} .lane-ticks.abs span.last{transform:translateX(-100%)} .clip.opensess{border-color:#86E0A455;color:var(--led)} /* Live-Status „Jetzt im Stoo“ (nur angemeldet): zwei kompakte Kacheln, die Farbe zeigt den Zustand */ .now-board{display:grid;gap:8px;padding:10px;border-radius:16px;border:1px solid var(--line);background:var(--ground-2)} .nb-head{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:0 4px} .nb-head .label{display:inline-flex;align-items:center;gap:7px} .nb-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px} .nb-row{--c:var(--dust);display:grid;gap:3px;align-content:start;width:100%;padding:10px 12px 11px;border-radius:12px;text-align:left; background:color-mix(in srgb,var(--c) 16%,var(--panel));border:1px solid color-mix(in srgb,var(--c) 55%,transparent); box-shadow:inset 0 0 22px -12px var(--c);transition:transform .2s var(--ease),background-color .2s} .nb-row.free{--c:var(--led)} .nb-row.open{--c:var(--yellow)} .nb-row.private{--c:var(--rec)} .nb-row.closed{opacity:.75} button.nb-row{cursor:pointer} button.nb-row:active{transform:scale(.97)} button.nb-row:hover{background:color-mix(in srgb,var(--c) 24%,var(--panel))} .nb-room{display:flex;align-items:center;gap:7px;font:500 10px/1.2 var(--f-mono);font-stretch:87.5%;letter-spacing:.08em;text-transform:uppercase;color:var(--cream-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .nb-led{width:8px;height:8px;border-radius:50%;flex:none;background:var(--c);box-shadow:0 0 8px var(--c)} .nb-row.open .nb-led,.nb-row.private .nb-led{animation:blink 1.8s ease-in-out infinite} .nb-state{font:italic 900 19px/1.05 var(--f-strong);font-stretch:112%;text-transform:uppercase;color:var(--c)} .nb-row small{font-size:12px;line-height:1.3;color:var(--cream-2)} @media (min-width:960px){.now-board{grid-column:1/-1}.nb-state{font-size:22px}} /* Konto: Profil bearbeiten und Abmelden gleich breit nebeneinander */ .me-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px} .me-actions .btn{width:100%;padding-inline:10px} .me-actions .btn .i{width:17px;height:17px;flex:none} /* „Angebote“ ist länger als die anderen Seitentitel */ #v-angebote .page-title{font-size:clamp(44px,15vw,104px)} /* Inhaber-Bereich: Mitglieder freischalten, alle Buchungen */ .admin{display:grid;gap:10px} .adm-list{display:grid;border-top:1px solid var(--line)} .adm-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 0;border-bottom:1px solid var(--line)} .adm-who{display:grid;gap:3px;min-width:0} .adm-who b{font:700 15px/1.25 var(--f-body);font-stretch:108%;overflow-wrap:anywhere} .adm-who .mono{font-size:11px;line-height:1.4;overflow-wrap:anywhere} .adm-act{display:flex;align-items:center;gap:8px;flex:none} .adm-act .btn.small{height:38px;padding-inline:12px;font-size:13px}