/* chiliholz.de Komponenten, Stil Desert Western: Sand, Sattelbraun, Terrakotta, Collage.
   Nutzt nur Tokens aus tokens.css. Präfix ch- vermeidet Kollisionen mit CMS- oder Theme-Klassen. */

/* ---------- Basis ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body,
[data-theme] {
  background-color: var(--color-bg);
  background-image: var(--texture-surface);
  color: var(--color-fg);
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: var(--font-leading-normal);
  font-synthesis: none; /* Rye und Kaushan haben nur einen Schnitt: nie künstlich fetten */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--color-selection); color: var(--color-fg); }

:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 3px;
}

img, svg { display: block; max-width: 100%; }

a { color: var(--color-accent-text); text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
  }
}

/* ---------- Layout ---------- */
.ch-container {
  width: 100%;
  max-width: calc(var(--layout-container) + 2 * var(--layout-gutter));
  margin-inline: auto;
  padding-inline: var(--layout-gutter);
}

.ch-section { padding-block: var(--layout-section-y); }

.ch-prose { max-width: var(--layout-prose); }

/* Gerissene Papierkante oben oder unten an einem Abschnitt */
.ch-torn-top {
  -webkit-mask: var(--texture-torn-top) top / 240px 18px repeat-x, linear-gradient(#000 0 0) bottom / 100% calc(100% - 17px) no-repeat;
  mask: var(--texture-torn-top) top / 240px 18px repeat-x, linear-gradient(#000 0 0) bottom / 100% calc(100% - 17px) no-repeat;
}
.ch-torn-bottom {
  -webkit-mask: var(--texture-torn-bottom) bottom / 240px 18px repeat-x, linear-gradient(#000 0 0) top / 100% calc(100% - 17px) no-repeat;
  mask: var(--texture-torn-bottom) bottom / 240px 18px repeat-x, linear-gradient(#000 0 0) top / 100% calc(100% - 17px) no-repeat;
}

.ch-torn-both {
  -webkit-mask:
    var(--texture-torn-top) top / 240px 18px repeat-x,
    linear-gradient(#000 0 0) center / 100% calc(100% - 34px) no-repeat,
    var(--texture-torn-bottom) bottom / 240px 18px repeat-x;
  mask:
    var(--texture-torn-top) top / 240px 18px repeat-x,
    linear-gradient(#000 0 0) center / 100% calc(100% - 34px) no-repeat,
    var(--texture-torn-bottom) bottom / 240px 18px repeat-x;
}

/* ---------- Typografie ---------- */
/* Rye: Western-Serife mit Tuscan-Sporen. Nur ab ca. 32 px. */
.ch-display,
.ch-h1,
.ch-h2 {
  font-family: var(--font-display);
  font-weight: var(--font-weight-regular);
  margin: 0;
  text-wrap: balance;
}
.ch-display {
  font-size: var(--text-display);
  line-height: 0.95;
  padding-bottom: 0.22em;
  margin-bottom: -0.22em;
  /* sonnengebleichter Druck: wenige, weiche Fehlstellen */
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='d'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.55' numOctaves='3' seed='8'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -16 12.4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23d)'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='d'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.55' numOctaves='3' seed='8'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -16 12.4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23d)'/%3E%3C/svg%3E");
  -webkit-mask-size: 220px;
  mask-size: 220px;
}
.ch-h1 { font-size: var(--text-h1); line-height: 1.05; }
.ch-h2 { font-size: var(--text-h2); line-height: 1.1; }

/* Pinsel-Schriftzug als Gegenstimme: "Scharf <em>graviert</em>" */
.ch-display em,
.ch-h1 em,
.ch-h2 em,
.ch-script {
  font-family: var(--font-script);
  font-style: normal;
  font-weight: var(--font-weight-regular);
  color: var(--color-script);
}
.ch-display em,
.ch-h1 em,
.ch-h2 em {
  display: inline-block;
  font-size: 1.04em;
  line-height: 0.9;
  transform: rotate(-4deg) translateY(0.04em);
  padding-inline: 0.04em;
}

.ch-h3,
.ch-h4 {
  font-family: var(--font-body);
  font-weight: var(--font-weight-bold);
  line-height: var(--font-leading-snug);
  margin: 0;
  text-wrap: balance;
}
.ch-h3 { font-size: var(--text-h3); }
.ch-h4 { font-size: var(--text-h4); }

/* Gesperrte Versalien wie "WESTERN ROOTS. WILD HEART." */
.ch-eyebrow,
.ch-tagline {
  font-family: var(--font-label);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--font-tracking-caps);
  text-transform: uppercase;
  margin: 0;
}
.ch-eyebrow { font-size: var(--text-micro); color: var(--color-accent-text); }
.ch-tagline { font-size: var(--text-small); line-height: 1.7; color: var(--color-fg); }

.ch-lead {
  font-size: var(--text-lead);
  line-height: var(--font-leading-relaxed);
  color: var(--color-fg-muted);
  margin: 0;
  text-wrap: pretty;
}

.ch-small { font-size: var(--text-small); color: var(--color-fg-muted); }

.ch-spec {
  font-family: var(--font-label);
  font-size: 0.75rem;
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--font-tracking-wide);
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  color: var(--color-fg-subtle);
}

/* ---------- Ornament: Linie ✦ Mond ✦ Linie ---------- */
.ch-ornament {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  color: var(--color-ornament);
  font-size: 0.75rem;
  line-height: 1;
}
.ch-ornament::before,
.ch-ornament::after {
  content: "";
  width: clamp(2.5rem, 8vw, 5rem);
  height: 1px;
  background: currentColor;
}
.ch-ornament svg { width: 1.5rem; height: 1.5rem; }
.ch-ornament--start { justify-content: flex-start; }
.ch-ornament--start::before { display: none; }

/* Abschnittskopf */
.ch-section-head { display: grid; gap: var(--space-3); margin-bottom: var(--space-12); }
.ch-section-head__no {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-label);
  font-size: var(--text-micro);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--font-tracking-caps);
  text-transform: uppercase;
  color: var(--color-fg-subtle);
}
.ch-section-head__no::before { content: "✦"; color: var(--color-ornament); }
.ch-section-head__no::after { content: ""; flex: 0 1 6rem; height: 1px; background: var(--color-border-strong); opacity: 0.5; }
.ch-section-head .ch-lead { margin-top: var(--space-2); }

/* ---------- Button mit Ziernaht ---------- */
.ch-btn {
  --_h: var(--button-height-md);
  --_px: var(--button-pad-md);
  --_stitch: color-mix(in srgb, var(--button-fg) 55%, transparent);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--_h);
  padding: 0.15em var(--_px) 0;
  font-family: var(--button-font);
  font-size: 0.9375rem;
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--button-tracking);
  text-transform: uppercase;
  line-height: 1;
  text-decoration: none;
  color: var(--button-fg);
  background: var(--button-bg);
  border: var(--border-base) solid var(--button-border);
  border-radius: var(--button-radius);
  box-shadow: var(--button-shadow);
  cursor: pointer;
  transition:
    transform var(--motion-hover),
    box-shadow var(--motion-hover),
    background-color var(--motion-hover);
}
.ch-btn::after {
  content: "";
  position: absolute;
  inset: 4px;
  border: 1px dashed var(--_stitch);
  border-radius: 1px;
  pointer-events: none;
}
.ch-btn:hover {
  background: var(--button-bg-hover);
  border-color: var(--button-bg-hover);
  box-shadow: var(--button-shadow-hover);
  transform: translateY(-2px);
}
.ch-btn:active {
  background: var(--button-bg-active);
  box-shadow: none;
  transform: translateY(1px);
  transition-duration: var(--duration-fast);
}
.ch-btn svg { width: 1.1em; height: 1.1em; flex: none; margin-top: -0.15em; transition: transform var(--motion-hover); }
.ch-btn:hover svg:last-child:not(:first-child) { transform: translateX(3px); }

.ch-btn--sm { --_h: var(--button-height-sm); --_px: var(--button-pad-sm); font-size: 0.8125rem; }
.ch-btn--lg { --_h: var(--button-height-lg); --_px: var(--button-pad-lg); font-size: 1rem; }

.ch-btn--secondary {
  --button-bg: transparent;
  --button-bg-hover: var(--color-bg-sunken);
  --button-bg-active: var(--color-bg-sunken);
  --button-fg: var(--color-fg);
  --button-border: var(--color-border-strong);
  --button-shadow: none;
}
.ch-btn--secondary:hover { border-color: var(--color-border-strong); }

.ch-btn--ghost,
.ch-btn--ghost:hover,
.ch-btn--ghost:active {
  --button-bg: transparent;
  --button-bg-hover: transparent;
  --button-bg-active: transparent;
  --button-fg: var(--color-accent-text);
  border-color: transparent;
  box-shadow: none;
  transform: none;
}
.ch-btn--ghost { padding-inline: var(--space-1); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 0.45em; }
.ch-btn--ghost::after { display: none; }

.ch-btn:disabled,
.ch-btn[aria-disabled="true"] {
  --button-bg: var(--color-bg-sunken);
  --button-bg-hover: var(--color-bg-sunken);
  --button-bg-active: var(--color-bg-sunken);
  --button-fg: var(--color-fg-subtle);
  --button-border: var(--color-border);
  box-shadow: none;
  cursor: not-allowed;
  transform: none;
}

.ch-btn[aria-busy="true"] { cursor: progress; }
.ch-btn[aria-busy="true"]::before {
  content: "";
  width: 1em;
  height: 1em;
  margin-top: -0.15em;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: var(--radius-round);
  animation: ch-spin 700ms linear infinite;
}
@keyframes ch-spin { to { transform: rotate(360deg); } }

/* ---------- Tag: Lederetikett mit Naht ---------- */
.ch-tag {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.5em 0.9em 0.4em;
  font-family: var(--tag-font);
  font-size: 0.6875rem;
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--font-tracking-wide);
  text-transform: uppercase;
  line-height: 1;
  color: var(--tag-fg);
  background: var(--tag-bg);
  border: var(--border-hair) solid var(--color-border-strong);
  border-radius: var(--tag-radius);
}
.ch-tag::after {
  content: "";
  position: absolute;
  inset: 2px;
  border: 1px dashed color-mix(in srgb, var(--tag-fg) 40%, transparent);
  border-radius: 1px;
  pointer-events: none;
}
.ch-tag__swatch {
  width: 0.7rem;
  height: 0.7rem;
  margin-top: -0.1em;
  border-radius: var(--radius-round);
  border: var(--border-hair) solid var(--color-outline);
  background: var(--_swatch, var(--color-accent));
}
.ch-tag--accent { --tag-bg: var(--color-badge); --tag-fg: var(--color-on-badge); border-color: var(--color-badge); }

/* ---------- Sternchen-Liste ---------- */
.ch-starlist { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.ch-starlist li {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  font-family: var(--font-label);
  font-size: var(--text-small);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--font-tracking-wide);
  text-transform: uppercase;
}
.ch-starlist li::before { content: "★"; color: var(--color-ornament); font-size: 0.8em; }

/* ---------- Collage: Klebeband, Fotoabzug, Notizzettel ---------- */
.ch-tape {
  position: absolute;
  z-index: 2;
  top: -0.85rem;
  left: 50%;
  width: 6rem;
  height: 1.6rem;
  background: color-mix(in srgb, var(--color-tape) 72%, transparent);
  box-shadow: 0 1px 2px color-mix(in srgb, var(--color-shadow) 15%, transparent);
  transform: translateX(-50%) rotate(var(--_r, -3deg));
  clip-path: polygon(0 8%, 4% 0, 8% 10%, 12% 0, 88% 0, 92% 10%, 96% 0, 100% 8%, 100% 92%, 96% 100%, 92% 90%, 88% 100%, 12% 100%, 8% 90%, 4% 100%, 0 92%);
  pointer-events: none;
}

.ch-print {
  position: relative;
  margin: 0;
  padding: var(--card-frame) var(--card-frame) var(--space-10);
  background: var(--color-bg-raised);
  border-radius: var(--radius-xs);
  box-shadow: var(--shadow-md);
  transform: rotate(var(--_tilt, 0deg));
  transition: transform var(--duration-slow) var(--easing-soft), box-shadow var(--duration-slow) var(--easing-soft);
}
.ch-print:hover { transform: rotate(0deg) translateY(-3px); box-shadow: var(--shadow-lg); }
.ch-print > img,
.ch-print > .ch-print__img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.ch-print figcaption {
  position: absolute;
  left: var(--card-frame);
  right: var(--card-frame);
  bottom: var(--space-2);
  font-family: var(--font-script);
  font-size: 1.125rem;
  color: var(--color-fg-muted);
  text-align: center;
}

.ch-note {
  position: relative;
  padding: var(--space-8) var(--space-6) var(--space-10);
  font-family: var(--font-script);
  font-size: 1.3125rem;
  line-height: 2rem;
  color: var(--color-fg-muted);
  background-color: var(--color-bg-raised);
  background-image: repeating-linear-gradient(to bottom, transparent 0 calc(2rem - 1px), color-mix(in srgb, var(--color-border) 80%, transparent) calc(2rem - 1px) 2rem);
  background-position: 0 calc(var(--space-8) + 0.35rem);
  box-shadow: var(--shadow-md);
  transform: rotate(var(--_tilt, -2deg));
  -webkit-mask: var(--texture-torn-bottom) bottom / 240px 18px repeat-x, linear-gradient(#000 0 0) top / 100% calc(100% - 17px) no-repeat;
  mask: var(--texture-torn-bottom) bottom / 240px 18px repeat-x, linear-gradient(#000 0 0) top / 100% calc(100% - 17px) no-repeat;
}
.ch-note p { margin: 0; }
/* Klebeband auf dem Zettel sitzt als Geschwister davor, damit die Maske es nicht abschneidet */
.ch-note-wrap { position: relative; }

/* ---------- Rund-Badge ---------- */
.ch-badge {
  width: var(--badge-size);
  height: var(--badge-size);
  color: var(--badge-fg);
  filter: drop-shadow(0 6px 10px color-mix(in srgb, var(--color-shadow) 30%, transparent));
  transform: rotate(-8deg);
  transition: transform var(--duration-slow) var(--easing-soft);
}
.ch-badge:hover { transform: rotate(4deg); }
.ch-badge .ch-badge__disc { fill: var(--badge-bg); }
.ch-badge .ch-badge__ring { fill: none; stroke: currentColor; stroke-width: 1; opacity: 0.7; }
.ch-badge text {
  font-family: var(--font-label);
  font-weight: var(--font-weight-bold);
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  fill: currentColor;
}
.ch-badge .ch-badge__center {
  font-family: var(--font-script);
  font-size: 30px;
  letter-spacing: 0;
  text-transform: none;
}

/* ---------- Formular ---------- */
.ch-field { display: grid; gap: var(--space-2); align-content: start; }

.ch-label {
  font-family: var(--font-label);
  font-size: 0.75rem;
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--font-tracking-wide);
  text-transform: uppercase;
}
.ch-label__opt { font-family: var(--font-body); font-style: italic; font-weight: var(--font-weight-regular); text-transform: none; letter-spacing: 0; color: var(--color-fg-subtle); }

.ch-input,
.ch-select,
.ch-textarea {
  width: 100%;
  min-height: var(--input-height);
  padding: var(--space-3) var(--input-pad-x);
  font: inherit;
  color: var(--input-fg);
  background: var(--input-bg);
  border: var(--input-border-width) solid var(--input-border);
  border-radius: var(--input-radius);
  transition: border-color var(--motion-hover), box-shadow var(--motion-hover);
}
.ch-textarea { min-height: 8rem; resize: vertical; line-height: var(--font-leading-normal); }
.ch-input::placeholder,
.ch-textarea::placeholder { color: var(--input-placeholder); font-style: italic; opacity: 1; }

.ch-input:focus-visible,
.ch-select:focus-visible,
.ch-textarea:focus-visible {
  outline: none;
  border-color: var(--input-border-focus);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--input-border-focus) 30%, transparent);
}

.ch-input[aria-invalid="true"],
.ch-textarea[aria-invalid="true"],
.ch-select[aria-invalid="true"] {
  border-color: var(--input-border-error);
  box-shadow: 0 0 0 1px var(--input-border-error);
}

.ch-input:disabled,
.ch-select:disabled,
.ch-textarea:disabled {
  background: var(--color-bg-sunken);
  border-color: var(--color-border);
  color: var(--color-fg-subtle);
  cursor: not-allowed;
}

.ch-select {
  appearance: none;
  padding-right: var(--space-10);
  background-image:
    linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 20px) 55%, calc(100% - 14px) 55%;
  background-size: 6px 6px;
  background-repeat: no-repeat;
}

.ch-hint { font-size: var(--text-small); font-style: italic; color: var(--color-fg-muted); margin: 0; }
.ch-error {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-small);
  font-weight: var(--font-weight-bold);
  color: var(--color-danger);
  margin: 0;
}
.ch-error svg { width: 1.1em; height: 1.1em; flex: none; }

/* Checkbox / Radio */
.ch-check {
  display: inline-flex;
  align-items: flex-start;
  gap: var(--space-3);
  cursor: pointer;
  line-height: var(--font-leading-snug);
}
.ch-check input {
  appearance: none;
  flex: none;
  width: 1.3rem;
  height: 1.3rem;
  margin: 0;
  background: var(--input-bg);
  border: var(--border-base) solid var(--color-border-strong);
  border-radius: var(--radius-xs);
  display: grid;
  place-content: center;
  cursor: pointer;
}
.ch-check input[type="radio"] { border-radius: var(--radius-round); }
.ch-check input::before {
  content: "";
  width: 0.72rem;
  height: 0.72rem;
  transform: scale(0);
  transition: transform var(--motion-press);
  background: var(--color-accent);
  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
}
.ch-check input[type="radio"]::before { clip-path: none; border-radius: var(--radius-round); }
.ch-check input:checked::before { transform: scale(1); }

/* Materialwahl als kleine Fotoabzüge */
.ch-choice-group { display: grid; grid-template-columns: repeat(auto-fit, minmax(6.5rem, 1fr)); gap: var(--space-4); border: 0; padding: 0; margin: 0; }
.ch-choice { position: relative; display: block; cursor: pointer; }
.ch-choice input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.ch-choice__body {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-2) var(--space-3);
  background: var(--color-bg-raised);
  border: var(--border-hair) solid var(--color-border);
  border-radius: var(--radius-xs);
  box-shadow: var(--shadow-sm);
  transition: transform var(--motion-hover), box-shadow var(--motion-hover), border-color var(--motion-hover);
}
.ch-choice__swatch { aspect-ratio: 4 / 3; }
.ch-choice__name { font-family: var(--font-script); font-size: 1.25rem; line-height: 1; text-align: center; }
.ch-choice .ch-spec { text-align: center; }
.ch-choice:hover .ch-choice__body { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.ch-choice input:checked + .ch-choice__body {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 1.5px var(--color-accent), var(--shadow-md);
  transform: rotate(-2deg) translateY(-2px);
}
.ch-choice input:checked + .ch-choice__body .ch-choice__name { color: var(--color-script); }
.ch-choice input:focus-visible + .ch-choice__body { outline: 3px solid var(--color-focus); outline-offset: 3px; }

/* Motiv-Upload */
.ch-dropzone {
  display: grid;
  justify-items: center;
  gap: var(--space-2);
  padding: var(--space-8) var(--space-6);
  text-align: center;
  background-color: var(--color-bg-raised);
  border: var(--border-base) dashed var(--color-fg-subtle);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background-color var(--motion-hover), border-color var(--motion-hover);
}
.ch-dropzone:hover,
.ch-dropzone.is-dragover { background-color: var(--color-accent-soft); border-color: var(--color-accent); }
.ch-dropzone svg { width: 1.75rem; height: 1.75rem; color: var(--color-script); }
.ch-dropzone strong { font-family: var(--font-script); font-size: 1.625rem; font-weight: var(--font-weight-regular); line-height: 1.1; color: var(--color-script); }

/* ---------- Werkstück-Karte als Fotoabzug ---------- */
.ch-card {
  display: grid;
  grid-template-rows: auto 1fr;
  padding: var(--card-frame);
  background: var(--card-bg);
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
  color: inherit;
  text-decoration: none;
  transition: transform var(--duration-slow) var(--easing-soft), box-shadow var(--duration-slow) var(--easing-soft);
}
.ch-card:hover { transform: translateY(-4px) rotate(-0.6deg); box-shadow: var(--card-shadow-hover); }
.ch-card:hover .ch-card__title { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
.ch-card__media {
  position: relative;
  aspect-ratio: 4 / 3;
  display: grid;
  place-items: center;
  overflow: hidden;
}
.ch-card__media > .ch-tag { position: absolute; top: var(--space-3); left: var(--space-3); }
.ch-card__body { display: grid; align-content: start; gap: var(--space-2); padding: var(--card-pad) var(--space-2) var(--space-2); }
.ch-card__title { font-family: var(--font-body); font-size: var(--text-h4); font-weight: var(--font-weight-bold); line-height: var(--font-leading-snug); margin: 0; }
.ch-card__meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
  margin-top: auto;
  padding-top: var(--space-3);
  border-top: var(--border-hair) solid var(--color-border);
}
.ch-price { font-family: var(--font-label); font-size: var(--text-lg); font-weight: var(--font-weight-bold); letter-spacing: 0.04em; line-height: 1; }
.ch-price small { font-family: var(--font-script); font-size: 1em; font-weight: var(--font-weight-regular); letter-spacing: 0; color: var(--color-script); margin-right: 0.25em; }

/* Fotos: warm und sonnengebleicht, damit Produktbilder zur Collage passen */
.ch-photo { filter: sepia(0.22) saturate(0.9) contrast(1.02) brightness(1.02); }

/* ---------- Materialflächen (Platzhalter für Fotos) ---------- */
.ch-material { background-color: var(--_base); background-size: cover; }

.ch-material--ahorn,
.ch-material--buche,
.ch-material--eiche,
.ch-material--walnuss {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='640' height='360'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.004 0.16' numOctaves='3' seed='11'/%3E%3CfeColorMatrix values='0 0 0 0 0.28 0 0 0 0 0.16 0 0 0 0 0.06 0 0 0 1.6 -0.62'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E"),
    linear-gradient(100deg, rgb(255 255 255 / 0.10), transparent 40%, rgb(0 0 0 / 0.08));
}
.ch-material--ahorn { --_base: var(--color-material-ahorn); }
.ch-material--buche { --_base: var(--color-material-buche); }
.ch-material--eiche { --_base: var(--color-material-eiche); }
.ch-material--walnuss { --_base: var(--color-material-walnuss); }
.ch-material--schiefer {
  --_base: var(--color-material-schiefer);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='480' height='480'%3E%3Cfilter id='s'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.004 0.045' numOctaves='4' seed='3'/%3E%3CfeColorMatrix values='0 0 0 0 0.75 0 0 0 0 0.8 0 0 0 0 0.86 0 0 0 0.9 -0.36'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23s)'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0.8 0 0 0 0 0.83 0 0 0 0 0.88 0 0 0 0.5 -0.18'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: cover, 200px 200px;
}

/* Gravurschrift: so sieht der Text auf dem Werkstück aus */
.ch-engrave {
  font-family: var(--font-display);
  font-weight: var(--font-weight-regular);
  line-height: 1.1;
  text-align: center;
  padding: var(--space-4);
  overflow-wrap: anywhere;
}
.ch-engrave--script { font-family: var(--font-script); }
.ch-engrave--holz {
  color: var(--color-material-gravur-holz);
  text-shadow:
    0 0 1px rgb(42 23 11 / 0.55),
    0 1px 0 rgb(255 236 200 / 0.35);
}
.ch-engrave--schiefer {
  color: var(--color-material-gravur-schiefer);
  text-shadow:
    0 0 1px rgb(213 217 222 / 0.5),
    0 -1px 0 rgb(0 0 0 / 0.45);
}

/* ---------- Ablauf mit Pinsel-Ziffern ---------- */
.ch-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: var(--space-8);
  counter-reset: step;
}
.ch-steps li {
  counter-increment: step;
  display: grid;
  align-content: start;
  gap: var(--space-2);
  padding-top: var(--space-4);
  border-top: var(--border-hair) solid var(--color-border-strong);
}
.ch-steps li::before {
  content: counter(step);
  font-family: var(--font-script);
  font-size: 3.25rem;
  line-height: 1;
  color: var(--color-script);
}
.ch-steps h4 { font-family: var(--font-label); font-size: var(--text-small); font-weight: var(--font-weight-bold); letter-spacing: var(--font-tracking-wide); text-transform: uppercase; margin: 0; }
.ch-steps p { margin: 0; color: var(--color-fg-muted); font-size: var(--text-small); }

/* ---------- Hinweis ---------- */
.ch-notice {
  --_c: var(--color-fg);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  background: var(--color-bg-raised);
  border-left: 4px solid var(--_c);
  border-radius: var(--radius-xs);
  box-shadow: var(--shadow-sm);
}
.ch-notice svg { width: 1.25rem; height: 1.25rem; color: var(--_c); margin-top: 0.1em; }
.ch-notice strong { display: block; font-family: var(--font-label); font-size: 0.8125rem; letter-spacing: var(--font-tracking-wide); text-transform: uppercase; color: var(--_c); margin-bottom: var(--space-1); }
.ch-notice p { margin: 0; color: var(--color-fg-muted); font-size: var(--text-small); }
.ch-notice--success { --_c: var(--color-success); }
.ch-notice--warning { --_c: var(--color-warning); }
.ch-notice--danger { --_c: var(--color-danger); }

/* ---------- Trenner ---------- */
.ch-divider {
  position: relative;
  height: 2rem;
  margin: 0;
  border: 0;
  overflow: visible;
  background: linear-gradient(to right, transparent, color-mix(in srgb, var(--color-border-strong) 45%, transparent) 15% calc(50% - 4rem), transparent 0 calc(50% + 4rem), color-mix(in srgb, var(--color-border-strong) 45%, transparent) 0 85%, transparent) center / 100% 1px no-repeat;
}
.ch-divider::after {
  content: "✦ ☾ ✦";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -52%);
  color: var(--color-ornament);
  font-size: 1rem;
  letter-spacing: 0.5em;
  padding-left: 0.5em;
  white-space: nowrap;
}

/* ---------- Spezifikationstabelle ---------- */
.ch-specs { width: 100%; border-collapse: collapse; font-size: var(--text-small); }
.ch-specs th,
.ch-specs td { text-align: left; padding: var(--space-3) 0; border-bottom: var(--border-hair) solid var(--color-border); vertical-align: baseline; }
.ch-specs th { font-family: var(--font-label); font-size: 0.75rem; font-weight: var(--font-weight-bold); letter-spacing: var(--font-tracking-wide); text-transform: uppercase; width: 40%; }
.ch-specs td { font-variant-numeric: tabular-nums; }

/* ---------- Navigation ---------- */
.ch-nav {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  background-color: color-mix(in srgb, var(--nav-bg) 92%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: var(--border-hair) solid color-mix(in srgb, var(--color-border-strong) 25%, transparent);
}
.ch-nav__inner { display: flex; align-items: center; gap: var(--space-6); min-height: var(--nav-height); }
.ch-nav__links { display: flex; gap: var(--space-6); margin-left: auto; list-style: none; padding: 0; }
.ch-nav__links a {
  font-family: var(--font-label);
  font-weight: var(--font-weight-semibold);
  font-size: 0.8125rem;
  letter-spacing: var(--font-tracking-caps);
  text-transform: uppercase;
  color: var(--color-fg);
  text-decoration: none;
  padding-block: var(--space-2);
  background: linear-gradient(var(--color-script), var(--color-script)) no-repeat left bottom / 0 1.5px;
  transition: background-size var(--motion-hover);
}
.ch-nav__links a:hover,
.ch-nav__links a[aria-current="page"] { background-size: 100% 1.5px; }

/* Wortmarke: "Chili" in Rye, "holz" als Pinsel-Schriftzug darüber gelegt */
.ch-wordmark {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  text-decoration: none;
  color: var(--color-fg);
}
.ch-wordmark img { width: 2.75rem; height: 2.75rem; }
.ch-wordmark__a { font-family: var(--font-display); font-size: 1.5rem; line-height: 1; }
.ch-wordmark__b {
  display: inline-block;
  margin-left: 0.08em;
  font-family: var(--font-script);
  font-size: 1.6rem;
  line-height: 1;
  color: var(--color-script);
  transform: rotate(-6deg) translateY(0.12em);
}

/* Großes Lockup wie auf dem Plakat */
.ch-lockup { display: grid; justify-items: center; text-align: center; line-height: 1; }
.ch-lockup__a { font-family: var(--font-display); font-size: var(--text-display); }
.ch-lockup__b {
  margin-top: -0.18em;
  font-family: var(--font-script);
  font-size: calc(var(--text-display) * 0.92);
  color: var(--color-script);
  transform: rotate(-5deg);
}