/* Self-hosted fonts (SIL Open Font License 1.1). No Google CDN.
   Production: copy /fonts/*.woff2 into the theme and keep these @font-face rules. */
@font-face {
  font-family: "Bricolage Grotesque";
  src: url("/assets/fonts/bricolage-grotesque-latin-wght-normal.woff2") format("woff2-variations"),
       url("/assets/fonts/bricolage-grotesque-latin-wght-normal.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Figtree";
  src: url("/assets/fonts/figtree-latin-wght-normal.woff2") format("woff2-variations"),
       url("/assets/fonts/figtree-latin-wght-normal.woff2") format("woff2");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Serif";
  src: url("/assets/fonts/instrument-serif-latin-400-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

/* TomyJerry Hundesalon — design tokens v1 (27.10.2026)
   Concept: "Schaum & Schnitt" — bright milk base, ink type, coral soap-bubble signature.
   Layers: primitive -> semantic -> component. Components use semantic tokens only.
   Fonts are self-hosted, see fonts.css (OFL). No external requests. */

:root {
  /* ---------- PRIMITIVE ---------- */
  --milk-50:  #FFFDF9;
  --milk-100: #FBF7F1;
  --milk-200: #F3ECE1;
  --milk-300: #E6DCCD;

  --ink-900: #1D1830;
  --ink-700: #3A3450;
  --ink-500: #5A546B;
  --ink-300: #9D97AC;

  --coral-300: #FFB39F;
  --coral-500: #FF6A47;   /* signature bubble — fill only, never text on light */
  --coral-600: #F0552F;
  --coral-800: #B43A1C;   /* coral as text/link on light: 5.5:1 */

  --lilac-100: #EDEBFF;
  --lilac-400: #8B7CF6;
  --lilac-700: #4F3FD0;   /* focus ring + secondary links: 6.7:1 on milk */

  --pista-100: #E3EECF;
  --pista-700: #3E6B2F;   /* success / "frei" slots: 5.9:1 */

  --apricot-100: #FFE1C7;

  --red-700: #B42318;
  --amber-600: #B54708;

  /* ---------- SEMANTIC ---------- */
  --bg:          var(--milk-100);
  --bg-raised:   var(--milk-50);
  --bg-sunken:   var(--milk-200);
  --surface:     #FFFFFF;
  --surface-ink: var(--ink-900);       /* dark punch sections */

  --text:         var(--ink-900);      /* 16:1 on milk */
  --text-muted:   var(--ink-500);      /* 6.7:1 on milk */
  --text-invert:  var(--milk-100);
  --text-invert-muted: #C9C3D6;        /* on ink: 9.8:1 */
  --heading:      var(--ink-900);

  --brand:        var(--coral-500);    /* bubble, CTA fill (with ink text 6:1) */
  --brand-hover:  var(--coral-600);
  --brand-soft:   #FFE9E2;
  --brand-text:   var(--coral-800);    /* coral-ish text on light */
  --on-brand:     var(--ink-900);

  --accent:       var(--lilac-400);
  --accent-soft:  var(--lilac-100);
  --accent-text:  var(--lilac-700);

  --tile-lilac:   var(--lilac-100);
  --tile-pista:   var(--pista-100);
  --tile-apricot: var(--apricot-100);
  --tile-milk:    var(--milk-200);

  --border:        color-mix(in srgb, var(--ink-900) 12%, transparent);
  --border-strong: color-mix(in srgb, var(--ink-900) 28%, transparent);
  --focus:         var(--lilac-700);

  --success: var(--pista-700);
  --success-soft: var(--pista-100);
  --error:   var(--red-700);
  --warning: var(--amber-600);

  /* ---------- TYPOGRAPHY ---------- */
  --font-display: "Bricolage Grotesque", "Arial Rounded MT Bold", system-ui, sans-serif;
  --font-accent:  "Instrument Serif", Georgia, "Times New Roman", serif;   /* italic only, 1 word per heading */
  --font-body:    "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;

  --step--2: clamp(.75rem, .73rem + .1vw, .8rem);
  --step--1: clamp(.85rem, .82rem + .15vw, .94rem);
  --step-0:  clamp(1rem, .96rem + .2vw, 1.125rem);
  --step-1:  clamp(1.2rem, 1.12rem + .4vw, 1.45rem);
  --step-2:  clamp(1.5rem, 1.32rem + .9vw, 2.1rem);
  --step-3:  clamp(1.9rem, 1.55rem + 1.7vw, 3rem);
  --step-4:  clamp(2.4rem, 1.8rem + 3vw, 4.4rem);
  --step-5:  clamp(3rem, 1.9rem + 5.6vw, 7.2rem);   /* oversized hero */

  --lh-tight: 1.02;
  --lh-snug: 1.2;
  --lh-body: 1.65;
  --tracking-display: -0.035em;
  --tracking-caps: 0.12em;
  --measure: 62ch;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-black: 800;

  /* ---------- SPACING (8px base) ---------- */
  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --section-y: clamp(4rem, 3rem + 6vw, 8rem);
  --gutter: clamp(1rem, .6rem + 2vw, 2rem);
  --container: 1240px;
  --container-wide: 1440px;

  /* ---------- RADIUS ---------- */
  --r-xs: 8px;
  --r-sm: 12px;
  --r-md: 20px;
  --r-lg: 32px;
  --r-xl: 44px;
  --r-pill: 999px;
  --r-blob: 58% 42% 46% 54% / 52% 48% 52% 48%;   /* organic bubble */

  /* ---------- SHADOWS (warm ink-tinted, soft-UI evolved) ---------- */
  --shadow-xs: 0 1px 2px rgb(29 24 48 / .06);
  --shadow-sm: 0 2px 6px rgb(29 24 48 / .06), 0 1px 2px rgb(29 24 48 / .05);
  --shadow-md: 0 10px 24px -8px rgb(29 24 48 / .14), 0 2px 6px rgb(29 24 48 / .05);
  --shadow-lg: 0 28px 60px -20px rgb(29 24 48 / .25), 0 8px 18px -10px rgb(29 24 48 / .12);
  --shadow-press: inset 0 2px 0 rgb(255 255 255 / .35), 0 6px 0 var(--ink-900);   /* tactile CTA */
  --shadow-press-down: inset 0 2px 0 rgb(255 255 255 / .35), 0 2px 0 var(--ink-900);
  --shadow-bubble: inset -10px -14px 24px rgb(29 24 48 / .12), inset 10px 10px 20px rgb(255 255 255 / .55);

  /* ---------- MOTION ---------- */
  --ease-out: cubic-bezier(.22, 1, .36, 1);        /* reveals */
  --ease-inout: cubic-bezier(.65, 0, .35, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);  /* tactile pops, small elements only */
  --dur-fast: .16s;
  --dur: .32s;
  --dur-slow: .7s;
  --stagger: 90ms;

  /* ---------- Z ---------- */
  --z-header: 50;
  --z-sticky: 40;
  --z-modal: 100;
}

/* Admin CRM is dense UI: same brand, calmer surfaces */
[data-surface="crm"] {
  --bg: var(--milk-100);
  --surface: #FFFFFF;
  --step-0: 0.9375rem;
  --section-y: var(--space-6);
}

/* ==========================================================================
   TomyJerry – Hundesalon · public site components
   Built on tokens.css (source of truth). Components use semantic tokens only.
   ========================================================================== */

/* ---------- 1. Reset / base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:var(--space-20)}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font-body);font-size:var(--step-0);line-height:var(--lh-body);overflow-x:clip;-webkit-font-smoothing:antialiased}
img,svg,video{display:block;max-width:100%}
img{height:auto}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,h4{font-family:var(--font-display);color:var(--heading);line-height:var(--lh-tight);letter-spacing:var(--tracking-display);margin:0;font-weight:var(--fw-black);text-wrap:balance}
p{margin:0}
p,li{text-wrap:pretty}
em.serif{font-family:var(--font-accent);font-style:italic;font-weight:var(--fw-regular);letter-spacing:-.01em;color:var(--brand-text)}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px;border-radius:var(--r-xs)}
::selection{background:var(--brand-soft);color:var(--text)}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;padding:0;margin:-1px}
.skip{position:absolute;left:-999rem;top:var(--space-2);background:var(--surface-ink);color:var(--text-invert);padding:var(--space-3) var(--space-4);border-radius:var(--r-sm);z-index:var(--z-modal)}
.skip:focus{left:var(--space-2)}
[hidden]{display:none!important}

/* ---------- 2. Layout ---------- */
.wrap{width:min(100% - 2*var(--gutter),var(--container));margin-inline:auto}
.wrap--narrow{width:min(100% - 2*var(--gutter),52rem)}
section{scroll-margin-top:var(--space-20)}
.sec{padding-block:var(--section-y)}
.sec--tight{padding-top:0}
.sec--sunken{background:var(--bg-sunken)}
.sec-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:var(--space-6);margin-bottom:var(--space-12)}
.sec-head h2{font-size:var(--step-4);max-width:17ch;margin-top:var(--space-3)}
.sec-head > p{max-width:42ch;color:var(--text-muted)}
.eyebrow{font-size:var(--step--1);font-weight:var(--fw-bold);letter-spacing:var(--tracking-caps);text-transform:uppercase;color:var(--text-muted);display:inline-flex;gap:var(--space-2);align-items:center}
.eyebrow::before{content:"";width:.625rem;height:.625rem;border-radius:50%;background:var(--brand);box-shadow:var(--shadow-bubble);flex:none}
.muted{color:var(--text-muted)}
.small{font-size:var(--step--1)}

/* ---------- 3. Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);min-height:3rem;padding:0 var(--space-6);border-radius:var(--r-pill);font:var(--fw-bold) var(--step-0)/1 var(--font-body);text-decoration:none;border:2px solid var(--text);cursor:pointer;background:transparent;color:var(--text);transition:transform var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out),background var(--dur-fast),opacity var(--dur)}
.btn svg{width:1.125rem;height:1.125rem;flex:none;transition:transform var(--dur-fast) var(--ease-out)}
.btn:hover svg.arr{transform:translateX(3px)}
.btn-brand{background:var(--brand);color:var(--on-brand);box-shadow:var(--shadow-press);transform:translateY(-4px)}
.btn-brand:hover{background:var(--brand-hover)}
.btn-brand:active{transform:translateY(0);box-shadow:var(--shadow-press-down)}
.btn-brand[disabled]{opacity:.45;cursor:not-allowed;transform:none;box-shadow:none}
.btn-ghost{background:transparent}
.btn-ghost:hover{background:var(--surface)}
.btn-ink{background:var(--surface-ink);color:var(--text-invert);border-color:var(--surface-ink)}
.btn-ink:hover{background:var(--ink-700)}
.btn-sm{min-height:2.75rem;padding:0 var(--space-5);font-size:var(--step--1)}
.btn-block{width:100%}
.link{color:var(--accent-text);font-weight:var(--fw-semibold);text-underline-offset:3px}

/* ---------- 4. Header ---------- */
.hdr{position:sticky;top:0;z-index:var(--z-header);background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:blur(14px) saturate(1.3);-webkit-backdrop-filter:blur(14px) saturate(1.3);border-bottom:1px solid var(--border)}
.hdr .wrap{display:flex;align-items:center;gap:var(--space-6);min-height:4.5rem}
.hdr .logo{display:block;flex:none}
.hdr .logo img{height:1.875rem;width:auto}
.nav{display:flex;gap:var(--space-6);margin-left:auto}
.nav a{text-decoration:none;font-weight:var(--fw-semibold);font-size:var(--step--1);padding:var(--space-2) 0;background:linear-gradient(var(--brand),var(--brand)) 0 100%/0 2px no-repeat;transition:background-size var(--dur) var(--ease-out)}
.nav a:hover,.nav a[aria-current="page"]{background-size:100% 2px}
.hdr .acc{font-size:var(--step--1);font-weight:var(--fw-semibold);text-decoration:none;display:inline-flex;align-items:center;gap:var(--space-2);min-height:2.75rem}
.hdr .acc svg{width:1.25rem;height:1.25rem}
.hdr .btn-brand{min-height:2.75rem;padding:0 var(--space-5);font-size:var(--step--1);transform:translateY(-2px);box-shadow:inset 0 2px 0 rgb(255 255 255 / .35),0 3px 0 var(--ink-900)}
.lang{display:inline-flex;border:1px solid var(--border-strong);border-radius:var(--r-pill);padding:2px;flex:none}
.lang button{border:0;background:transparent;min-width:2.25rem;min-height:2rem;border-radius:var(--r-pill);font-size:var(--step--2);font-weight:var(--fw-bold);cursor:pointer;color:var(--text-muted)}
.lang button[aria-pressed="true"]{background:var(--surface-ink);color:var(--text-invert)}
.menu-btn{display:none;margin-left:auto;width:2.75rem;height:2.75rem;border-radius:50%;border:2px solid var(--text);background:var(--surface);cursor:pointer;place-items:center;flex:none}
.menu-btn svg{width:1.25rem;height:1.25rem}
@media (max-width:919px){
  .nav,.hdr .acc,.hdr .btn-brand{display:none}
  .menu-btn{display:grid}
  .hdr .lang{margin-left:auto}
  .hdr .lang + .menu-btn{margin-left:0}
}
/* full-screen menu */
.mnav{position:fixed;inset:0;z-index:var(--z-modal);background:var(--bg);display:flex;flex-direction:column;padding:var(--space-4) var(--gutter) max(var(--space-8),env(safe-area-inset-bottom));transform:translateY(-100%);visibility:hidden;transition:transform var(--dur-slow) var(--ease-out),visibility 0s linear var(--dur-slow);overflow-y:auto}
.mnav.open{transform:none;visibility:visible;transition:transform var(--dur-slow) var(--ease-out),visibility 0s}
.mnav-top{display:flex;align-items:center;justify-content:space-between;min-height:3.5rem}
.mnav-top img{height:1.75rem;width:auto}
.menu-btn.menu-btn--on{display:grid;margin-left:0}
.mnav ul{list-style:none;margin:var(--space-8) 0 0;padding:0;display:grid;gap:var(--space-1)}
.mnav ul a{display:block;font:var(--fw-black) var(--step-3)/1.1 var(--font-display);letter-spacing:var(--tracking-display);text-decoration:none;padding:var(--space-2) 0}
.mnav .mnav-cta{margin-top:auto;display:grid;gap:var(--space-3);padding-top:var(--space-8)}

/* ---------- 5. Hero ---------- */
.hero{position:relative;padding-block:clamp(2.5rem,5vw,5rem) var(--section-y)}
.hero .wrap{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(2rem,5vw,5rem);align-items:center}
.hero h1{font-size:var(--step-5);margin-top:var(--space-4)}
@media (min-width:920px){.hero h1{font-size:clamp(3rem,4.9vw,6rem)}}
.hero h1 .line{display:block;overflow:hidden;padding-bottom:.06em}
.hero h1 .line > span{display:inline-block;transform:translateY(105%);animation:rise var(--dur-slow) var(--ease-out) forwards}
.hero h1 .line:nth-child(2) > span{animation-delay:120ms}
.hero h1 .line:nth-child(3) > span{animation-delay:240ms}
@keyframes rise{to{transform:none}}
.hero .lead{font-size:var(--step-1);color:var(--text-muted);max-width:36ch;margin-top:var(--space-6);line-height:1.5}
.ctas{display:flex;flex-wrap:wrap;gap:var(--space-4);margin-top:var(--space-8);align-items:center}
.slots-now{margin-top:var(--space-8);display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2);font-size:var(--step--1);min-height:2.25rem}
.slots-now .lbl{display:inline-flex;align-items:center;gap:var(--space-2);font-weight:var(--fw-semibold);margin-right:var(--space-2)}
.pulse{width:.625rem;height:.625rem;border-radius:50%;background:var(--success);position:relative;flex:none}
.pulse::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--success);animation:ping 2s var(--ease-out) infinite}
@keyframes ping{to{transform:scale(2.6);opacity:0}}
.chip{display:inline-flex;align-items:center;min-height:2.25rem;padding:0 var(--space-4);border-radius:var(--r-pill);background:var(--success-soft);color:var(--success);font-weight:var(--fw-bold);text-decoration:none;border:1px solid color-mix(in srgb,var(--success) 25%,transparent);transition:transform var(--dur-fast) var(--ease-spring);font-variant-numeric:tabular-nums}
.chip:hover{transform:translateY(-2px) scale(1.04)}
.chip--muted{background:var(--surface);color:var(--text-muted);border-color:var(--border)}
.hero-art{position:relative;aspect-ratio:4/5;max-width:32.5rem;justify-self:end;width:100%}
.blob{position:absolute;inset:0;border-radius:var(--r-blob);overflow:hidden;background:radial-gradient(120% 90% at 30% 20%,var(--tile-apricot),var(--brand-soft) 45%,var(--tile-lilac));box-shadow:var(--shadow-lg);animation:sway 14s var(--ease-inout) infinite alternate}
.blob img{width:100%;height:100%;object-fit:cover}
@keyframes sway{to{transform:rotate(3deg) scale(1.02)}}
.bubble{position:absolute;border-radius:50%;background:radial-gradient(circle at 32% 30%,var(--milk-50) 0 14%,var(--coral-300) 15%,var(--brand) 70%);box-shadow:var(--shadow-bubble);animation:float 7s var(--ease-inout) infinite alternate;pointer-events:none}
.bubble.b1{width:5.25rem;height:5.25rem;top:-1.1rem;right:12%}
.bubble.b2{width:2.4rem;height:2.4rem;bottom:16%;left:-.9rem;animation-duration:9s;background:radial-gradient(circle at 32% 30%,var(--milk-50) 0 16%,var(--lilac-100) 17%,var(--accent) 72%)}
.bubble.b3{width:1.4rem;height:1.4rem;top:30%;right:-.5rem;animation-duration:5s}
@keyframes float{to{transform:translateY(-18px)}}
.sticker{position:absolute;left:-1.75rem;top:14%;width:8.25rem;height:8.25rem;border-radius:50%;background:var(--surface-ink);color:var(--text-invert);display:grid;place-items:center;box-shadow:var(--shadow-md);text-align:center}
.sticker svg{position:absolute;inset:0;animation:spin 22s linear infinite}
.sticker text{fill:var(--text-invert);font:700 11px var(--font-body);letter-spacing:.16em;text-transform:uppercase}
.sticker b{display:block;font:var(--fw-black) var(--step-1)/1 var(--font-display)}
.sticker small{display:block;font-size:var(--step--2);color:var(--text-invert-muted)}
@keyframes spin{to{transform:rotate(360deg)}}
@media (max-width:919px){
  .hero .wrap{grid-template-columns:1fr}
  .hero-art{justify-self:center;max-width:22.5rem;margin-top:var(--space-4)}
  .sticker{left:-.4rem;width:6.9rem;height:6.9rem}
}

/* page hero (subpages) */
.phero{padding-block:clamp(2.5rem,6vw,5.5rem) clamp(2rem,4vw,3.5rem);position:relative;overflow:hidden}
.phero h1{font-size:var(--step-4);margin-top:var(--space-4);max-width:18ch}
.phero .lead{font-size:var(--step-1);color:var(--text-muted);max-width:46ch;margin-top:var(--space-5);line-height:1.5}
.phero .bubble.b1{top:18%;right:8%}
.phero .bubble.b2{bottom:10%;right:22%;left:auto}
.crumbs{font-size:var(--step--1);color:var(--text-muted);display:flex;gap:var(--space-2);flex-wrap:wrap}
.crumbs a{color:var(--text-muted)}

/* ---------- 6. Marquee ---------- */
.marquee{background:var(--surface-ink);color:var(--text-invert);overflow:hidden;padding-block:var(--space-5);transform:rotate(-1.2deg)}
.mq-wrap{overflow:hidden;padding-block:var(--space-6)}
.marquee .track{display:flex;width:max-content;animation:mq 34s linear infinite}
.marquee span{font:var(--fw-black) var(--step-2)/1 var(--font-display);letter-spacing:var(--tracking-display);display:inline-flex;align-items:center;gap:var(--space-6);padding-right:var(--space-6);white-space:nowrap}
.marquee span::after{content:"";width:1rem;height:1rem;border-radius:50%;background:var(--brand)}
@keyframes mq{to{transform:translateX(-50%)}}

/* ---------- 7. Services bento + size switch ---------- */
.size-switch{display:inline-flex;gap:var(--space-1);padding:var(--space-1);background:var(--surface);border:1px solid var(--border);border-radius:var(--r-pill);box-shadow:var(--shadow-sm);max-width:100%}
.size-switch button{min-height:3rem;min-width:3.5rem;padding:0 var(--space-4);border:0;border-radius:var(--r-pill);background:transparent;font:var(--fw-bold) var(--step--1)/1.1 var(--font-body);color:var(--text-muted);cursor:pointer;transition:background var(--dur) var(--ease-out),color var(--dur)}
.size-switch button[aria-pressed="true"]{background:var(--surface-ink);color:var(--text-invert)}
.size-switch button small{display:block;font-weight:var(--fw-medium);font-size:.68rem;opacity:.85;line-height:1.1;white-space:nowrap}
@media (max-width:420px){.size-switch button{min-width:0;padding:0 var(--space-3)}}
.bento{display:grid;grid-template-columns:repeat(6,1fr);gap:var(--space-4)}
.svc{position:relative;border-radius:var(--r-lg);padding:var(--space-8);display:flex;flex-direction:column;gap:var(--space-3);min-height:15rem;text-decoration:none;isolation:isolate;overflow:hidden;transition:transform var(--dur) var(--ease-out),box-shadow var(--dur) var(--ease-out)}
.svc:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
.svc h3{font-size:var(--step-2)}
.svc p{color:var(--text-muted);font-size:var(--step--1);max-width:36ch}
.svc .meta{margin-top:auto;display:flex;justify-content:space-between;align-items:end;gap:var(--space-4);padding-top:var(--space-4)}
.price{font:var(--fw-black) var(--step-3)/1 var(--font-display);letter-spacing:var(--tracking-display);font-variant-numeric:tabular-nums}
.price small{font:var(--fw-semibold) var(--step--1) var(--font-body);color:var(--text-muted);letter-spacing:0;margin-right:var(--space-1)}
.go{width:3rem;height:3rem;border-radius:50%;background:var(--surface-ink);color:var(--text-invert);display:grid;place-items:center;flex:none;transition:transform var(--dur) var(--ease-spring),background var(--dur)}
.svc:hover .go{transform:rotate(-45deg);background:var(--brand);color:var(--on-brand)}
.go svg{width:1.25rem;height:1.25rem}
.svc .tag{align-self:flex-start;font-size:var(--step--2);font-weight:var(--fw-bold);letter-spacing:var(--tracking-caps);text-transform:uppercase;background:var(--surface-ink);color:var(--text-invert);padding:var(--space-1) var(--space-3);border-radius:var(--r-pill)}
.svc.hero-tile{grid-column:span 3;grid-row:span 2;background:var(--tile-lilac)}
.svc.hero-tile h3{font-size:var(--step-3)}
.svc.hero-tile::after{content:"";position:absolute;z-index:-1;right:-3.75rem;bottom:-3.75rem;width:16rem;height:16rem;border-radius:var(--r-blob);background:var(--accent);opacity:.35}
.svc.t2{grid-column:span 3;background:var(--tile-pista)}
.svc.t3{grid-column:span 3;background:var(--tile-apricot)}
.svc.t4,.svc.t5,.svc.t6{grid-column:span 2;background:var(--surface);border:1px solid var(--border)}
@media (max-width:919px){.bento{grid-template-columns:1fr}.svc{grid-column:auto!important;grid-row:auto!important;min-height:0;padding:var(--space-6)}.svc.hero-tile::after{width:9rem;height:9rem;right:-3.5rem;bottom:-3.5rem}}
.note{margin-top:var(--space-6);font-size:var(--step--1);color:var(--text-muted);max-width:var(--measure)}
.extras{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-4);margin-top:var(--space-6)}
.extra{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);padding:var(--space-5) var(--space-6)}
.extra h3{font-size:var(--step-1);margin-bottom:var(--space-2)}
.extra dl{margin:0;display:grid;gap:var(--space-1);font-size:var(--step--1)}
.extra dl div{display:flex;justify-content:space-between;gap:var(--space-3);border-bottom:1px dashed var(--border-strong);padding-block:var(--space-1)}
.extra dl div:last-child{border:0}
.extra dt{color:var(--text-muted)}
.extra dd{margin:0;font-weight:var(--fw-bold);font-variant-numeric:tabular-nums}
@media (max-width:919px){.extras{grid-template-columns:1fr}}

/* ---------- 8. Before / after ---------- */
.ba{position:relative;border-radius:var(--r-xl);overflow:hidden;aspect-ratio:16/10;box-shadow:var(--shadow-lg);--pos:50%;user-select:none;background:var(--milk-200)}
.ba img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ba .after{position:absolute;inset:0;clip-path:inset(0 0 0 var(--pos))}
.ba .label{position:absolute;top:var(--space-4);padding:var(--space-1) var(--space-4);border-radius:var(--r-pill);font-weight:var(--fw-bold);font-size:var(--step--1);background:var(--surface);box-shadow:var(--shadow-sm);z-index:2}
.ba .label.l-before{left:var(--space-4)}
.ba .label.l-after{right:var(--space-4);background:var(--surface-ink);color:var(--text-invert)}
.ba .handle{position:absolute;top:0;bottom:0;left:var(--pos);width:3px;background:var(--surface);transform:translateX(-50%);pointer-events:none;z-index:2}
.ba .knob{position:absolute;top:50%;left:50%;width:4rem;height:4rem;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle at 32% 30%,var(--milk-50) 0 14%,var(--coral-300) 15%,var(--brand) 70%);box-shadow:var(--shadow-bubble),var(--shadow-md);display:grid;place-items:center;color:var(--on-brand)}
.ba .knob svg{width:1.6rem;height:1.6rem}
.ba input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0;z-index:3}
.ba input:focus-visible ~ .handle .knob{outline:3px solid var(--focus);outline-offset:4px}
@media (max-width:560px){.ba{aspect-ratio:4/5;border-radius:var(--r-lg)}}
.ba-thumbs{display:flex;gap:var(--space-3);margin-top:var(--space-6);overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:var(--space-2)}
.ba-thumbs button{flex:none;scroll-snap-align:start;display:flex;align-items:center;gap:var(--space-3);min-height:3.5rem;padding:var(--space-2) var(--space-5) var(--space-2) var(--space-2);border-radius:var(--r-pill);border:1px solid var(--border);background:var(--surface);font:var(--fw-semibold) var(--step--1) var(--font-body);cursor:pointer}
.ba-thumbs button[aria-pressed="true"]{border-color:var(--text);box-shadow:var(--shadow-sm)}
.ba-thumbs img{width:2.5rem;height:2.5rem;border-radius:50%;object-fit:cover}
/* empty state */
.empty-ba{position:relative;border-radius:var(--r-xl);background:var(--surface);border:2px dashed var(--border-strong);padding:clamp(2rem,6vw,4.5rem) clamp(1.25rem,5vw,4rem);display:grid;grid-template-columns:auto 1fr;gap:clamp(1.5rem,4vw,3.5rem);align-items:center;overflow:hidden}
.empty-ba .orb{width:clamp(6rem,14vw,9rem);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 32% 30%,var(--milk-50) 0 14%,var(--coral-300) 15%,var(--brand) 70%);box-shadow:var(--shadow-bubble),var(--shadow-md);display:grid;place-items:center;color:var(--on-brand);animation:float 7s var(--ease-inout) infinite alternate}
.empty-ba .orb svg{width:42%;height:42%}
.empty-ba h3{font-size:var(--step-2);margin-bottom:var(--space-3)}
.empty-ba p{color:var(--text-muted);max-width:52ch}
.empty-ba .ctas{margin-top:var(--space-6)}
@media (max-width:640px){.empty-ba{grid-template-columns:1fr;text-align:left}}

/* photo strip */
.strip{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(11rem,1fr);gap:var(--space-3);overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:var(--space-3);margin-top:var(--space-8)}
.strip figure{margin:0;scroll-snap-align:start}
.strip img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:var(--r-md);box-shadow:var(--shadow-sm)}
.strip figcaption{font-size:var(--step--2);color:var(--text-muted);margin-top:var(--space-2)}
.src-note{font-size:var(--step--2);color:var(--text-muted);margin-top:var(--space-2)}

/* ---------- 9. Steps ---------- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-4);counter-reset:s;list-style:none;padding:0;margin:0}
.steps li{position:relative;padding:var(--space-8) var(--space-6) var(--space-6);border-top:2px solid var(--text)}
.steps li::before{counter-increment:s;content:counter(s,decimal-leading-zero);font:var(--fw-black) var(--step-3)/1 var(--font-display);color:var(--brand-text);display:block;margin-bottom:var(--space-4)}
.steps h3{font-size:var(--step-1);margin-bottom:var(--space-2)}
.steps p{color:var(--text-muted);font-size:var(--step--1)}
@media (max-width:919px){.steps{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.steps{grid-template-columns:1fr}.steps li{padding-inline:0}}

/* ---------- 10. About ---------- */
.about .wrap{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(2rem,6vw,6rem);align-items:center}
.portrait{aspect-ratio:4/5;border-radius:var(--r-xl) var(--r-xl) var(--r-xl) 10rem;overflow:hidden;box-shadow:var(--shadow-md);background:var(--tile-lilac)}
.portrait img{width:100%;height:100%;object-fit:cover}
.about h2{font-size:var(--step-4);margin-top:var(--space-3)}
blockquote{margin:var(--space-6) 0;font:var(--fw-regular) var(--step-3)/1.15 var(--font-accent);font-style:italic;letter-spacing:-.01em;max-width:24ch}
blockquote::before{content:"\201E";color:var(--brand-text)}
blockquote::after{content:"\201C";color:var(--brand-text)}
.quote-src{font-size:var(--step--1);color:var(--text-muted);margin-top:calc(-1*var(--space-4));margin-bottom:var(--space-6)}
.about .body{color:var(--text-muted);max-width:var(--measure)}
.facts{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-4);margin-top:var(--space-8)}
.facts div{padding:var(--space-5);background:var(--surface);border-radius:var(--r-md);border:1px solid var(--border)}
.facts b{display:block;font:var(--fw-black) var(--step-1)/1.1 var(--font-display);margin-bottom:var(--space-2);letter-spacing:-.02em}
.facts span{font-size:var(--step--1);color:var(--text-muted)}
@media (max-width:919px){.about .wrap{grid-template-columns:1fr}.portrait{max-width:26rem}}
@media (max-width:560px){.facts{grid-template-columns:1fr}}

/* ---------- 11. Reviews ---------- */
.rating{display:inline-flex;align-items:center;gap:var(--space-4);background:var(--surface);border:1px solid var(--border);border-radius:var(--r-pill);padding:var(--space-2) var(--space-5) var(--space-2) var(--space-2);text-decoration:none;box-shadow:var(--shadow-sm)}
.rating .score{width:3.25rem;height:3.25rem;border-radius:50%;background:var(--surface-ink);color:var(--text-invert);display:grid;place-items:center;font:var(--fw-black) var(--step-1)/1 var(--font-display)}
.rating small{display:block;color:var(--text-muted);font-size:var(--step--2)}
.rating b{font-size:var(--step--1)}
.reviews{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(17.5rem,1fr);gap:var(--space-4);overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:var(--space-4)}
.rev{scroll-snap-align:start;background:var(--surface);border-radius:var(--r-lg);padding:var(--space-8);border:1px solid var(--border);display:flex;flex-direction:column;gap:var(--space-4);margin:0}
.rev:nth-child(2){background:var(--tile-apricot);border-color:transparent}
.rev:nth-child(3){background:var(--tile-pista);border-color:transparent}
.stars{display:flex;gap:2px;color:var(--brand-text)}
.stars svg{width:1.125rem;height:1.125rem}
.rev blockquote{margin:0;font:inherit;max-width:none;letter-spacing:0}
.rev blockquote::before,.rev blockquote::after{content:none}
.rev p{font-size:var(--step-0);line-height:1.5}
.rev footer{margin-top:auto;font-size:var(--step--1);color:var(--text-muted)}
.rev footer b{color:var(--text)}

/* ---------- 12. Contact ---------- */
.contact .wrap{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4)}
.card{background:var(--surface);border-radius:var(--r-lg);padding:var(--space-8);border:1px solid var(--border)}
.card h2,.card h3{font-size:var(--step-2);margin-bottom:var(--space-6)}
.rows{display:grid;gap:var(--space-5)}
.row{display:flex;gap:var(--space-4);align-items:flex-start}
.row .ic{width:2.75rem;height:2.75rem;border-radius:50%;background:var(--accent-soft);color:var(--accent-text);display:grid;place-items:center;flex:none}
.row .ic svg{width:1.25rem;height:1.25rem}
.row small{display:block;color:var(--text-muted);font-size:var(--step--2);text-transform:uppercase;letter-spacing:var(--tracking-caps);font-weight:var(--fw-bold)}
.row a{font-weight:var(--fw-semibold);text-decoration-color:var(--brand);text-underline-offset:3px}
.map{border-radius:var(--r-lg);background:var(--tile-pista);position:relative;overflow:hidden;min-height:22.5rem;display:grid;place-items:center;text-align:center;padding:var(--space-8)}
.map::before{content:"";position:absolute;inset:0;background:linear-gradient(var(--border) 1px,transparent 1px) 0 0/2.5rem 2.5rem,linear-gradient(90deg,var(--border) 1px,transparent 1px) 0 0/2.5rem 2.5rem}
.map > *{position:relative}
.map .pin{width:3.5rem;height:3.5rem;margin:0 auto var(--space-4);border-radius:50% 50% 50% 0;transform:rotate(-45deg);background:var(--brand);box-shadow:var(--shadow-md)}
.map p{font-size:var(--step--1);color:var(--text-muted);max-width:36ch;margin:var(--space-2) auto var(--space-4)}
.map iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.map.loaded{padding:0}
.map.loaded::before{display:none}
.map .map-links{display:flex;gap:var(--space-3);justify-content:center;flex-wrap:wrap}
@media (max-width:919px){.contact .wrap{grid-template-columns:1fr}}

/* ---------- 13. Final CTA ---------- */
.final{background:var(--surface-ink);color:var(--text-invert);border-radius:var(--r-xl);padding:clamp(3rem,8vw,7rem) clamp(1.5rem,6vw,6rem);position:relative;overflow:hidden;text-align:center}
.final h2{color:var(--text-invert);font-size:var(--step-5)}
.final p{color:var(--text-invert-muted);margin:var(--space-6) auto var(--space-8);max-width:40ch}
.final .btn-brand{border-color:var(--text-invert);box-shadow:inset 0 2px 0 rgb(255 255 255 / .35),0 6px 0 var(--milk-300)}
.final .bubble.b1{top:12%;left:8%;right:auto}
.final .bubble.b2{bottom:14%;right:10%;left:auto;width:3.5rem;height:3.5rem}

/* ---------- 14. Footer ---------- */
.ftr{padding-block:var(--space-16) var(--space-24);font-size:var(--step--1);border-top:1px solid var(--border)}
.ftr .grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:var(--space-8)}
.ftr .flogo{height:2.125rem;width:auto;margin-bottom:var(--space-4)}
.ftr h2{font:var(--fw-bold) var(--step--1) var(--font-body);letter-spacing:var(--tracking-caps);text-transform:uppercase;margin:0 0 var(--space-4);color:var(--text-muted)}
.ftr ul{list-style:none;margin:0;padding:0;display:grid;gap:var(--space-1)}
.ftr a{text-decoration:none;display:inline-block;padding:var(--space-1) 0}
.ftr a:hover{text-decoration:underline;text-decoration-color:var(--brand)}
.ftr .claim{max-width:32ch}
.ftr address{font-style:normal;color:var(--text-muted);margin-top:var(--space-3)}
.ftr .base{margin-top:var(--space-12);padding-top:var(--space-6);border-top:1px solid var(--border);display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--space-4);color:var(--text-muted)}
@media (max-width:919px){.ftr .grid{grid-template-columns:1fr 1fr}.ftr .grid > :first-child{grid-column:1/-1}}

/* ---------- 15. Mobile dock ---------- */
.dock{display:none}
@media (max-width:919px){
  .dock{display:grid;grid-template-columns:1fr 1fr 1.6fr;gap:var(--space-2);position:fixed;z-index:var(--z-sticky);left:var(--space-3);right:var(--space-3);bottom:max(var(--space-3),env(safe-area-inset-bottom));padding:var(--space-2);background:color-mix(in srgb,var(--surface-ink) 92%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-radius:var(--r-pill);box-shadow:var(--shadow-lg);transition:transform var(--dur) var(--ease-out)}
  .dock.away{transform:translateY(calc(100% + 2rem))}
  .dock a{min-height:3rem;border-radius:var(--r-pill);display:flex;align-items:center;justify-content:center;gap:var(--space-2);text-decoration:none;color:var(--text-invert);font-weight:var(--fw-bold);font-size:var(--step--1)}
  .dock a svg{width:1.125rem;height:1.125rem}
  .dock a.main{background:var(--brand);color:var(--on-brand)}
  body.has-dock{padding-bottom:var(--space-20)}
}

/* ---------- 16. Booking widget ---------- */
.booking .wrap{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(2rem,5vw,5rem);align-items:start}
.booking-copy h2{font-size:var(--step-4);margin-top:var(--space-3)}
.booking-copy .lead{color:var(--text-muted);margin-top:var(--space-5);max-width:40ch}
.booking-copy ul{list-style:none;padding:0;margin:var(--space-8) 0 0;display:grid;gap:var(--space-4)}
.booking-copy li{display:flex;gap:var(--space-4);align-items:flex-start}
.booking-copy li .n{width:2.25rem;height:2.25rem;border-radius:50%;background:var(--surface-ink);color:var(--text-invert);display:grid;place-items:center;font:var(--fw-black) var(--step--1) var(--font-display);flex:none}
.booking-copy li b{display:block}
.booking-copy li span{color:var(--text-muted);font-size:var(--step--1)}
@media (max-width:919px){.booking .wrap{grid-template-columns:1fr}}
.app{background:var(--bg);border-radius:var(--r-xl);box-shadow:var(--shadow-lg);border:1px solid var(--border);overflow:clip;max-width:32rem;width:100%;justify-self:center;display:flex;flex-direction:column}
.app-top{padding:var(--space-4) var(--space-5);background:var(--bg-raised);border-bottom:1px solid var(--border)}
.app-top-row{display:flex;align-items:center;gap:var(--space-3)}
.icon-btn{width:2.75rem;height:2.75rem;border-radius:50%;border:1px solid var(--border-strong);background:var(--surface);display:grid;place-items:center;cursor:pointer;color:var(--text);flex:none;transition:transform var(--dur-fast) var(--ease-out)}
.icon-btn:active{transform:scale(.94)}
.icon-btn[disabled]{visibility:hidden}
.icon-btn svg{width:1.25rem;height:1.25rem}
.app-title{flex:1;text-align:center;font:var(--fw-bold) var(--step--1) var(--font-body);letter-spacing:var(--tracking-caps);text-transform:uppercase;color:var(--text-muted)}
.stepcount{font-size:var(--step--1);font-weight:var(--fw-semibold);color:var(--text-muted);min-width:2.75rem;text-align:right;font-variant-numeric:tabular-nums}
.bk-track{position:relative;height:6px;border-radius:var(--r-pill);background:var(--milk-300);margin-top:var(--space-4)}
.bk-track .fill{position:absolute;inset:0 auto 0 0;border-radius:inherit;background:var(--ink-900);width:var(--p,33.34%);transition:width var(--dur-slow) var(--ease-out)}
.bk-track .bub{position:absolute;top:50%;left:var(--p,33.34%);width:1.25rem;height:1.25rem;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle at 32% 30%,var(--milk-50) 0 16%,var(--coral-300) 17%,var(--brand) 72%);box-shadow:var(--shadow-bubble),var(--shadow-sm);transition:left var(--dur-slow) var(--ease-spring)}
.app-main{padding:var(--space-5)}
.step{display:none}
.step.on{display:block;view-transition-name:bkstep}
.step h3{font-size:var(--step-3);margin:var(--space-1) 0 var(--space-2)}
.step h3:focus{outline:none}
.hint{color:var(--text-muted);font-size:var(--step--1);margin:0 0 var(--space-5)}
fieldset{border:0;margin:0;padding:0;min-width:0}
legend{padding:0}
.label{font-size:var(--step--1);font-weight:var(--fw-bold);letter-spacing:var(--tracking-caps);text-transform:uppercase;color:var(--text-muted);margin:var(--space-5) 0 var(--space-3);display:block}
.seg{display:grid;grid-template-columns:repeat(var(--n,4),1fr);gap:var(--space-1);padding:var(--space-1);background:var(--surface);border:1px solid var(--border);border-radius:var(--r-pill)}
.seg label{position:relative;min-height:3.25rem;border-radius:var(--r-pill);display:grid;place-items:center;align-content:center;text-align:center;cursor:pointer;font-weight:var(--fw-bold);font-size:var(--step--1);line-height:1.1;color:var(--text-muted);transition:background var(--dur) var(--ease-out),color var(--dur);padding:0 var(--space-1)}
.seg small{display:block;font-weight:var(--fw-medium);font-size:.66rem;white-space:nowrap}
.seg input{position:absolute;opacity:0;pointer-events:none}
.seg label:has(input:checked){background:var(--surface-ink);color:var(--text-invert)}
.seg label:has(input:focus-visible){outline:3px solid var(--focus);outline-offset:2px}
.svc-list{display:grid;gap:var(--space-3)}
.opt{position:relative;display:flex;gap:var(--space-4);align-items:center;padding:var(--space-4) var(--space-4);min-height:4.25rem;background:var(--surface);border:2px solid var(--border);border-radius:var(--r-md);cursor:pointer;transition:border-color var(--dur-fast),transform var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast)}
.opt:active{transform:scale(.985)}
.opt input{position:absolute;opacity:0;pointer-events:none}
.opt .dot{width:1.5rem;height:1.5rem;border-radius:50%;border:2px solid var(--border-strong);flex:none;display:grid;place-items:center;transition:all var(--dur) var(--ease-spring)}
.opt .dot::after{content:"";width:.75rem;height:.75rem;border-radius:50%;background:var(--brand);transform:scale(0);transition:transform var(--dur) var(--ease-spring)}
.opt:has(input:checked){border-color:var(--text);box-shadow:var(--shadow-md)}
.opt:has(input:checked) .dot{border-color:var(--text)}
.opt:has(input:checked) .dot::after{transform:scale(1)}
.opt:has(input:focus-visible){outline:3px solid var(--focus);outline-offset:2px}
.opt .t{flex:1;min-width:0}
.opt b{display:block;font:var(--fw-bold) var(--step-0)/1.2 var(--font-display);letter-spacing:-.02em}
.opt .d{display:block;font-size:var(--step--2);color:var(--text-muted);margin-top:2px}
.opt .pr{font:var(--fw-black) var(--step-1)/1 var(--font-display);white-space:nowrap;font-variant-numeric:tabular-nums}
.opt .pr small{font:var(--fw-semibold) .72rem var(--font-body);color:var(--text-muted);margin-right:2px}
.check{display:flex;gap:var(--space-3);align-items:flex-start;font-size:var(--step--1);margin:var(--space-3) 0 var(--space-4);cursor:pointer}
.check input{width:1.5rem;height:1.5rem;accent-color:var(--ink-900);flex:none;margin:0}
.check a{color:var(--accent-text)}
.legend{display:flex;gap:var(--space-4);font-size:.75rem;color:var(--text-muted);margin-bottom:var(--space-2);flex-wrap:wrap}
.legend i{display:inline-block;width:.5rem;height:.5rem;border-radius:50%;margin-right:4px;vertical-align:middle}
.days{display:flex;gap:var(--space-2);overflow-x:auto;scroll-snap-type:x mandatory;padding:var(--space-1) var(--space-5) var(--space-3);margin-inline:calc(-1*var(--space-5));scrollbar-width:none}
.days::-webkit-scrollbar{display:none}
.day{position:relative;flex:none;scroll-snap-align:start;width:4rem;min-height:5.25rem;border-radius:var(--r-md);background:var(--surface);border:2px solid var(--border);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;cursor:pointer;transition:transform var(--dur-fast) var(--ease-out),background var(--dur),border-color var(--dur)}
.day input{position:absolute;opacity:0;pointer-events:none}
.day .wd{font-size:.72rem;font-weight:var(--fw-bold);text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted)}
.day .n{font:var(--fw-black) var(--step-2)/1 var(--font-display)}
.day .av{width:6px;height:6px;border-radius:50%;background:var(--success)}
.day.few .av{background:var(--warning)}
.day.full{opacity:.45;cursor:not-allowed}
.day.full .av{background:var(--ink-300)}
.day.full .n{text-decoration:line-through}
.day.loading .av{background:var(--milk-300)}
.day:has(input:checked){background:var(--surface-ink);border-color:var(--surface-ink);color:var(--text-invert)}
.day:has(input:checked) .wd{color:var(--text-invert-muted)}
.day:has(input:focus-visible){outline:3px solid var(--focus);outline-offset:2px}
.month{display:flex;justify-content:space-between;align-items:center;margin:var(--space-2) 0 var(--space-3)}
.month b{font:var(--fw-bold) var(--step-1) var(--font-display)}
.slot-group{margin-top:var(--space-4)}
.slot-group h4{font:var(--fw-semibold) var(--step--1) var(--font-body);color:var(--text-muted);margin-bottom:var(--space-2);display:flex;align-items:center;gap:var(--space-2);letter-spacing:0}
.slot-group h4 svg{width:1rem;height:1rem}
.slots{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-2)}
.slot{position:relative;min-height:3.25rem;border-radius:var(--r-sm);display:grid;place-items:center;font-weight:var(--fw-bold);font-variant-numeric:tabular-nums;cursor:pointer;background:var(--success-soft);color:var(--success);border:2px solid transparent;transition:transform var(--dur-fast) var(--ease-spring),background var(--dur),color var(--dur)}
.slot input{position:absolute;opacity:0;pointer-events:none}
.slot:hover{transform:translateY(-2px)}
.slot:has(input:checked){background:var(--brand);color:var(--on-brand);border-color:var(--text);transform:scale(1.04)}
.slot:has(input:focus-visible){outline:3px solid var(--focus);outline-offset:2px}
.infobox{margin-top:var(--space-5);padding:var(--space-4);border-radius:var(--r-md);background:var(--accent-soft);font-size:var(--step--1);display:flex;gap:var(--space-3);align-items:flex-start}
.infobox svg{width:1.375rem;height:1.375rem;flex:none;color:var(--accent-text)}
.infobox a{color:var(--accent-text);font-weight:var(--fw-bold)}
.field{display:grid;gap:var(--space-1);margin-bottom:var(--space-4)}
.field label{font-weight:var(--fw-semibold);font-size:var(--step--1)}
.field label .opt-l{font-weight:var(--fw-regular);color:var(--text-muted)}
.field input,.field textarea,.field select{font:inherit;min-height:3.25rem;padding:var(--space-3) var(--space-4);border-radius:var(--r-sm);border:2px solid var(--border-strong);background:var(--surface);color:var(--text);transition:border-color var(--dur-fast),box-shadow var(--dur-fast);width:100%;min-width:0}
.field textarea{min-height:6rem;resize:vertical}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--focus);box-shadow:0 0 0 4px var(--accent-soft)}
.field .help{font-size:.8rem;color:var(--text-muted)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3)}
@media (max-width:420px){.two{grid-template-columns:1fr}}
.addpet{background:none;border:0;color:var(--accent-text);font-weight:var(--fw-bold);cursor:pointer;padding:0 0 var(--space-4);min-height:2.75rem}
.login-hint{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-4);border-radius:var(--r-md);background:var(--surface);border:1px solid var(--border);font-size:var(--step--1);margin-bottom:var(--space-5)}
.login-hint svg{width:1.375rem;height:1.375rem;flex:none}
.login-hint a{margin-left:auto;font-weight:var(--fw-bold);color:var(--accent-text);white-space:nowrap}
.err{color:var(--error);font-size:var(--step--1);font-weight:var(--fw-semibold);min-height:1.25rem;margin-top:var(--space-2)}
.done{text-align:center;padding-top:var(--space-4)}
.burst{position:relative;width:8.75rem;height:8.75rem;margin:0 auto var(--space-6)}
.burst .core{position:absolute;inset:1.25rem;border-radius:50%;background:radial-gradient(circle at 32% 30%,var(--milk-50) 0 12%,var(--coral-300) 13%,var(--brand) 70%);box-shadow:var(--shadow-bubble),var(--shadow-md);display:grid;place-items:center;animation:pop .7s var(--ease-spring) both}
.burst .core svg{width:2.75rem;height:2.75rem;color:var(--ink-900)}
.burst i{position:absolute;top:50%;left:50%;width:.875rem;height:.875rem;border-radius:50%;background:var(--accent);animation:fly .9s var(--ease-out) both .15s}
.burst i:nth-child(2){--x:-62px;--y:-40px}.burst i:nth-child(3){--x:64px;--y:-30px;background:var(--brand)}.burst i:nth-child(4){--x:-50px;--y:56px;background:var(--success)}.burst i:nth-child(5){--x:58px;--y:52px}
@keyframes pop{from{transform:scale(.3);opacity:0}}
@keyframes fly{from{transform:translate(-50%,-50%) scale(.2)}to{transform:translate(calc(-50% + var(--x)),calc(-50% + var(--y))) scale(1);opacity:0}}
.ticket{margin:var(--space-6) 0;text-align:left;background:var(--surface);border-radius:var(--r-lg);border:1px solid var(--border);overflow:hidden}
.ticket div{display:flex;justify-content:space-between;gap:var(--space-4);padding:var(--space-4) var(--space-5);border-bottom:1px dashed var(--border-strong);font-size:var(--step--1)}
.ticket div:last-child{border:0}
.ticket dt{color:var(--text-muted)}
.ticket dd{margin:0;font-weight:var(--fw-bold);text-align:right}
.actions{display:grid;gap:var(--space-3)}
.bar{padding:var(--space-3);border-top:1px solid var(--border);background:var(--bg-raised);position:sticky;bottom:0}
.bar-in{background:var(--surface-ink);color:var(--text-invert);border-radius:var(--r-lg);padding:var(--space-3) var(--space-3) var(--space-3) var(--space-5);display:flex;align-items:center;gap:var(--space-3)}
.sum{flex:1;min-width:0;line-height:1.25}
.sum small{display:block;color:var(--text-invert-muted);font-size:.78rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sum b{font:var(--fw-black) var(--step-1) var(--font-display)}
.bar .btn-brand{transform:none;box-shadow:none;border-color:transparent;min-height:3.25rem;flex:none}
.bar .btn-brand:active{transform:scale(.96)}
::view-transition-old(bkstep){animation:bkout .22s var(--ease-inout) both}
::view-transition-new(bkstep){animation:bkin .38s var(--ease-out) both}
@keyframes bkout{to{opacity:0;transform:translateX(-24px)}}
@keyframes bkin{from{opacity:0;transform:translateX(32px)}}

/* ---------- 17. Content pages: tables, prose, faq ---------- */
.ptable-wrap{overflow-x:auto;border-radius:var(--r-lg);border:1px solid var(--border);background:var(--surface)}
.ptable{width:100%;border-collapse:collapse;font-size:var(--step--1);min-width:34rem}
.ptable caption{text-align:left;padding:var(--space-5) var(--space-6) 0;font:var(--fw-black) var(--step-2)/1.1 var(--font-display);letter-spacing:var(--tracking-display)}
.ptable th,.ptable td{padding:var(--space-4) var(--space-5);text-align:right;border-bottom:1px dashed var(--border-strong);font-variant-numeric:tabular-nums}
.ptable th:first-child,.ptable td:first-child{text-align:left}
.ptable thead th{font-weight:var(--fw-bold);color:var(--text-muted);font-size:var(--step--2);letter-spacing:var(--tracking-caps);text-transform:uppercase}
.ptable thead th span{display:block;text-transform:none;letter-spacing:0;font-weight:var(--fw-semibold)}
.ptable tbody th{font:var(--fw-bold) var(--step-0) var(--font-display);letter-spacing:-.01em}
.ptable tbody th small{display:block;font:var(--fw-regular) var(--step--2) var(--font-body);color:var(--text-muted);margin-top:2px}
.ptable tbody tr:last-child th,.ptable tbody tr:last-child td{border-bottom:0}
.ptable td{font-weight:var(--fw-bold)}
.ptable tr.hl{background:var(--tile-lilac)}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4)}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-4)}
@media (max-width:919px){.grid-2,.grid-3{grid-template-columns:1fr}}
.tile{border-radius:var(--r-lg);padding:var(--space-8);background:var(--surface);border:1px solid var(--border)}
.tile.t-lilac{background:var(--tile-lilac);border-color:transparent}
.tile.t-pista{background:var(--tile-pista);border-color:transparent}
.tile.t-apricot{background:var(--tile-apricot);border-color:transparent}
.tile h2,.tile h3{font-size:var(--step-2);margin-bottom:var(--space-3)}
.tile p{color:var(--text-muted)}
.tile .price{margin-top:var(--space-4)}
.faq{display:grid;gap:var(--space-3)}
.faq details{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);padding:0 var(--space-6)}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:var(--space-4);min-height:4rem;font:var(--fw-bold) var(--step-0)/1.3 var(--font-display);letter-spacing:-.01em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";width:1.75rem;height:1.75rem;border-radius:50%;flex:none;background:var(--surface-ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FBF7F1' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M12 6v12M6 12h12'/%3E%3C/svg%3E") center/60% no-repeat;transition:transform var(--dur) var(--ease-out)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding-bottom:var(--space-5);color:var(--text-muted);max-width:var(--measure)}
.prose{max-width:var(--measure)}
.prose h2{font-size:var(--step-2);margin:var(--space-12) 0 var(--space-4)}
.prose h3{font-size:var(--step-1);margin:var(--space-8) 0 var(--space-3)}
.prose p,.prose ul,.prose ol{margin:0 0 var(--space-4)}
.prose ul,.prose ol{padding-left:var(--space-6)}
.prose li{margin-bottom:var(--space-2)}
.prose a{color:var(--accent-text);text-underline-offset:3px;word-break:break-word}
.prose address{font-style:normal}
.prose .stand{margin-top:var(--space-12);padding-top:var(--space-6);border-top:1px solid var(--border);color:var(--text-muted);font-size:var(--step--1)}
.legal-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:var(--space-8);margin-bottom:var(--space-8)}
.toc{background:var(--bg-sunken);border-radius:var(--r-md);padding:var(--space-5) var(--space-6);margin-bottom:var(--space-8);font-size:var(--step--1)}
.toc ol{margin:var(--space-2) 0 0;padding-left:var(--space-6)}

/* gallery page */
.gal-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,22rem),1fr));gap:var(--space-6)}
.gal-grid .ba{aspect-ratio:4/5;border-radius:var(--r-lg)}
.photo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,15rem),1fr));gap:var(--space-4)}
.photo-grid figure{margin:0}
.photo-grid img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:var(--r-lg);box-shadow:var(--shadow-sm)}
.photo-grid figcaption{font-size:var(--step--1);color:var(--text-muted);margin-top:var(--space-2)}

/* ---------- 18. Reveal (.rv) ---------- */
.rv{opacity:0;transform:translateY(24px);transition:opacity var(--dur-slow) var(--ease-out),transform var(--dur-slow) var(--ease-out)}
.rv.in{opacity:1;transform:none}
.no-js .rv{opacity:1;transform:none}
.rv-d1{transition-delay:calc(var(--stagger)*1)}.rv-d2{transition-delay:calc(var(--stagger)*2)}.rv-d3{transition-delay:calc(var(--stagger)*3)}.rv-d4{transition-delay:calc(var(--stagger)*4)}
::view-transition-group(*){animation-duration:.35s;animation-timing-function:var(--ease-out)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .rv{opacity:1;transform:none}
  .hero h1 .line > span{transform:none}
  .marquee .track{animation:none}
}

/* ---------- 19. Small helpers ---------- */
.seg--3{--n:3}
.seg--2{--n:2}
.lg-free{background:var(--success)}
.lg-few{background:var(--warning)}
.lg-full{background:var(--ink-300)}
.mt-6{margin-top:var(--space-6)}
.mt-8{margin-top:var(--space-8)}
.mt-12{margin-top:var(--space-12)}
@media (max-width:919px){
  .phero .bubble.b1{top:auto;bottom:8%;right:6%;width:3rem;height:3rem}
  .phero .bubble.b2{display:none}
}
@media (max-width:560px){
  .ptable{min-width:0;font-size:.8rem}
  .ptable th,.ptable td{padding:var(--space-3) var(--space-2)}
  .ptable th:first-child,.ptable td:first-child{padding-left:var(--space-4)}
  .ptable th:last-child,.ptable td:last-child{padding-right:var(--space-4)}
  .ptable tbody th{font-size:.85rem}
  .ptable tbody th small{display:none}
}


/* ---------- 20. App pages (Kundenkonto, Fragebogen, neuer Termin) ---------- */
.apphdr{position:sticky;top:0;z-index:var(--z-header);background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--border)}
.apphdr .wrap{display:flex;align-items:center;gap:var(--space-3);min-height:4rem}
.apphdr .logo img{height:1.625rem;width:auto}
.apphdr .sp{flex:1}
.apphdr .btn{min-height:2.75rem;padding:0 var(--space-4);font-size:var(--step--1)}
.apphdr .btn-brand{transform:translateY(-2px);box-shadow:inset 0 2px 0 rgb(255 255 255 / .35),0 3px 0 var(--ink-900)}
.apphdr .linkbtn{background:none;border:0;cursor:pointer;font-weight:var(--fw-semibold);font-size:var(--step--1);color:var(--text-muted);min-height:2.75rem;padding:0 var(--space-2)}
.appwrap{width:min(100% - 2*var(--gutter),46rem);margin-inline:auto;padding-block:var(--space-8) var(--space-16)}
.appwrap--sm{width:min(100% - 2*var(--gutter),28rem)}
.appwrap h1{font-size:var(--step-3)}
.appwrap .sub{color:var(--text-muted);margin:var(--space-2) 0 var(--space-6)}
.panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:var(--space-6);margin-bottom:var(--space-4);box-shadow:var(--shadow-xs)}
.panel h2{font-size:var(--step-1);margin-bottom:var(--space-4)}
.panel .sub{margin:0 0 var(--space-4);font-size:var(--step--1)}
.msg{color:var(--error);font-size:var(--step--1);font-weight:var(--fw-semibold);min-height:1.25rem;margin-top:var(--space-2)}
.msg.ok{color:var(--success)}
.choice{display:flex;flex-wrap:wrap;gap:var(--space-2)}
.choice button{min-height:2.75rem;padding:0 var(--space-4);border-radius:var(--r-pill);border:2px solid var(--border-strong);background:var(--surface);font-weight:var(--fw-semibold);font-size:var(--step--1);cursor:pointer;transition:background var(--dur-fast),border-color var(--dur-fast)}
.choice button:hover{border-color:var(--text)}
.choice button.on{background:var(--surface-ink);border-color:var(--surface-ink);color:var(--text-invert)}
.steplbl{font-size:var(--step--2);font-weight:var(--fw-bold);letter-spacing:var(--tracking-caps);text-transform:uppercase;color:var(--text-muted);margin:var(--space-6) 0 var(--space-3)}
.steplbl:first-child{margin-top:0}
.daycard{border:1px solid var(--border);border-radius:var(--r-md);padding:var(--space-4);margin-bottom:var(--space-3);background:var(--bg-raised)}
.daycard .dn{font-weight:var(--fw-bold);margin-bottom:var(--space-3)}
.daycard .times{display:flex;flex-wrap:wrap;gap:var(--space-2)}
.daycard .times button{min-height:2.75rem;padding:0 var(--space-4);border-radius:var(--r-sm);border:2px solid transparent;background:var(--success-soft);color:var(--success);font-weight:var(--fw-bold);font-variant-numeric:tabular-nums;cursor:pointer}
.daycard .times button:hover{border-color:var(--success)}
.daycard .times button:disabled{opacity:.5;cursor:wait}
.tabs{display:flex;gap:var(--space-1);padding:var(--space-1);background:var(--surface);border:1px solid var(--border);border-radius:var(--r-pill);margin-bottom:var(--space-5);width:max-content;max-width:100%}
.tabs button{min-height:2.75rem;padding:0 var(--space-5);border:0;border-radius:var(--r-pill);background:transparent;font-weight:var(--fw-bold);font-size:var(--step--1);color:var(--text-muted);cursor:pointer}
.tabs button[aria-selected="true"]{background:var(--surface-ink);color:var(--text-invert)}
.petcard{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden;margin-bottom:var(--space-4)}
.petcard .strip-c{height:6px}
.petcard .ph{display:flex;gap:var(--space-4);padding:var(--space-5)}
.petcard .av{width:4.5rem;height:4.5rem;border-radius:var(--r-blob);background:var(--tile-lilac);display:grid;place-items:center;font:var(--fw-black) var(--step-2) var(--font-display);overflow:hidden;flex:none}
.petcard .av img{width:100%;height:100%;object-fit:cover;cursor:zoom-in}
.petcard .pn{font:var(--fw-black) var(--step-1)/1.1 var(--font-display);display:flex;gap:var(--space-2);align-items:center;flex-wrap:wrap}
.petcard .pb{color:var(--text-muted);font-size:var(--step--1)}
.pill{font-size:var(--step--2);font-weight:var(--fw-bold);padding:2px var(--space-2);border-radius:var(--r-pill);background:var(--tile-pista);color:var(--success);text-transform:uppercase;letter-spacing:.04em;font-family:var(--font-body)}
.pill.cat{background:var(--tile-lilac);color:var(--accent-text)}
.badges{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-top:var(--space-2)}
.badge{display:inline-flex;align-items:center;gap:var(--space-1);font-size:var(--step--2);font-weight:var(--fw-bold);padding:2px var(--space-2);border-radius:var(--r-pill);background:var(--bg-sunken)}
.badge .dot{width:.5rem;height:.5rem;border-radius:50%}
.badge.warn{background:var(--apricot-100);color:var(--warning)}
.petcard .pbody{padding:0 var(--space-5) var(--space-5)}
.kv-row{display:flex;justify-content:space-between;gap:var(--space-4);padding:var(--space-3) 0;border-top:1px dashed var(--border-strong);font-size:var(--step--1)}
.kv-row span{color:var(--text-muted)}
.sec-t{font-size:var(--step--2);font-weight:var(--fw-bold);letter-spacing:var(--tracking-caps);text-transform:uppercase;color:var(--text-muted);margin:var(--space-5) 0 var(--space-3)}
.visit{border:1px solid var(--border);border-radius:var(--r-md);padding:var(--space-4);margin-bottom:var(--space-3);background:var(--bg-raised)}
.visit .vh{display:flex;justify-content:space-between;gap:var(--space-3);font-weight:var(--fw-bold);font-size:var(--step--1);flex-wrap:wrap}
.visit .pairs{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3);margin-top:var(--space-3)}
.visit .pairs .l{font-size:var(--step--2);font-weight:var(--fw-bold);text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted);margin-bottom:var(--space-1)}
.visit .pairs img,.visit .pairs .ph0{width:100%;aspect-ratio:1;object-fit:cover;border-radius:var(--r-sm);background:var(--bg-sunken);cursor:zoom-in;display:block}
.appt-row{display:flex;justify-content:space-between;gap:var(--space-4);padding:var(--space-4) 0;border-top:1px dashed var(--border-strong)}
.appt-row:first-child{border-top:0}
.appt-row .w{font-weight:var(--fw-bold);text-align:right;font-variant-numeric:tabular-nums}
.empty-s{text-align:center;padding:var(--space-10) var(--space-6);color:var(--text-muted)}
.orb-s{width:4rem;height:4rem;margin:0 auto var(--space-4);border-radius:50%;background:radial-gradient(circle at 32% 30%,var(--milk-50) 0 14%,var(--coral-300) 15%,var(--brand) 70%);box-shadow:var(--shadow-bubble)}
.empty-s .btn{margin-top:var(--space-5)}
.lb{position:fixed;inset:0;background:color-mix(in srgb,var(--ink-900) 92%,transparent);z-index:var(--z-modal);display:none;align-items:center;justify-content:center;padding:var(--space-6)}
.lb.open{display:flex}
.lb img{max-width:92vw;max-height:84vh;border-radius:var(--r-sm)}
.lb button{position:absolute;width:3rem;height:3rem;border-radius:50%;border:0;background:color-mix(in srgb,var(--milk-50) 16%,transparent);color:var(--text-invert);font-size:1.4rem;cursor:pointer}
.lb .x{top:var(--space-5);right:var(--space-5)}
.lb .prev{left:var(--space-3);top:50%}
.lb .next{right:var(--space-3);top:50%}
.lb .cap{position:absolute;bottom:var(--space-5);left:0;right:0;text-align:center;color:var(--text-invert-muted);font-size:var(--step--1)}
.appfoot{text-align:center;color:var(--text-muted);font-size:var(--step--1);padding:var(--space-8) var(--gutter) var(--space-12)}
.appfoot a{color:var(--text-muted)}
.state{text-align:center;padding:var(--space-16) var(--gutter)}
.state h2{font-size:var(--step-2);margin-bottom:var(--space-3)}
.state p{color:var(--text-muted);max-width:40ch;margin-inline:auto}
.big-choice{display:grid;gap:var(--space-3)}
.check.req b::after{content:" *";color:var(--brand-text)}
.check .t{display:grid;gap:2px}
.check .t span{color:var(--text-muted)}
.form-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:var(--space-6);margin-bottom:var(--space-4)}
.form-card h2{font-size:var(--step-1);margin-bottom:var(--space-5)}
.fseg{display:inline-flex;gap:var(--space-1);padding:var(--space-1);background:var(--bg-sunken);border-radius:var(--r-pill)}
.fseg button{min-height:2.75rem;padding:0 var(--space-5);border:0;border-radius:var(--r-pill);background:transparent;font-weight:var(--fw-bold);font-size:var(--step--1);cursor:pointer;color:var(--text-muted)}
.fseg button.on{background:var(--surface-ink);color:var(--text-invert)}
.fslots{display:grid;grid-template-columns:repeat(auto-fill,minmax(5.5rem,1fr));gap:var(--space-2);margin-top:var(--space-3)}
.fslots button{min-height:3rem;border-radius:var(--r-sm);border:2px solid transparent;background:var(--success-soft);color:var(--success);font-weight:var(--fw-bold);cursor:pointer;font-variant-numeric:tabular-nums}
.fslots button.on{background:var(--brand);color:var(--on-brand);border-color:var(--text)}
.chosen{text-align:center}
.chosen .when{display:block;font:var(--fw-black) var(--step-2)/1.2 var(--font-display);margin-bottom:var(--space-5)}