/* Atelier Lehm, Demo-Shop für KettenKI.
   Ein einziges Stylesheet, mobile first, keine Abhängigkeiten ausser den
   beiden Schriften von Google Fonts. */

:root {
  /* Warme, erdige Palette. Nichts darin soll mit der Glasur auf den Fotos
     konkurrieren, deshalb bleibt alles im Papier- und Tonbereich. */
  --paper: #f3efe7;
  --paper-deep: #ebe4d8;
  --paper-dark: #241f1a;
  --ink: #241f1a;
  --ink-soft: #6c6254;
  --ink-faint: #9a9083;
  --line: #ddd4c4;
  --clay: #a8593a;

  --serif: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  --sans: 'Jost', 'Avenir Next', 'Segoe UI', system-ui, sans-serif;

  --page: clamp(1.25rem, 5vw, 5rem);
  --band: clamp(5rem, 11vw, 11rem);
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

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

body,
h1, h2, h3, p, figure, ul, ol, dl, dd, blockquote {
  margin: 0;
  padding: 0;
}

ul, ol {
  list-style: none;
}

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

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 300;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

a {
  color: inherit;
}

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

.shell {
  width: 100%;
  max-width: 1560px;
  margin: 0 auto;
  padding-inline: var(--page);
}

.shell--narrow {
  max-width: 1120px;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------- Schrift ---------- */

.eyebrow {
  font-family: var(--sans);
  font-size: 0.7rem;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.display {
  font-family: var(--serif);
  font-optical-sizing: auto;
  font-weight: 300;
  font-size: clamp(2.9rem, 9vw, 7.5rem);
  line-height: 0.98;
  letter-spacing: -0.02em;
}

/* Das kursive Wort im Auftakt: Javis Entscheidung vom 2026-09-21, hier
   und nur hier. Die Achsen weichen die Fraunces auf, damit das Wort
   wärmer wirkt statt nur schräg. */
.display em {
  font-style: italic;
  font-variation-settings: 'SOFT' 40, 'WONK' 1;
}

.serif-lead {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(1.15rem, 2.2vw, 1.6rem);
  line-height: 1.5;
}

.section-title {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(1.8rem, 4vw, 3.2rem);
  line-height: 1.1;
  letter-spacing: -0.01em;
}

/* ---------- Kopf ---------- */

.masthead {
  position: sticky;
  top: 0;
  z-index: 20;
  background: color-mix(in srgb, var(--paper) 86%, transparent);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.4s var(--ease);
}

.masthead[data-stuck] {
  border-bottom-color: var(--line);
}

.masthead__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 4.5rem;
}

.wordmark {
  display: inline-flex;
  align-items: baseline;
  gap: 0.55rem;
  font-size: 0.82rem;
  font-weight: 400;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  text-decoration: none;
}

.wordmark__tag {
  font-size: 0.55rem;
  letter-spacing: 0.16em;
  padding: 0.15rem 0.4rem;
  color: var(--ink-faint);
  border: 1px solid var(--line);
  border-radius: 2px;
}

.masthead__nav {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 3vw, 2.5rem);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.masthead__nav a {
  position: relative;
  text-decoration: none;
  padding-block: 0.4rem;
}

.masthead__nav a::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s var(--ease);
}

.masthead__nav a:hover::after,
.masthead__nav a[aria-current]::after {
  transform: scaleX(1);
}

.bag {
  display: inline-flex;
  align-items: baseline;
  gap: 0.4rem;
}

.bag__count {
  min-width: 1.35rem;
  padding: 0.1rem 0.3rem;
  border-radius: 999px;
  background: var(--clay);
  color: var(--paper);
  font-size: 0.65rem;
  letter-spacing: 0.06em;
  text-align: center;
}

/* Auf dem Telefon passen Wortmarke und drei Links nicht nebeneinander.
   Übrig bleibt, was man im Laden auch in der Hand hat: der Name und der
   Warenkorb. Die übrigen Wege stehen im Fuss. */
@media (max-width: 620px) {
  .wordmark {
    font-size: 0.75rem;
    letter-spacing: 0.18em;
  }

  .masthead__nav a:not(.bag) {
    display: none;
  }
}

/* ---------- Auftakt ---------- */

.opener {
  padding-block: clamp(4rem, 13vw, 11rem) clamp(3rem, 8vw, 7rem);
}

.opener__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.4rem;
  margin-bottom: clamp(2rem, 6vw, 4rem);
}

.opener__title {
  max-width: 14ch;
}

.opener__foot {
  display: grid;
  gap: 1.5rem;
  margin-top: clamp(2.5rem, 6vw, 4.5rem);
  padding-top: 1.6rem;
  border-top: 1px solid var(--line);
}

.opener__foot p {
  max-width: 46ch;
  color: var(--ink-soft);
}

@media (min-width: 900px) {
  .opener__foot {
    grid-template-columns: 1fr auto;
    align-items: end;
  }
}

/* ---------- Raster ---------- */

.collection {
  padding-bottom: var(--band);
}

.collection__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: clamp(1.5rem, 4vw, 3rem);
}

.grid {
  display: grid;
  gap: clamp(2.5rem, 5vw, 4.5rem) clamp(1.25rem, 2.5vw, 2.5rem);
  grid-template-columns: 1fr;
}

@media (min-width: 700px) {
  .grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1100px) {
  .grid {
    grid-template-columns: repeat(3, 1fr);
    padding-bottom: 7rem;
  }

  /* Die mittlere Spalte sitzt tiefer. Verschoben wird mit transform, damit
     die Zeilen im Raster gleich hoch bleiben. */
  .grid > .tile:nth-child(3n + 2) {
    transform: translateY(7rem);
  }
}

.tile {
  display: block;
  text-decoration: none;
  color: inherit;
}

.tile__media {
  display: block;
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: var(--paper-deep);
}

.tile__media img,
.tile__media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Nur die Fotos ziehen beim Darüberfahren leicht an. Das Video bleibt, wo
   es ist: skaliert ruckelt das laufende Bild, weil es neu gerastert wird. */
.tile__media img {
  transform: scale(1.001);
  transition: transform 1.1s var(--ease);
}

.tile:hover .tile__media img {
  transform: scale(1.045);
}

.tile__meta {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: 0.15rem 1rem;
  padding-top: 0.85rem;
}

.tile__name {
  font-family: var(--serif);
  font-size: 1.15rem;
  font-weight: 400;
  letter-spacing: -0.01em;
}

.tile__price {
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
  white-space: nowrap;
}

.tile__cat {
  grid-column: 1 / -1;
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* ---------- Band über das Atelier ---------- */

.atelier {
  background: var(--paper-deep);
  padding-block: var(--band);
}

.atelier__grid {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
}

@media (min-width: 900px) {
  .atelier__grid {
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }
}

.atelier__text p + p {
  margin-top: 1.2rem;
}

.atelier__text p {
  max-width: 52ch;
  color: var(--ink-soft);
}

.atelier__title {
  margin-top: 0.8rem;
}

.facts {
  margin-top: 2rem;
  display: grid;
  gap: 1px;
  background: var(--line);
  border-block: 1px solid var(--line);
}

.facts div {
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.1rem 0;
  background: var(--paper-deep);
}

.facts dt {
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.facts dd {
  font-family: var(--serif);
  font-size: 1.05rem;
  text-align: right;
}

/* ---------- Knöpfe ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.95rem 1.8rem;
  border: 1px solid var(--ink);
  border-radius: 999px;
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.35s var(--ease), color 0.35s var(--ease), border-color 0.35s var(--ease);
}

.btn--solid {
  background: var(--ink);
  color: var(--paper);
}

.btn--solid:hover {
  background: var(--clay);
  border-color: var(--clay);
}

.btn--line {
  background: transparent;
  color: var(--ink);
}

.btn--line:hover {
  background: var(--ink);
  color: var(--paper);
}

.btn--quiet {
  border-color: transparent;
  background: transparent;
  color: var(--ink-soft);
  padding-inline: 0.4rem;
}

.btn--quiet:hover {
  color: var(--ink);
}

.back {
  display: inline-block;
  padding-block: clamp(1.5rem, 4vw, 2.5rem);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink-soft);
}

.back:hover {
  color: var(--ink);
}

/* ---------- Produktseite ---------- */

.product {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  padding-bottom: var(--band);
}

@media (min-width: 900px) {
  .product {
    grid-template-columns: minmax(0, 1.25fr) minmax(300px, 0.75fr);
    gap: clamp(2.5rem, 5vw, 5rem);
    align-items: start;
  }

  .product__panel {
    position: sticky;
    top: 7rem;
  }
}

.product__shots {
  display: grid;
  gap: clamp(1rem, 2vw, 1.5rem);
}

.shot {
  position: relative;
  overflow: hidden;
  background: var(--paper-deep);
}

.shot img,
.shot video {
  width: 100%;
  /* Ohne height:auto behaelt das Bild die 768px aus dem height-Attribut und
     aspect-ratio bleibt wirkungslos. */
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.shot figcaption {
  position: absolute;
  left: 1rem;
  bottom: 0.9rem;
  font-size: 0.65rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--paper);
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.5);
}

.product__name {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(2.4rem, 5vw, 3.6rem);
  line-height: 1.02;
  letter-spacing: -0.02em;
  margin-top: 0.6rem;
}

.product__price {
  margin-top: 0.8rem;
  font-size: 0.95rem;
  letter-spacing: 0.08em;
  color: var(--ink-soft);
}

.product__lead {
  font-family: var(--serif);
  font-size: 1.25rem;
  line-height: 1.45;
  margin-top: 1.8rem;
}

.product__story {
  margin-top: 1.1rem;
  color: var(--ink-soft);
  max-width: 46ch;
}

.product__buy {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 0.8rem;
  margin-top: 2.2rem;
}

.qty {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0 1rem;
  border: 1px solid var(--line);
  border-radius: 999px;
}

.qty__label {
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.qty__input {
  width: 2.6rem;
  border: 0;
  background: transparent;
  color: inherit;
  font-family: var(--serif);
  font-size: 1.05rem;
  text-align: center;
}

.qty__input:focus {
  outline: none;
}

.product__note {
  margin-top: 1rem;
  font-size: 0.85rem;
  color: var(--clay);
}

.product__details {
  margin-top: 2.4rem;
  border-top: 1px solid var(--line);
}

.product__details li {
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--line);
  font-size: 0.88rem;
  color: var(--ink-soft);
}

.product__ship {
  margin-top: 1.4rem;
  font-size: 0.8rem;
  color: var(--ink-faint);
  max-width: 40ch;
}

.more {
  padding-bottom: var(--band);
}

.more__head {
  padding-bottom: clamp(1.5rem, 4vw, 2.5rem);
}

.more__grid {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  grid-template-columns: 1fr;
}

@media (min-width: 700px) {
  .more__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ---------- Warenkorb ---------- */

.page-head {
  padding-block: clamp(1rem, 3vw, 2rem) clamp(2rem, 6vw, 4rem);
}

.cart {
  display: grid;
  gap: clamp(2.5rem, 5vw, 4rem);
  padding-bottom: var(--band);
}

@media (min-width: 900px) {
  .cart {
    grid-template-columns: minmax(0, 1fr) minmax(280px, 22rem);
    align-items: start;
  }
}

.lines {
  border-top: 1px solid var(--line);
}

.line {
  display: grid;
  grid-template-columns: 5.5rem 1fr;
  grid-template-areas:
    'media body'
    'media qty'
    'sum   drop';
  gap: 0.6rem 1.2rem;
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--line);
}

.line__media {
  grid-area: media;
  overflow: hidden;
  background: var(--paper-deep);
}

.line__media img {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

.line__body {
  grid-area: body;
}

.line__cat {
  font-size: 0.65rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.line__name {
  font-family: var(--serif);
  font-size: 1.3rem;
  text-decoration: none;
}

.line__single {
  font-size: 0.8rem;
  color: var(--ink-soft);
}

.line__qty {
  grid-area: qty;
  display: inline-flex;
  align-items: center;
  gap: 0.9rem;
  justify-self: start;
  padding: 0.2rem 0.8rem;
  border: 1px solid var(--line);
  border-radius: 999px;
}

.step {
  border: 0;
  background: transparent;
  color: var(--ink-soft);
  font-size: 1rem;
  line-height: 1;
  padding: 0.35rem;
  cursor: pointer;
}

.step:hover {
  color: var(--ink);
}

.step__value {
  font-family: var(--serif);
  font-size: 1rem;
  min-width: 1ch;
  text-align: center;
}

.line__sum {
  grid-area: sum;
  font-family: var(--serif);
  font-size: 1.1rem;
}

.line__drop {
  grid-area: drop;
  justify-self: end;
  border: 0;
  background: transparent;
  color: var(--ink-faint);
  font-family: var(--sans);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
}

.line__drop:hover {
  color: var(--clay);
}

@media (min-width: 700px) {
  .line {
    grid-template-columns: 7rem 1fr auto auto;
    grid-template-areas:
      'media body qty sum'
      'media drop drop drop';
    align-items: center;
  }

  .line__drop {
    align-self: start;
  }
}

.summary {
  padding: clamp(1.5rem, 3vw, 2rem);
  background: var(--paper-deep);
}

.summary__title {
  font-family: var(--serif);
  font-weight: 300;
  font-size: 1.5rem;
  padding-bottom: 1rem;
}

.summary__rows div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.6rem 0;
  border-top: 1px solid var(--line);
  font-size: 0.9rem;
}

.summary__rows dt {
  color: var(--ink-soft);
}

.summary__total {
  font-family: var(--serif);
  font-size: 1.15rem;
}

.summary__total dt {
  color: var(--ink);
}

.summary__hint {
  padding-top: 0.9rem;
  font-size: 0.78rem;
  color: var(--ink-faint);
}

.summary__actions {
  display: grid;
  gap: 0.6rem;
  justify-items: stretch;
  padding-top: 1.4rem;
}

.summary__actions:empty {
  display: none;
}

.empty {
  display: grid;
  gap: 1.5rem;
  justify-items: start;
  padding: clamp(2rem, 8vw, 5rem) 0;
  border-top: 1px solid var(--line);
}

.empty__line {
  font-family: var(--serif);
  font-size: clamp(1.5rem, 4vw, 2.2rem);
}

/* ---------- Kasse ---------- */

.checkout {
  display: grid;
  gap: clamp(2.5rem, 5vw, 4rem);
  padding-bottom: var(--band);
}

@media (min-width: 900px) {
  .checkout {
    grid-template-columns: minmax(0, 1fr) minmax(280px, 22rem);
    align-items: start;
  }
}

.notice {
  display: flex;
  gap: 0.8rem;
  padding: 1rem 1.2rem;
  margin-bottom: 2rem;
  border: 1px solid var(--line);
  font-size: 0.82rem;
  color: var(--ink-soft);
}

.notice strong {
  font-weight: 500;
  color: var(--ink);
}

.fieldset {
  border: 0;
  padding: 0;
  margin: 0 0 2.5rem;
}

.fieldset__title {
  font-family: var(--serif);
  font-size: 1.35rem;
  font-weight: 300;
  /* legend bringt von sich aus seitliches Polster mit und stuende sonst
     zwei Pixel neben den Feldern. */
  padding: 0 0 1.2rem;
}

.fields {
  display: grid;
  gap: 1rem;
}

@media (min-width: 620px) {
  .fields--two {
    grid-template-columns: 1fr 1fr;
  }
}

.fields + .fields {
  margin-top: 1rem;
}

.field {
  display: grid;
  gap: 0.4rem;
}

.field span {
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.field input {
  width: 100%;
  padding: 0.85rem 0;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  color: var(--ink);
  font-family: var(--serif);
  font-size: 1.05rem;
}

.field input::placeholder {
  color: var(--ink-faint);
}

.field input:focus {
  outline: none;
  border-bottom-color: var(--ink);
}

.field input:disabled {
  color: var(--ink-faint);
  border-bottom-style: dashed;
}

.mini {
  padding-bottom: 1.2rem;
}

.mini__line {
  display: grid;
  grid-template-columns: 4rem 1fr auto;
  align-items: center;
  gap: 1rem;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--line);
}

.mini__media {
  display: block;
  overflow: hidden;
  background: var(--paper-deep);
}

.mini__media img {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

.mini__body {
  display: grid;
  gap: 0.15rem;
}

.mini__name {
  font-family: var(--serif);
  font-size: 1.05rem;
}

.mini__qty {
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  color: var(--ink-faint);
}

.mini__sum {
  font-size: 0.85rem;
  color: var(--ink-soft);
  white-space: nowrap;
}

.done {
  padding: clamp(2rem, 6vw, 4rem) 0;
  border-top: 1px solid var(--line);
}

.done__title {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(2rem, 5vw, 3rem);
  line-height: 1.05;
}

.done p {
  max-width: 44ch;
  margin-top: 1.2rem;
  color: var(--ink-soft);
}

.done .btn {
  margin-top: 2rem;
}

/* ---------- Fuss ---------- */

.colophon {
  background: var(--paper-dark);
  color: var(--paper);
  padding-block: clamp(3rem, 7vw, 5rem);
}

.colophon__row {
  display: grid;
  gap: 2rem;
}

@media (min-width: 800px) {
  .colophon__row {
    grid-template-columns: 1fr auto;
    align-items: end;
  }
}

.colophon__mark {
  font-family: var(--serif);
  font-size: clamp(2rem, 6vw, 3.5rem);
  font-weight: 300;
  line-height: 1;
}

.colophon__lines {
  margin-top: 1rem;
  font-size: 0.82rem;
  color: color-mix(in srgb, var(--paper) 60%, transparent);
}

.colophon__nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.6rem;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.colophon__nav a {
  text-decoration: none;
  color: color-mix(in srgb, var(--paper) 75%, transparent);
}

.colophon__nav a:hover {
  color: var(--paper);
}

.colophon__demo {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid color-mix(in srgb, var(--paper) 18%, transparent);
  font-size: 0.75rem;
  color: color-mix(in srgb, var(--paper) 55%, transparent);
}

.colophon__demo a {
  color: var(--paper);
}

/* ---------- Auftauchen beim Scrollen ---------- */

/* Versteckt wird nur, wenn JavaScript läuft. Sonst stünde die Seite ohne
   Skript leer da. Die Kacheln blenden ohne transform ein, damit sie sich
   nicht mit dem Versatz der mittleren Spalte streiten. */
.js .reveal {
  opacity: 0;
  transform: translateY(1.5rem);
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
}

.js .reveal.is-in {
  opacity: 1;
  transform: none;
}

.is-watched > .tile {
  opacity: 0;
  transition: opacity 0.9s var(--ease);
}

.is-watched > .tile.is-in {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .js .reveal,
  .is-watched > .tile {
    opacity: 1;
    transform: none;
  }

  .grid > .tile:nth-child(3n + 2) {
    transform: none;
  }
}