/* nini paganini – Vorgaben siehe DESIGN.md */

@font-face {
  font-family: "Instrument Serif";
  src: url("fonts/instrument-serif-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Serif";
  src: url("fonts/instrument-serif-latin-400-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Geist";
  src: url("fonts/geist-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "Geist Mono";
  src: url("fonts/geist-mono-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  /* --leinen auch als theme-color in index.html */
  --leinen: #f4f0e8;
  --wolle: #faf8f3;
  --espresso: #211c18;
  --taupe: #82776b;
  --naht: #e2dbcf;
  --gold: #b39a62;

  --serif: "Instrument Serif", "Iowan Old Style", serif;
  --sans: "Geist", system-ui, sans-serif;
  --mono: "Geist Mono", ui-monospace, monospace;

  --kopf: 4.5rem;
  --breite: 1440px;
  --zeile: 34rem;
  --rinne: 1.5rem;
  --rand: clamp(1rem, 4vw, 3rem);
  --abschnitt: clamp(5rem, 12vw, 10rem);
  --linie: 1px solid var(--naht);
  --klein: 0.9375rem;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--kopf) + 0.5rem);
}

body {
  margin: 0;
  overflow-x: clip;
  background: var(--leinen);
  color: var(--espresso);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

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

a {
  color: inherit;
}

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

.wrap {
  max-width: var(--breite);
  margin: 0 auto;
  padding: 0 var(--rand);
}

/* ---------- Typografie ---------- */

.serif,
.wortmarke,
.recht h2 {
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: -0.01em;
}

.meta,
.foto[data-platzhalter]::after {
  font-family: var(--mono);
  font-size: 0.6875rem;
  line-height: 1.5;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--taupe);
}

.titel {
  margin: 0 0 1.5rem;
  font-size: clamp(2.5rem, 5vw, 4rem);
  line-height: 1.02;
}

.text,
.recht p {
  margin: 0;
  color: var(--taupe);
}

.text {
  max-width: var(--zeile);
}

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

/* Von main.js in Masken zerlegter Text (Buchstaben oder Wörter) */
.maske {
  display: inline-block;
  overflow: hidden;
  padding: 0 0.06em 0.14em;
  margin: 0 -0.06em -0.14em;
  vertical-align: top;
}

.maske > span {
  display: inline-block;
}

/* ---------- Links & Buttons ---------- */

.button {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  gap: 1rem;
  min-height: 44px;
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
}

.button::after {
  content: "";
  width: 2.5rem;
  height: 1px;
  background: currentColor;
  transition: width 600ms var(--ease);
}

.button:hover::after {
  width: 4.5rem;
}

.link {
  display: inline-block;
  padding: 0.75rem 0;
  text-decoration: none;
  background: linear-gradient(currentColor, currentColor) right bottom 0.6rem / 0% 1px no-repeat;
  transition: background-size 400ms var(--ease);
}

.link:hover {
  background-size: 100% 1px;
  background-position: left bottom 0.6rem;
}

/* ---------- Intro-Vorhang (nur mit Bewegung, einmal pro Sitzung) ---------- */

.intro {
  display: none;
}

.intro-zeigen .intro {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: grid;
  place-items: center;
  background: var(--espresso);
  color: var(--wolle);
  /* Notbremse, falls main.js nicht lädt */
  animation: intro-weg 600ms 2.5s forwards;
}

.intro-wort {
  font-size: clamp(2rem, 5vw, 3.5rem);
}

@keyframes intro-weg {
  to {
    opacity: 0;
    visibility: hidden;
  }
}

/* ---------- Kopfzeile ---------- */

/* Standard deckend; die Startseite macht sie über dem Hero transparent (.ist-oben) */
.kopf {
  position: fixed;
  inset: 0 0 auto;
  z-index: 10;
  background: var(--leinen);
  border-bottom: var(--linie);
  transition: background-color 400ms var(--ease), border-color 400ms var(--ease), transform 500ms var(--ease);
}

.kopf.ist-oben {
  background: transparent;
  border-color: transparent;
}

.kopf.versteckt {
  transform: translateY(-100%);
}

.kopf .wrap {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  min-height: var(--kopf);
}

.kopf .wrap > * {
  grid-row: 1;
}

.kopf-zusatz {
  grid-column: 1;
  color: inherit;
}

.wortmarke {
  grid-column: 2;
  font-size: 1.6rem;
  line-height: 1;
  text-decoration: none;
}

.nav,
.menu-knopf,
.kopf .wrap > .link {
  grid-column: 3;
  justify-self: end;
}

.nav {
  display: flex;
  gap: 2rem;
}

.nav a,
.menu-knopf,
.kopf .wrap > .link {
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.menu-knopf {
  display: none;
}

/* ---------- Hero ---------- */

.hero {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 100dvh;
  padding: calc(var(--kopf) + 2rem) var(--rand) clamp(1.5rem, 4vw, 3rem);
}

.hero-titel {
  display: flex;
  flex-direction: column;
  margin: 0;
  font-size: clamp(4.5rem, 16vw, 18rem);
  line-height: 0.86;
}

.zeile {
  display: flex;
  align-items: center;
  gap: 0.12em;
}

.zeile-rechts {
  align-self: flex-end;
}

/* Hochovale Bildfenster zwischen den Wörtern; Foto einsetzen: <img> hineinlegen */
.pille {
  flex: none;
  width: 0.5em;
  height: 0.74em;
  margin-top: 0.1em;
  border-radius: 999px;
  overflow: hidden;
  transform-origin: center bottom;
}

.pille img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-fuss {
  display: grid;
  gap: var(--rinne);
  margin-top: clamp(2rem, 5vw, 4rem);
}

.bewegung .hero-titel,
.bewegung .hero-fuss {
  /* main.js blendet ein; ohne main.js nach 2.5s sichtbar */
  visibility: hidden;
  animation: sichtbar 0s 2.5s forwards;
}

@keyframes sichtbar {
  to { visibility: visible; }
}

/* ---------- Fotos & Platzhalter ---------- */

/* Foto einsetzen: <img> in die figure legen – Platzhalter-Text verschwindet von selbst */
.foto {
  position: relative;
  margin: 0;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: var(--wolle);
}

.foto picture {
  display: contents;
}

.foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.foto[data-platzhalter]::after {
  content: "Foto folgt – " attr(data-platzhalter);
  position: absolute;
  left: 1.25rem;
  bottom: 1.25rem;
  color: color-mix(in srgb, var(--espresso) 55%, transparent);
}

.foto:has(img)::after {
  content: none;
}

.ton-butter { background: #e3d3a1; }
.ton-milch  { background: #ebe5d7; }
.ton-kakao  { background: #6c5444; }

/* ---------- Großes Laufband ---------- */

.band {
  overflow: hidden;
  padding-block: clamp(3rem, 8vw, 6rem);
  border-top: var(--linie);
}

.band-zeile {
  display: flex;
  width: max-content;
  font-family: var(--serif);
  font-size: clamp(3.5rem, 10vw, 10rem);
  line-height: 1.05;
  white-space: nowrap;
  color: var(--taupe);
}

.band-zeile > * {
  padding-right: 0.3em;
}

.band-umriss {
  color: transparent;
  -webkit-text-stroke: 1px var(--taupe);
}

/* ---------- Kollektion ---------- */

.abschnitt {
  padding-block: var(--abschnitt);
}

.kollektion {
  position: relative;
  overflow: hidden;
}

.kollektion-intro {
  padding: var(--abschnitt) var(--rand) 3rem;
}

.tasche {
  display: grid;
  gap: 1.5rem;
  padding: 3rem var(--rand) 4rem;
}

.tasche .foto {
  background: rgb(43 34 28 / 0.08);
}

.tasche h3 {
  margin: 0;
  font-size: clamp(4rem, 13vw, 14rem);
  line-height: 0.85;
}

.tasche .text {
  margin-top: 1rem;
}

.tasche.ton-kakao {
  color: var(--wolle);
}

.tasche.ton-kakao .text,
.tasche.ton-kakao .meta,
.tasche.ton-kakao .foto::after {
  color: rgb(252 250 246 / 0.72);
}

.kollektion-fortschritt {
  display: none;
}

/* Desktop mit Bewegung: main.js setzt .horizontal und scrollt seitwärts */
@media (min-width: 768px) {
  .kollektion.horizontal .kollektion-spur {
    display: flex;
    width: max-content;
    height: 100dvh;
  }

  .kollektion.horizontal .kollektion-intro {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    width: 42vw;
    padding: calc(var(--kopf) + 3rem) var(--rand) 5rem;
  }

  .kollektion.horizontal .tasche {
    grid-template-columns: auto 1fr;
    align-items: end;
    gap: 4vw;
    width: 78vw;
    padding: calc(var(--kopf) + 2rem) 5vw 5rem;
  }

  .kollektion.horizontal .tasche .foto {
    height: calc(100dvh - var(--kopf) - 7rem);
  }

  .kollektion.horizontal .kollektion-fortschritt {
    display: block;
    position: absolute;
    left: var(--rand);
    right: var(--rand);
    bottom: 2rem;
    height: 1px;
    background: rgb(43 34 28 / 0.15);
  }

  .kollektion-fortschritt span {
    display: block;
    height: 100%;
    background: var(--espresso);
    transform: scaleX(0);
    transform-origin: left;
  }
}

/* ---------- Detail & Atelier ---------- */

.fakten {
  margin: 2.5rem 0 0;
  padding: 0;
  list-style: none;
  max-width: var(--zeile);
}

.fakten li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.9rem 0;
  border-top: var(--linie);
}

.fakten li:last-child {
  border-bottom: var(--linie);
}

.zweispaltig {
  display: grid;
  gap: var(--rinne);
}

/* ---------- Shop-Abschluss ---------- */

.shop {
  background: var(--espresso);
  color: var(--wolle);
  padding-block: clamp(6rem, 14vw, 12rem);
}

.shop .titel {
  font-size: clamp(4rem, 13vw, 13rem);
  line-height: 0.9;
}

.shop .text,
.shop .meta {
  color: rgb(252 250 246 / 0.7);
}


.shop-zeile {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 2rem;
  margin-top: 2.5rem;
}

.punkt::before {
  content: "";
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  margin-right: 0.6rem;
  border-radius: 50%;
  background: var(--gold);
  vertical-align: 0.1em;
}

.bewegung .punkt::before {
  animation: pulsieren 2.4s ease-in-out infinite;
}

@keyframes pulsieren {
  50% {
    transform: scale(1.6);
    opacity: 0.5;
  }
}

/* ---------- Fußzeile ---------- */

.fuss {
  border-top: var(--linie);
  padding-block: 2.5rem;
}

.fuss .wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem 2rem;
}

.fuss nav {
  display: flex;
  gap: 1.5rem;
}

.fuss a {
  text-decoration: none;
}

.fuss a:hover {
  color: var(--espresso);
}

/* ---------- Rechtstexte ---------- */

.recht {
  max-width: 44rem;
  padding-top: calc(var(--kopf) + 4.5rem);
  padding-bottom: var(--abschnitt);
}

.recht h2 {
  margin: 2.5rem 0 0.5rem;
  font-size: 1.75rem;
}

.recht p {
  margin-bottom: 1rem;
}

/* ---------- Einblenden beim Scrollen ---------- */

.js .einblenden {
  opacity: 0;
  transition: opacity 900ms var(--ease), transform 900ms var(--ease);
}

.bewegung .einblenden {
  transform: translateY(24px);
}

.js .einblenden.ist-sichtbar {
  opacity: 1;
  transform: none;
}

/* ---------- Ab Tablet: 12-Spalten-Raster ---------- */

@media (min-width: 768px) {
  .hero-fuss,
  .zweispaltig {
    grid-template-columns: repeat(12, 1fr);
    column-gap: var(--rinne);
  }

  .hero-fuss .text { grid-column: 1 / 5; }
  .hero-fuss .button { grid-column: 5 / 8; align-self: end; }
  .hero-fuss .meta { grid-column: 9 / -1; justify-self: end; align-self: end; margin: 0; }

  .zweispaltig { align-items: center; }
  .zweispaltig > .foto { grid-column: 1 / 7; }
  .zweispaltig > .inhalt { grid-column: 8 / -1; }
  .zweispaltig.gespiegelt > .foto { grid-column: 7 / -1; grid-row: 1; }
  .zweispaltig.gespiegelt > .inhalt { grid-column: 1 / 6; }
}

/* ---------- Mobiles Menü ---------- */

@media (max-width: 767px) {
  .nav,
  .kopf-zusatz {
    display: none;
  }

  .hero {
    min-height: auto;
    padding-top: calc(var(--kopf) + clamp(4rem, 18vw, 7rem));
  }

  .hero-titel {
    font-size: 22vw;
  }

  .menu-knopf {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font-family: inherit;
    cursor: pointer;
  }

  .kopf.menu-offen {
    background: var(--leinen);
  }

  /* Kopfzeile bleibt mobil immer sichtbar, damit das Menü erreichbar ist */
  .kopf.versteckt {
    transform: none;
  }

  .kopf.menu-offen .nav {
    display: flex;
    flex-direction: column;
    justify-self: stretch;
    position: fixed;
    inset: var(--kopf) 0 0;
    gap: 0;
    padding: 2rem var(--rand);
    background: var(--leinen);
  }

  .kopf.menu-offen .nav a {
    padding: 0.5rem 0;
    font-family: var(--serif);
    font-size: 3rem;
    line-height: 1.1;
    letter-spacing: 0;
    text-transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}