/* =========================================================
   Ria – Animationen, Komponenten & Unterseiten
   ========================================================= */
:root {
  --ease: cubic-bezier(.16, 1, .3, 1);
  --ease-io: cubic-bezier(.77, 0, .18, 1);
  --ease-back: cubic-bezier(.34, 1.56, .64, 1);
}
[hidden] { display: none !important; }
button, a { -webkit-tap-highlight-color: transparent; }
html.no-scroll, html.menu-open { overflow: hidden; }
::selection { background: var(--red); color: var(--paper); }
:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }

/* ---------- Seitenübergang / Intro ---------- */
.pt {
  position: fixed; inset: 0; z-index: 1000;
  background: var(--ink);
  transform: translateY(100%);
  display: grid; place-items: center;
  pointer-events: none;
}
html.pt-cover .pt { transform: none; transition: none; }
html.pt-out .pt { transform: translateY(-100%); transition: transform 1s var(--ease-io); }
html.pt-in .pt { transform: none; transition: transform .7s var(--ease-io); pointer-events: all; }
.pt-inner { position: relative; display: grid; justify-items: center; gap: 18px; color: var(--paper); }
.pt-logo {
  font-family: var(--serif); font-style: italic; font-size: clamp(64px, 12vw, 140px); line-height: 1;
  display: flex; align-items: flex-start; overflow: hidden; padding: 0 .12em .08em 0;
  opacity: 0;
}
.pt-l { display: inline-block; transform: translateY(110%); }
.pt-dot {
  width: .14em; height: .14em; border-radius: 50%; background: var(--red);
  margin: .14em 0 0 .04em; transform: scale(0);
}
.pt-count {
  font: 500 11px var(--sans); letter-spacing: .3em; color: var(--taupe); opacity: 0;
  font-variant-numeric: tabular-nums;
}
html.is-loading .pt-logo, html.is-loading .pt-count { opacity: 1; }
html.is-loading .pt-l { animation: rise 1s var(--ease) forwards; }
html.is-loading .pt-l:nth-child(2) { animation-delay: .08s; }
html.is-loading .pt-l:nth-child(3) { animation-delay: .16s; }
html.is-loading .pt-dot { animation: pop .7s var(--ease-back) .7s forwards; }
html.pt-out .pt-logo { opacity: 1; transform: translateY(-40px); transition: transform 1s var(--ease-io); }
html.pt-out .pt-l { transform: none; }
html.pt-out .pt-dot { transform: scale(1); }
html.pt-in .pt-inner::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 14px; height: 14px; margin: -7px; border-radius: 50%; background: var(--red);
  animation: pop .5s var(--ease-back) .25s both;
}
@keyframes rise { to { transform: none; } }
@keyframes pop { from { transform: scale(0); } to { transform: scale(1); } }

/* ---------- Reveal-Grundlagen ---------- */
.js [data-reveal="up"], .js [data-reveal="fade"] { opacity: 0; }
.js [data-reveal="up"] { transform: translateY(36px); }
[data-reveal="up"].in {
  opacity: 1; transform: none;
  transition: opacity 1s var(--ease) var(--d, 0s), transform 1.2s var(--ease) var(--d, 0s);
}
[data-reveal="fade"].in { opacity: 1; transition: opacity 1.4s var(--ease) var(--d, 0s); }
.js [data-reveal="line"] { transform: scaleX(0); transform-origin: left; }
.section-head [data-reveal="line"] { transform-origin: right; }
[data-reveal="line"].in { transform: scaleX(1); transition: transform 1.6s var(--ease-io) var(--d, .1s); }

.js [data-reveal="clip"] { clip-path: inset(100% 0 0 0); }
.js [data-reveal="clip"] img:not(.ph-color) { transform: scale(1.3); }
[data-reveal="clip"].in { clip-path: inset(0 0 0 0); transition: clip-path 1.5s var(--ease-io) var(--d, 0s); }
[data-reveal="clip"].in img:not(.ph-color) { transform: scale(1); transition: transform 2s var(--ease) var(--d, 0s); }

.js [data-reveal="block"] { transform: scaleX(0); transform-origin: left; }
.block-sand[data-reveal] { transform-origin: right; }
[data-reveal="block"].in { transform: scaleX(1); transition: transform 1.3s var(--ease-io) var(--d, 0s); }

.js [data-reveal="pop"] { transform: scale(0) rotate(-120deg); }
[data-reveal="pop"].in { transform: none; transition: transform 1.4s var(--ease-back) var(--d, 0s); }

.js [data-reveal="draw"] { opacity: 0; transform: translateY(30px); }
[data-reveal="draw"].in { opacity: 1; transform: none; transition: opacity .9s var(--ease) var(--d, 0s), transform 1.1s var(--ease) var(--d, 0s); }

.js [data-stagger] > * { opacity: 0; transform: translateY(28px); }
[data-stagger].in > * {
  opacity: 1; transform: none;
  transition: opacity 1s var(--ease), transform 1.1s var(--ease);
  transition-delay: calc(var(--i, 0) * 90ms + var(--d, 0s));
}

/* Zerlegter Text */
.split .w { display: inline-block; overflow: hidden; vertical-align: top; padding: 0 .06em .1em 0; margin: 0 -.06em -.1em 0; }
.split .w > span { display: inline-block; transform: translateY(110%) rotate(4deg); transform-origin: left bottom; }
.split.in .w > span {
  transform: none;
  transition: transform 1.2s var(--ease);
  transition-delay: calc(var(--i) * 40ms + var(--d, 0s));
}
[data-split="chars"].split.in .w > span { transition-delay: calc(var(--i) * 35ms + var(--d, 0s)); }
.split .red-dot { transform: scale(0); }
.split.in .red-dot { transform: scale(1); transition: transform .9s var(--ease-back) .55s; }
.hero-title.split .w > span { transition-delay: calc(var(--i) * 90ms + .15s); }

/* Rollende Ziffern */
.odo { display: inline-block; height: 1em; overflow: hidden; line-height: 1; vertical-align: top; }
.odo-strip { display: flex; flex-direction: column; }
.odo-strip span { height: 1em; line-height: 1; }
[data-odometer].in .odo-strip {
  transform: translateY(calc(var(--to) * -1em));
  transition: transform 2.2s var(--ease) calc(var(--i) * 140ms + .1s);
}

/* Parallax-Ebenen (eigene translate-Eigenschaft, damit sie Reveals nicht stören) */
[data-speed], [data-depth] { translate: var(--mx, 0px) calc(var(--sy, 0px) + var(--my, 0px)); }

/* ---------- Header ---------- */
.site-header { transition: transform .6s var(--ease-io), padding .4s var(--ease), background .4s; }
.site-header.is-hidden { transform: translateY(-100%); }
.site-header.is-scrolled { padding-top: 14px; padding-bottom: 14px; }
.nav { display: flex; gap: 30px; align-items: center; }
.nav-link {
  position: relative; font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
  padding: 4px 0;
}
.nav-link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px; background: var(--red);
  transform: scaleX(0); transform-origin: right; transition: transform .6s var(--ease);
}
.nav-link:hover::after, .nav-link.is-active::after { transform: scaleX(1); transform-origin: left; }
.nav-link.is-active { color: var(--red); }
.nav-picks { position: relative; display: grid; place-items: center; width: 34px; height: 34px; }
.nav-picks svg { width: 20px; height: 20px; fill: none; stroke: var(--ink); stroke-width: 1.5; transition: fill .4s, stroke .4s, transform .5s var(--ease-back); }
.nav-picks:hover svg { transform: scale(1.15); }
.nav-picks.has svg { fill: var(--red); stroke: var(--red); }
.nav-picks .badge {
  position: absolute; top: -2px; right: -4px; min-width: 17px; height: 17px; padding: 0 4px;
  border-radius: 9px; background: var(--ink); color: var(--paper);
  font: 600 10px/17px var(--sans); text-align: center;
  transform: scale(0); transition: transform .5s var(--ease-back);
}
.nav-picks.has .badge { transform: scale(1); }
.nav-cta {
  position: relative; overflow: hidden; isolation: isolate;
  font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
  border: 1px solid var(--ink); padding: 10px 18px; transition: color .5s var(--ease);
}
.nav-cta::before {
  content: ""; position: absolute; inset: 0; z-index: -1; background: var(--ink);
  transform: translateY(101%); transition: transform .5s var(--ease);
}
.nav-cta:hover, .nav-cta.is-active { color: var(--paper); }
.nav-cta:hover::before, .nav-cta.is-active::before { transform: none; }
.nav-cta.is-user::after {
  content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: var(--red); margin-left: 8px; vertical-align: middle;
}
.menu-toggle { display: none; }

/* ---------- Buttons ---------- */
.btn { position: relative; overflow: hidden; isolation: isolate; transition: color .5s var(--ease), translate .4s var(--ease), width .5s var(--ease-io), padding .5s var(--ease-io), border-radius .5s var(--ease-io), background .3s; }
.btn::before {
  content: ""; position: absolute; inset: -1px; z-index: -1; border-radius: 50% 50% 0 0 / 30% 30% 0 0;
  transform: translateY(102%); transition: transform .6s var(--ease), border-radius .6s var(--ease);
}
.btn:hover::before { transform: none; border-radius: 0; }
.btn-dark:hover, .btn-red:hover { background: inherit; }
.btn-dark::before { background: var(--red); }
.btn-red::before { background: var(--paper); }
.btn-dark:hover { background: var(--ink); }
.btn-red:hover { background: var(--red); color: var(--ink); }
.roll { display: inline-grid; overflow: hidden; height: 1.1em; line-height: 1.1; vertical-align: top; }
.roll > span { grid-area: 1 / 1; transition: transform .6s var(--ease); }
.roll > span + span { transform: translateY(110%); }
.btn:hover .roll > span:first-child, .btn-link:hover .roll > span:first-child { transform: translateY(-110%); }
.btn:hover .roll > span + span, .btn-link:hover .roll > span + span { transform: none; }
.btn-link { display: inline-flex; align-items: center; gap: 10px; transition: color .4s, translate .4s var(--ease); }
.btn-link::after { content: "→"; transition: transform .5s var(--ease); }
.btn-link:hover::after { transform: translateX(6px); }
.btn-block { width: 100%; }
.btn-sm { padding: 14px 20px; }
.btn-ghost {
  background: none; border: 0; cursor: pointer; font: 500 12px var(--sans); letter-spacing: .16em; text-transform: uppercase;
  color: var(--grey); padding: 18px 0; transition: color .3s;
}
.btn-ghost:hover { color: var(--ink); }
.text-btn {
  background: none; border: 0; padding: 0; cursor: pointer; font: inherit; color: var(--red);
  border-bottom: 1px solid currentColor;
}
.u { transition: color .3s; }
.u:hover { color: var(--red); }

/* Absende-Zustände */
.btn.is-loading, .btn.is-done { width: 54px !important; height: 54px; padding: 0; border-radius: 50%; color: transparent; }
.btn.is-loading .roll, .btn.is-done .roll { opacity: 0; }
.btn.is-loading::after {
  content: ""; position: absolute; inset: 15px; border-radius: 50%;
  border: 2px solid currentColor; border-color: rgba(241,234,223,.9) transparent rgba(241,234,223,.9) transparent;
  animation: spin .8s linear infinite;
}
.btn.is-done { background: var(--red); }
.btn-check { position: absolute; inset: 0; margin: auto; width: 24px; height: 24px; fill: none; stroke: var(--paper); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 24; stroke-dashoffset: 24; animation: drawIn .5s var(--ease) .05s forwards; }
@keyframes drawIn { to { stroke-dashoffset: 0; } }

/* ---------- Bilder ---------- */
.ph img { transition: transform 1.2s var(--ease), filter .6s; }
.ph-red img { filter: saturate(.75) contrast(1.05); }

/* Hero */
.hero-collage .ph-a, .hero-collage .ph-b, .hero-collage .ph-c { will-change: clip-path; }
.scroll-hint {
  position: absolute; left: 50%; bottom: 28px; width: 22px; height: 36px;
  border: 1px solid var(--taupe); border-radius: 12px; translate: -50% 0;
}
.scroll-hint span {
  position: absolute; left: 50%; top: 7px; width: 3px; height: 7px; margin-left: -1.5px; border-radius: 2px; background: var(--red);
  animation: scrollHint 2s var(--ease-io) infinite;
}
@keyframes scrollHint { 0% { transform: translateY(0); opacity: 0; } 30% { opacity: 1; } 70% { transform: translateY(14px); opacity: 0; } 100% { opacity: 0; } }

/* Laufband */
.marquee {
  overflow: hidden; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  padding: 22px 0; white-space: nowrap; user-select: none;
}
.marquee-track { display: inline-flex; align-items: center; gap: 40px; padding-left: 40px; will-change: transform; }
.marquee span {
  font: 800 clamp(34px, 5vw, 72px)/1 var(--sans); letter-spacing: -.04em; text-transform: lowercase;
  color: transparent; -webkit-text-stroke: 1px var(--ink);
}
.marquee span.it { font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: -.01em; color: var(--red); -webkit-text-stroke: 0; }
.marquee i { width: 12px; height: 12px; border-radius: 50%; background: var(--red); flex: none; }

/* Arbeiten: Farb-Spotlight */
.works-grid .ph { cursor: zoom-in; }
.works-grid .ph:hover { transform: none; }
.works-grid .ph:hover img:not(.ph-color) { transform: scale(1.04); }
.ph-color {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 2;
  filter: none !important;
  clip-path: circle(0px at var(--x, 50%) var(--y, 50%));
  transition: clip-path .7s var(--ease), transform 1.2s var(--ease);
  pointer-events: none;
}
.works-grid .ph:hover .ph-color { clip-path: circle(150px at var(--x, 50%) var(--y, 50%)); transform: scale(1.04); }
.works-grid .ph:focus-visible .ph-color { clip-path: circle(75% at 50% 50%); }
.ph::after { z-index: 3; }
.ph span { z-index: 4; transition: transform .6s var(--ease), color .4s; }
.works-grid .ph:hover span { transform: translateY(-4px); color: var(--paper); }
.works-grid .ph.is-open { visibility: hidden; }
.w2 .ph-color { object-position: 50% 60%; }

/* Lightbox */
.lightbox {
  position: fixed; inset: 0; z-index: 900;
  background: rgba(27, 23, 20, 0);
  pointer-events: none; transition: background .7s var(--ease-io);
}
.lightbox.open { background: rgba(27, 23, 20, .94); pointer-events: all; }
.lb-img { position: fixed; object-fit: cover; z-index: 1; box-shadow: 0 30px 80px rgba(0,0,0,.35); }
.lightbox > button, .lb-count {
  position: fixed; z-index: 2; opacity: 0; transition: opacity .5s var(--ease) 0s;
  color: var(--paper); background: none; border: 0; cursor: pointer;
  font: 500 12px var(--sans); letter-spacing: .2em; text-transform: uppercase;
}
.lightbox.open > button, .lightbox.open .lb-count { opacity: 1; transition-delay: .5s; }
.lb-close { top: 26px; right: var(--pad); }
.lb-count { left: var(--pad); top: 28px; color: var(--taupe); margin: 0; }
.lb-nav { top: 50%; font-size: 26px !important; translate: 0 -50%; padding: 20px; }
.lb-prev { left: 12px; }
.lb-next { right: 12px; }
.lb-nav:hover { color: var(--red); }

/* Zahlen */
.fact strong { font-variant-numeric: tabular-nums; }
.fact-dark { position: relative; overflow: hidden; }
.fact-dark::before {
  content: ""; position: absolute; width: 180px; height: 180px; border-radius: 50%; background: var(--red);
  right: -60px; top: -60px; opacity: .9; transform: scale(0); transition: transform 1.4s var(--ease-back) .4s;
}
.facts.in .fact-dark::before { transform: scale(1); }
.fact-dark > * { position: relative; }

/* Flash-Teaser */
.flash-teaser { padding: 140px var(--pad) 120px; }
.ft-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; flex-wrap: wrap; margin-bottom: 56px; }
.ft-head > div { max-width: 360px; display: grid; gap: 24px; justify-items: start; }
.ft-head p { color: var(--grey); }
.ft-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.ft-card {
  position: relative; display: grid; background: var(--paper-2); aspect-ratio: 4 / 5;
  padding: 8% 12% 20%; transition: background .6s var(--ease);
}
.ft-card:hover { background: var(--sand); }
.ft-meta {
  position: absolute; left: 20px; right: 20px; bottom: 18px; display: flex; justify-content: space-between;
  font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--grey);
}
.ft-meta span:first-child { color: var(--ink); }

/* Link-Zeilen */
.links-band { padding: 0 var(--pad) 40px; }
.link-row {
  position: relative; display: grid; grid-template-columns: 60px 1.1fr 1.4fr 60px; align-items: center; gap: 24px;
  padding: 34px 0; border-top: 1px solid var(--line); overflow: hidden; isolation: isolate;
}
.link-row:last-child { border-bottom: 1px solid var(--line); }
.link-row::before {
  content: ""; position: absolute; inset: 0 calc(var(--pad) * -1); z-index: -1; background: var(--red);
  clip-path: inset(0 100% 0 0); transition: clip-path .8s var(--ease-io);
}
.link-row:hover::before { clip-path: inset(0 0 0 0); }
.lr-num { font: italic 400 22px var(--serif); color: var(--red); transition: color .5s; }
.lr-title { font: 800 clamp(26px, 3.4vw, 46px)/1 var(--sans); letter-spacing: -.04em; transition: transform .8s var(--ease), color .5s; }
.lr-text { color: var(--grey); font-size: 14px; max-width: 380px; transition: color .5s; }
.lr-arrow { font-size: 28px; justify-self: end; transition: transform .8s var(--ease), color .5s; }
.link-row:hover .lr-num, .link-row:hover .lr-title, .link-row:hover .lr-text, .link-row:hover .lr-arrow { color: var(--paper); }
.link-row:hover .lr-title { transform: translateX(18px); }
.link-row:hover .lr-arrow { transform: translateX(-6px) rotate(-45deg); }

/* Ablauf: Fortschritt */
.steps { position: relative; }
.steps-progress { position: absolute !important; left: 0; top: 0; bottom: 0; width: 1px; padding: 0 !important; border: 0 !important; display: block !important; background: var(--line); }
.steps-progress span { position: absolute; inset: 0; background: var(--red); transform-origin: top; transform: scaleY(0); }
.steps li:not(.steps-progress) { padding-left: 28px; }
.step-num { color: var(--sand); transition: color .6s var(--ease), transform .8s var(--ease-back); display: inline-block; }
.steps li.active .step-num { color: var(--red); transform: scale(1.08); }

/* Formulare: schwebende Labels */
.field { position: relative; display: block; }
.field input, .field textarea {
  width: 100%; font: 400 16px var(--sans); color: inherit; background: transparent;
  border: 0; border-bottom: 1px solid var(--line); padding: 26px 0 10px; outline: none; resize: vertical; border-radius: 0;
}
.field > span {
  position: absolute; left: 0; top: 26px; pointer-events: none; color: var(--grey);
  font-size: 15px; transform-origin: left top; transition: transform .45s var(--ease), color .3s, letter-spacing .45s;
}
.field input:focus + span, .field input:not(:placeholder-shown) + span,
.field textarea:focus + span, .field textarea:not(:placeholder-shown) + span,
.field input[type="date"] + span {
  transform: translateY(-22px) scale(.72); letter-spacing: .14em; text-transform: uppercase; color: var(--taupe);
}
.field::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--red);
  transform: scaleX(0); transform-origin: left; transition: transform .7s var(--ease);
}
.field:focus-within::after { transform: scaleX(1); }
.field.invalid::after { transform: scaleX(1); background: var(--red); }
.field.invalid > span { color: var(--red); }
.contact .field input, .contact .field textarea { color: var(--paper); border-color: rgba(241,234,223,.25); }
.contact .field > span { color: rgba(241,234,223,.55); }
.contact .field input:focus + span, .contact .field input:not(:placeholder-shown) + span,
.contact .field textarea:focus + span, .contact .field textarea:not(:placeholder-shown) + span { color: var(--taupe); }
.contact-form { gap: 22px; }

.check { position: relative; display: flex; gap: 14px; align-items: flex-start; cursor: pointer; font-size: 14px; color: var(--grey); }
.check input { position: absolute; opacity: 0; }
.check .box {
  position: relative; flex: none; width: 20px; height: 20px; border: 1px solid var(--taupe); margin-top: 1px;
  transition: background .3s, border-color .3s;
}
.check .box::after {
  content: ""; position: absolute; left: 6px; top: 2px; width: 6px; height: 11px;
  border: solid var(--paper); border-width: 0 2px 2px 0; transform: rotate(45deg) scale(0); transition: transform .4s var(--ease-back);
}
.check input:checked + .box { background: var(--red); border-color: var(--red); }
.check input:checked + .box::after { transform: rotate(45deg) scale(1); }
.check input:focus-visible + .box { outline: 2px solid var(--red); outline-offset: 3px; }
.check.invalid .box { border-color: var(--red); animation: blink .6s 2; }
@keyframes blink { 50% { background: rgba(179,38,30,.15); } }

.form-error { min-height: 1.4em; font-size: 13px; color: var(--red); }

/* Ausgewählte Motive im Formular */
.picked-label { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--taupe); margin-bottom: 10px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  display: inline-flex; align-items: center; gap: 8px; padding: 4px 6px 4px 4px;
  border: 1px solid rgba(241,234,223,.25); font-size: 13px; animation: chipIn .6s var(--ease-back);
}
.chip .art.mini { width: 26px; height: 32px; background: var(--paper); }
.chip button { background: none; border: 0; color: inherit; cursor: pointer; font-size: 16px; padding: 0 4px; opacity: .6; }
.chip button:hover { opacity: 1; color: var(--red); }
@keyframes chipIn { from { transform: scale(.6); opacity: 0; } }

/* Toast */
.toasts { position: fixed; left: 50%; top: 96px; z-index: 950; display: grid; gap: 8px; translate: -50% 0; pointer-events: none; }
.toast {
  display: flex; align-items: center; gap: 10px; padding: 14px 20px; background: var(--ink); color: var(--paper);
  font-size: 13px; letter-spacing: .02em; white-space: nowrap;
  transform: translateY(-20px) scale(.95); opacity: 0; transition: transform .6s var(--ease), opacity .4s;
}
.toast.show { transform: none; opacity: 1; }
.toast-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--red); animation: pop .5s var(--ease-back); }

/* Linienzeichnungen */
.art { display: block; width: 100%; height: 100%; stroke: var(--ink); stroke-width: 2.2; overflow: visible; }
.art .r { stroke: var(--red); }
.art .f { fill: var(--ink); }
.art .r.f, .art .r .f { fill: var(--red); }
.art .thick { stroke-width: 14; }
.art .p { stroke: var(--paper-2); fill: var(--paper-2); }
.art.mini { stroke-width: 5; }
.art.mini .thick { stroke-width: 18; }

/* =========================================================
   Unterseiten
   ========================================================= */
.page { min-height: 70vh; }
.page-hero { padding: 90px var(--pad) 50px; }
.page-hero.compact { padding-bottom: 30px; }
.page-hero .display { font-size: clamp(72px, 14vw, 210px); }
.page-lead { max-width: 460px; color: var(--grey); margin-top: 28px; }
.demo-note { text-align: center; font-size: 12px; color: var(--taupe); padding: 40px var(--pad) 120px; letter-spacing: .05em; }

/* Filter */
.filters { position: relative; display: inline-flex; margin: 0 var(--pad) 40px; border: 1px solid var(--line); padding: 4px; max-width: calc(100% - 2 * var(--pad)); overflow-x: auto; scrollbar-width: none; }
.filters::-webkit-scrollbar { display: none; }
.filter { flex: none; }
.filter {
  position: relative; z-index: 1; background: none; border: 0; cursor: pointer; padding: 12px 20px;
  font: 500 12px var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--grey); transition: color .5s var(--ease);
}
.filter.is-on { color: var(--paper); }
.filter-pill, .tab-pill, .view-pill {
  position: absolute; left: 0; top: 4px; bottom: 4px; background: var(--ink);
  transition: transform .7s var(--ease), width .7s var(--ease);
}

/* Flash-Raster */
.flash-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; padding: 0 var(--pad); }
.flash-card { position: relative; background: var(--paper-2); transition: background .6s var(--ease); }
.flash-card:hover { background: var(--sand); }
.flash-card[hidden] { display: none; }
.fc-open { position: relative; display: block; width: 100%; aspect-ratio: 4 / 4.4; padding: 8% 18% 4%; background: none; border: 0; cursor: zoom-in; }
.fc-open .art { transition: transform 1s var(--ease); }
.flash-card:hover .fc-open .art { transform: scale(1.04) rotate(-1.5deg); }
.fc-no { position: absolute; left: 18px; top: 16px; font: italic 400 16px var(--serif); color: var(--taupe); }
.fc-meta { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; padding: 0 20px 20px; }
.fc-meta h3 { font: italic 400 26px/1.1 var(--serif); }
.fc-meta p { font-size: 12px; color: var(--grey); letter-spacing: .04em; }
.fc-price { font-weight: 600; color: var(--ink) !important; white-space: nowrap; }

.pick {
  position: absolute; top: 12px; right: 12px; width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center; background: var(--paper); border: 0; cursor: pointer;
  transition: transform .5s var(--ease-back), background .4s;
}
.pick:hover { transform: scale(1.1); }
.pick svg { width: 20px; height: 20px; fill: none; stroke: var(--ink); stroke-width: 1.6; transition: fill .3s, stroke .3s, transform .5s var(--ease-back); }
.pick.is-on svg { fill: var(--red); stroke: var(--red); }
.pick.pop svg { animation: heart .7s var(--ease-back); }
@keyframes heart { 0% { transform: scale(1); } 25% { transform: scale(.6); } 60% { transform: scale(1.35); } 100% { transform: scale(1); } }
.burst { position: absolute; inset: 0; pointer-events: none; }
.burst::before, .burst::after {
  content: ""; position: absolute; inset: -2px; border-radius: 50%; border: 2px solid var(--red); opacity: 0; transform: scale(.6);
}
.pick.pop .burst::before { animation: ring .7s var(--ease) forwards; }
.pick.pop .burst::after {
  border: 0; inset: 50%; width: 4px; height: 4px; margin: -2px; background: transparent;
  box-shadow: 0 -26px var(--red), 18px -18px var(--red), 26px 0 var(--red), 18px 18px var(--red), 0 26px var(--red), -18px 18px var(--red), -26px 0 var(--red), -18px -18px var(--red);
  animation: sparks .7s var(--ease) forwards;
}
@keyframes ring { 0% { opacity: 1; transform: scale(.6); } 100% { opacity: 0; transform: scale(1.7); } }
@keyframes sparks { 0% { opacity: 1; transform: scale(.4); } 100% { opacity: 0; transform: scale(1.3); } }

/* Flug zur Leiste */
.fly { position: fixed; z-index: 960; pointer-events: none; }
.fly-inner { width: 100%; height: 100%; }
.fly-inner svg { width: 100%; height: 100%; }

/* Auswahl-Leiste */
.tray {
  position: fixed; left: 50%; bottom: 24px; z-index: 800;
  display: flex; align-items: center; gap: 20px; padding: 10px 10px 10px 16px;
  background: var(--paper); border: 1px solid var(--line); box-shadow: 0 20px 50px rgba(27,23,20,.14);
  transform: translate(-50%, 160%); transition: transform .9s var(--ease);
}
.tray.show { transform: translate(-50%, 0); }
.tray-thumbs { display: flex; }
.tray-thumb { width: 36px; height: 44px; margin-left: -8px; background: var(--paper-2); border: 2px solid var(--paper); cursor: pointer; padding: 2px; animation: chipIn .6s var(--ease-back); transition: transform .4s var(--ease); }
.tray-thumb:first-child { margin-left: 0; }
.tray-thumb:hover { transform: translateY(-6px) rotate(-4deg); }
.tray-text { font-size: 13px; white-space: nowrap; }
.tray-count { display: inline-block; font-size: 18px; min-width: 14px; }
.tray-link { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; border-bottom: 1px solid currentColor; transition: color .3s; }
.tray-link:hover { color: var(--red); }

/* Drawer */
.drawer { position: fixed; inset: 0; z-index: 850; pointer-events: none; }
.drawer.open { pointer-events: all; }
.drawer-bg { position: absolute; inset: 0; background: rgba(27,23,20,0); transition: background .8s var(--ease-io); }
.drawer.open .drawer-bg { background: rgba(27,23,20,.55); }
.drawer-panel {
  position: absolute; top: 0; right: 0; bottom: 0; width: min(1080px, 100%);
  display: grid; grid-template-columns: 1.15fr 1fr; background: var(--paper);
  clip-path: inset(0 0 0 100%); transition: clip-path 1s var(--ease-io);
  overflow-y: auto;
}
.drawer.open .drawer-panel { clip-path: inset(0 0 0 0); }
.drawer-close {
  position: absolute; top: 22px; right: 22px; z-index: 5; width: 46px; height: 46px; border-radius: 50%;
  border: 1px solid var(--line); background: var(--paper); cursor: pointer; transition: transform .6s var(--ease), background .3s;
}
.drawer-close:hover { transform: rotate(90deg); background: var(--ink); }
.drawer-close span { position: absolute; left: 50%; top: 50%; width: 16px; height: 1.5px; margin: -.75px 0 0 -8px; background: var(--ink); transform: rotate(45deg); transition: background .3s; }
.drawer-close span + span { transform: rotate(-45deg); }
.drawer-close:hover span { background: var(--paper); }
.drawer-view { position: relative; background: var(--paper-2); display: grid; grid-template-rows: auto 1fr auto; min-height: 100%; }
.view-tabs { position: relative; display: inline-flex; margin: 22px; justify-self: start; padding: 4px; border: 1px solid var(--line); background: var(--paper); z-index: 2; }
.view-tabs button { position: relative; z-index: 1; background: none; border: 0; cursor: pointer; padding: 10px 16px; font: 500 11px var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--grey); transition: color .5s; }
.view-tabs button.is-on { color: var(--paper); }
.stage { position: relative; overflow: hidden; }
.stage-paper, .stage-skin { position: absolute; inset: 0; transition: clip-path 1s var(--ease-io), opacity .6s; }
.stage-paper { padding: 4% 16% 8%; }
.stage-skin { clip-path: inset(100% 0 0 0); }
.stage[data-mode="skin"] .stage-skin { clip-path: inset(0 0 0 0); }
.stage[data-mode="skin"] .stage-paper { opacity: 0; }
.stage-skin > img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 30%; filter: grayscale(.2) contrast(1.02); user-select: none; }
.skin-art {
  position: absolute; width: 34%; aspect-ratio: 200 / 250; cursor: grab; touch-action: none;
  mix-blend-mode: multiply; transition: transform .3s var(--ease);
}
.skin-art .art { stroke: #262120; stroke-width: 2.6; opacity: .9; filter: blur(.25px); }
.skin-art.dragging { cursor: grabbing; transition: none; }
.skin-art::after { content: ""; position: absolute; inset: -8px; border: 1px dashed rgba(241,234,223,.0); transition: border-color .3s; }
.skin-art:hover::after, .skin-art.dragging::after { border-color: rgba(241,234,223,.7); }
.skin-hint {
  position: absolute; left: 50%; bottom: 18px; translate: -50% 0; padding: 8px 14px; background: rgba(27,23,20,.7); color: var(--paper);
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase; transition: opacity .5s;
}
.skin-hint.gone { opacity: 0; }
.skin-controls { display: flex; gap: 24px; padding: 18px 22px; opacity: 0; max-height: 0; overflow: hidden; transition: opacity .5s, max-height .6s var(--ease); }
.drawer.skin-mode .skin-controls { opacity: 1; max-height: 120px; }
.skin-controls label { flex: 1; display: grid; gap: 6px; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--grey); }
input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 20px; background: transparent; cursor: pointer; }
input[type="range"]::-webkit-slider-runnable-track { height: 1px; background: var(--ink); }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; border-radius: 50%; background: var(--red); margin-top: -8px; transition: transform .3s var(--ease-back); }
input[type="range"]:active::-webkit-slider-thumb { transform: scale(1.4); }
input[type="range"]::-moz-range-track { height: 1px; background: var(--ink); }
input[type="range"]::-moz-range-thumb { width: 16px; height: 16px; border: 0; border-radius: 50%; background: var(--red); }

.drawer-info { padding: 90px clamp(24px, 4vw, 56px) 50px; display: flex; flex-direction: column; gap: 20px; }
.drawer-info > * { opacity: 0; transform: translateY(24px); transition: opacity .6s, transform .8s var(--ease); }
.drawer.open .drawer-info > * { opacity: 1; transform: none; }
.drawer.open .drawer-info > :nth-child(1) { transition-delay: .45s; }
.drawer.open .drawer-info > :nth-child(2) { transition-delay: .52s; }
.drawer.open .drawer-info > :nth-child(3) { transition-delay: .59s; }
.drawer.open .drawer-info > :nth-child(4) { transition-delay: .66s; }
.drawer.open .drawer-info > :nth-child(5) { transition-delay: .73s; }
.drawer.open .drawer-info > :nth-child(6) { transition-delay: .8s; }
.d-no { font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: var(--red); }
.d-title { font: italic 400 clamp(48px, 5vw, 76px)/1 var(--serif); }
.d-text { color: var(--grey); max-width: 380px; }
.d-specs { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.d-specs div { padding: 16px 0; }
.d-specs div + div { padding-left: 16px; border-left: 1px solid var(--line); }
.d-specs dt { font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--taupe); }
.d-specs dd { font-weight: 600; margin-top: 4px; }
.d-pick { align-self: flex-start; }
.d-pick.is-on { background: var(--red); }
.d-pick.is-on::before { background: var(--ink); }
.d-pick.pop { animation: press .5s var(--ease-back); }
@keyframes press { 30% { transform: scale(.94); } }
.d-small { font-size: 12px; color: var(--taupe); }

/* ---------- Konto ---------- */
.auth { display: grid; grid-template-columns: 1fr minmax(320px, 460px); gap: clamp(40px, 8vw, 140px); padding: 90px var(--pad) 140px; align-items: start; }
.auth-intro .display { font-size: clamp(72px, 12vw, 180px); margin: 18px 0 40px; }
.perks { list-style: none; display: grid; gap: 0; max-width: 420px; }
.perks li { display: flex; gap: 20px; padding: 16px 0; border-top: 1px solid var(--line); color: var(--grey); }
.perks li span { font: italic 16px var(--serif); color: var(--red); }
.auth-card { background: var(--paper-2); padding: 36px clamp(24px, 3vw, 40px) 40px; }
.tabs { position: relative; display: flex; padding: 4px; border: 1px solid var(--line); background: var(--paper); margin-bottom: 26px; }
.tab { position: relative; z-index: 1; flex: 1; background: none; border: 0; cursor: pointer; padding: 12px; font: 500 12px var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--grey); transition: color .5s; }
.tab.is-on { color: var(--paper); }
.tab-panels { position: relative; overflow: hidden; }
.auth-form { display: none; gap: 20px; }
.auth-form.is-on { display: grid; }
.form-hint { font-size: 13px; color: var(--grey); text-align: center; }
.demo-login {
  display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 14px 16px; border: 1px dashed var(--taupe); font-size: 13px; color: var(--grey);
}
.demo-login strong { color: var(--red); font-weight: 600; margin-right: 6px; }
.field-pw input { padding-right: 40px; }
.pw-eye {
  position: absolute; right: 0; bottom: 8px; width: 32px; height: 24px; border: 0; background: none; cursor: pointer;
}
.pw-eye::before {
  content: ""; position: absolute; left: 7px; top: 6px; width: 18px; height: 11px;
  border: 1.4px solid var(--grey); border-radius: 50% / 70% 70% 30% 30%;
}
.pw-eye::after {
  content: ""; position: absolute; left: 13px; top: 9px; width: 6px; height: 6px; border-radius: 50%; background: var(--grey);
  transition: transform .4s var(--ease-back), background .3s;
}
.pw-eye.on::after { background: var(--red); transform: scale(1.3); }
.strength { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: -8px; }
.strength i { height: 3px; background: var(--line); position: relative; overflow: hidden; }
.strength i::after { content: ""; position: absolute; inset: 0; background: var(--red); transform: scaleX(0); transform-origin: left; transition: transform .5s var(--ease); }
.strength[data-score="1"] i:nth-child(-n+1)::after, .strength[data-score="2"] i:nth-child(-n+2)::after,
.strength[data-score="3"] i:nth-child(-n+3)::after, .strength[data-score="4"] i:nth-child(-n+4)::after { transform: scaleX(1); }
.strength[data-score="4"] i::after { background: var(--espresso); }

.dash { padding: 90px var(--pad) 140px; }
.dash-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 50px; }
.dash-head .eyebrow { width: 100%; margin-bottom: 0; }
.dash-title { font: 800 clamp(56px, 9vw, 140px)/.9 var(--sans); letter-spacing: -.05em; }
.dash-title em { font-family: var(--serif); font-weight: 400; color: var(--red); letter-spacing: -.02em; }
.dash-grid { display: grid; grid-template-columns: 1.2fr 1fr 1fr; grid-template-rows: auto auto; gap: 16px; }
.card { background: var(--paper-2); padding: 30px; display: flex; flex-direction: column; gap: 18px; min-height: 260px; }
.card-label { font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--taupe); }
.card-appt { grid-row: span 2; background: var(--espresso); color: var(--paper); position: relative; }
.card-appt .card-label { color: var(--sand); }
.appt-date { display: flex; align-items: baseline; gap: 14px; margin-top: 10px; }
.appt-day { font: 400 clamp(110px, 12vw, 180px)/.85 var(--serif); }
.appt-month { font: italic 400 32px var(--serif); color: var(--sand); }
.appt-line { color: var(--sand); }
.appt-code { margin-top: auto; font-size: 13px; color: var(--sand); }
.appt-code strong { color: var(--paper); letter-spacing: .12em; margin-left: 8px; }
.ring { position: absolute; right: 30px; top: 30px; width: 96px; height: 96px; }
.ring svg { width: 100%; height: 100%; transform: rotate(-90deg); fill: none; stroke-width: 3; }
.ring circle { stroke: rgba(241,234,223,.15); }
.ring .ring-fill { stroke: var(--red); stroke-linecap: round; transition: stroke-dashoffset 2.2s var(--ease); }
.ring > span { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; line-height: 1; }
.ring strong { font: 600 26px var(--sans); }
.ring small { font-size: 9px; letter-spacing: .2em; text-transform: uppercase; color: var(--sand); margin-top: 4px; }
.ci-open { display: flex; align-items: center; gap: 10px; font-weight: 600; }
.pulse { position: relative; width: 10px; height: 10px; border-radius: 50%; background: var(--red); }
.pulse::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--red); animation: pulse 1.8s var(--ease) infinite; }
@keyframes pulse { to { transform: scale(3.2); opacity: 0; } }
.ci-text { color: var(--grey); font-size: 14px; }
.card-checkin .btn { align-self: flex-start; margin-top: auto; }
.ci-done { display: flex; gap: 16px; align-items: center; }
.ci-done svg { width: 52px; height: 52px; flex: none; fill: none; stroke: var(--red); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ci-done circle { stroke-dasharray: 151; stroke-dashoffset: 151; }
.ci-done path { stroke-dasharray: 34; stroke-dashoffset: 34; }
.card.in .ci-done circle { stroke-dashoffset: 0; transition: stroke-dashoffset 1s var(--ease) .6s; }
.card.in .ci-done path { stroke-dashoffset: 0; transition: stroke-dashoffset .6s var(--ease) 1.3s; }
.ci-done p { font-size: 13px; color: var(--grey); }
.mini-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)); gap: 8px; }
.mini { display: grid; gap: 4px; background: var(--paper); padding: 8px 8px 6px; font-size: 11px; text-align: center; transition: transform .5s var(--ease); }
.mini:hover { transform: translateY(-4px); }
.mini .art { height: 60px; }
.empty { font-size: 14px; color: var(--grey); }
.card-picks .btn-link { margin-top: auto; }
.profile div { display: grid; grid-template-columns: 100px 1fr; padding: 10px 0; border-top: 1px solid var(--line); font-size: 14px; }
.profile dt { color: var(--taupe); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; padding-top: 2px; }
.profile dd { word-break: break-word; }

/* ---------- Check-in ---------- */
.ci-wrap { display: grid; grid-template-columns: 220px minmax(0, 720px); gap: clamp(30px, 6vw, 100px); padding: 30px var(--pad) 140px; }
.stepper { position: sticky; top: 120px; align-self: start; }
.stepper ol { list-style: none; display: grid; gap: 26px; position: relative; }
.stepper li { display: flex; align-items: center; gap: 16px; font-size: 13px; letter-spacing: .06em; color: var(--taupe); transition: color .5s; }
.stepper li.is-current { color: var(--ink); font-weight: 600; }
.stepper li.is-done { color: var(--grey); }
.stepper .dot {
  position: relative; z-index: 1; width: 13px; height: 13px; border-radius: 50%; border: 1px solid var(--taupe); background: var(--paper);
  transition: background .5s, border-color .5s, transform .6s var(--ease-back);
}
.stepper li.is-current .dot { border-color: var(--red); transform: scale(1.3); box-shadow: 0 0 0 4px var(--paper), 0 0 0 5px rgba(179,38,30,.3); }
.stepper li.is-done .dot, .stepper.all-done .dot { background: var(--red); border-color: var(--red); transform: scale(1); box-shadow: none; }
.stepper-line { position: absolute; left: 6px; top: 8px; bottom: 8px; width: 1px; background: var(--line); }
.stepper-line span { position: absolute; inset: 0; background: var(--red); transform-origin: top; transform: scaleY(var(--p, 0)); transition: transform .9s var(--ease-io); }
.stepper.all-done .stepper-line span { transform: scaleY(1) !important; }

.ci-form { position: relative; background: var(--paper-2); padding: 46px clamp(22px, 4vw, 54px) 30px; }
.ci-progress { position: absolute; left: 0; right: 0; top: 0; height: 3px; background: rgba(27,23,20,.06); }
.ci-progress span { position: absolute; inset: 0; background: var(--red); transform-origin: left; transform: scaleX(0); transition: transform 1s var(--ease-io); }
.ci-step { display: none; border: 0; gap: 22px; min-width: 0; }
.ci-step.is-on { display: grid; }
.ci-step legend { display: flex; align-items: baseline; gap: 14px; font: italic 400 clamp(32px, 4vw, 46px)/1.1 var(--serif); margin-bottom: 18px; padding: 0; }
.step-no { font: 500 12px var(--sans); letter-spacing: .2em; color: var(--red); font-style: normal; }
.ci-note { color: var(--grey); font-size: 14px; }
.ci-note.small { font-size: 12px; }
.ci-note.center, .center { text-align: center; }
.ci-sub { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--taupe); margin-top: 6px; }
.row { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.appt-ticket { display: grid; grid-template-columns: repeat(3, 1fr); background: var(--paper); border-left: 3px solid var(--red); }
.appt-ticket > div { padding: 18px 20px; }
.appt-ticket > div + div { border-left: 1px dashed var(--line); }
.at-date { font: 600 18px var(--sans); margin-top: 4px; }
.code-field input { font-size: 22px; letter-spacing: .2em; text-transform: uppercase; }

.toggles { display: grid; }
.toggle { display: flex; align-items: center; gap: 16px; padding: 14px 0; border-top: 1px solid var(--line); cursor: pointer; font-size: 15px; }
.toggle:last-child { border-bottom: 1px solid var(--line); }
.toggle input { position: absolute; opacity: 0; }
.switch { position: relative; flex: none; width: 42px; height: 24px; border-radius: 12px; background: var(--sand); transition: background .4s; }
.switch::after {
  content: ""; position: absolute; left: 3px; top: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--paper);
  box-shadow: 0 2px 6px rgba(0,0,0,.15); transition: transform .5s var(--ease-back), width .3s var(--ease);
}
.toggle:active .switch::after { width: 24px; }
.toggle input:checked + .switch { background: var(--red); }
.toggle input:checked + .switch::after { transform: translateX(18px); }
.toggle:active input:checked + .switch::after { transform: translateX(12px); }
.toggle input:focus-visible + .switch { outline: 2px solid var(--red); outline-offset: 3px; }
.reveal-box { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .7s var(--ease), opacity .5s; opacity: 0; }
.reveal-box > * { overflow: hidden; }
.reveal-box.open { grid-template-rows: 1fr; opacity: 1; }

.design-choices { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px; }
.dc input { position: absolute; opacity: 0; }
.dc-card {
  position: relative; display: grid; gap: 6px; padding: 12px 12px 10px; background: var(--paper); cursor: pointer; text-align: center;
  font-size: 13px; border: 1px solid transparent; transition: border-color .4s, transform .5s var(--ease);
}
.dc-card .art { height: 96px; }
.dc-card:hover { transform: translateY(-4px); }
.dc input:checked + .dc-card { border-color: var(--red); }
.dc input:checked + .dc-card::after {
  content: "✓"; position: absolute; top: 8px; right: 8px; width: 22px; height: 22px; border-radius: 50%;
  background: var(--red); color: var(--paper); font-size: 12px; line-height: 22px; animation: pop .5s var(--ease-back);
}
.dc input:focus-visible + .dc-card { outline: 2px solid var(--red); outline-offset: 2px; }
.dc-own { place-content: center; min-height: 130px; color: var(--grey); }
.dc-own .plus { font: 300 34px var(--serif); color: var(--red); }
.chips-select { display: flex; flex-wrap: wrap; gap: 8px; }
.chips-select button {
  position: relative; overflow: hidden; isolation: isolate;
  background: var(--paper); border: 1px solid var(--line); padding: 10px 16px; cursor: pointer; font: 14px var(--sans); color: var(--ink);
  transition: color .4s, border-color .4s;
}
.chips-select button::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--ink); border-radius: 50%; transform: scale(0); transition: transform .6s var(--ease), border-radius .6s; }
.chips-select button.is-on { color: var(--paper); border-color: var(--ink); }
.chips-select button.is-on::before { transform: scale(1.5); border-radius: 0; }

.sig { display: grid; gap: 10px; justify-items: end; margin-top: 8px; }
.sig-pad { position: relative; width: 100%; height: 190px; background: var(--paper); border: 1px solid var(--line); transition: border-color .3s; }
.sig-pad.invalid { border-color: var(--red); }
.sig-pad canvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; cursor: crosshair; }
.sig-line { position: absolute; left: 24px; right: 24px; bottom: 44px; height: 1px; background: var(--sand); pointer-events: none; }
.sig-hint { position: absolute; left: 24px; bottom: 18px; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--taupe); pointer-events: none; transition: opacity .4s; }
.sig-pad.signed .sig-hint { opacity: 0; }

.ci-nav { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; border-top: 1px solid var(--line); padding-top: 22px; }

/* Ticket */
.ci-done-step { justify-items: center; }
.slot { width: min(420px, 100%); height: 10px; border-radius: 6px; background: var(--ink); position: relative; z-index: 2; }
.ticket-wrap { width: min(380px, 92%); overflow: hidden; margin-top: -5px; padding-bottom: 20px; }
.ticket {
  position: relative; background: var(--paper); padding: 30px 28px 26px; display: grid; gap: 16px;
  box-shadow: 0 16px 30px rgba(27,23,20,.12);
  -webkit-mask: radial-gradient(circle 9px at 0 62%, transparent 98%, #000) , radial-gradient(circle 9px at 100% 62%, transparent 98%, #000);
  -webkit-mask-composite: source-in; mask-composite: intersect;
}
.t-top { display: flex; justify-content: space-between; align-items: center; }
.t-check { width: 40px; height: 40px; fill: none; stroke: var(--red); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.t-check circle { stroke-dasharray: 151; stroke-dashoffset: 151; }
.t-check path { stroke-dasharray: 34; stroke-dashoffset: 34; }
.ticket.printed .t-check circle { stroke-dashoffset: 0; transition: stroke-dashoffset .9s var(--ease); }
.ticket.printed .t-check path { stroke-dashoffset: 0; transition: stroke-dashoffset .5s var(--ease) .6s; }
.t-title { font: italic 400 30px/1.1 var(--serif); }
.t-info { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; padding: 16px 0; border-top: 1px dashed var(--sand); border-bottom: 1px dashed var(--sand); }
.t-info dt { font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--taupe); }
.t-info dd { font-weight: 600; font-size: 14px; }
.t-bottom { display: flex; justify-content: space-between; align-items: center; }
.t-art { width: 70px; height: 88px; }
.qr { width: 92px; height: 92px; fill: var(--ink); shape-rendering: crispEdges; }
.qr rect { opacity: 0; transform-box: fill-box; transform-origin: center; transform: scale(0); }
.ticket.printed .qr rect, .ci-done-step.is-on .qr rect { animation: qrIn .5s var(--ease-back) var(--d) forwards; }
@keyframes qrIn { to { opacity: 1; transform: scale(1); } }

/* ---------- Responsive ---------- */
@media (max-width: 1000px) {
  .ft-grid, .flash-grid { grid-template-columns: repeat(2, 1fr); }
  .link-row { grid-template-columns: 40px 1fr 40px; }
  .lr-text { display: none; }
  .drawer-panel { grid-template-columns: 1fr; }
  .drawer-view { min-height: 70vh; }
  .drawer-info { padding-top: 40px; }
  .auth { grid-template-columns: 1fr; }
  .dash-grid { grid-template-columns: 1fr 1fr; }
  .card-appt { grid-column: span 2; grid-row: auto; }
  .ci-wrap { grid-template-columns: 1fr; }
  .stepper { position: relative; top: 0; }
  .stepper ol { grid-template-columns: repeat(5, 1fr); gap: 8px; }
  .stepper li { flex-direction: column; align-items: flex-start; gap: 10px; font-size: 11px; }
  .stepper-line { left: 6px; right: 6px; top: 6px; bottom: auto; width: auto; height: 1px; }
  .stepper-line span { transform-origin: left; transform: scaleX(var(--p, 0)); }
  .stepper.all-done .stepper-line span { transform: scaleX(1) !important; }
}
@media (max-width: 760px) {
  .menu-toggle {
    display: grid; place-items: center; position: relative; z-index: 2; width: 44px; height: 44px;
    background: none; border: 1px solid var(--ink); border-radius: 50%; cursor: pointer;
  }
  .menu-toggle em { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .menu-toggle span { position: absolute; left: 13px; right: 13px; height: 1.5px; background: var(--ink); transition: transform .6s var(--ease), background .3s; }
  .menu-toggle span:first-child { transform: translateY(-4px); }
  .menu-toggle span:nth-child(2) { transform: translateY(4px); }
  .menu-open .menu-toggle span:first-child { transform: rotate(45deg); }
  .menu-open .menu-toggle span:nth-child(2) { transform: rotate(-45deg); }
  .nav {
    position: fixed; inset: 0; z-index: 1; flex-direction: column; align-items: flex-start; justify-content: center; gap: 6px;
    padding: 100px var(--pad) 40px; background: var(--paper);
    clip-path: circle(0 at calc(100% - var(--pad) - 22px) 40px); transition: clip-path .9s var(--ease-io);
  }
  .menu-open .nav { clip-path: circle(150% at calc(100% - var(--pad) - 22px) 40px); }
  .nav-link { font: 800 44px/1.1 var(--sans); letter-spacing: -.04em; text-transform: none; overflow: hidden; }
  .nav-link span { display: block; transform: translateY(110%); transition: transform .8s var(--ease); }
  .menu-open .nav-link span { transform: none; }
  .menu-open .nav-link:nth-child(1) span { transition-delay: .2s; }
  .menu-open .nav-link:nth-child(2) span { transition-delay: .26s; }
  .menu-open .nav-link:nth-child(3) span { transition-delay: .32s; }
  .menu-open .nav-link:nth-child(4) span { transition-delay: .38s; }
  .nav-picks, .nav-cta { margin-top: 24px; }
  .site-header .logo { position: relative; z-index: 2; }
  .menu-open .site-header { transform: none; }
  .site-header { backdrop-filter: none; }
  .ft-grid { grid-template-columns: 1fr 1fr; }
  .ft-grid .ft-card:last-child { display: none; }
  .flash-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .filter { padding: 11px 12px; letter-spacing: .08em; font-size: 11px; }
  .fc-meta { flex-direction: column; align-items: flex-start; gap: 4px; padding: 0 14px 14px; }
  .fc-meta h3 { font-size: 22px; }
  .pick { width: 38px; height: 38px; top: 8px; right: 8px; }
  .tray { left: 12px; right: 12px; transform: translate(0, 160%); gap: 12px; }
  .tray.show { transform: none; }
  .tray-link, .tray-thumbs { display: none; }
  .tray .btn { margin-left: auto; }
  .d-specs { grid-template-columns: 1fr 1fr 1fr; }
  .dash-grid { grid-template-columns: 1fr; }
  .card-appt { grid-column: auto; }
  .row { grid-template-columns: 1fr; }
  .appt-ticket { grid-template-columns: 1fr; }
  .appt-ticket > div + div { border-left: 0; border-top: 1px dashed var(--line); }
  .stepper li { font-size: 0; }
  .lb-nav { top: auto; bottom: 20px; translate: none; }
  .toasts { width: calc(100% - 24px); }
  .toast { white-space: normal; }
  .scroll-hint { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
}

/* ---------- Check-in: Ablauf wie im alten tatme-Formular ---------- */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.welcome { display: grid; gap: 12px; color: var(--grey); font-size: 15px; max-width: 560px; }
.welcome-sign { font: italic 400 34px/1 var(--serif); color: var(--ink) !important; margin-top: 6px; display: flex; align-items: baseline; gap: 12px; }
.welcome-sign span { font: 500 10px var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--taupe); }
.chips-select.invalid button { border-color: var(--red); }
.row-street { grid-template-columns: 3fr 1fr; }
.row-city { grid-template-columns: 1fr 2fr; }
.phone-row { display: grid; grid-template-columns: 92px 1fr; gap: 16px; align-items: end; }
.select { position: relative; display: block; }
.select select {
  width: 100%; appearance: none; -webkit-appearance: none; background: transparent; border: 0; border-bottom: 1px solid var(--line);
  border-radius: 0; padding: 26px 22px 10px 0; font: 400 16px var(--sans); color: var(--ink); cursor: pointer; outline: none;
}
.select::after {
  content: ""; position: absolute; right: 4px; bottom: 16px; width: 7px; height: 7px;
  border: solid var(--grey); border-width: 0 1.4px 1.4px 0; transform: rotate(45deg); pointer-events: none;
}
.select select:focus { border-color: var(--red); }
.optin { background: var(--paper); padding: 18px 20px; display: grid; gap: 12px; border-left: 3px solid var(--red); }
.optin-q { font: italic 400 22px var(--serif); }
.optin ul { list-style: none; display: grid; gap: 4px; font-size: 14px; color: var(--grey); }
.optin li::before { content: ""; display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: var(--red); margin: 0 10px 2px 0; }

.verify-mail { font-weight: 600; font-size: 18px; word-break: break-all; }
.verify-mail .text-btn { font-size: 13px; font-weight: 400; margin-left: 8px; }
.verify-send { display: grid; gap: 10px; justify-items: start; }
.verify-send.sent .btn { display: none; }
.otp-box { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows .8s var(--ease), opacity .5s; }
.otp-box > div { overflow: hidden; display: grid; gap: 14px; padding: 4px 2px; }
.otp-box.open { grid-template-rows: 1fr; opacity: 1; }
.otp { display: flex; gap: 8px; align-items: center; }
.otp input {
  width: 52px; height: 64px; text-align: center; font: 600 26px var(--sans); color: var(--ink);
  background: var(--paper); border: 1px solid var(--line); border-radius: 0; outline: none; caret-color: var(--red);
  transition: border-color .3s, transform .4s var(--ease-back), background .4s, color .4s;
}
.otp input:focus { border-color: var(--red); transform: translateY(-3px); }
.otp input:not(:placeholder-shown), .otp input[value]:not([value=""]) { border-color: var(--ink); }
.otp-gap { width: 10px; height: 1px; background: var(--taupe); }
.otp-box.bad input { border-color: var(--red); color: var(--red); }
.otp-box.ok input { background: var(--red); border-color: var(--red); color: var(--paper); animation: otpOk .6s var(--ease-back) calc(var(--k) * 60ms) both; }
@keyframes otpOk { 0% { transform: scale(1); } 40% { transform: scale(.85); } 100% { transform: scale(1); } }
.otp-state { font-size: 13px; color: var(--grey); display: flex; align-items: center; gap: 8px; }
.otp-state strong { color: var(--red); letter-spacing: .2em; }
.otp-box.ok .otp-state { color: var(--red); font-weight: 600; }
.otp-state svg { width: 18px; height: 18px; fill: none; stroke: var(--red); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 24; stroke-dashoffset: 24; animation: drawIn .5s var(--ease) .3s forwards; }
@media (max-width: 760px) {
  .otp input { width: 40px; height: 54px; font-size: 22px; }
  .otp { gap: 6px; }
  .row-street, .row-city { grid-template-columns: 1fr; }
}

/* ---------- Quick Book (nur mobil) ---------- */
.qb-fab, .qb { display: none; }
@media (max-width: 760px) {
  .qb-fab {
    position: fixed; right: 16px; bottom: calc(18px + env(safe-area-inset-bottom)); z-index: 700;
    display: flex; align-items: center; gap: 10px; height: 56px; padding: 0 22px 0 18px; max-width: 200px;
    border: 0; border-radius: 28px; background: var(--red); color: var(--paper); cursor: pointer;
    font: 600 12px var(--sans); letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; overflow: hidden;
    box-shadow: 0 12px 30px rgba(179, 38, 30, .35), 0 2px 6px rgba(27, 23, 20, .2);
    transform: scale(0) rotate(-30deg); transform-origin: right bottom;
    transition: transform .7s var(--ease-back), max-width .6s var(--ease), padding .6s var(--ease), bottom .7s var(--ease);
  }
  html.is-ready .qb-fab { transform: none; transition-delay: .8s, 0s, 0s, 0s; }
  html.is-ready .qb-fab:active { transform: scale(.92); transition-delay: 0s; }
  .qb-fab svg { flex: none; width: 20px; height: 20px; fill: var(--paper); }
  .qb-fab span { transition: opacity .3s; }
  .qb-fab::after {
    content: ""; position: absolute; inset: 0; border-radius: inherit; border: 2px solid var(--red);
    animation: fabPulse 2.8s var(--ease) 2s infinite; pointer-events: none;
  }
  @keyframes fabPulse { 0% { transform: scale(1); opacity: .7; } 70%, 100% { transform: scale(1.35, 1.6); opacity: 0; } }
  .qb-fab.mini { max-width: 56px; padding: 0 18px; }
  .qb-fab.mini span { opacity: 0; }
  html.tray-on .qb-fab { bottom: calc(100px + env(safe-area-inset-bottom)); }
  html.menu-open .qb-fab, html.no-scroll .qb-fab { transform: scale(0) !important; transition-delay: 0s !important; }

  .qb { display: block; position: fixed; inset: 0; z-index: 880; pointer-events: none; }
  .qb.open { pointer-events: all; }
  .qb-bg { position: absolute; inset: 0; background: rgba(27, 23, 20, 0); transition: background .6s var(--ease-io); }
  .qb.open .qb-bg { background: rgba(27, 23, 20, .5); }
  .qb-sheet {
    position: absolute; left: 0; right: 0; bottom: 0; max-height: 90vh; display: flex; flex-direction: column;
    background: var(--paper); border-radius: 22px 22px 0 0;
    transform: translateY(105%); transition: transform .75s var(--ease);
    box-shadow: 0 -20px 50px rgba(27, 23, 20, .2);
  }
  .qb.open .qb-sheet { transform: none; }
  .qb-handle { display: grid; place-items: center; padding: 12px 0 6px; cursor: grab; touch-action: none; }
  .qb-handle span { width: 42px; height: 4px; border-radius: 2px; background: var(--sand); }
  .qb-body { overflow-y: auto; padding: 6px var(--pad) calc(26px + env(safe-area-inset-bottom)); overscroll-behavior: contain; }
  .qb-form, .qb-done { display: grid; gap: 14px; }
  .qb-form[hidden], .qb-done[hidden] { display: none; }
  .qb-form > * { opacity: 0; transform: translateY(18px); transition: opacity .5s, transform .7s var(--ease); }
  .qb.open .qb-form > * { opacity: 1; transform: none; }
  .qb.open .qb-form > :nth-child(1) { transition-delay: .15s; } .qb.open .qb-form > :nth-child(2) { transition-delay: .19s; }
  .qb.open .qb-form > :nth-child(3) { transition-delay: .23s; } .qb.open .qb-form > :nth-child(4) { transition-delay: .27s; }
  .qb.open .qb-form > :nth-child(5) { transition-delay: .31s; } .qb.open .qb-form > :nth-child(6) { transition-delay: .35s; }
  .qb.open .qb-form > :nth-child(7) { transition-delay: .39s; } .qb.open .qb-form > :nth-child(8) { transition-delay: .43s; }
  .qb.open .qb-form > :nth-child(n+9) { transition-delay: .47s; }
  .qb-kicker { font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: var(--red); }
  .qb-title { font: italic 400 38px/1 var(--serif); margin-top: -6px; }
  .qb-label { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--taupe); margin-top: 8px; }
  .qb-chips { display: flex; flex-wrap: wrap; gap: 8px; }
  .qb-chips button, .qb-days button {
    position: relative; overflow: hidden; isolation: isolate; border: 1px solid var(--line); background: var(--paper-2); color: var(--ink);
    font: 14px var(--sans); padding: 11px 16px; cursor: pointer; transition: color .4s, border-color .4s, transform .4s var(--ease-back);
  }
  .qb-chips button::before, .qb-days button::before {
    content: ""; position: absolute; inset: 0; z-index: -1; background: var(--ink); border-radius: 50%;
    transform: scale(0); transition: transform .55s var(--ease), border-radius .55s;
  }
  .qb-chips button.is-on, .qb-days button.is-on { color: var(--paper); border-color: var(--ink); }
  .qb-chips button.is-on::before, .qb-days button.is-on::before { transform: scale(1.6); border-radius: 0; }
  .qb-chips button:active, .qb-days button:active { transform: scale(.95); }
  .qb-chips button:disabled, .qb-days button:disabled { opacity: .35; text-decoration: line-through; cursor: not-allowed; }
  .qb-chips.invalid button, .qb-days.invalid button:not(:disabled) { border-color: var(--red); }
  .qb-picks { font-size: 13px; color: var(--grey); }
  .qb-picks strong { color: var(--ink); }
  .qb-days {
    display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
    margin: 0 calc(var(--pad) * -1); padding: 2px var(--pad) 6px;
  }
  .qb-days::-webkit-scrollbar { display: none; }
  .qb-days button { flex: none; width: 62px; padding: 10px 0; display: grid; gap: 2px; justify-items: center; scroll-snap-align: center; }
  .qb-days small { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: inherit; opacity: .7; }
  .qb-days strong { font: 600 22px var(--sans); }
  .qb-slots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; max-height: 0; overflow: hidden; transition: max-height .6s var(--ease); }
  .qb-slots.open { max-height: 80px; }
  .qb-slots button { padding: 12px 0; text-align: center; }
  .qb-note { font-size: 12px; color: var(--taupe); text-align: center; }
  .qb-sheet .form-error { min-height: 0; }
  .qb-done { justify-items: center; text-align: center; padding: 18px 0 6px; }
  .qb-done svg { width: 76px; height: 76px; fill: none; stroke: var(--red); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
  .qb-done circle { stroke-dasharray: 151; stroke-dashoffset: 151; animation: drawIn .9s var(--ease) .1s forwards; }
  .qb-done path { stroke-dasharray: 34; stroke-dashoffset: 34; animation: drawIn .5s var(--ease) .7s forwards; }
  .qb-done:not([hidden]) > :not(svg) { animation: rise2 .7s var(--ease) both; }
  .qb-done:not([hidden]) > :nth-child(2) { animation-delay: .5s; } .qb-done:not([hidden]) > :nth-child(3) { animation-delay: .6s; }
  .qb-done:not([hidden]) > :nth-child(4) { animation-delay: .7s; } .qb-done:not([hidden]) > :nth-child(5) { animation-delay: .8s; }
  @keyframes rise2 { from { opacity: 0; transform: translateY(16px); } }
  .qb-summary { font-size: 15px; color: var(--grey); line-height: 1.7; }
  .qb-summary strong { color: var(--ink); }
  main { padding-bottom: 20px; }
}