/* Beratung: die Korkwand. Eine gerahmte Pinnwand an der Stoffwand —
   die Proben werden von vorn dagegen geworfen und mit der Nadel
   angeheftet; jede mit einem Zettel.
   Auf dem Handy liegen sie untereinander — dort ohne Wand und Nadeln. */
.muster {
  list-style: none;
  margin: var(--raum-2) 0 0;
  padding: 56px 52px 84px;   /* unten mehr: die Zettel hängen 30 px über die Proben hinaus */
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  /* Luft zwischen den Proben: sie hängen nebeneinander an der Wand,
     sie stapeln sich nicht. Zeilenabstand größer als Spaltenabstand,
     weil der Zettel unten über die Probe der nächsten Reihe ragt. */
  gap: var(--raum-6) var(--raum-5);
  /* Genau vier Proben pro Reihe (4 × 200 px + 3 × 64 px) plus
     Kork-Passepartout und Rahmen — border-box: beides zählt in die
     Breite hinein, sonst kippt das Raster auf drei pro Reihe. */
  max-width: calc(992px + 2 * 52px + 2 * 12px);
  margin-inline: auto;

  /* Die Korkwand selbst. Presskork liest sich über drei Körnungen:
     große Wolken (der Ton schwankt flächig), die Schnitzel (das
     typische 3–5-px-Gesprenkel) und der Feinstaub. Dazu Licht von
     oben, das an den Rändern absackt, und ein paar alte Nadelstiche —
     die Wand war schon in Gebrauch. Der Rahmen ist dunkles Nussholz
     (kein Mahagoni — das gehört der Kasse) und liegt als Ring auf der
     Border, der Kork darunter nur im Innenfeld. */
  border: 12px solid transparent;
  border-radius: 10px;
  background-image:
    radial-gradient(115% 100% at 50% 34%, rgba(255, 232, 200, 0.10) 0%, transparent 45%, rgba(38, 26, 18, 0.30) 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='460' height='380'%3E%3Cg%3E%3Ccircle cx='52' cy='64' r='1.7' fill='%23241608' opacity='.5'/%3E%3Ccircle cx='52' cy='66.2' r='1.7' fill='%23e8caa0' opacity='.16'/%3E%3Ccircle cx='210' cy='158' r='1.6' fill='%23241608' opacity='.45'/%3E%3Ccircle cx='210' cy='160' r='1.6' fill='%23e8caa0' opacity='.14'/%3E%3Ccircle cx='384' cy='86' r='1.7' fill='%23241608' opacity='.5'/%3E%3Ccircle cx='384' cy='88.2' r='1.7' fill='%23e8caa0' opacity='.15'/%3E%3Ccircle cx='120' cy='300' r='1.6' fill='%23241608' opacity='.42'/%3E%3Ccircle cx='120' cy='302' r='1.6' fill='%23e8caa0' opacity='.13'/%3E%3Ccircle cx='330' cy='322' r='1.7' fill='%23241608' opacity='.48'/%3E%3Ccircle cx='330' cy='324.2' r='1.7' fill='%23e8caa0' opacity='.15'/%3E%3Ccircle cx='432' cy='238' r='1.6' fill='%23241608' opacity='.4'/%3E%3Ccircle cx='432' cy='240' r='1.6' fill='%23e8caa0' opacity='.12'/%3E%3C/g%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='s'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23s)' opacity='0.4'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='c'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.3 0.24' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23c)' opacity='0.5'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='480' height='480'%3E%3Cfilter id='w'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.05' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='480' height='480' filter='url(%23w)' opacity='0.32'/%3E%3C/svg%3E"),
    linear-gradient(180deg, #b08a5e 0%, #9b7952 55%, #8a6a46 100%),
    linear-gradient(180deg, #52381f 0%, #3b2917 55%, #2e1f10 100%);
  background-clip: padding-box, padding-box, padding-box, padding-box, padding-box, padding-box, border-box;
  background-blend-mode: normal, normal, overlay, soft-light, multiply, normal, normal;
  box-shadow:
    0 0 0 1px rgba(20, 12, 5, 0.9),                 /* Kante des Rahmens */
    0 30px 50px -24px rgba(0, 0, 0, 0.75),          /* hängt an der Wand */
    0 3px 8px rgba(0, 0, 0, 0.35),
    inset 0 4px 10px rgba(20, 12, 5, 0.5),          /* der Kork liegt hinter dem Rahmen */
    inset 0 -1px 0 rgba(255, 240, 220, 0.09);       /* Licht fängt sich an der Unterkante */
}

.stoff {
  position: relative;
  width: 200px;
  transform: rotate(var(--neigung, 0deg));
  /* Dreht um die Nadel oben, nicht um die Mitte — eine angepinnte Probe
     hängt an ihrem Stich, alles Pendeln geschieht um diesen Punkt */
  transform-origin: 50% 19px;
  transition: transform 450ms var(--kurve);
}
.stoff:hover {
  transform: rotate(0deg) translateY(-6px);
  z-index: 2;
}
/* Eingang: jede Probe kommt von vorn — groß, dicht vor der Kamera —
   und wird gegen den Stoff der Seite geworfen: schnell bis zum
   Aufprall, dort schlägt sie leicht über ihre Neigung hinaus und
   pendelt um die Nadel in die Ruhelage. Von links nach rechts, zügig
   (100 ms Versatz), die Nadel steckt jeweils im Moment des Aufpralls.
   Vorher (wartet) hängt noch nichts an der Wand. */
.muster.wartet .stoff { opacity: 0; }
.muster.ist-da .stoff {
  animation: stoff-fliegt-an 600ms both;
  animation-delay: calc(var(--i) * 100ms);
}
@keyframes stoff-fliegt-an {
  0% {
    opacity: 0;
    transform: scale(1.8) rotate(calc(var(--neigung, 0deg) * 0.25));
    /* Wurf: beschleunigt aufs Ziel zu, keine weiche Landung */
    animation-timing-function: cubic-bezier(0.4, 0, 0.85, 0.7);
  }
  40% { opacity: 1; }
  62% {
    transform: scale(1) rotate(calc(var(--neigung, 0deg) * 1.5));
    animation-timing-function: var(--kurve);
  }
  82% {
    transform: scale(1) rotate(calc(var(--neigung, 0deg) * 0.8));
    animation-timing-function: var(--kurve);
  }
  100% { opacity: 1; transform: scale(1) rotate(var(--neigung, 0deg)); }
}
/* Der Schatten bleibt weg, solange die Probe in der Luft ist, und
   fällt erst beim Aufprall scharf auf die Wand */
.muster.ist-da .stoff::before {
  animation: stoff-schatten-faellt 600ms ease-out both;
  animation-delay: calc(var(--i) * 100ms);
}
@keyframes stoff-schatten-faellt {
  0%, 45% { opacity: 0; transform: translateY(16px) scale(1.3); }
  62%     { opacity: 1; transform: translateY(10px) scale(1); }
  100%    { opacity: 1; transform: translateY(10px) scale(1); }
}
/* Die Pinnadel: kommt ebenfalls von vorn und wird im Moment des
   Aufpralls hineingedrückt — kleiner Überschwinger, dann sitzt sie */
.muster.ist-da .stoff::after {
  animation: nadel-steckt 220ms cubic-bezier(0.2, 0.8, 0.3, 1.3) both;
  animation-delay: calc(var(--i) * 100ms + 380ms);
}
@keyframes nadel-steckt {
  from { opacity: 0; transform: scale(2.4); }
  to   { opacity: 1; transform: scale(1); }
}
/* Weniger Bewegung: die Pseudo-Elemente erwischt die globale Regel in
   stoff.css nicht ([data-eingang] * trifft keine ::before/::after) */
@media (prefers-reduced-motion: reduce) {
  .muster .stoff::before,
  .muster .stoff::after {
    animation: none !important;
  }
}

.stoff__probe {
  display: block;
  height: 210px;
  /* Die Muster wandern beim Berühren nur ein kleines Stück und langsam —
     ein Karo, das springt, ist zu viel fürs Auge */
  transition: background-position 1600ms ease-out, background-size 1600ms ease-out, filter 700ms ease-out;
  clip-path: polygon(0% 0%, 6% 2.5%, 12% 0%, 18% 2.5%, 24% 0%, 30% 2.5%, 36% 0%, 42% 2.5%, 48% 0%, 54% 2.5%, 60% 0%, 66% 2.5%, 72% 0%, 78% 2.5%, 84% 0%, 90% 2.5%, 100% 0%, 97.5% 6%, 100% 12%, 97.5% 18%, 100% 24%, 97.5% 30%, 100% 36%, 97.5% 42%, 100% 48%, 97.5% 54%, 100% 60%, 97.5% 66%, 100% 72%, 97.5% 78%, 100% 84%, 97.5% 90%, 100% 100%, 94% 97.5%, 88% 100%, 82% 97.5%, 76% 100%, 70% 97.5%, 64% 100%, 58% 97.5%, 52% 100%, 46% 97.5%, 40% 100%, 34% 97.5%, 28% 100%, 22% 97.5%, 16% 100%, 10% 97.5%, 0% 100%, 2.5% 94%, 0% 88%, 2.5% 82%, 0% 76%, 2.5% 70%, 0% 64%, 2.5% 58%, 0% 52%, 2.5% 46%, 0% 40%, 2.5% 34%, 0% 28%, 2.5% 22%, 0% 16%, 2.5% 10%);
}
/* Schatten unter der gezackten Probe (clip-path frisst box-shadow) */
.stoff::before {
  content: "";
  position: absolute;
  inset: 8px 4px auto 4px;
  height: 200px;
  background: rgba(0, 0, 0, 0.5);
  filter: blur(14px);
  transform: translateY(10px);
  z-index: -1;
}
/* Die Pinnadel oben in der Probe: Glaskopf von vorn gesehen, wie die
   Nadel am Zettel — abwechselnd Messing und Perlmutt, wie im Maßband.
   Sitzt auf 12 px + halber Kopf = 19 px, dem Drehpunkt der Probe. */
.stoff::after {
  content: "";
  position: absolute;
  top: 12px;
  left: calc(50% - 7px);
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 30%, rgba(255, 255, 255, 0.9) 0,
    var(--nadelkopf, #c9992e) 42%,
    color-mix(in srgb, var(--nadelkopf, #c9992e) 55%, black) 100%);
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.45);
  z-index: 1;
}
.stoff:nth-child(even) { --nadelkopf: #efe6d8; }

/* Die Stoffe: Bindung und Griff über Verläufe — alle aus der Palette */
.stoff--wolle .stoff__probe {
  background-color: #6d6157;
  background-image:
    repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.10) 0 2px, transparent 2px 6px),
    repeating-linear-gradient(-45deg, rgba(0, 0, 0, 0.14) 0 2px, transparent 2px 6px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(0, 0, 0, 0.1));
}
/* Wolle: der Flor legt sich um — die Bindung wandert leicht diagonal */
.stoff--wolle:hover .stoff__probe {
  background-position: 3px 3px, -3px 3px, 0 0;
  filter: brightness(1.06);
}
.stoff--seide .stoff__probe {
  background-color: #d9c1a3;
  /* Glanzstreifen: wandert beim Berühren einmal durch */
  background-image:
    linear-gradient(112deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, 0.55) 44%, rgba(255, 255, 255, 0) 56%),
    linear-gradient(112deg, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 0.12) 78%, rgba(0, 0, 0, 0) 90%),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 3px);
  background-size: 220% 100%, 100% 100%, auto;
  background-position: 30% 0, 0 0, 0 0;
  transition: background-position 900ms ease-out;
}
/* Nur die Seide glänzt beim Berühren — ein Lichtstreifen wandert durch */
.stoff--seide:hover .stoff__probe {
  background-position: 130% 0, 0 0, 0 0;
}
.stoff--leder .stoff__probe {
  background-color: #7a4a2c;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='0.35'/></svg>"),
    radial-gradient(80% 60% at 30% 25%, rgba(255, 220, 190, 0.28), transparent 70%),
    linear-gradient(180deg, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.28));
  background-blend-mode: multiply, normal, normal;
  background-size: auto, 200% 200%, auto;
  background-position: 0 0, 0% 0%, 0 0;
}
/* Leder: das Licht wandert über die Narbung */
.stoff--leder:hover .stoff__probe {
  background-position: 0 0, 60% 50%, 0 0;
}
/* Baumwolle: naturweißes Vichy in Leinen-Tönen */
.stoff--baumwolle .stoff__probe {
  background-color: #f4eee4;
  background-image:
    repeating-linear-gradient(90deg, rgba(180, 160, 130, 0.35) 0 10px, transparent 10px 20px),
    repeating-linear-gradient(0deg, rgba(180, 160, 130, 0.35) 0 10px, transparent 10px 20px),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.35) 0 1px, transparent 1px 3px);
}
/* Baumwolle: das Karo rutscht ein halbes Kästchen, wie glattgestrichen */
.stoff--baumwolle:hover .stoff__probe {
  background-position: 5px 0, 0 5px, 0 0;
}
/* Jeans: Köperbindung in warmem Indigo, nicht kaltes Navy */
.stoff--denim .stoff__probe {
  background-color: #3a3c4a;
  background-image:
    repeating-linear-gradient(135deg, rgba(255, 246, 230, 0.10) 0 1.5px, transparent 1.5px 5px),
    repeating-linear-gradient(45deg, rgba(0, 0, 0, 0.18) 0 1px, transparent 1px 4px),
    linear-gradient(180deg, rgba(120, 90, 60, 0.12), rgba(0, 0, 0, 0.18));
}
/* Jeans: der Köpergrat läuft durch, wie beim Drüberstreichen */
.stoff--denim:hover .stoff__probe {
  background-position: 6px 6px, -4px 4px, 0 0;
  filter: brightness(1.08);
}

/* Der Zettel: Papier, mit einer Nadel angesteckt */
.stoff__zettel {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: -30px;
  padding: 10px 12px 12px;
  background: #fdfbf5;
  color: var(--tinte-leise);
  font-size: var(--t-klein);
  line-height: 1.35;
  border-radius: 4px;
  box-shadow: 0 10px 20px -12px rgba(0, 0, 0, 0.6);
  transform: rotate(calc(var(--neigung, 0deg) * -0.6));
}
.stoff__zettel strong {
  display: block;
  margin-bottom: 2px;
  font-family: var(--schrift-serif);
  font-size: 1.2rem;
  font-weight: 500;
  color: var(--tinte);
}
.stoff__zettel::before {
  content: "";
  position: absolute;
  top: -7px;
  left: 50%;
  width: 11px;
  height: 11px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(circle at 32% 30%, rgba(255, 255, 255, 0.85) 0, #c9992e 42%, #7a5a14 100%);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
}

.beratung__satz {
  margin-top: var(--raum-5);
  max-width: 60ch;
  font-size: var(--t-body);
  color: var(--hell);
  opacity: 0.85;
}

/* Handy: gestapelt, jede Probe eine Zeile — nichts wischt weg.
   Die Korkwand bleibt dem großen Bildschirm: ohne Nadeln hängt hier
   nichts, und im schmalen Rahmen würde sie die Zeilen nur einschnüren. */
@media (max-width: 760px) {
  .muster {
    flex-direction: column;
    gap: var(--raum-3);
    padding: var(--raum-3) 0 var(--raum-3);
    max-width: none;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
  }
  .stoff {
    width: 100%;
    display: grid;
    grid-template-columns: 96px 1fr;
    gap: var(--raum-3);
    align-items: center;
    transform: rotate(calc(var(--neigung, 0deg) * 0.35));
  }
  .stoff__probe { height: 96px; }
  .stoff::before { inset: 8px 4px auto 4px; height: 90px; width: 88px; }
  .stoff__zettel {
    position: static;
    transform: none;
    padding: 12px 14px;
  }
  .stoff__zettel::before { display: none; }
  /* Die Pinnadel säße bei left: 50% mitten im Text der Zeile — auf dem
     Handy steckt hier, wie am Zettel, keine */
  .stoff::after { display: none; }
  .stoff:hover { transform: rotate(0deg); }
}

/* Leinen: unruhige Bindung, sichtbare Flammen im Garn — der Stoff, dem
   man das Knittern ansieht, bevor man ihn anfasst */
.stoff--leinen .stoff__probe {
  background-color: #cdbfa2;
  background-image:
    repeating-linear-gradient(90deg, rgba(90, 72, 46, 0.16) 0 2px, transparent 2px 5px),
    repeating-linear-gradient(0deg, rgba(90, 72, 46, 0.13) 0 2px, transparent 2px 6px),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='l'><feTurbulence type='fractalNoise' baseFrequency='0.5 0.12' numOctaves='2'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%' height='100%' filter='url(%23l)' opacity='0.30'/></svg>"),
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(0, 0, 0, 0.1));
  background-blend-mode: normal, normal, multiply, normal;
}
.stoff--leinen:hover .stoff__probe {
  background-position: 4px 0, 0 4px, 0 0, 0 0;
}

/* Daune: die Steppung. Rauten mit Naht dazwischen, dazwischen wölbt sich
   die Kammer — deshalb sitzt das Licht in der Mitte jeder Raute */
.stoff--daune .stoff__probe {
  background-color: #4f5a63;
  background-image:
    repeating-linear-gradient(45deg, rgba(0, 0, 0, 0.30) 0 1.5px, transparent 1.5px 34px),
    repeating-linear-gradient(-45deg, rgba(0, 0, 0, 0.30) 0 1.5px, transparent 1.5px 34px),
    radial-gradient(circle at 50% 40%, rgba(255, 255, 255, 0.22), transparent 60%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.10), rgba(0, 0, 0, 0.22));
  background-size: auto, auto, 48px 48px, auto;
}
/* Daune: die Kammern heben sich, wenn man drüberstreicht */
.stoff--daune:hover .stoff__probe {
  filter: brightness(1.09);
  background-size: auto, auto, 54px 54px, auto;
}

/* Gardine: durchscheinend. Man sieht den dunklen Stoff der Seite durch
   das Gewebe — dafür ist der Grund fast transparent gehalten */
.stoff--gardine .stoff__probe {
  background-color: rgba(246, 241, 230, 0.30);
  background-image:
    repeating-linear-gradient(90deg, rgba(255, 253, 246, 0.42) 0 1px, transparent 1px 6px),
    repeating-linear-gradient(0deg, rgba(255, 253, 246, 0.34) 0 1px, transparent 1px 6px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.04));
  box-shadow: inset 0 0 30px rgba(255, 253, 246, 0.14);
}
/* Gardine: der Fall bewegt sich, das Gewebe wandert seitlich */
.stoff--gardine:hover .stoff__probe {
  background-position: 5px 0, 0 3px, 0 0;
}