@import url("tokens.css");

/* ---- Basis -------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--c-bg);
  color: var(--c-text);
  font-family: var(--font-serif);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  font-weight: var(--fw-regular);
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p, figure, dl, dd { margin: 0; }

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .22em; }
a:hover { color: var(--c-accent); }
:focus-visible { outline: 1px solid var(--c-focus); outline-offset: 4px; }

.skip { position: absolute; left: -999px; }
.skip:focus { left: var(--gutter); top: var(--s-3); background: var(--c-surface); padding: var(--s-2) var(--s-3); z-index: 10; }

.wrap { max-width: var(--max-w); margin-inline: auto; padding-inline: var(--gutter); }

/* Kleintext in der Grotesk */
.meta, .nav, .caption, .site-footer {
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  letter-spacing: .01em;
}

/* ---- Kopf --------------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 5;
  background: color-mix(in srgb, var(--c-bg) 92%, transparent);
  backdrop-filter: blur(6px);
  border-bottom: var(--line);
}
.site-header .wrap {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--s-4); padding-block: var(--s-3);
}
.brand { font-size: var(--fs-md); font-weight: var(--fw-light); text-decoration: none; line-height: 1; }
.nav ul { display: flex; gap: var(--s-4); list-style: none; margin: 0; padding: 0; }
.nav a { text-decoration: none; color: var(--c-muted); }
.nav a:hover, .nav a[aria-current="true"] { color: var(--c-text); text-decoration: underline; }

@media (max-width: 640px) {
  .site-header .wrap { flex-direction: column; gap: var(--s-2); }
  .nav ul { gap: var(--s-3); flex-wrap: wrap; }
}

/* ---- Abschnitte --------------------------------------------------------- */
.section { padding-block: var(--s-8); border-top: var(--line); }
.section-head {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: var(--s-5); margin-bottom: var(--s-7);
}
.section-title { font-size: var(--fs-lg); font-weight: var(--fw-light); line-height: var(--lh-snug); }
.section-intro { color: var(--c-muted); max-width: 44ch; }
@media (max-width: 800px) {
  .section { padding-block: var(--s-7); }
  .section-head { grid-template-columns: 1fr; gap: var(--s-3); margin-bottom: var(--s-6); }
}

/* ---- Hero --------------------------------------------------------------- */
.hero { padding-block: var(--s-6) var(--s-8); }
.hero .wrap {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--s-6); align-items: end;
}
.hero-name {
  font-size: var(--fs-hero);
  font-weight: 250;
  line-height: .92;
  letter-spacing: -.025em;
  font-variation-settings: "opsz" 72;
}
.hero-name span { display: block; }
.hero-name span + span { padding-left: .9em; font-style: italic; }
.hero-text { margin-top: var(--s-6); max-width: 34ch; font-size: var(--fs-md); line-height: var(--lh-snug); font-weight: var(--fw-light); }
.hero-text + .meta { margin-top: var(--s-4); color: var(--c-muted); }
.hero-figure img { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; }
.hero-figure .caption { margin-top: var(--s-2); }

@media (max-width: 800px) {
  .hero .wrap { grid-template-columns: 1fr; }
  .hero-figure { order: -1; max-width: 26rem; }
}

.caption { color: var(--c-muted); font-size: var(--fs-xs); }

/* ---- Werk --------------------------------------------------------------- */
.works { display: grid; gap: var(--s-8); }
.work {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--s-6); align-items: start;
}
.work:nth-child(even) { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.work:nth-child(even) .work-media { order: 2; }

.work-main { width: 100%; cursor: zoom-in; padding: 0; border: 0; background: none; }
.work-main img { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; }
.work--wide .work-main img { aspect-ratio: auto; }

.work-thumbs { display: flex; gap: var(--s-2); margin-top: var(--s-2); list-style: none; padding: 0; }
.work-thumbs button {
  width: 4rem; padding: 0; border: 1px solid transparent; background: none; cursor: pointer;
  opacity: .6; transition: opacity var(--dur) var(--ease);
}
.work-thumbs button:hover { opacity: 1; }
.work-thumbs button[aria-pressed="true"] { opacity: 1; border-color: var(--c-text); }
.work-thumbs img { aspect-ratio: 2 / 3; object-fit: cover; }

.work-body { position: sticky; top: 6rem; padding-top: var(--s-2); }
.work-no { color: var(--c-muted); }
.work-title {
  font-size: var(--fs-xl); font-weight: var(--fw-light); line-height: var(--lh-tight);
  letter-spacing: -.015em; margin-top: var(--s-3); text-wrap: balance;
}
.work-title[lang="it"] { font-style: italic; }
.work-facts { margin-top: var(--s-5); border-top: var(--line); }
.work-facts div { display: grid; grid-template-columns: 7rem 1fr; gap: var(--s-3); padding-block: var(--s-2); border-bottom: var(--line); }
.work-facts dt { font-family: var(--font-sans); font-size: var(--fs-sm); color: var(--c-muted); padding-top: .2em; }

.inquiry { display: inline-block; margin-top: var(--s-5); font-family: var(--font-sans); font-size: var(--fs-sm); }

@media (max-width: 800px) {
  .works { gap: var(--s-7); }
  .work, .work:nth-child(even) { grid-template-columns: 1fr; gap: var(--s-4); }
  .work:nth-child(even) .work-media { order: 0; }
  .work-body { position: static; }
}

/* ---- Weitere Arbeiten (Archiv) ----------------------------------------- */
.archive { margin-top: var(--s-8); }
.archive-group + .archive-group { margin-top: var(--s-7); }
.archive-group h3 { font-size: var(--fs-md); font-weight: var(--fw-light); margin-bottom: var(--s-4); }
.archive-grid {
  display: grid; gap: var(--s-3);
  grid-template-columns: repeat(auto-fill, minmax(min(11rem, 45%), 1fr));
  list-style: none; margin: 0; padding: 0;
}
.archive-grid button { padding: 0; border: 0; background: none; cursor: zoom-in; width: 100%; }
.archive-grid img { width: 100%; aspect-ratio: 2 / 3; object-fit: contain; transition: opacity var(--dur) var(--ease); }
.archive-grid button:hover img { opacity: .85; }

/* ---- Leitmotiv ---------------------------------------------------------- */
.motif { max-width: var(--measure); }
.motif p + p { margin-top: var(--s-4); }
.motif .lead { font-size: var(--fs-md); line-height: var(--lh-snug); font-weight: var(--fw-light); }
.motif blockquote {
  margin: var(--s-7) 0 0; padding: var(--s-5) 0 0; border-top: var(--line-strong);
  font-size: var(--fs-xl); line-height: 1.15; font-weight: var(--fw-light); font-style: italic;
  letter-spacing: -.01em; text-wrap: balance;
}

/* ---- Zweispaltig (Leitmotiv, Über) --------------------------------------------------------------- */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--s-5); }
.bio { max-width: var(--measure); font-size: var(--fs-md); line-height: 1.45; font-weight: var(--fw-light); }
@media (max-width: 800px) { .split { grid-template-columns: 1fr; gap: var(--s-4); } }

/* ---- Kontakt ------------------------------------------------------------ */
.contact-list { list-style: none; margin: 0; padding: 0; border-top: var(--line); }
.contact-list li {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--s-5);
  align-items: baseline; padding-block: var(--s-4); border-bottom: var(--line);
}
.contact-list .meta { color: var(--c-muted); }
.contact-list a { font-size: var(--fs-xl); font-weight: var(--fw-light); line-height: 1.1; text-decoration: none; overflow-wrap: anywhere; }
.contact-list a:hover { text-decoration: underline; }
@media (max-width: 800px) { .contact-list li { grid-template-columns: 1fr; gap: var(--s-1); } }

/* ---- Fuß ---------------------------------------------------------------- */
.site-footer { border-top: var(--line); padding-block: var(--s-5); color: var(--c-muted); font-size: var(--fs-xs); }
.site-footer .wrap { display: flex; justify-content: space-between; gap: var(--s-4); flex-wrap: wrap; }
.site-footer a { color: inherit; }

/* ---- Lightbox ----------------------------------------------------------- */
.lightbox {
  border: 0; padding: 0; margin: 0; width: 100vw; height: 100dvh; max-width: none; max-height: none;
  background: var(--c-bg);
}
.lightbox::backdrop { background: var(--c-bg); }
.lightbox[open] { display: grid; grid-template-rows: 1fr auto; }
.lightbox figure { display: grid; place-items: center; min-height: 0; padding: var(--s-5) var(--gutter) 0; }
.lightbox img { max-height: calc(100dvh - 7rem); width: auto; object-fit: contain; }
.lightbox-bar {
  display: flex; justify-content: space-between; align-items: center; gap: var(--s-3);
  padding: var(--s-3) var(--gutter); font-family: var(--font-sans); font-size: var(--fs-sm); color: var(--c-muted);
}
.lightbox-bar button {
  font: inherit; color: var(--c-text); background: none; border: 0; padding: var(--s-2); cursor: pointer;
  text-decoration: underline; text-underline-offset: .22em; text-decoration-thickness: 1px;
}
.lightbox-bar button:hover { color: var(--c-accent); }
.lightbox-nav { display: flex; gap: var(--s-3); }

/* ---- Button ------------------------------------------------------------- */
.button {
  display: inline-block; font-family: var(--font-sans); font-size: var(--fs-sm); font-weight: var(--fw-medium);
  color: var(--c-text); text-decoration: none; padding: .7em 1.25em;
  border: var(--line-strong); border-radius: var(--radius); background: transparent;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.button:hover { background: var(--c-text); color: var(--c-bg); }

/* ---- Status ------------------------------------------------------------- */
.status { font-family: var(--font-sans); font-size: var(--fs-sm); color: var(--c-muted); display: inline-flex; align-items: center; gap: .5em; }
.status::before { content: ""; width: .5em; height: .5em; border-radius: 50%; border: 1px solid currentColor; }
.status--verfuegbar { color: var(--c-accent); }
.status--verfuegbar::before { background: currentColor; }
.status--reserviert::before { background: var(--pollen); border-color: #A89B4F; }

/* ---- Shop --------------------------------------------------------------- */
.shop-intro { padding-block: var(--s-7) var(--s-6); }
.shop-intro .section-title { font-size: var(--fs-xl); line-height: var(--lh-tight); }
.shop { padding-top: var(--s-6); }

.shop-grid {
  display: grid; gap: var(--s-7) var(--s-5);
  grid-template-columns: repeat(auto-fill, minmax(min(19rem, 100%), 1fr));
}
.item { display: grid; align-content: start; gap: var(--s-4); scroll-margin-top: 6rem; }
/* Texte einer Reihe auf gleiche Höhe, auch wenn nur manche Arbeiten Zusatzansichten haben */
@supports (grid-template-rows: subgrid) {
  .item { grid-row: span 2; grid-template-rows: subgrid; row-gap: var(--s-4); }
}
.item .work-main img { aspect-ratio: 4 / 5; }
.item .work-thumbs button { width: 3rem; }
.item-no { color: var(--c-muted); }
.item-title { font-size: var(--fs-md); font-weight: var(--fw-light); line-height: var(--lh-snug); margin-top: var(--s-1); text-wrap: balance; }
.item-title[lang="it"] { font-style: italic; }
.item-material { color: var(--c-muted); margin-top: var(--s-1); }
.item-facts { color: var(--c-muted); margin-top: var(--s-1); }
.item-buy {
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-3);
  margin-block: var(--s-4); padding-block: var(--s-3); border-block: var(--line);
}
.price { font-size: var(--fs-base); }
.item.is-sold .price { color: var(--c-muted); text-decoration: line-through; text-decoration-thickness: 1px; }
.item.is-sold .work-main img { opacity: .7; }

.steps { list-style: none; margin: 0; padding: 0; counter-reset: step; border-top: var(--line); max-width: var(--measure); }
.steps li { counter-increment: step; display: grid; grid-template-columns: 2.5rem 1fr; padding-block: var(--s-4); border-bottom: var(--line); }
.steps li::before { content: counter(step); grid-row: span 2; font-size: var(--fs-md); font-weight: var(--fw-light); line-height: 1.2; color: var(--c-muted); }
.steps h3 { font-size: var(--fs-md); font-weight: var(--fw-light); line-height: 1.2; }
.steps p { color: var(--c-muted); margin-top: var(--s-2); }
.shop-note { margin-top: var(--s-5); font-size: var(--fs-sm); }

/* ---- 404 ---------------------------------------------------------------- */
.not-found-code { color: var(--c-muted); margin-bottom: var(--s-4); }
.not-found-actions { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-4); margin-top: var(--s-6); }
.not-found-actions .inquiry { margin-top: 0; }