/* Generated by tools/build.mjs — edit tokens/*.css, not this file. */

/* ===== tokens/fonts.css ================================================= */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;1,400&family=Jost:ital,wght@0,300;0,400;0,500;1,400&display=swap');
/* Klay's real wordmark is set in a high-contrast Didone serif. No font binaries were
   provided, so Playfair Display stands in for it (SUBSTITUTION — see readme.md).
   Jost stands in for the quiet geometric sans used for supporting text. */

/* ===== tokens/colors.css ================================================ */
:root{
/* --- Base ramp: paper & clay ------------------------------------------- */
--klay-paper:#F7F4EE;          /* logo background, page base */
--klay-paper-warm:#F1ECE3;     /* card / section tint */
--klay-bisque:#E4DACD;         /* unglazed clay, light */
--klay-clay-100:#DCC7B2;
--klay-clay-200:#C9A886;       /* the three vases */
--klay-clay-300:#B08A66;       /* terracotta, primary accent */
--klay-clay-400:#8C6A4B;
--klay-ink:#1F1D1B;            /* logo line + type */
--klay-ink-70:#4A4642;
--klay-ink-45:#7A746C;
--klay-ink-20:#C4BEB4;
--klay-greige:#CFCCC2;         /* studio wall */
--klay-greige-light:#E7E4DB;
--klay-sage:#A9AE9E;           /* dried-plant green */
--klay-celadon:#A7C2C0;        /* pale glaze blue */
--klay-glow:#E9C89B;           /* warm shelf lighting */
--klay-white:#FFFFFF;

/* --- Semantic: surfaces ----------------------------------------------- */
--surface-page:var(--klay-paper);
--surface-raised:var(--klay-white);
--surface-card:var(--klay-paper-warm);
--surface-sunken:var(--klay-bisque);
--surface-inverse:var(--klay-ink);
--surface-accent:var(--klay-clay-300);
--surface-accent-soft:var(--klay-clay-100);
--surface-overlay:rgba(31,29,27,.42);

/* --- Semantic: text --------------------------------------------------- */
--text-display:var(--klay-ink);
--text-body:var(--klay-ink-70);
--text-muted:var(--klay-ink-45);
--text-on-inverse:var(--klay-paper);
--text-on-accent:var(--klay-paper);
--text-accent:var(--klay-clay-400);
--text-link:var(--klay-clay-400);
--text-link-hover:var(--klay-ink);

/* --- Semantic: lines -------------------------------------------------- */
--line-hairline:rgba(31,29,27,.14);
--line-strong:var(--klay-ink);
--line-accent:var(--klay-clay-300);
--line-inverse:rgba(247,244,238,.28);

/* --- Semantic: status (kept quiet, clay-family) ----------------------- */
--status-open:#7C8A6B;         /* studio open / seat free */
--status-open-soft:#E4E7DC;
--status-waitlist:var(--klay-clay-300);
--status-waitlist-soft:#F0E4D7;
--status-closed:var(--klay-ink-45);
--status-closed-soft:var(--klay-greige-light);
--status-error:#9C5A46;
--status-error-soft:#F2E1DA;
}

/* ===== tokens/typography.css ============================================ */
:root{
--font-display:'Playfair Display',Georgia,'Times New Roman',serif;
--font-body:'Jost','Helvetica Neue',Helvetica,Arial,sans-serif;
--font-mono:ui-monospace,'SFMono-Regular',Menlo,monospace;

/* Type scale — display steps are generous, body steps are quiet.
   The display steps are fluid; every clamp reaches its maximum well before
   1200px, so the desktop sizes in the comments are what wide screens still get.
   Body steps below stay fixed — shrinking running text hurts more than helps. */
--text-hero:clamp(2.5rem,7vw,5.5rem);        /* 88px */
--text-h1:clamp(2.25rem,7vw,3.25rem);        /* 52 */
--text-h2:clamp(1.75rem,5vw,2.25rem);        /* 36 */
--text-h3:clamp(1.3125rem,3vw,1.5rem);       /* 24 */
--text-h4:1.1875rem; /* 19 */
--text-lead:clamp(1.0625rem,2.6vw,1.3125rem);/* 21 */
--text-base:1rem;    /* 16 */
--text-sm:0.875rem;  /* 14 */
--text-xs:0.75rem;   /* 12 */
--text-label:0.6875rem;/* 11 — letterspaced caps */

--leading-tight:1.06;
--leading-display:1.14;
--leading-snug:1.35;
--leading-body:1.62;
--leading-loose:1.8;

--weight-light:300;
--weight-regular:400;
--weight-medium:500;
--weight-semibold:600;

--tracking-display:-0.02em;
--tracking-normal:0em;
--tracking-wide:0.06em;
--tracking-label:0.18em;   /* caps labels: KURSE, CAFÉ, ÖFFNUNGSZEITEN */
--tracking-mono:0.04em;
}

/* ===== tokens/spacing.css =============================================== */
:root{
--space-0:0;
--space-1:4px;
--space-2:8px;
--space-3:12px;
--space-4:16px;
--space-5:24px;
--space-6:32px;
--space-7:48px;
--space-8:64px;
--space-9:96px;
--space-10:144px;

/* Gutters and the two big rhythm steps are fluid: they shrink on a phone and
   reach their full desktop value at ~1200px, so the wide layout is unchanged. */
--gutter-page:clamp(16px,4.5vw,32px);      /* mobile / narrow */
--gutter-page-lg:clamp(20px,6vw,72px);     /* desktop */
--space-section:clamp(48px,8vw,96px);      /* Abstand zwischen Seitenabschnitten */
--space-split:clamp(32px,5vw,64px);        /* Spalte zu Spalte im Zweispalter */
--measure-prose:62ch;
--measure-narrow:44ch;
--container-max:1240px;
--container-text:760px;
--section-y:var(--space-9);
--control-h-sm:34px;
--control-h:44px;      /* min tap target */
--control-h-lg:54px;
}

/* ===== tokens/shape.css ================================================= */
:root{
/* Ceramics: mostly near-square edges with one soft, thrown-feeling radius */
--radius-none:0;
--radius-xs:2px;
--radius-sm:4px;
--radius-md:8px;
--radius-lg:18px;
--radius-vessel:28px 28px 22px 22px; /* asymmetric, hand-formed */
--radius-pill:999px;

--border-hairline:1px solid var(--line-hairline);
--border-ink:1px solid var(--line-strong);
--border-accent:1px solid var(--line-accent);

/* Shadows are diffuse and warm — never neutral grey, never tight */
--shadow-none:none;
--shadow-soft:0 1px 2px rgba(31,29,27,.04),0 8px 24px -12px rgba(31,29,27,.10);
--shadow-lift:0 2px 6px rgba(31,29,27,.05),0 20px 44px -20px rgba(31,29,27,.16);
--shadow-overlay:0 32px 80px -28px rgba(31,29,27,.32);
--shadow-inset-well:inset 0 1px 2px rgba(31,29,27,.07);
--ring-focus:0 0 0 2px var(--surface-page),0 0 0 4px var(--klay-clay-300);

--blur-veil:blur(14px); /* @kind other */
--veil-paper:rgba(247,244,238,.82);
--veil-ink:rgba(31,29,27,.55);
}

/* ===== tokens/motion.css ================================================ */
:root{
--dur-instant:90ms; /* @kind other */
--dur-fast:160ms; /* @kind other */
--dur-base:240ms; /* @kind other */
--dur-slow:420ms; /* @kind other */
--dur-veil:640ms; /* @kind other */   /* image / section fade-ins */

--ease-standard:cubic-bezier(.4,0,.2,1); /* @kind other */
--ease-out-soft:cubic-bezier(.16,.84,.44,1); /* @kind other */  /* default: settles like clay */
--ease-in-soft:cubic-bezier(.5,0,.9,.4); /* @kind other */

--transition-control:color var(--dur-fast) var(--ease-standard),background-color var(--dur-fast) var(--ease-standard),border-color var(--dur-fast) var(--ease-standard),opacity var(--dur-fast) var(--ease-standard);
--transition-lift:transform var(--dur-base) var(--ease-out-soft),box-shadow var(--dur-base) var(--ease-out-soft);
--press-scale:0.985; /* @kind other */
}

/* ===== tokens/base.css ================================================== */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-font-smoothing:antialiased;text-size-adjust:100%}
body{margin:0;background:var(--surface-page);color:var(--text-body);font-family:var(--font-body);font-size:var(--text-base);font-weight:var(--weight-light);line-height:var(--leading-body);letter-spacing:var(--tracking-normal)}
h1,h2,h3,h4{font-family:var(--font-display);color:var(--text-display);font-weight:var(--weight-regular);letter-spacing:var(--tracking-display);line-height:var(--leading-display);margin:0}
p{margin:0;text-wrap:pretty}
a{color:var(--text-link);text-decoration:none;border-bottom:1px solid var(--line-accent);transition:var(--transition-control)}
a:hover{color:var(--text-link-hover);border-bottom-color:var(--line-strong)}
img{display:block;max-width:100%}
button{font:inherit}
.klay-label{font-family:var(--font-body);font-size:var(--text-label);letter-spacing:var(--tracking-label);text-transform:uppercase;font-weight:var(--weight-regular);color:var(--text-muted)}
::selection{background:var(--klay-clay-100);color:var(--klay-ink)}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* --- Responsive layer ---------------------------------------------------
   Components carry their own styles inline, and inline styles cannot hold a
   media query. The two places that need a real breakpoint hook in here by
   class instead. Only properties the components do NOT set inline may be
   used here — an inline style always wins over a class. */

/* NavBar: below the breakpoint the links drop to their own full-width row and
   scroll sideways if they still do not fit, so the logo and the CTA keep their
   place. `order`/`width`/`overflow` are free — NavBar sets none of them. */
.klay-navbar{position:sticky;top:0;z-index:20;flex-wrap:wrap}
@media (max-width:760px){
  .klay-navbar-links{order:3;width:100%;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .klay-navbar-links::-webkit-scrollbar{display:none}
  /* Two rows of navigation pinned to the top would eat a fifth of a phone
     screen for the whole visit — let it scroll away instead. */
  .klay-navbar{position:static}
}

/* Touch targets. The desktop layout is drawn for a mouse and wants its density,
   so these are 0 by default and only grow where the pointer is a finger.
   Components read them inline; this media query is what switches them. */
:root{--tap-min:0px;--tap-pad-y:0px}
@media (pointer:coarse){
  :root{--tap-min:44px;--tap-pad-y:12px;--control-h-sm:44px}
}

/* Two-column splits. The desktop ratio is deliberate and often asymmetric, so
   it is passed in per use as --split and kept exactly; below the breakpoint the
   columns stack. grid-template-columns must stay out of the inline style here,
   otherwise the media query could not win. */
.klay-split{display:grid;gap:var(--space-split);grid-template-columns:var(--split,1fr 1fr)}
@media (max-width:760px){
  .klay-split{grid-template-columns:1fr}
}

/* Tabs: four letterspaced caps labels do not fit 360px — let them scroll. */
.klay-tabs{overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.klay-tabs::-webkit-scrollbar{display:none}

/* --- Glas & Film ----------------------------------------------------------
   Liquid-Glass-Container im Warmton der Marke. backdrop-filter verwischt, was
   HINTER dem Element liegt — der Container braucht also etwas dahinter, sonst
   ist er nur eine helle Fläche. Im Film liegt er über dem Video. */
.klay-glass{
  background:rgba(247,244,238,.6);
  -webkit-backdrop-filter:var(--blur-veil) saturate(1.25);
  backdrop-filter:var(--blur-veil) saturate(1.25);
  border:1px solid rgba(255,255,255,.5);
  border-top-color:rgba(255,255,255,.85);
  box-shadow:var(--shadow-lift),inset 0 1px 0 rgba(255,255,255,.75),inset 0 -1px 0 rgba(31,29,27,.05);
  border-radius:var(--radius-lg);
}
/* Ohne backdrop-filter (ältere Browser) trägt der Hintergrund allein die Lesbarkeit. */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .klay-glass{background:rgba(247,244,238,.93)}
}

/* Film: eine bildschirmhohe Bühne, die beim Scrollen kleben bleibt. Das Video
   ist der Hintergrund, die Karten erscheinen darüber — auf dem Desktop
   abwechselnd links und rechts, auf dem Telefon unten unter dem Video. */
.klay-film{position:relative}
.klay-film-stage{position:sticky;top:0;height:100vh;height:100dvh;overflow:hidden;background:var(--surface-page)}
/* cover, nicht contain: Als Bühnenhintergrund darf das Video keine Letterbox-Kanten
   zeigen. Das Motiv sitzt bei 39–63 % der Breite und 19–87 % der Höhe — es bleibt
   bei 1280, 1024, 390 und auf 21:9-Monitoren ganz. */
.klay-film-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.klay-film-card{position:absolute;top:50%;width:min(420px,36vw);transform:translateY(-50%);
  transition:opacity var(--dur-slow) var(--ease-out-soft),transform var(--dur-slow) var(--ease-out-soft),visibility 0s linear 0s}
.klay-film-card[data-side=left]{left:var(--gutter-page-lg)}
.klay-film-card[data-side=right]{right:var(--gutter-page-lg)}
.klay-film-card[data-shown=false]{opacity:0;visibility:hidden;transition-delay:0s,0s,var(--dur-slow)}
.klay-film-card[data-side=left][data-shown=false]{transform:translateY(-50%) translateX(-28px)}
.klay-film-card[data-side=right][data-shown=false]{transform:translateY(-50%) translateX(28px)}
/* Fortschrittsanzeige: schmale Linie am unteren Rand der Bühne. */
.klay-film-progress{position:absolute;left:0;bottom:0;height:2px;background:var(--klay-clay-300);transform-origin:left;transform:scaleX(var(--film-progress,0))}
@media (max-width:760px){
  /* Unten in die Bühne auslaufen lassen: eine einzelne gerade Kante, kurzer
     linearer Verlauf — anders als eine radiale Maske erzeugt das keine Ringe. */
  .klay-film-video{top:0;bottom:auto;height:46dvh;
    -webkit-mask-image:linear-gradient(to bottom,#000 78%,transparent);
    mask-image:linear-gradient(to bottom,#000 78%,transparent)}
  /* Direkt unter dem Video verankert, nicht am Bühnenboden: Die Navigation ist
     auf dem Telefon nicht sticky, also beginnt die Bühne bei Scroll 0 unter ihr —
     eine Karte am Boden läge dann unterhalb des Sichtfelds. */
  .klay-film-card,.klay-film-card[data-side=left],.klay-film-card[data-side=right]{
    top:calc(46dvh + var(--space-4));bottom:auto;left:var(--gutter-page-lg);right:var(--gutter-page-lg);width:auto;
    max-height:calc(54dvh - var(--space-7));overflow:auto;transform:none}
  .klay-film-card[data-side=left][data-shown=false],.klay-film-card[data-side=right][data-shown=false]{transform:translateY(14px)}
}