/* Kasse – design system "Botanical / Organic Serif". Tokens first, components below. */

@font-face { font-family: "Playfair Display"; font-weight: 600; font-style: normal; font-display: swap; src: url("/static/fonts/playfair-display-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Playfair Display"; font-weight: 700; font-style: normal; font-display: swap; src: url("/static/fonts/playfair-display-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Playfair Display"; font-weight: 600; font-style: italic; font-display: swap; src: url("/static/fonts/playfair-display-latin-600-italic.woff2") format("woff2"); }
@font-face { font-family: "Source Sans 3"; font-weight: 400; font-display: swap; src: url("/static/fonts/source-sans-3-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Source Sans 3"; font-weight: 500; font-display: swap; src: url("/static/fonts/source-sans-3-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Source Sans 3"; font-weight: 600; font-display: swap; src: url("/static/fonts/source-sans-3-latin-600-normal.woff2") format("woff2"); }

:root {
  --background: #ebe7dc;
  --foreground: #2d3a31;
  --card: #ffffff;
  --card-soft: #e4dfd2;
  --primary: #8c9a84;
  --primary-text: #54634c; /* sage darkened for AA contrast on light surfaces */
  --secondary: #d3c4b4;
  --border: #d6d0c0;
  --interactive: #c27b66;
  --interactive-text: #9a5340; /* terracotta darkened for text on light surfaces */
  --on-dark: #f9f8f4;
  --error: #9b3d2b;
  --error-bg: #f8ece8;

  --shadow-sm: 0 4px 6px -1px rgba(45, 58, 49, 0.05);
  --shadow-md: 0 10px 15px -3px rgba(45, 58, 49, 0.05);
  --shadow-xl: 0 25px 50px -12px rgba(45, 58, 49, 0.15);

  --radius-card: 24px;
  --radius-pill: 999px;
  --space: 8px;
  --topbar-h: 81px;
  --ease-apple: cubic-bezier(0.32, 0.72, 0, 1); /* iOS-like: quick start, long soft landing */

  --font-display: "Playfair Display", Georgia, serif;
  --font-ui: "Source Sans 3", system-ui, -apple-system, "Segoe UI", sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scrollbar-gutter: stable; overflow-x: clip; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--topbar-h) + 8px); }
a, button, input, select, label, summary { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }

body {
  margin: 0;
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font-ui);
  font-size: 19px;
  line-height: 1.6;
  font-variant-numeric: tabular-nums;
}

/* Calm background shapes (circle and arch in the corners), purely decorative. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: url("/static/bg-shapes.svg") center / cover no-repeat;
}
body > * { position: relative; z-index: 1; }

/* Paper grain: the defining texture, kept almost invisible. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 50;
  pointer-events: none;
  opacity: 0.015;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat: repeat;
}

h1, h2 { font-family: var(--font-display); font-weight: 600; line-height: 1.1; letter-spacing: -0.01em; margin: 0; }
h1 { font-size: clamp(2.75rem, 6vw, 4.5rem); }
h2 { font-size: clamp(1.9rem, 3.2vw, 2.75rem); }
p { margin: 0; }
a { color: var(--primary-text); }
.em { font-style: italic; color: var(--interactive-text); }

/* ---------- Layout ---------- */
main { padding: calc(var(--space) * 6) calc(var(--space) * 4); }
.narrow { max-width: 520px; margin: 0 auto; }
.wide { max-width: 1280px; margin: 0 auto; }
.stack { display: flex; flex-direction: column; gap: calc(var(--space) * 2.5); }
.stack > .label { align-self: flex-start; }

.topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  background: var(--background);
  display: flex;
  align-items: center;
  gap: calc(var(--space) * 2);
  min-height: 80px;
  padding: var(--space) calc(var(--space) * 5);
  border-bottom: 1px solid var(--border);
}
.topbar form { margin: 0; }
.brand { font-family: var(--font-display); font-weight: 700; font-size: 28px; color: var(--foreground); text-decoration: none; }
.grow { flex: 1; }
.user { color: var(--primary-text); font-weight: 500; }

/* ---------- Section label ---------- */
.label {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--space) * 1.5);
  padding: var(--space) calc(var(--space) * 2.5);
  border: 1px solid var(--primary);
  border-radius: var(--radius-pill);
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--primary-text);
}
.label::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--primary); }
.label.on-dark { border-color: rgba(249, 248, 244, 0.35); color: var(--on-dark); }
.label.on-dark::before { background: var(--secondary); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 calc(var(--space) * 4);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--primary-text);
  background: transparent;
  border: 1px solid var(--primary);
  border-radius: var(--radius-pill);
  text-decoration: none;
  cursor: pointer;
  transition: transform 200ms ease-out, background-color 300ms ease-out, color 300ms ease-out, border-color 300ms ease-out, box-shadow 300ms ease-out, filter 200ms ease-out;
}
.btn:hover { background: var(--secondary); border-color: var(--primary-text); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn:active { transform: scale(0.98); box-shadow: none; }
.btn.primary { min-height: 56px; color: var(--on-dark); background: var(--foreground); border-color: var(--foreground); }
.btn.primary:hover { background: var(--interactive-text); border-color: var(--interactive-text); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.btn:focus-visible, .tile:focus-visible, input:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* ---------- Forms ---------- */
label { display: flex; flex-direction: column; gap: var(--space); font-weight: 600; font-size: 16px; }
input[type="text"], input[type="password"], input[type="search"] {
  min-height: 56px;
  padding: 0 calc(var(--space) * 3);
  font: inherit;
  font-weight: 400;
  color: var(--foreground);
  background: var(--card-soft);
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  transition: border-color 300ms ease-out, background-color 300ms ease-out;
}
input[type="search"] { -webkit-appearance: none; appearance: none; }
input:hover { border-color: var(--secondary); }
input:focus { border-color: var(--primary); background: var(--card); outline: none; }
input:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

.notice { padding: calc(var(--space) * 1.5) calc(var(--space) * 2.5); border-radius: 16px; background: var(--card-soft); }
.notice.error { color: var(--error); background: var(--error-bg); }

/* ---------- Cards ---------- */
.card {
  padding: calc(var(--space) * 5);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-md);
}

/* ---------- Login: arch panel with line art + form card ---------- */
.auth { display: grid; grid-template-columns: 1.1fr 0.9fr; min-height: 100vh; }
.auth-side { display: flex; padding: calc(var(--space) * 4); }
.auth-panel {
  position: relative;
  overflow: hidden;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: calc(var(--space) * 3);
  padding: calc(var(--space) * 6) calc(var(--space) * 7) calc(var(--space) * 7);
  background: var(--foreground);
  color: var(--on-dark);
  border-radius: 280px 280px var(--radius-card) var(--radius-card); /* arch */
}
.auth-art { width: min(100%, 440px); max-height: 46vh; margin: calc(var(--space) * 4) auto 0; color: var(--secondary); }
.auth-copy { display: flex; flex-direction: column; align-items: flex-start; gap: calc(var(--space) * 2.5); }
.auth-copy h1 { font-size: clamp(2.25rem, 3.6vw, 3.5rem); }
.auth-copy .em { color: var(--secondary); }
.auth-copy p { max-width: 36ch; color: rgba(249, 248, 244, 0.75); }
.auth-form { display: flex; align-items: center; justify-content: center; padding: calc(var(--space) * 4); }
.auth-box { width: 100%; max-width: 460px; display: flex; flex-direction: column; gap: calc(var(--space) * 3); }
.auth-brand { font-family: var(--font-display); font-weight: 700; font-size: 36px; letter-spacing: -0.01em; }
.auth-box .card { padding: calc(var(--space) * 5); }
.auth-box h2 { margin-bottom: var(--space); font-size: clamp(1.75rem, 2.4vw, 2.1rem); white-space: nowrap; }
.auth-hint { margin-bottom: calc(var(--space) * 3); font-size: 17px; line-height: 1.5; }

/* ---------- Home tiles ---------- */
.hero { display: flex; flex-direction: column; gap: calc(var(--space) * 3); align-items: flex-start; margin-bottom: calc(var(--space) * 8); }

.tiles { display: grid; grid-auto-rows: 1fr; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: calc(var(--space) * 3); }
.tile {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: calc(var(--space) * 5);
  min-height: 300px;
  padding: calc(var(--space) * 4.5);
  color: var(--foreground);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-sm);
  text-decoration: none;
  transition: transform 420ms var(--ease-apple), box-shadow 420ms var(--ease-apple);
}
.tile:hover { transform: translateY(-6px); box-shadow: var(--shadow-xl); }
.tile.featured { background: var(--foreground); border-color: var(--foreground); color: var(--on-dark); }
.tile.featured .tile-text { color: rgba(249, 248, 244, 0.75); }
.tile.featured .tile-icon { background: rgba(249, 248, 244, 0.12); color: var(--on-dark); }
.tile-icon { display: grid; place-items: center; width: 72px; height: 72px; border-radius: 50%; background: var(--card-soft); color: var(--primary-text); }
.tile-icon svg { width: 34px; height: 34px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.tile-title { display: block; font-family: var(--font-display); font-weight: 600; font-size: 30px; line-height: 1.2; }
.tile-text { display: block; margin-top: var(--space); color: var(--primary-text); font-size: 17px; }

/* ---------- Overview boxes ---------- */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: calc(var(--space) * 3); margin-top: calc(var(--space) * 8); }
.stat {
  display: flex;
  flex-direction: column;
  gap: var(--space);
  padding: calc(var(--space) * 3) calc(var(--space) * 3.5);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-sm);
}
.stat-label { font-size: 13px; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; color: var(--primary-text); }
.stat-value { font-family: var(--font-display); font-weight: 600; font-size: 40px; line-height: 1.1; }
.stat.dark { background: var(--foreground); border-color: var(--foreground); color: var(--on-dark); }
.stat.dark .stat-label { color: var(--secondary); }

/* ---------- App pages: headings, tabs, tables, forms ---------- */
.page-head { display: flex; align-items: center; justify-content: space-between; gap: calc(var(--space) * 2); margin-bottom: calc(var(--space) * 3); }
.section-title { font-family: var(--font-display); font-weight: 600; font-size: 24px; margin: calc(var(--space) * 5) 0 calc(var(--space) * 2); }
.muted { color: var(--primary-text); }
.row { display: flex; gap: calc(var(--space) * 2); justify-content: flex-end; align-items: center; flex-wrap: wrap; }
form.row { margin: 0; }

.tabs { display: flex; gap: var(--space); margin-bottom: calc(var(--space) * 3); border-bottom: 1px solid var(--border); }
.tabs a {
  position: relative; display: inline-flex; align-items: center; min-height: 48px; padding: 0 calc(var(--space) * 2.5);
  color: var(--primary-text); text-decoration: none; font-weight: 600; margin-bottom: -1px;
  transition: color 200ms;
}
.tabs a:hover { color: var(--foreground); }
.tabs a.active { color: var(--foreground); }
.tabs a.active::after { /* active tab marker */
  content: ""; position: absolute; left: calc(var(--space) * 2.5); right: calc(var(--space) * 2.5); bottom: 0; height: 2px;
  background: var(--interactive); border-radius: 2px; 
}

.filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: calc(var(--space) * 2); margin: 0 0 calc(var(--space) * 3); }
.filters .grow { flex: 1; min-width: 220px; }
.filters .chips { align-self: flex-end; margin: 0; }
.filters.range { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(var(--space) * 3); align-items: end; }
.filters.range > * { min-width: 0; flex: none; }
.filters.range input[type="date"] { width: 100%; }
.filters.range .chips { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space); align-self: end; }
.filters.range .chip { justify-content: center; padding: 0 var(--space); font-size: 16px; }
.check { flex-direction: row; align-items: center; gap: calc(var(--space) * 1.5); min-height: 56px; font-weight: 600; }
.check input { width: 24px; height: 24px; accent-color: var(--foreground); }
.filters .chip, .filters .btn { min-height: 56px; }

select, input[type="date"] {
  min-height: 56px; padding: 0 calc(var(--space) * 3); font: inherit; font-weight: 400; color: var(--foreground);
  background-color: var(--card-soft); border: 1px solid transparent; border-radius: var(--radius-pill);
}
/* Own arrow, set well inside the pill instead of at the very edge. */
select { appearance: none; -webkit-appearance: none; padding-right: calc(var(--space) * 7); background-image: url("/static/chevron.svg"); background-repeat: no-repeat; background-position: right calc(var(--space) * 3) center; background-size: 14px; }
select:focus, input[type="date"]:focus { border-color: var(--primary); background-color: var(--card); outline: none; }
select:focus-visible, input[type="date"]:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

fieldset.choice { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space); }
fieldset.choice legend { font-weight: 600; font-size: 16px; margin-bottom: var(--space); padding: 0; }
label.radio { flex-direction: row; align-items: center; gap: calc(var(--space) * 1.5); min-height: 48px; font-weight: 500; font-size: 18px; }
input[type="radio"] { width: 24px; height: 24px; accent-color: var(--foreground); }

.table-wrap { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-card); box-shadow: var(--shadow-sm); overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: calc(var(--space) * 1.5) calc(var(--space) * 2.5); text-align: left; border-bottom: 1px solid var(--border); vertical-align: middle; }
th { font-size: 13px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--primary-text); }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: rgba(228, 223, 210, 0.4); }
.num { text-align: right; white-space: nowrap; }
td.actions, th.actions { text-align: right; white-space: nowrap; }
td.actions .btn + .btn { margin-left: var(--space); }
.pos { color: #2f6b3a; font-weight: 600; }
.neg { color: var(--error); font-weight: 600; }

.user-actions { display: flex; gap: var(--space); justify-content: flex-end; align-items: center; flex-wrap: wrap; }
.user-actions form { margin: 0; }
.user-actions .inline-form input { min-width: 170px; flex: none; }
.badge.ok { background: #e8f1e6; color: #2f6b3a; }
.fine { margin-top: calc(var(--space) * 3); font-size: 15px; }
.btn.small { min-height: 44px; padding: 0 calc(var(--space) * 2); font-size: 13px; }
.btn.danger { color: #fff; background: var(--error); border-color: var(--error); }
.btn.danger:hover { background: #7e3123; border-color: #7e3123; color: #fff; }
.btn:disabled { opacity: 0.45; cursor: not-allowed; box-shadow: none; }
.btn:disabled:hover { background: transparent; transform: none; box-shadow: none; }
.btn.primary:disabled:hover { background: var(--foreground); border-color: var(--foreground); box-shadow: none; transform: none; }
.link-btn { padding: 0; min-height: 44px; font: inherit; font-size: 14px; color: var(--primary-text); background: none; border: 0; text-decoration: underline; cursor: pointer; }
.danger-zone { margin-top: calc(var(--space) * 3); text-align: center; font-size: 15px; }

.badge { display: inline-block; padding: 2px 10px; border-radius: var(--radius-pill); font-size: 13px; font-weight: 600; background: var(--card-soft); color: var(--primary-text); }
.badge.warn { background: var(--error-bg); color: var(--error); }
.notice.ok { color: #2f6b3a; background: #e8f1e6; }
.notice { margin-bottom: calc(var(--space) * 2); }
.inline-form { display: flex; gap: var(--space); align-items: center; margin: 0; }
.inline-form input { min-height: 48px; flex: 1; min-width: 180px; }

.tiles.two { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.tiles.two .tile { min-height: 220px; }

/* ---------- Booking: tiles left, cart fixed on the right. No entrance motion, only quick feedback. ---------- */
.shop { display: grid; grid-template-columns: 1fr 400px; gap: calc(var(--space) * 3); align-items: start; padding: calc(var(--space) * 3) calc(var(--space) * 4); max-width: 1500px; margin: 0 auto; }
.shop-search { display: flex; gap: var(--space); margin-bottom: calc(var(--space) * 2); }
.shop-search input { flex: 1; min-width: 0; }
.shop-main { min-width: 0; }
/* Search and categories stay visible under the header while the product list scrolls. */
.shop-tools {
  position: sticky; top: calc(var(--topbar-h) - 1px); z-index: 20;
  /* reaches to the edges of the work area and has a soft lower edge, so scrolling tiles disappear behind it cleanly */
  margin: 0 calc(var(--space) * -3) 0 calc(var(--space) * -4);
  padding: calc(var(--space) * 2) calc(var(--space) * 3) calc(var(--space) * 2.5) calc(var(--space) * 4);
  /* No visible box: the bar paints exactly what the page paints behind it (same fixed pattern on the same colour),
     so only the search field and the chips are seen and the tiles disappear under an invisible edge. */
  background: url("/static/bg-shapes.svg") center / cover no-repeat fixed, var(--background);
}
/* Tiles start a little below the search bar. */
.shop-main > .products { padding-top: calc(var(--space) * 1); }
.shop-tools .chips { margin-bottom: 0; }

/* Forgiving taps: the clickable area reaches half-way into the gap to the neighbour, so a tap
   slightly beside a button still hits the nearest one instead of nothing. */
.product, .chip, .qty { position: relative; }
.product::after { content: ""; position: absolute; inset: -7px; } /* gap 12 px: areas overlap by 2 px, no dead strip */
.chip::after, .qty::after { content: ""; position: absolute; inset: -5px; } /* gap 8 px */
.cart-bar { display: none; }
.chips { display: flex; gap: var(--space); flex-wrap: wrap; margin-bottom: calc(var(--space) * 2.5); min-width: 0; }
.chip {
  display: inline-flex; align-items: center; min-height: 48px; padding: 0 calc(var(--space) * 2.5); border: 1px solid var(--primary);
  border-radius: var(--radius-pill); color: var(--primary-text); font-weight: 600; text-decoration: none; transition: background-color 150ms, color 150ms;
}
.chip:hover { background: var(--card-soft); }
.chip.active { background: var(--foreground); border-color: var(--foreground); color: var(--on-dark); }
.products { display: grid; grid-auto-rows: 1fr; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: calc(var(--space) * 1.5); }
.products form { margin: 0; display: contents; }
.product {
  display: flex; flex-direction: column; justify-content: space-between; gap: var(--space); width: 100%; min-height: 112px;
  padding: calc(var(--space) * 2); font: inherit; text-align: left; color: var(--foreground); background: var(--card);
  border: 1px solid var(--border); border-radius: 20px; cursor: pointer; box-shadow: var(--shadow-sm);
  transition: border-color 150ms, background-color 150ms, transform 150ms;
}
.product:hover:not(:disabled) { border-color: var(--primary); background: var(--card-soft); }
.product:active:not(:disabled) { transform: scale(0.98); }
.product:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.product:disabled { cursor: not-allowed; background: var(--card-soft); color: var(--primary-text); opacity: 0.75; }
.product-name { font-weight: 600; line-height: 1.25; }
.product-meta { display: flex; align-items: center; justify-content: space-between; gap: var(--space); flex-wrap: wrap; }
.price { font-family: var(--font-display); font-weight: 600; font-size: 22px; }

.cart {
  position: sticky; top: calc(var(--topbar-h) + var(--space) * 2); display: flex; flex-direction: column; gap: calc(var(--space) * 2);
  max-height: calc(100vh - var(--topbar-h) - var(--space) * 4); padding: calc(var(--space) * 3); background: var(--card);
  border: 1px solid var(--border); border-radius: var(--radius-card); box-shadow: var(--shadow-md);
}
.cart h2 { font-size: 28px; }
.cart-empty { margin: 0; }
.cart-lines { list-style: none; margin: 0; padding: 0; overflow-y: auto; flex: 1; }
.cart-lines li { display: grid; grid-template-columns: 1fr auto auto; gap: var(--space) calc(var(--space) * 1.5); align-items: center; padding: calc(var(--space) * 1.5) 0; border-bottom: 1px solid var(--border); }
.cart-name { display: flex; flex-direction: column; font-weight: 600; line-height: 1.25; }
.cart-name .muted { font-weight: 400; font-size: 14px; }
.cart-qty { display: flex; align-items: center; gap: var(--space); }
.cart-qty form { margin: 0; }
.qty {
  width: 48px; height: 48px; font: inherit; font-size: 22px; line-height: 1; color: var(--foreground); background: var(--card-soft);
  border: 1px solid var(--border); border-radius: 50%; cursor: pointer; transition: background-color 150ms;
}
.qty:hover:not(:disabled) { background: var(--secondary); }
.qty:disabled { opacity: 0.4; cursor: not-allowed; }
.qty:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.qty-value { min-width: 28px; text-align: center; font-weight: 600; }
.cart-sum { min-width: 72px; text-align: right; font-weight: 600; }
.cart-remove { grid-column: 1 / -1; margin: 0; }
.cart-remove .link-btn { min-height: 32px; }
.cart-total { display: flex; align-items: baseline; justify-content: space-between; padding-top: var(--space); font-size: 20px; }
.cart-total strong { font-family: var(--font-display); font-size: 36px; font-weight: 600; }

/* ---------- Payment and confirmation ---------- */
.pay.narrow { max-width: 640px; }
.big { font-family: var(--font-display); font-weight: 600; font-size: 56px; line-height: 1.1; }
.big.ok { color: #2f6b3a; }
.big.short { color: var(--error); }
.quick { display: flex; flex-wrap: wrap; gap: var(--space); }
.quick .btn { min-height: 52px; }
.change { min-height: 100px; }
.receipt { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--border); }
.receipt li { display: flex; justify-content: space-between; gap: calc(var(--space) * 2); padding: var(--space) 0; border-bottom: 1px solid var(--border); }
.sums { margin: 0; display: flex; flex-direction: column; gap: var(--space); }
.sums div { display: flex; justify-content: space-between; font-size: 20px; }
.sums dt { color: var(--primary-text); }
.sums dd { margin: 0; font-weight: 600; }

/* ---------- Statistics ---------- */
.stats.three { grid-template-columns: repeat(3, 1fr); margin-top: 0; margin-bottom: calc(var(--space) * 3); }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--space) * 3); }

/* ---------- Motion: calm, like opening an app on iOS ---------- */
/* Page to page: the old page fades out while the new one settles in from a hair smaller.
   Only for real navigations (type "page"); live updates on a page never trigger this. */
@view-transition { navigation: auto; types: page; }
.topbar { view-transition-name: topbar; }
::view-transition-group(topbar) { animation-duration: 0s; }

@keyframes vt-out { to { opacity: 0; transform: scale(1.012); } }
@keyframes vt-in { from { opacity: 0; transform: scale(0.985) translateY(8px); } }

html:active-view-transition-type(page)::view-transition-old(root) { animation: vt-out 180ms ease-in both; mix-blend-mode: normal; }
html:active-view-transition-type(page)::view-transition-new(root) { animation: vt-in 460ms var(--ease-apple) 60ms both; mix-blend-mode: normal; }

/* Lager tabs: the new content slides in a few pixels from the side the tab lies on, forwards
   (Produkte -> Bewegungen -> Kategorien) from the right, backwards from the left. */
#lager-body.slide-fwd { animation: lager-in-fwd 380ms var(--ease-apple) both; }
#lager-body.slide-back { animation: lager-in-back 380ms var(--ease-apple) both; }
@keyframes lager-in-fwd { from { opacity: 0; transform: translateX(22px); } }
@keyframes lager-in-back { from { opacity: 0; transform: translateX(-22px); } }

/* Live updates are morphed in place (idiomorph): unchanged elements are never touched, changed
   text and classes update where they are and CSS transitions animate the difference.
   While a request is running nothing dims or jumps. */
.stat-value, .tile-text, .badge, .chip, .product, .cart-sum, .qty-value { transition: color 200ms ease-out, background-color 200ms ease-out, border-color 200ms ease-out, opacity 200ms ease-out, transform 150ms ease-out; }

/* Pressing feels physical. */
.tile:active { transform: scale(0.97); transition-duration: 120ms; }

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  .btn, .tile, .tile-icon, .product, .chip, input { transition: none; }
  .btn:hover, .tile:hover, .tile:active { transform: none; }
}

/* ---------- Responsive ---------- */
/* Tablet landscape and small laptops */
@media (max-width: 1100px) {
  .filters.range { grid-template-columns: 1fr 1fr; }
  .filters.range .chips { grid-column: 1 / -1; }
  .shop { grid-template-columns: 1fr 340px; padding: calc(var(--space) * 2); }
  .tiles, .tiles.two { grid-template-columns: 1fr 1fr; }
  .tiles > :last-child:nth-child(odd) { grid-column: 1 / -1; }
  .stats { grid-template-columns: 1fr 1fr; }
  .stats.three { grid-template-columns: repeat(3, 1fr); }
  .two-col { grid-template-columns: 1fr; }
  .auth-panel { padding: calc(var(--space) * 6) calc(var(--space) * 4); }
}

/* Tablet portrait and below: one column */
@media (max-width: 900px) {
  body { font-size: 18px; }
  main { padding: calc(var(--space) * 4) calc(var(--space) * 2); }
  .topbar { padding: var(--space) calc(var(--space) * 2); min-height: 68px; }
  .auth { grid-template-columns: 1fr; }
  .auth-side { display: none; }
  .tiles, .tiles.two { grid-template-columns: 1fr; }
  .tile { min-height: 160px; }
  .hero { margin-bottom: calc(var(--space) * 4); }
  .stats { margin-top: calc(var(--space) * 4); }

  /* booking: cart below the tiles, a fixed "Abbuchen" bar keeps the main action in reach */
  .shop { grid-template-columns: 1fr; padding: calc(var(--space) * 2) calc(var(--space) * 2) calc(var(--space) * 12 + env(safe-area-inset-bottom)); }
  .cart { position: static; max-height: none; }
  :root { --topbar-h: 69px; }
  .cart > .btn.primary { display: none; }
  .cart-bar {
    position: fixed; left: calc(var(--space) * 1.5); right: calc(var(--space) * 1.5);
    bottom: calc(var(--space) * 1.5 + env(safe-area-inset-bottom)); z-index: 25;
    display: flex; align-items: center; gap: var(--space); padding: 6px 6px 6px calc(var(--space) * 2.5);
    color: var(--on-dark); background: var(--foreground); border-radius: var(--radius-pill); box-shadow: var(--shadow-xl);
  }
  .cart-bar-sum { flex: 1; color: inherit; text-decoration: none; font-weight: 500; line-height: 1.2; padding: var(--space) 0; }
  .cart-bar-sum strong { font-family: var(--font-display); font-size: 21px; font-weight: 600; }
  .cart-bar .btn.primary { display: inline-flex; min-height: 48px; color: var(--foreground); background: var(--background); border-color: var(--background); }
  .cart-bar .btn.primary:hover { background: var(--secondary); border-color: var(--secondary); }
}

/* Phones: compact sizes, still 44-48 px touch targets */
@media (max-width: 640px) {
  body { font-size: 16px; line-height: 1.5; }
  h1 { font-size: clamp(1.75rem, 8vw, 2.25rem); }
  h2 { font-size: 1.5rem; }
  main { padding: calc(var(--space) * 2.5) calc(var(--space) * 1.5); }
  .topbar { min-height: 56px; padding: 0 calc(var(--space) * 1.5); gap: var(--space); }
  .brand { font-size: 22px; }
  .user { display: none; }
  .btn { min-height: 48px; padding: 0 calc(var(--space) * 2.5); font-size: 13px; }
  .btn.primary { min-height: 52px; }
  .btn.small { min-height: 44px; padding: 0 calc(var(--space) * 2); }
  .topbar .btn { min-height: 40px; padding: 0 calc(var(--space) * 2); }
  input[type="text"], input[type="password"], input[type="search"], select, input[type="date"] { min-height: 48px; padding: 0 calc(var(--space) * 2); font-size: 16px; }
  select { padding-right: calc(var(--space) * 6); background-position: right calc(var(--space) * 2) center; }
  label { font-size: 14px; gap: 6px; }
  .card { padding: calc(var(--space) * 2.5); border-radius: 20px; }
  .page-head { margin-bottom: calc(var(--space) * 2); flex-wrap: wrap; }
  .page-head .btn { flex: 1 1 auto; }
  .section-title { font-size: 20px; margin: calc(var(--space) * 3) 0 var(--space); }
  .tabs { overflow-x: auto; scrollbar-width: none; margin-bottom: calc(var(--space) * 2); }
  .tabs a { white-space: nowrap; min-height: 44px; padding: 0 calc(var(--space) * 1.5); font-size: 16px; }
  .filters { gap: var(--space); margin-bottom: calc(var(--space) * 2); }
  .filters > * { flex: 1 1 100%; }
  .filters .check { min-height: 44px; }
  .filters.range { grid-template-columns: 1fr 1fr; gap: var(--space); }
  .filters.range .chips { grid-column: 1 / -1; }
  .filters.range .chip, .chip { min-height: 44px; font-size: 15px; }
  .notice { padding: var(--space) calc(var(--space) * 1.5); font-size: 15px; }

  /* home: 2 x 2 compact tiles, no big empty space */
  .hero { margin-bottom: calc(var(--space) * 2.5); }
  .tiles, .tiles.two { grid-template-columns: 1fr 1fr; gap: var(--space); }
  .tiles > :last-child:nth-child(odd) { grid-column: 1 / -1; }
  .tile { min-height: 132px; padding: calc(var(--space) * 2); gap: var(--space); border-radius: 20px; }
  .tiles.two .tile { min-height: 110px; }
  .tile-icon { width: 44px; height: 44px; }
  .tile-icon svg { width: 22px; height: 22px; }
  .tile-title { font-size: 19px; }
  .tile-text { font-size: 13px; margin-top: 2px; line-height: 1.3; }
  .stats, .stats.three { grid-template-columns: 1fr 1fr; gap: var(--space); margin-top: calc(var(--space) * 2); }
  .stats.three .stat:first-child { grid-column: 1 / -1; }
  .stat { padding: calc(var(--space) * 1.5) calc(var(--space) * 2); border-radius: 18px; gap: 2px; }
  .stat-label { font-size: 11px; }
  .stat-value { font-size: 26px; }
  .big { font-size: 38px; }

  /* booking */
  .shop { padding: var(--space) var(--space) calc(var(--space) * 11); gap: calc(var(--space) * 1.5); }
  .shop-search { margin-bottom: var(--space); }
  .chips { gap: 6px; margin-bottom: var(--space); }
  .products { grid-template-columns: 1fr 1fr; gap: 6px; }
  .product { min-height: 84px; padding: calc(var(--space) * 1.25) calc(var(--space) * 1.5); border-radius: 16px; gap: 4px; }
  .product-name { font-size: 15px; line-height: 1.2; }
  .price { font-size: 18px; }
  .badge { font-size: 11px; padding: 1px 8px; }
  .cart { padding: calc(var(--space) * 2); gap: var(--space); border-radius: 20px; }
  .cart h2 { font-size: 22px; }
  .cart-lines li { padding: var(--space) 0; gap: 4px var(--space); }
  .qty { width: 44px; height: 44px; font-size: 20px; }
  .cart-total { font-size: 17px; }
  .cart-total strong { font-size: 28px; }
  .row { justify-content: stretch; gap: var(--space); }
  .row > .btn, .row > button { flex: 1 1 auto; }
  .quick .btn { flex: 1 1 28%; min-height: 44px; }
  .change { min-height: 80px; }
  .inline-form { flex-wrap: wrap; }
  .inline-form input { min-width: 0; flex: 1 1 100%; }

  /* login */
  .auth-form { padding: calc(var(--space) * 2); align-items: flex-start; padding-top: calc(var(--space) * 6); }
  .auth-brand { font-size: 28px; }
  .auth-box { gap: calc(var(--space) * 2); }
  .auth-box .card { padding: calc(var(--space) * 3); }
  .auth-box h2 { font-size: 1.5rem; }

  /* tables become stacked cards: label left, value right */
  .table-wrap { background: transparent; border: 0; box-shadow: none; overflow: visible; }
  table.responsive thead { display: none; }
  table.responsive, table.responsive tbody { display: block; }
  table.responsive tr {
    display: block; margin-bottom: var(--space); padding: 4px calc(var(--space) * 1.75);
    background: var(--card); border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--shadow-sm);
  }
  table.responsive tbody tr:hover { background: var(--card); }
  table.responsive td {
    display: flex; justify-content: space-between; align-items: center; gap: calc(var(--space) * 2);
    padding: 6px 0; border-bottom: 1px solid var(--border); text-align: right; font-size: 15px;
  }
  table.responsive td:last-child { border-bottom: 0; }
  table.responsive td::before {
    content: attr(data-label); flex: none; font-size: 11px; font-weight: 600; letter-spacing: 0.12em;
    text-transform: uppercase; color: var(--primary-text); text-align: left;
  }
  table.responsive td[colspan] { display: block; text-align: left; }
  table.responsive td.actions { justify-content: stretch; gap: var(--space); padding: var(--space) 0; }
  table.responsive td.actions::before { display: none; }
  table.responsive td.actions .btn { flex: 1; margin: 0; }
  .user-actions { width: 100%; justify-content: stretch; }
  .user-actions form { flex: 1 1 100%; }
  .user-actions .inline-form input { flex: 1 1 100%; min-width: 0; }
  table.responsive td:first-child { font-weight: 600; }
}

/* Phones, second pass: tighter, calmer, app-like */
@media (max-width: 640px) {
  :root { --topbar-h: 57px; }
  body::before { display: none; }
  .shop-tools { background: var(--background); }
  .topbar { min-height: 56px; }
  main { padding-top: calc(var(--space) * 2); }
  .page-head { margin-bottom: var(--space); }
  h2 { font-size: 1.6rem; }

  /* forms: placeholders instead of big captions, controls side by side where they fit */
  .hide-labels-sm label:not(.check) { font-size: 0; gap: 0; }
  .hide-labels-sm label:not(.check) input, .hide-labels-sm label:not(.check) select { font-size: 16px; }
  .filters.row-sm { flex-wrap: nowrap; align-items: stretch; }
  .filters.row-sm > .grow { flex: 1 1 auto; min-width: 0; }
  .filters.row-sm > .btn, .filters.row-sm > button { flex: none; }
  .lager-filters > .grow { flex: 1 1 100%; }
  .lager-filters > label:not(.grow) { flex: 1 1 0; min-width: 0; }
  .lager-filters > .btn.primary { flex: none; }
  .filters .check { flex: 1 1 100%; }

  /* shop: search and categories in two compact lines, categories scroll sideways */
  .shop { padding-top: 0; }
  .shop-tools { margin: 0 calc(var(--space) * -1); padding: calc(var(--space) * 1.5) var(--space) 8px; }
  .shop-search { margin-bottom: 6px; }
  .shop-search input { min-height: 44px; }
  .chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-left: calc(var(--space) * -1); margin-right: calc(var(--space) * -1); padding: 0 var(--space); }
  .chips::-webkit-scrollbar { display: none; }
  .chip { flex: none; min-height: 40px; padding: 0 calc(var(--space) * 2); }
  .shop-tools .chips { margin-bottom: 0; }
  .products { gap: 6px; }
  .product { min-height: 76px; padding: 10px 12px; gap: 2px; }
  .product::after { inset: -4px; } /* gap 6 px */
  .product-meta { gap: 6px; }
  .cart-lines li { grid-template-columns: 1fr auto auto; }

  /* stock list: one compact card per product instead of a table */
  table.responsive.compact tr { display: grid; grid-template-columns: 1fr auto; column-gap: var(--space); padding: 12px 14px 10px; }
  table.responsive.compact td { display: block; padding: 0; border: 0; text-align: left; font-size: 15px; }
  table.responsive.compact td::before { display: none; }
  table.responsive.compact td[data-label="Name"] { grid-column: 1; grid-row: 1; font-weight: 600; font-size: 16px; line-height: 1.3; }
  table.responsive.compact td[data-label="Preis"] { grid-column: 2; grid-row: 1; text-align: right; font-family: var(--font-display); font-weight: 600; font-size: 18px; }
  table.responsive.compact td[data-label="Kategorie"] { grid-column: 1; grid-row: 2; font-size: 13px; margin-top: 2px; }
  table.responsive.compact td[data-label="Bestand"] { grid-column: 2; grid-row: 2; text-align: right; margin-top: 2px; }
  table.responsive.compact td[data-label="Bestand"]::before { display: inline; content: "Bestand "; font-size: 13px; font-weight: 400; letter-spacing: 0; text-transform: none; }
  table.responsive.compact td.actions { grid-column: 1 / -1; grid-row: 3; display: flex; margin-top: 8px; gap: 8px; }
  table.responsive.compact td.actions .btn { min-height: 42px; font-size: 12px; }

  /* tables elsewhere: tighter cards */
  table.responsive tr { padding: 2px 14px; }
  table.responsive td { padding: 7px 0; }

  /* login: sits higher, like an app */
  .auth-form { padding-top: calc(var(--space) * 8); }

  /* admin */
  .user-actions .inline-form { flex-wrap: wrap; }
  .user-actions .inline-form input { flex: 1 1 100%; min-width: 0; }
  .user-actions .inline-form .btn { flex: 1 1 100%; }
}

/* Touch screens have no real hover: a tapped control must not stay highlighted afterwards. */
@media (hover: none) {
  .product:hover:not(:disabled) { border-color: var(--border); background: var(--card); }
  .chip:hover { background: transparent; }
  .chip.active:hover { background: var(--foreground); }
  .tile:hover { transform: none; box-shadow: var(--shadow-sm); }
  .btn:hover { background: transparent; border-color: var(--primary); transform: none; box-shadow: none; }
  .btn.primary:hover { background: var(--foreground); border-color: var(--foreground); }
  .cart-bar .btn.primary:hover { background: var(--background); border-color: var(--background); }
  .qty:hover:not(:disabled) { background: var(--card-soft); }
  tbody tr:hover { background: transparent; }
}

/* Short landscape screens (phones turned sideways): keep the cart usable */
@media (max-height: 520px) and (min-width: 901px) {
  .cart { top: var(--space); max-height: calc(100vh - var(--space) * 2); padding: calc(var(--space) * 2); }
  .topbar { min-height: 56px; }
}