/* atelier makyri: the design every page shares (#41). Tokens, base, the column system, the Tafel, the shared
   components, header and footer. A page links this file and keeps only its own rules inline, after it.
   URLs here resolve from this file's own directory, so pages in subdirectories need no ../ variants. */

/* fonts (OFL, self-hosted). Every page preloads both, or they would only be found once this file has arrived.
   On a repeat visit within one session Chromium takes them from its memory copy of this stylesheet and warns that
   the preload "was not used": harmless, and absent on a first visit. */
@font-face{font-family:"Sofia Sans";src:url(fonts/sofia-sans-latin-wght.woff2) format("woff2");font-weight:300 700;font-display:swap}
@font-face{font-family:"Sofia Sans Condensed";src:url(fonts/sofia-sans-condensed-latin-wght.woff2) format("woff2");font-weight:300 800;font-display:swap}

/* A3 · Tafeln: the logo, repeated as the layout. Cream table; every section is a flat Tafel inside the page,
   its lowercase word standing on the cream beside it, as "atelier" stands beside the frame. */
:root{
  /* Kyra's palette. No white anywhere. */
  --green:#3C4D45; --paper:#EEE9C1; --sage:#92A28E; --rust:#995830; --ochre:#B69131; --ink-deep:#1F2B25;
  /* a surface and the text on it always move together */
  --surface:var(--paper); --ink:var(--green);
  --line:1.5px;
  --display:"Sofia Sans Condensed","Sofia Sans",system-ui,sans-serif;
  --text:"Sofia Sans",system-ui,sans-serif;
  --ease:cubic-bezier(.16,1,.3,1);
  /* type: six steps */
  --t-label:.85rem; --t-body:1.0625rem; --t-lead:1.25rem; --t-mid:1.5rem;
  --t-big:clamp(2rem,1.45rem + 1.8vw,2.75rem);
  --t-xl:clamp(2.25rem,1.2rem + 3.4vw,4.25rem);
  /* the column system: word column + panel column, on an 8 px unit */
  --gutter:16px; --gap:16px; --pad:20px;
  --ws:1.625rem; --wgap:8px; --wc:calc(var(--ws) + var(--wgap));
  --logo-w:110px;
  --head:56px;
  interpolate-size:allow-keywords;
}
@media (min-width:720px){:root{--gutter:40px;--gap:24px;--pad:32px;--ws:3rem;--wgap:12px;--logo-w:180px}}
@media (min-width:1100px){:root{--pad:40px;--ws:4.5rem;--logo-w:260px}}
@media (max-height:500px){:root{--head:0px}}

/* surfaces */
.rust{--surface:var(--rust);--ink:var(--paper)}
.ochre{--surface:var(--ochre);--ink:var(--ink-deep)}
.sage{--surface:var(--sage);--ink:var(--ink-deep)}
.green{--surface:var(--green);--ink:var(--paper)}
body,.tafel{--sub:color-mix(in srgb,var(--ink) 35%,transparent)}

*,*::before,*::after{box-sizing:border-box}
/* scroll-padding-top: what the browser scrolls to (a focused error field, an anchor) stays clear of the sticky header */
html{accent-color:var(--green);-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--head) + var(--gap))}
body{margin:0;background:var(--surface);color:var(--ink);font:400 var(--t-body)/1.55 var(--text);-webkit-font-smoothing:antialiased}
::selection{background:var(--ink);color:var(--surface)}
img{display:block;max-width:100%;height:auto}
p{margin:0 0 .9em;text-wrap:pretty}
h1,h2,h3{font-family:var(--display);font-weight:600;line-height:1;margin:0;text-wrap:balance}
ul,ol{margin:0;padding:0;list-style:none}
a{color:inherit;text-decoration-thickness:var(--line);text-underline-offset:.24em;text-decoration-color:color-mix(in srgb,currentColor 45%,transparent);transition:text-decoration-color .25s var(--ease)}
a:hover{text-decoration-color:currentColor}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
[hidden]{display:none!important}
/* the language switch (makyri.js sets data-lang before first paint) */
html[data-lang="de"] .l-en,html[data-lang="en"] .l-de{display:none!important}
.num{font-variant-numeric:tabular-nums lining-nums}
.nw{white-space:nowrap}
.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.logo-mask{-webkit-mask:url(logo.png) center/contain no-repeat;mask:url(logo.png) center/contain no-repeat;background:currentColor}
/* the lockup's frame stands on the panel axis, its "atelier" in the word column */
.lockup{width:var(--logo-w);aspect-ratio:500/640;margin-left:calc(var(--logo-w) * -.22)}
.skip{position:absolute;left:var(--gutter);top:8px;z-index:30;transform:translateY(-200%)}
.skip:focus{transform:none}

/* prices: CHF light and small, the amount heavy */
.cur{font-weight:400;font-size:max(.6em,.8rem);letter-spacing:.04em}
.p{white-space:nowrap}
.p b{font-weight:700}
.dash{margin-left:.06em}

/* ---------- the column system ---------- */
.wrap{max-width:1280px;margin:0 auto;padding:0 var(--gutter)}
.row{display:grid;grid-template-columns:var(--wc) minmax(0,1fr)}
.row > *{grid-column:2;min-width:0}
.sec{margin-top:var(--gap)}
/* the word: reads upwards, baseline towards the panel, top on the panel's top edge; it waits beside its panel while that passes */
.row > .word{grid-column:1;grid-row:1;justify-self:start;align-self:start;position:sticky;top:calc(var(--head) + var(--gap));
  font:400 var(--ws)/1 var(--display);letter-spacing:-.01em;text-transform:lowercase;white-space:nowrap;
  writing-mode:vertical-rl;transform:rotate(180deg);margin-bottom:-.04em}
.tafel{background:var(--surface);color:var(--ink);padding:var(--pad)}
.tafel.framed{border:var(--line) solid var(--ink);padding:calc(var(--pad) - var(--line))}
/* the band (Kyra, 2026-09-24): Kyra's pattern, edge to edge behind one or two sections; the word and the Tafeln stand on
   it as on the cream. The pattern is an SVG at the band's own width, repeated downwards; inside, small print gets a cream box. */
.band{margin-top:var(--gap);padding:var(--pad) 0 calc(var(--pad) + var(--gap));background:var(--muster) 50% 0/100% auto repeat-y}
.band > .sec:first-child{margin-top:0}
.band.gelb{--muster:url(img/band-gelb.svg)}
.band.mint{--muster:url(img/band-mint.svg)}
.band.terra{--muster:url(img/band-terra.svg)}
.band .cap{margin:var(--gap) 0 0;padding:16px var(--pad);background:var(--paper);border:var(--line) solid var(--ink)}
/* on the stripes the word gets a cream backing, or it drowns (2026-09-25) */
.band.terra .word{background:var(--paper);padding:6px 3px}
/* small print under a Tafel, on the cream */
.cap{padding:16px 0 var(--gap);display:grid;gap:8px var(--gap)}
.cap p{margin:0;max-width:60ch}
@media (min-width:720px){.cap{grid-template-columns:1fr 1fr}}

/* ---------- buttons, segments, switch: states are line work ---------- */
.btn{white-space:nowrap;display:inline-flex;align-items:center;justify-content:space-between;gap:.8em;font:600 var(--t-lead)/1 var(--display);letter-spacing:.01em;text-decoration:none;
  background:var(--ink);color:var(--surface);border:var(--line) solid var(--ink);padding:0 22px;min-height:48px;
  outline:var(--line) solid transparent;outline-offset:-1.5px;transition:outline-color .3s var(--ease),outline-offset .3s var(--ease)}
.btn:hover{outline-color:var(--surface);outline-offset:-6px}
.btn.ghost{background:transparent;color:var(--ink)}
.btn.ghost:hover{outline-color:var(--ink)}
.btn:focus-visible{outline:3px solid var(--ink);outline-offset:3px}

.seg{display:inline-flex;border:var(--line) solid var(--ink)}
.seg label{position:relative;cursor:pointer}
.seg input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.seg label > span{display:flex;align-items:center;font:600 var(--t-lead)/1 var(--display);padding:0 18px;min-height:44px;
  outline:var(--line) solid transparent;outline-offset:-1.5px;transition:background .3s var(--ease),color .3s var(--ease),outline-color .3s var(--ease),outline-offset .3s var(--ease)}
.seg label:hover input:not(:checked) + span{outline-color:var(--ink);outline-offset:-6px}
.seg input:checked + span{background:var(--ink);color:var(--surface)}
.seg input:focus-visible + span{outline:3px solid var(--ink);outline-offset:3px}

.switch{display:flex;flex:none}
.switch button{font:600 var(--t-label)/1 var(--text);letter-spacing:.06em;color:inherit;background:none;border:0;padding:0;min-width:44px;min-height:44px;cursor:pointer;display:grid;place-items:center}
.switch button + button{margin-left:-1.5px}
.switch button > span{display:grid;place-items:center;width:100%;height:30px;border:var(--line) solid var(--ink);transition:background .3s var(--ease),color .3s var(--ease)}
.switch button[aria-pressed="true"] > span{background:var(--ink);color:var(--surface)}
.switch button:hover > span{text-decoration:underline;text-decoration-thickness:var(--line);text-underline-offset:.2em}

/* ---------- forms: a group with its legend, a labelled field, the error under it. Line work, like the buttons ---------- */
button.btn{cursor:pointer}
.btn:disabled{opacity:.5;cursor:default}
.gruppe{border:0;margin:0 0 var(--pad);padding:0;min-width:0}
.gruppe legend{font:600 var(--t-mid)/1 var(--display);padding:0;margin-bottom:12px}
.gruppe legend .frei{font-weight:400}
.feld{display:grid;gap:6px;min-width:0}
.feld > span{font:600 var(--t-label)/1 var(--text);letter-spacing:.04em}
.feld input,.feld textarea{font:400 var(--t-body)/1.2 var(--text);color:var(--ink);background:transparent;border:var(--line) solid var(--ink);border-radius:0;
  min-height:48px;padding:0 12px;width:100%;min-width:0;-webkit-appearance:none;appearance:none}
.feld textarea{display:block;line-height:1.45;padding:10px 12px;min-height:6.5em;resize:vertical}
.feld input[aria-invalid]{border-width:4px;padding:0 9.5px}
.feld textarea[aria-invalid]{border-width:4px;padding:7.5px 9.5px}
.fehler{margin:6px 0 0;font-weight:600}
.fehler::before{content:"! ";font-weight:700}
.hilfe{margin:8px 0 0;font-size:var(--t-label)}
/* a checkbox: a square frame, filled when checked; the whole label is the target */
.haken{display:grid;grid-template-columns:24px minmax(0,1fr);gap:12px;align-items:start;min-height:44px;padding:10px 0;cursor:pointer}
.haken input{-webkit-appearance:none;appearance:none;width:24px;height:24px;margin:1px 0 0;border:var(--line) solid var(--ink);border-radius:0;background:transparent;cursor:pointer}
.haken input:checked{background:var(--ink);box-shadow:inset 0 0 0 4px var(--surface)}
.haken input[aria-invalid]{border-width:4px}

/* ---------- header: mark, bar, switch, on logo green (Kyra, 2026-09-24). What stands in the bar's first place (section nav, a way back) is the page's ---------- */
.top{position:sticky;top:0;z-index:10;background:var(--surface);border-bottom:var(--line) solid var(--ink)}
.top{--surface:var(--green);--ink:var(--paper);color:var(--ink)}
@media (max-height:500px){.top{position:relative}}
.top .row{align-items:center;min-height:56px}
.top .mark{grid-column:1;grid-row:1;display:block;width:44px;height:56px;-webkit-mask-size:auto 44px;mask-size:auto 44px}
.bar{grid-row:1;display:flex;align-items:center;gap:24px}
.bar .switch{margin-left:auto}
@media (max-width:719px){
  .top .row{grid-template-columns:minmax(0,1fr) 44px minmax(0,1fr)}
  .top .bar{display:contents}
  .top .mark{grid-column:2}
  .top .switch{grid-column:3;grid-row:1;justify-self:end}
}

/* ---------- lists of offers: rows between rules ---------- */
.item{display:grid;gap:16px 32px;padding:var(--pad) 0;border-top:var(--line) solid var(--ink)}
.item:last-child{padding-bottom:0}
.termine{display:flex;align-items:center;gap:10px;margin-top:12px;font:400 var(--t-lead)/1 var(--display);white-space:nowrap}
.termine i{display:flex;gap:4px}
.termine i b{width:14px;height:14px;background:var(--ink)}
.item .for{margin:0;max-width:46ch}
.item .for > :last-child{margin-bottom:0}
.item .go{justify-self:stretch}
/* Plätze as dots; what fills them is the page's */
.seats{display:flex;gap:5px}
.seats i{width:13px;height:13px;border-radius:50%;border:var(--line) solid var(--ink)}
@media (max-width:719px){.item{gap:12px}}
@media (min-width:720px){
  .item{grid-template-columns:minmax(0,1fr) auto;align-items:start}
  .item > :first-child{grid-column:1;grid-row:1}
  .item .for{grid-column:1;grid-row:2}
  .item .side{grid-column:2;grid-row:1;text-align:right}
  .item .go{grid-column:2;grid-row:2;justify-self:end}
}
@media (min-width:1100px){
  .item{grid-template-columns:minmax(0,1fr) minmax(0,1.25fr) minmax(260px,auto)}
  .item .for{grid-column:2;grid-row:1}
  .item .side,.item .go{grid-column:3}
}

/* ---------- kontakt (logo green) ---------- */
.kontakt .lead{font-size:var(--t-lead);margin:0}
.mail{font:600 var(--t-big)/1.1 var(--display);letter-spacing:-.01em;overflow-wrap:anywhere;display:inline-block;margin:10px 0 20px}

/* ---------- footer: the logo once more, frame on the axis ---------- */
.end{margin-top:calc(var(--gap) * 2);padding-bottom:40px;font-size:var(--t-label)}
.end-in{display:flex;align-items:flex-end;gap:20px}
.end .lockup{--logo-w:88px;flex:none}
.end p{margin:0}
.end p,.end a{line-height:1.2}
.end a{margin-left:auto;display:inline-flex;align-items:flex-end;min-height:44px}
/* a second link (datenschutz, #18) sits next to the first, both pushed right */
.end a + a{margin-left:0}

/* ---------- the pages behind the homepage: what they share unchanged (#53) — .home and .sec.first on /buchen/,
   /storno/ and /admin/; the #laden no-JS rule and .was on the two guest pages only (the Admin hides its #laden itself).
   Last, so that at equal specificity these win over the homepage's rules above, as they did inline. ---------- */
/* header: the homepage's bar, with one way back instead of the section nav */
.home{display:flex;align-items:center;min-height:44px;font:500 var(--t-body)/1 var(--display);letter-spacing:.01em;white-space:nowrap}
@media (max-width:719px){.top .home{grid-column:1;grid-row:1;justify-self:start}}
.sec.first{margin-top:calc(var(--gap) * 1.5)}
html:not(.js) #laden{display:none}
/* the Buchung at the head of a framed Tafel: the Kurs and its Termine, ruled off from what follows */
.was{padding-bottom:var(--pad);margin-bottom:var(--pad);border-bottom:var(--line) solid var(--ink)}
.was h2{font-size:var(--t-big);letter-spacing:-.01em;margin-bottom:12px}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-property:color,background-color,outline-color,opacity,text-decoration-color,visibility!important;transition-duration:.15s!important;transition-delay:0s!important}
}