/* =====================================================================
   LACKSCHICHT — styles.css
   Y2K sticker sheet: baby-blue backing paper, white die-cut stickers,
   one hot pink that only ever means "tap here", chrome and holo as
   MATERIALS on the stickers, never as page colour.
   Sections below are named exactly like the data-sid in index.html.
   ===================================================================== */

/* ======== FONTS — self-hosted, with metric-matched fallbacks ========
   Caprasimo is the bubbly display face (OFL, Omnibus-Type), Outfit the body
   (OFL). The "Fallback" faces are local system fonts resized to the webfont's
   measured width and line box, so the swap moves nothing (CLS 0). The numbers
   were measured in Chrome by rendering the same sentence in both faces. */
@font-face {
  font-family: 'Caprasimo';
  src: url(fonts/caprasimo-latin.woff2?v=c7371a20) format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Outfit';
  src: url(fonts/outfit-var-latin.woff2?v=fdf9c509) format('woff2');
  /* optional, not swap: Arial can be matched to Outfit's width at ONE weight,
     but the page runs Outfit at 400-700 and Lighthouse measured the swap as a
     0.033 shift. Preloaded, it is almost always in time; when it is not, that
     one visit keeps Arial and nothing moves. */
  font-weight: 100 900; font-style: normal; font-display: optional;
}
@font-face {
  font-family: 'Caprasimo Fallback';
  src: local('Georgia');
  size-adjust: 114.8%; ascent-override: 80%; descent-override: 19.9%; line-gap-override: 0%;
}
@font-face {
  font-family: 'Outfit Fallback';
  src: local('Arial');
  size-adjust: 98%; ascent-override: 102%; descent-override: 26.5%; line-gap-override: 0%;
}

/* ======== TOKENS — the whole colour budget lives here ======== */
:root {
  --sky: #cde6ff;        /* the backing paper every sticker sits on */
  --paper: #eef6ff;      /* the sticker sheet itself, one step lighter */
  --ink: #1d1636;        /* all text; also the 3D edge under buttons */
  --muted: #5a5275;      /* secondary text, AA on both blues and white */
  --pink: #ff3d9a;       /* the ONE accent: only on things you can tap */
  --pink-deep: #b0005f;  /* pink for small text, where #ff3d9a fails AA */
  --white: #fff;

  --display: 'Caprasimo', 'Caprasimo Fallback', Georgia, serif;
  --body: 'Outfit', 'Outfit Fallback', Arial, sans-serif;

  --gut: clamp(16px, 4vw, 48px);
  --r-sticker: 26px;
  --r-sheet: clamp(28px, 4vw, 44px);

  /* pop = a little overshoot, the way a sticker snaps flat; out = settle */
  --ease-pop: cubic-bezier(.34, 1.56, .64, 1);
  --ease-out: cubic-bezier(.22, 1, .36, 1);
}

/* Registered so it can TRANSITION: an unregistered custom property jumps
   from 12px to 44px in one frame and the peel looks like a glitch. */
@property --peel { syntax: '<length>'; inherits: false; initial-value: 12px; }

/* ======== BASE ======== */
*, *::before, *::after { box-sizing: border-box; }
/* scrollbar-gutter: opening the booking sheet locks scrolling; without a
   reserved gutter the vanishing scrollbar would shift the page sideways. */
html { scrollbar-gutter: stable; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
html:has(dialog[open]) { overflow: hidden; }
/* set by the inline script in <head> while the dictionary loads (non-German only) */
.i18n-wait body { visibility: hidden; }
body {
  margin: 0;
  font: 400 1.0625rem/1.55 var(--body);
  color: var(--ink);
  background-color: var(--sky);
  /* the faint dot grid of a real sticker backing sheet */
  background-image: radial-gradient(rgba(29, 22, 54, .07) 1.2px, transparent 1.6px);
  background-size: 22px 22px;
  overflow-x: clip;
}
h1, h2, h3 { font-family: var(--display); font-weight: 400; line-height: 1.02; margin: 0; letter-spacing: -.005em; }
p { margin: 0; }
a { color: inherit; }
img, svg { display: block; }
button, input, textarea { font: inherit; color: inherit; }
.wrap { width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 var(--gut); }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; border-radius: 12px; }

.skip {
  position: absolute; left: 12px; top: -60px; z-index: 200;
  background: var(--ink); color: var(--white); padding: 10px 16px; border-radius: 999px;
  font-weight: 600; text-decoration: none;
}
.skip:focus { top: 12px; }

/* ======== BUTTONS — bubbly, with a hard ink edge underneath ========
   The 5px ink shadow is the button's "thickness"; pressing sinks it. That
   press is the only feedback a touch user gets, so it stays even when
   everything else is quiet. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  min-height: 50px; padding: 12px 26px;
  background: var(--pink); color: var(--ink);
  border: 2.5px solid var(--ink); border-radius: 999px;
  box-shadow: 0 5px 0 var(--ink);
  font: 700 1.05rem/1.1 var(--body); text-decoration: none; cursor: pointer;
  transition: translate .18s var(--ease-out), box-shadow .18s var(--ease-out);
}
.btn:hover { translate: 0 -2px; box-shadow: 0 7px 0 var(--ink); }
.btn:active { translate: 0 4px; box-shadow: 0 1px 0 var(--ink); }
.btn[disabled] { cursor: progress; opacity: .7; }
.btn-sm { min-height: 40px; padding: 8px 18px; font-size: .95rem; box-shadow: 0 3px 0 var(--ink); }
.btn-wide { width: 100%; }
.link {
  font-weight: 600; color: var(--ink); background: none; border: 0; padding: 4px 2px; cursor: pointer;
  text-decoration: underline wavy var(--pink); text-decoration-thickness: 2px; text-underline-offset: 6px;
}
.link:hover { text-decoration-color: var(--ink); }

/* ======== DEMO-HINWEIS — the studio's note, closable ======== */
.demo-note {
  display: flex; align-items: center; gap: 12px;
  background: var(--ink); color: var(--paper);
  padding: 8px var(--gut); font-size: .8rem; line-height: 1.45;
}
.demo-note p { max-width: 90ch; }
.demo-note a { color: var(--white); text-underline-offset: 2px; }
.dn-tag {
  display: inline-block; background: var(--pink); color: var(--ink);
  font-weight: 700; font-size: .7rem; letter-spacing: .08em; text-transform: uppercase;
  padding: 1px 8px; border-radius: 999px; margin-right: 4px;
}
.demo-x {
  margin-left: auto; flex: none; width: 32px; height: 32px; padding: 8px;
  background: none; border: 1.5px solid rgba(238, 246, 255, .4); border-radius: 50%;
  color: var(--paper); cursor: pointer;
}
.demo-x svg { width: 100%; height: 100%; stroke: currentColor; stroke-width: 1.8; fill: none; }
.demo-x:hover { border-color: var(--pink); color: var(--pink); }

/* ======== KOPF — sticky header ======== */
.head {
  position: sticky; top: 0; z-index: 50;
  background: rgba(205, 230, 255, .92);
  border-bottom: 2px solid rgba(29, 22, 54, .08);
}
.head-in { display: flex; align-items: center; gap: 16px; min-height: 68px; }
.brand { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; margin-right: auto; }
.brand-tip { width: 26px; height: 37px; rotate: -12deg; filter: drop-shadow(0 2px 2px rgba(29, 22, 54, .25)); }
/* the wordmark is itself a sticker: white die-cut ring, ink letters */
.brand-word {
  font: 400 1.5rem/1 var(--display);
  text-shadow: 2px 0 0 #fff, -2px 0 0 #fff, 0 2px 0 #fff, 0 -2px 0 #fff,
               1.5px 1.5px 0 #fff, -1.5px 1.5px 0 #fff, 1.5px -1.5px 0 #fff, -1.5px -1.5px 0 #fff;
}
.nav { display: flex; align-items: center; gap: 4px; }
.nav a {
  padding: 8px 14px; border-radius: 999px; text-decoration: none; font-weight: 600; font-size: .98rem;
  transition: background-color .2s;
}
.nav a:hover { background: var(--white); }

/* ======== SPRACHMENÜ — js/i18n.js injects it into [data-lang-host] ========
   The host reserves the button's box before the script runs; without it the
   header would shift when the control appears (CLS). Dressed as a white
   sticker pill with an ink edge, like the filter chips. */
.lang-host { display: inline-flex; align-items: center; min-width: 3.4em; min-height: 30px; margin-left: 6px; }
.head .wdm-lang {
  --wdm-lang-bg: var(--white); --wdm-lang-fg: var(--ink); --wdm-lang-border: var(--ink);
  --wdm-lang-font: var(--body);
  font-weight: 600;
}
.head .wdm-lang__btn { border-width: 2px; }
.head .wdm-lang__list li:hover, .head .wdm-lang__list li:focus { background: #ffe3f1; }

/* ======== HERO — the sticker sheet ========
   One centred sheet, the headline as the biggest sticker on it, press-on
   tips stuck around the edges. Centred on purpose: the sibling demos anchor
   their H1 top-left (see demos/_kit/DIFFERENTIATION.md). */
.hero { padding: clamp(16px, 3vw, 36px) 0 clamp(40px, 6vw, 72px); }
.sheet-paper {
  position: relative; overflow: clip;
  background: var(--paper);
  border: 2px solid rgba(29, 22, 54, .07);
  border-radius: var(--r-sheet);
  padding: clamp(40px, 6.5vw, 92px) var(--gut) clamp(48px, 7vw, 100px);
  text-align: center;
}
.hero-k { display: flex; justify-content: center; gap: 6px; margin-bottom: 22px; }
.hero-k span {
  display: inline-block; padding: 5px 14px; border-radius: 999px;
  font-weight: 700; font-size: .82rem; letter-spacing: .06em; text-transform: uppercase;
  background: var(--ink); color: var(--white); rotate: -4deg;
}
.hero-k span + span { background: var(--white); color: var(--ink); border: 2px solid var(--ink); rotate: 3deg; }
/* The headline sticker: a white ring (the die-cut edge) and a pink offset
   underneath (the thickness). All text-shadow, so the text stays real text,
   at full contrast, and is the LCP element from the first frame. */
.hero-h {
  font-size: clamp(2.7rem, 6.4vw, 5.7rem);
  line-height: .98; max-width: 12ch; margin: 0 auto;
  rotate: -2deg;
  text-shadow:
    .045em 0 0 #fff, -.045em 0 0 #fff, 0 .045em 0 #fff, 0 -.045em 0 #fff,
    .032em .032em 0 #fff, -.032em .032em 0 #fff, .032em -.032em 0 #fff, -.032em -.032em 0 #fff,
    .075em .085em 0 var(--pink);
}
.hero-h2 { display: block; margin-top: .08em; rotate: 3deg; translate: .4em 0; }
.hero-p { max-width: 34ch; margin: 30px auto 0; font-size: clamp(1.08rem, 1.6vw, 1.3rem); font-weight: 500; }
.hero-act { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 14px 22px; margin-top: 30px; }

/* The holo badge: a round holographic sticker. Its rainbow sits on a
   ::before that ROTATES (transform only, compositor-cheap) instead of
   animating the gradient itself, which would repaint every frame. */
.holo-badge {
  position: absolute; right: 5%; bottom: 9%;
  width: 136px; height: 136px; border-radius: 50%;
  display: grid; place-content: center; gap: 2px;
  font: 400 1.05rem/1.05 var(--display);
  border: 4px solid var(--white); overflow: hidden; rotate: 12deg;
  box-shadow: 0 8px 18px rgba(29, 22, 54, .18);
}
.holo-badge::before {
  content: ""; position: absolute; inset: -30%; z-index: -1;
  background: conic-gradient(#ffd1ec, #c9f5ff, #fff6b8, #dccfff, #c8ffe6, #ffd1ec);
  animation: holo-spin 9s linear infinite;
}
.holo-badge span { display: block; }
@keyframes holo-spin { to { rotate: 360deg; } }

/* ======== HERO — scattered stickers ========
   Each sticker pops in once (scale only, never the headline), and follows
   the pointer a few pixels on desktop (app.js writes `translate` directly,
   so no custom property is recalculated per frame). */
.hero-stickers { position: absolute; inset: 0; pointer-events: none; }
.stk {
  position: absolute; width: var(--w); aspect-ratio: 116 / 166;
  rotate: var(--rot);
  filter: drop-shadow(0 6px 8px rgba(29, 22, 54, .2));
  animation: pop-in .7s var(--ease-pop) both;
  animation-delay: var(--d);
  transition: translate .5s var(--ease-out);
}
.stk svg { width: 100%; height: 100%; }
.stk-1 { --w: 118px; --rot: -14deg; --d: .05s; left: 6%;  top: 12%; }
.stk-2 { --w: 104px; --rot: 10deg;  --d: .11s; left: 13%; bottom: 10%; }
.stk-3 { --w: 112px; --rot: 16deg;  --d: .17s; right: 7%; top: 11%; }
.stk-4 { --w: 92px;  --rot: -8deg;  --d: .23s; right: 20%; bottom: 7%; }
.stk-5 { --w: 82px;  --rot: 24deg;  --d: .29s; left: 2.5%; top: 50%; }
.stk-6 { --w: 86px;  --rot: -20deg; --d: .35s; right: 2.5%; top: 45%; }
.stk-7 { --w: 70px;  --rot: 8deg;   --d: .41s; left: 22%; top: 7%; }
@keyframes pop-in {
  0%   { scale: .4; opacity: 0; }
  60%  { opacity: 1; }
  100% { scale: 1; opacity: 1; }
}

/* ======== BELOW THE FOLD — skip rendering until it scrolls near ========
   Sixteen cards of layered SVG are the page's heaviest first layout; a
   phone does not need them before it has painted the hero. Measured on
   mobile Lighthouse: all three sections = 98-99 and TBT 0 in four runs;
   the gallery alone = 84-97. Intrinsic sizes are measured heights.
   Side effect: a full-page screenshot taken without scrolling shows these
   sections empty (the tool never scrolls them near). Scroll first. */
.designs, .ablauf, .studio { content-visibility: auto; }
.designs { contain-intrinsic-size: auto 2130px; }
.ablauf  { contain-intrinsic-size: auto 700px; }
.studio  { contain-intrinsic-size: auto 880px; }
@media (max-width: 719px) {
  .designs { contain-intrinsic-size: auto 3450px; }
  .ablauf  { contain-intrinsic-size: auto 980px; }
  .studio  { contain-intrinsic-size: auto 1250px; }
}
/* paper never scrolls, so print gets everything */
@media print { .designs, .ablauf, .studio { content-visibility: visible; } }

/* ======== SECTION HEADS — shared by designs and studio ======== */
.eyebrow {
  display: inline-block; padding: 4px 12px; border-radius: 999px;
  background: #ffe3f1; color: var(--pink-deep);
  font-weight: 700; font-size: .8rem; letter-spacing: .07em; text-transform: uppercase;
  rotate: -2deg; margin-bottom: 14px;
}
.sec-head { max-width: 760px; margin-bottom: 26px; }
.sec-head h2, .studio h2 { font-size: clamp(2.1rem, 5vw, 3.7rem); }
.sec-p { margin-top: 14px; font-size: 1.12rem; max-width: 52ch; color: var(--muted); font-weight: 500; }

/* ======== DESIGNS — filter chips ======== */
.designs { padding: clamp(40px, 6vw, 72px) 0 clamp(64px, 8vw, 110px); scroll-margin-top: 70px; }
.filters { display: flex; flex-wrap: wrap; gap: 10px; }
.chip {
  min-height: 44px; padding: 8px 18px;
  background: var(--white); color: var(--ink);
  border: 2px solid var(--ink); border-radius: 999px; box-shadow: 0 3px 0 var(--ink);
  font-weight: 600; font-size: .98rem; cursor: pointer;
  transition: translate .15s var(--ease-out), box-shadow .15s var(--ease-out), background-color .15s;
}
.chip:hover { translate: 0 -2px; box-shadow: 0 5px 0 var(--ink); }
.chip[aria-pressed="true"] { background: var(--ink); color: var(--white); translate: 0 3px; box-shadow: 0 0 0 var(--ink); }
.count { margin: 18px 0 22px; font-weight: 600; color: var(--muted); font-size: .95rem; min-height: 1.5em; }

/* ======== DESIGNS — the sticker cards ========
   Tilt, shadow and focus ring live on the <li>; the peel lives on the
   button. Split because the peel is a clip-path, and a clip-path would cut
   off both a drop-shadow and a focus outline drawn on the same element. */
.grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: clamp(16px, 2.6vw, 30px);
}
@media (min-width: 1100px) { .grid { grid-template-columns: repeat(4, 1fr); } }
.tip {
  rotate: var(--tilt, 0deg);
  filter: drop-shadow(0 2px 0 rgba(29, 22, 54, .1)) drop-shadow(0 12px 16px rgba(29, 22, 54, .12));
  border-radius: calc(var(--r-sticker) + 4px);
  transition: rotate .35s var(--ease-pop), translate .35s var(--ease-pop);
}
/* hand-stuck, not machine-aligned: a repeating set of small tilts */
.tip:nth-child(5n+1) { --tilt: -1.6deg; }
.tip:nth-child(5n+2) { --tilt: 1.2deg; }
.tip:nth-child(5n+3) { --tilt: -.6deg; }
.tip:nth-child(5n+4) { --tilt: 1.8deg; }
.tip:nth-child(5n)   { --tilt: -1deg; }
.tip[hidden] { display: none; }
.tip:has(.tip-btn:focus-visible) { outline: 3px solid var(--ink); outline-offset: 5px; }
.tip-btn:focus-visible { outline: none; }
.tip.is-in { animation: pop-in .45s var(--ease-pop) both; }

.tip-btn {
  position: relative; display: grid; gap: 5px; width: 100%; height: 100%;
  padding: 11px 11px 14px; margin: 0;
  background: var(--white); color: var(--ink); text-align: left;
  border: 0; border-radius: var(--r-sticker); cursor: pointer;
  /* the corner that is already lifting: 12px at rest, 44px on hover */
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--peel)), calc(100% - var(--peel)) 100%, 0 100%);
  transition: --peel .35s var(--ease-out);
}
/* the folded-back corner shows the sticker's silver backing */
.tip-btn::after {
  content: ""; position: absolute; right: 0; bottom: 0;
  width: var(--peel); height: var(--peel);
  background: linear-gradient(135deg, #fff 0%, #e2e6ee 32%, #aab3c3 50%, transparent 50.5%);
  clip-path: polygon(0 0, 100% 0, 0 100%);
}

/* ======== DESIGNS — card contents ======== */
.tip-art {
  position: relative; display: grid; place-items: center;
  height: 172px; border-radius: 18px; overflow: hidden;
  background-color: var(--paper);
  background-image: radial-gradient(rgba(29, 22, 54, .08) 1px, transparent 1.4px);
  background-size: 12px 12px;
}
.nail { width: 86px; height: 123px; rotate: -6deg; transition: rotate .4s var(--ease-pop), translate .4s var(--ease-pop); }
/* the second tip of the pair, tucked behind: it reads as a press-on SET */
.nail-b { position: absolute; left: 50%; top: 50%; translate: -8% -44%; rotate: 16deg; scale: .8; }
/* holo sheen: a rainbow band sweeps across the art on hover; colour-dodge
   only brightens, so the nail drawing stays readable underneath */
.tip-art::after {
  content: ""; position: absolute; inset: 0; opacity: 0; mix-blend-mode: color-dodge;
  background: linear-gradient(110deg, transparent 25%, rgba(255, 120, 200, .55) 38%,
              rgba(120, 220, 255, .55) 47%, rgba(255, 245, 150, .55) 56%, transparent 68%);
  background-size: 260% 100%; background-position: 100% 0;
  transition: opacity .3s, background-position .9s var(--ease-out);
}
.tip-id {
  justify-self: start; margin-top: 6px; padding: 1px 9px; border-radius: 999px;
  background: #ffe3f1; color: var(--pink-deep);
  font-weight: 700; font-size: .74rem; letter-spacing: .06em; font-variant-numeric: tabular-nums;
}
.tip-name { font: 400 1.22rem/1.08 var(--display); }
.tip-how { font-size: .84rem; line-height: 1.35; color: var(--muted); }
.tip-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 4px; }
.tip-min { padding: 2px 9px; border: 1.5px solid var(--ink); border-radius: 999px; font-weight: 600; font-size: .78rem; white-space: nowrap; }
.tip-price { font: 400 1.2rem/1 var(--display); white-space: nowrap; }
.tip-go {
  justify-self: start; margin-top: 6px; padding: 6px 13px; border-radius: 999px;
  background: var(--pink); border: 2px solid var(--ink);
  font-weight: 700; font-size: .84rem;
  transition: scale .25s var(--ease-pop);
}
.grid-note { margin-top: 30px; font-size: .95rem; color: var(--muted); font-weight: 500; }

/* Hover only where a real pointer hovers: on touch a sticky :hover would
   leave one card peeled after the sheet closes. */
@media (hover: hover) and (pointer: fine) {
  .tip:hover { rotate: 0deg; translate: 0 -6px; }
  .tip:hover .tip-btn { --peel: 44px; }
  .tip:hover .nail:not(.nail-b) { rotate: 0deg; translate: 0 -4px; }
  .tip:hover .tip-art::after { opacity: 1; background-position: 0 0; }
  .tip:hover .tip-go { scale: 1.06; }
}
/* the tap: the sticker pops off the sheet before the booking opens */
.tip.is-pop { animation: tap-pop .32s var(--ease-pop); }
@keyframes tap-pop { 40% { scale: .94; } 100% { scale: 1; } }

/* ======== ABLAUF — the ink band ========
   The one dark stretch on the page, so the three steps read as a break in
   rhythm, not as another row of cards on blue. */
.ablauf { background: var(--ink); color: var(--paper); padding: clamp(64px, 9vw, 120px) 0; scroll-margin-top: 70px; }
.ablauf h2 {
  font-size: clamp(2.3rem, 6vw, 4.4rem); color: var(--white); text-align: center;
  text-shadow: .06em .07em 0 var(--pink);
}
.steps {
  list-style: none; margin: 48px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 3vw, 40px);
}
.step-stk {
  position: relative; background: var(--white); color: var(--ink);
  border-radius: var(--r-sticker); padding: 42px 24px 26px;
  box-shadow: 0 0 0 5px rgba(255, 255, 255, .18);
}
.step-stk:nth-child(1) { rotate: -2deg; }
.step-stk:nth-child(2) { rotate: 1.5deg; translate: 0 18px; }
.step-stk:nth-child(3) { rotate: -1deg; }
.step-n {
  position: absolute; top: -22px; left: 20px;
  display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%;
  background: var(--pink); border: 3px solid var(--ink); box-shadow: 0 4px 0 var(--ink);
  font: 400 1.7rem/1 var(--display);
}
.step-stk h3 { font-size: 1.6rem; margin-bottom: 8px; }
.step-stk p { color: var(--muted); font-weight: 500; }
.ablauf-p { margin: 64px auto 0; max-width: 56ch; text-align: center; font-size: 1.12rem; }
.ablauf-p strong { color: var(--pink); font-weight: 700; }

/* ======== STUDIO — hours, facts, disclaimer ======== */
.studio { padding: clamp(64px, 9vw, 120px) 0; scroll-margin-top: 70px; }
.studio-in { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(32px, 6vw, 88px); align-items: start; }
.studio h2 { margin-bottom: 30px; }
.hours { width: 100%; max-width: 440px; border-collapse: collapse; font-weight: 500; }
.hours caption { text-align: left; font: 400 1.35rem/1.2 var(--display); margin-bottom: 8px; }
.hours th, .hours td { padding: 10px 0; border-bottom: 2px dashed rgba(29, 22, 54, .16); text-align: left; }
.hours th { font-weight: 600; }
.hours td { text-align: right; font-variant-numeric: tabular-nums; }
.hours .zu { color: var(--muted); }
.sub { font-size: 1.5rem; margin-bottom: 14px; }
.facts { list-style: none; margin: 0 0 26px; padding: 0; display: grid; gap: 12px; font-weight: 500; }
.facts li { position: relative; padding-left: 30px; }
/* a tiny pink star sticker as the bullet, drawn in CSS, no icon font */
.facts li::before {
  content: ""; position: absolute; left: 0; top: .3em; width: 18px; height: 18px;
  background: var(--pink);
  clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}
.fake {
  padding: 14px 16px; border: 2px dashed rgba(29, 22, 54, .25); border-radius: 18px;
  font-size: .92rem; color: var(--muted); margin-bottom: 16px;
}
.wdm-box { background: var(--white); border-radius: 20px; padding: 16px 18px; font-size: .92rem; }
.wdm-n { margin-top: 6px; font: 400 1.3rem/1.2 var(--display); }
.wdm-n a { text-decoration: none; }
.wdm-n a:hover { text-decoration: underline wavy var(--pink); }

/* ======== BUCHEN — the booking sheet (a native <dialog>) ======== */
.sheet {
  width: min(580px, calc(100vw - 32px)); max-width: none; max-height: min(92dvh, 940px);
  padding: 0; border: 0; border-radius: 32px;
  background: var(--white); color: var(--ink);
  box-shadow: 0 30px 80px rgba(29, 22, 54, .35);
  overscroll-behavior: contain;
}
.sheet[open] { animation: sheet-in .38s var(--ease-out); }
/* when a sticker flies in, the sheet must already stand still: the flight
   aims at a rect measured on open, and a moving target makes it land wrong */
.sheet.no-enter[open] { animation: none; }
.sheet::backdrop { background: rgba(29, 22, 54, .55); }
@keyframes sheet-in { from { translate: 0 28px; scale: .97; } }
.sheet-in { position: relative; padding: 26px clamp(18px, 4vw, 30px) 28px; }
.sheet-x {
  position: absolute; top: 14px; right: 14px; width: 44px; height: 44px; padding: 12px;
  background: var(--paper); border: 2px solid var(--ink); border-radius: 50%; cursor: pointer;
}
.sheet-x svg { width: 100%; height: 100%; stroke: currentColor; stroke-width: 2; fill: none; }

/* ======== BUCHEN — the picked design at the top ======== */
.pick { display: grid; grid-template-columns: 82px 1fr; gap: 16px; align-items: center; padding-right: 48px; }
.pick-nail { width: 82px; height: 117px; rotate: -8deg; filter: drop-shadow(0 6px 8px rgba(29, 22, 54, .22)); }
.pick-k { font-weight: 700; font-size: .78rem; letter-spacing: .07em; text-transform: uppercase; color: var(--pink-deep); }
.pick-name { font-size: clamp(1.6rem, 5vw, 2rem); margin: 2px 0 4px; }
.pick-how { font-size: .9rem; color: var(--muted); }
.pick-meta { margin-top: 6px; font-weight: 700; font-variant-numeric: tabular-nums; }
.pick-swap { margin-top: 10px; font-size: .92rem; }

/* ======== BUCHEN — steps: day chips, time bubbles, contact ======== */
.fs { border: 0; padding: 0; margin: 26px 0 0; min-width: 0; }
.fs legend { font: 400 1.3rem/1.2 var(--display); padding: 0; margin-bottom: 12px; display: flex; align-items: center; gap: 10px; }
.fs-n {
  display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 50%;
  background: var(--pink); border: 2px solid var(--ink); font-size: 1rem;
}
/* Days scroll sideways with snap: fourteen days never fit a phone, and a
   wrapped block of chips would push the times out of sight. */
.days {
  display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x mandatory;
  padding: 4px 4px 12px; margin: 0 -4px; scrollbar-width: thin;
}
.day { position: relative; flex: none; scroll-snap-align: start; }
.day input, .time input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.day span {
  display: grid; place-items: center; width: 62px; min-height: 74px; padding: 6px 0;
  border: 2px solid var(--ink); border-radius: 20px; background: var(--white);
  cursor: pointer; line-height: 1.1; transition: background-color .15s, translate .15s;
}
.day b { font: 400 1.4rem/1 var(--display); }
.day small { font-size: .74rem; font-weight: 600; }
.day input:checked + span { background: var(--ink); color: var(--white); }
.day input:disabled + span { border-style: dashed; color: var(--muted); border-color: rgba(29, 22, 54, .3); cursor: not-allowed; }
.day input:focus-visible + span, .time input:focus-visible + span { outline: 3px solid var(--pink-deep); outline-offset: 2px; }
.slot-head { font-size: .92rem; color: var(--muted); font-weight: 500; margin: 6px 0 10px; min-height: 1.4em; }
.times { display: flex; flex-wrap: wrap; gap: 8px; min-height: 48px; }
.time { position: relative; }
.time span {
  display: inline-grid; place-items: center; min-width: 72px; min-height: 44px; padding: 6px 12px;
  border: 2px solid var(--ink); border-radius: 999px; background: var(--white);
  font-weight: 600; font-variant-numeric: tabular-nums; cursor: pointer;
  transition: background-color .15s, scale .2s var(--ease-pop);
}
.time input:checked + span { background: var(--pink); scale: 1.06; }
.time input:disabled + span { color: rgba(29, 22, 54, .45); border-color: rgba(29, 22, 54, .2); text-decoration: line-through; cursor: not-allowed; }

/* ======== BUCHEN — contact fields, summary, send ======== */
.field { margin-top: 12px; }
.field label { display: block; font-weight: 600; font-size: .95rem; margin-bottom: 5px; }
.opt { font-weight: 400; color: var(--muted); }
/* 16px+ in inputs: anything smaller makes iOS Safari zoom the page on focus */
.field input, .field textarea {
  width: 100%; padding: 12px 14px; font-size: 1.02rem;
  border: 2px solid var(--ink); border-radius: 16px; background: var(--white);
}
.field textarea { resize: vertical; min-height: 64px; }
.field input:focus-visible, .field textarea:focus-visible { outline: 3px solid var(--pink); outline-offset: 1px; border-radius: 16px; }
.field [aria-invalid="true"] { border-color: var(--pink-deep); background: #fff4f9; }
.f-err, .send-err { margin-top: 6px; color: var(--pink-deep); font-weight: 600; font-size: .9rem; }
.send-err { margin: 14px 0 0; padding: 10px 14px; background: #fff0f7; border-radius: 14px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.sum {
  margin-top: 22px; padding: 12px 16px; border-radius: 16px;
  background: var(--paper); font-weight: 600; font-variant-numeric: tabular-nums;
}
.fine { margin: 10px 0 16px; font-size: .86rem; color: var(--muted); }

/* ======== BUCHEN — the "sent" screen ======== */
.ok { padding: 44px clamp(20px, 5vw, 40px) 36px; text-align: center; }
.ok:focus { outline: none; }
.ok-nail { width: 104px; height: 148px; margin: 0 auto 10px; rotate: 8deg; filter: drop-shadow(0 8px 10px rgba(29, 22, 54, .25)); }
.ok:not([hidden]) .ok-nail { animation: pop-in .6s var(--ease-pop) both; }
.ok-h { font-size: clamp(2rem, 7vw, 2.6rem); text-shadow: .06em .07em 0 var(--pink); }
.ok-code { margin-top: 14px; font-weight: 600; }
.ok-code strong { display: inline-block; padding: 2px 12px; border-radius: 999px; background: var(--ink); color: var(--white); letter-spacing: .05em; }
.ok-line { margin-top: 10px; font-weight: 600; }
.ok-p { margin: 14px auto 24px; max-width: 38ch; color: var(--muted); }

/* the tip that flies from the card into the sheet (app.js, FLIP) */
.fly { position: fixed; z-index: 10; pointer-events: none; transform-origin: 50% 50%; margin: 0; }

/* ======== FUSS — footer ======== */
.foot { padding: 40px 0 20px; }
.foot-in { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 12px 24px; }
.foot-mark { font: 400 2.2rem/1 var(--display); }
.foot-cred { font-size: .88rem; color: var(--muted); }

/* ======== MOBILE & TABLET ======== */
@media (max-width: 899px) {
  /* stickers stop floating and line up as a strip above the kicker, so they
     can never sit on the headline at phone width */
  .hero-stickers { position: static; display: flex; justify-content: center; margin: -8px 0 18px; }
  .stk { position: relative; inset: auto; --w: 58px; margin: 0 -4px; }
  .stk-6, .stk-7 { display: none; }
  .holo-badge { position: relative; right: auto; bottom: auto; margin: 34px auto 0; width: 116px; height: 116px; font-size: .95rem; }
  .steps { grid-template-columns: 1fr; gap: 40px; }
  .step-stk:nth-child(2) { translate: 0 0; }
  .studio-in { grid-template-columns: 1fr; }
}
@media (max-width: 719px) {
  .nav a { display: none; }
  .brand-word { font-size: 1.3rem; }
  .head-in { gap: 10px; min-height: 60px; }
  .tip-art { height: 132px; }
  .nail { width: 66px; height: 94px; }
  .tip-name { font-size: 1.08rem; }
  /* the booking becomes a bottom sheet, the way booking apps open on a phone */
  .sheet { width: 100vw; max-height: 94dvh; margin: auto 0 0; border-radius: 28px 28px 0 0; }
}

/* ======== REDUCED MOTION — a still build, not zero-length tweens ======== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .holo-badge::before { rotate: 30deg; }
}