/* =========================================================================
   SDSLD — Designsystem
   Art Direction: "Belichtung, reduziert" (+ Aushang punktuell)
   Siehe DESIGN_DECISIONS.md §4
   ========================================================================= */

/* Displayschrift: eigene Schrift („Medium" von Hvnter, Fontself).
   Die Datei enthält nur saubere Versalien A–Z, Ziffern sowie ! und ?.
   Ä Ö Ü und ß fehlen (sie würden als A O U ohne Punkte erscheinen), Komma,
   Doppelpunkt, Klammern und Schrägstrich sind mit Punkten fehlbelegt.
   Deshalb ist die Schrift per unicode-range auf ihren guten Bereich begrenzt —
   alles andere fällt zeichenweise auf Poppins zurück und bleibt damit korrekt.
   Sobald eine Fassung mit Umlauten vorliegt, kann die Zeile entfallen. */
/* Reihenfolge ist wichtig: die breitere Deklaration steht zuerst, die eigene
   Schrift danach — bei Überschneidung gewinnt die zuletzt deklarierte.
   size-adjust bringt die Rückfallzeichen auf die Versalhöhe der eigenen Schrift. */
@font-face {
  font-family: 'SDSLD Display';
  src: url('../fonts/poppins-600.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
  size-adjust: 108%;
}
@font-face {
  font-family: 'SDSLD Display';
  src: url('../fonts/sdsld-display.otf') format('opentype');
  font-weight: 600; font-style: normal; font-display: swap;
  unicode-range: U+0020, U+0021, U+003F, U+0030-0039, U+0041-005A;
}

@font-face { font-family:'Poppins'; src:url('../fonts/poppins-400.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'Poppins'; src:url('../fonts/poppins-500.woff2') format('woff2'); font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:'Poppins'; src:url('../fonts/poppins-600.woff2') format('woff2'); font-weight:600; font-style:normal; font-display:swap; }

@font-face { font-family:'Plex Mono'; src:url('../fonts/plexmono-400.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'Plex Mono'; src:url('../fonts/plexmono-600.woff2') format('woff2'); font-weight:600; font-style:normal; font-display:swap; }

:root {
  /* Palette — reines Weiß und Schwarz.
     Die einzigen weiteren Töne sind neutrale Abstufungen davon und die
     tatsächlichen Druckfarben der Motive. */
  --paper:      #FFFFFF;
  --paper-warm: #F2F2F2;   /* neutrale Abtönung für abgesetzte Bänder */
  --ink:        #000000;
  --ink-70:     rgba(0, 0, 0, .72);
  --ink-45:     rgba(0, 0, 0, .55);   /* 4,7:1 auf Weiß */
  --rule:       rgba(0, 0, 0, .20);
  --rule-soft:  rgba(0, 0, 0, .11);

  /* Druckfarben der Motive — nicht Teil der Oberflächenpalette, sondern Tinte.
     --red-text ist die abgedunkelte Textfassung: 5,9:1 auf Weiß. */
  --red:        #E14D47;
  --red-text:   #B82F29;
  --blue:       #4E5895;

  --black:      #000000;
  /* Grundton der Produktaufnahme, damit das Bild in der Fläche aufgeht */
  --slab:       #E9E4DE;

  --shell: 1560px;
  --pad: clamp(1.25rem, 4vw, 4rem);
  --gap: clamp(1rem, 2vw, 1.75rem);

  --display: 'SDSLD Display', 'Poppins', system-ui, sans-serif;
  --sans:    'Poppins', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --mono:    'Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  --header-h: 60px;
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }
/* Muss nach der img-Regel stehen: sonst gewinnt display:block gegen das
   hidden-Attribut und ausgeblendete Elemente bleiben sichtbar. */
[hidden] { display: none !important; }
figure { margin: 0; }
a { color: inherit; }

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

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--ink); color: var(--paper);
  padding: .75rem 1rem; font: 600 12px/1 var(--mono); letter-spacing: .08em;
}
.skip:focus { left: 0; }

.sr { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

/* ---------- Bausteine ---------------------------------------------------- */

.shell { max-width: var(--shell); margin-inline: auto; padding-inline: var(--pad); }

.mono {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  line-height: 1.45;
}
.mono--sm { font-size: 10px; }

.eyebrow { color: var(--ink-45); }
.eyebrow b { font-weight: 600; color: var(--ink); }

/* Display-Typo: das laute Register. Nur H1/H2.
   Gewicht 600 gilt nur für die Rückfallzeichen aus Poppins (Umlaute, Komma);
   die eigene Schrift hat ohnehin nur einen Schnitt. */
.display {
  font-family: var(--display);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .005em;
  /* Eng gesetzt, aber mit Luft für die Umlautpunkte der Rückfallzeichen —
     sonst ragen sie in die Zeile darüber („[ SERVICE ] / GRÖSSEN“). */
  line-height: 1.02;
  margin: 0;
  text-wrap: balance;
}
.display--xl { font-size: clamp(2.7rem, 6.4vw, 6.2rem); }
.display--lg { font-size: clamp(2rem, 4.5vw, 3.7rem); }
.display--md { font-size: clamp(1.6rem, 3.3vw, 2.6rem); line-height: 1; }

/* Lange deutsche Komposita: erst korrekt trennen, hartes Umbrechen nur als
   letzte Rettung — sonst steht „LEISTUNGSDR / UCK“. */
.display { hyphens: auto; overflow-wrap: break-word; }

.lede {
  font-size: clamp(1rem, 1.35vw, 1.18rem);
  line-height: 1.5;
  max-width: 40ch;
  color: var(--ink-70);
}

.rule { border: 0; border-top: 1px solid var(--rule); margin: 0; }

/* Buttons — rechteckig, keine Radien, keine Schatten */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  font-family: var(--mono); font-size: 12px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; text-decoration: none;
  padding: 1rem 1.6rem; min-height: 48px;
  border: 1px solid var(--ink); background: var(--ink); color: var(--paper);
  cursor: pointer; transition: background .16s linear, color .16s linear;
}
.btn:hover { background: var(--red-text); border-color: var(--red-text); color: #fff; }
.btn--ghost { background: transparent; color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.btn--block { width: 100%; }
.btn[disabled], .btn[aria-disabled='true'] {
  background: transparent; color: var(--ink-45); border-color: var(--rule);
  cursor: not-allowed;
}
.btn[disabled]:hover, .btn[aria-disabled='true']:hover { background: transparent; color: var(--ink-45); border-color: var(--rule); }

/* Platzhalter — bewusst sichtbar, aber gestaltet */
.ph {
  font-family: var(--mono); font-size: 11px; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--red-text);
  border-bottom: 1px dotted var(--red-text);
  padding-bottom: 1px;
  white-space: nowrap;
}
/* In langen Listen bleibt der Platzhalter erkennbar, ohne die Seite zu übertönen.
   Kaufrelevante Stellen (Preis, Status) behalten das volle Rot. */
.spec .ph, .facts-grid .ph, .ft .ph, .acc__panel .ph {
  color: var(--ink-45); font-weight: 400;
}

/* ---------- Header ------------------------------------------------------- */

.hd {
  position: sticky; top: 0; z-index: 90;
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
}
.hd__in {
  max-width: var(--shell); margin-inline: auto; padding-inline: var(--pad);
  height: var(--header-h);
  display: flex; align-items: center; gap: clamp(1rem, 3vw, 3rem);
}
.hd__logo { display: flex; align-items: center; flex: 0 0 auto; }
.hd__logo img { width: clamp(132px, 15vw, 188px); }
.hd__nav { display: flex; gap: clamp(1rem, 2.2vw, 2.2rem); margin-inline-start: auto; }
.hd__nav a {
  font-family: var(--mono); font-size: 11px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; text-decoration: none;
  padding: .4rem 0; position: relative;
}
.hd__nav a::after {
  content: ''; position: absolute; left: 0; right: 100%; bottom: 0;
  border-bottom: 1px solid var(--ink); transition: right .18s ease;
}
.hd__nav a:hover::after, .hd__nav a[aria-current='page']::after { right: 0; }
.hd__cart {
  margin-inline-start: clamp(1rem, 2.5vw, 2.4rem);
  font-family: var(--mono); font-size: 11px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  background: none; border: 0; padding: .75rem 0; min-height: 44px; cursor: pointer; color: inherit;
}
.hd__cart b { font-weight: 600; }
.hd__burger { display: none; }

@media (max-width: 860px) {
  .hd__nav { display: none; }
  .hd__burger {
    display: inline-flex; align-items: center; justify-content: center;
    margin-inline-start: auto;
    width: 44px; height: 44px; background: none; border: 0; cursor: pointer; color: inherit;
  }
  .hd__burger span { display: block; width: 20px; height: 1.5px; background: var(--ink); position: relative; }
  .hd__burger span::before, .hd__burger span::after {
    content: ''; position: absolute; left: 0; width: 20px; height: 1.5px; background: var(--ink);
  }
  .hd__burger span::before { top: -6px; }
  .hd__burger span::after  { top:  6px; }
  .hd__cart { margin-inline-start: .25rem; }
}

/* Mobile Menü */
.mnav {
  position: fixed; inset: var(--header-h) 0 0 0; z-index: 89;
  background: var(--paper);
  padding: var(--pad);
  display: none; flex-direction: column;
  overflow-y: auto;
}
.mnav[data-open='true'] { display: flex; }
.mnav a {
  display: block; text-decoration: none;
  font-family: var(--display); font-weight: 400;
  text-transform: uppercase; letter-spacing: .01em;
  /* Die eigene Displayschrift läuft breit — „SIEBDRUCK" lief bei 375 px
     aus dem Bild. 9vw hält das längste Wort sicher in der Spalte. */
  font-size: clamp(1.75rem, 9vw, 2.75rem); line-height: 1.15;
  padding: .35em 0; border-bottom: 1px solid var(--rule-soft);
}
.mnav .mnav__meta { margin-top: auto; padding-top: 2rem; color: var(--ink-45); }

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

.hero { padding-block: clamp(2rem, 5vw, 4.5rem) clamp(2rem, 4vw, 3.5rem); }
.hero__grid {
  display: grid;
  column-gap: clamp(1.5rem, 3vw, 3.5rem); row-gap: clamp(1.5rem, 3vw, 2.5rem);
  grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
  grid-template-areas: 'head fig' 'body fig';
  align-content: center;
}
.hero__head { grid-area: head; align-self: end; }
.hero__body { grid-area: body; align-self: start; }
/* Rechte Spalte: Druck-Szene, darunter die Eckdaten. Die Spalte trägt den
   Rasterplatz, nicht mehr die figure selbst. */
.hero__rechts { grid-area: fig; align-self: center; }
.hero__title { margin-block: .55em .5em; }
.hero__title em { font-style: normal; color: var(--red); }

/* Die Startseiten-Headline ist ein ganzer Satz, kein Stapel kurzer Wörter.
   Mit display--xl trennt die Schrift „HOCHWER-TIGE“, weil ein einzelnes Wort
   breiter wird als die Spalte. Die Staffelung hier ist an der längsten Zeile
   bemessen — „DIY SIEBDRUCK“, 11,6 em — plus etwas Luft. Deshalb trägt das
   Element auch kein display--xl, sonst käme sich beides in die Quere. */
.hero__title--satz { font-size: clamp(1.75rem, 3.6vw, 3.5rem); }

/* Der zweite Teil des Satzes, kleiner gesetzt. Dieselbe Displayschrift, damit
   es ein Satz bleibt und nicht wie eine Bildunterschrift wirkt.
   „MIT’N GUTEM SCHUSS LIEBE.“ misst 21,8 em, die Spalte ist 44 vw breit —
   einzeilig geht also bis 2 vw, gewählt 1,9 vw. Das ist gut die Hälfte der
   Headline und damit deutlich untergeordnet. Auf schmalen Schirmen bricht es
   nach „SCHUSS“ um, dort ist die längste Zeile 16,8 em. */
.hero__satz {
  font-size: clamp(1rem, 1.9vw, 1.9rem);
  margin-block: 0 .2em;
}
.hero__satz em { font-style: normal; color: var(--red); }

.hero__cta { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }
.hero__facts { margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--rule); text-align: right; }

.hero__fig { position: relative; }
.hero__fig img { width: 100%; }
/* Läuft unter dem Bild statt darüber — sonst überdeckt sie das Motiv */
.hero__cap { margin-top: .7rem; text-align: right; color: var(--ink-70); }

@media (max-width: 900px) {
  /* Mobile Dramaturgie: erst die Ansage, dann die Ware, dann die Details.
     Keine gestapelte Desktop-Spalte. */
  .hero__grid {
    grid-template-columns: 1fr;
    grid-template-areas: 'head' 'fig' 'body';
    row-gap: 1.5rem;
  }
  /* Ohne zweite Spalte darf die Headline größer werden */
  .display--xl { font-size: clamp(2.9rem, 10vw, 5.2rem); }
  .hero__title--satz { font-size: clamp(1.7rem, 7.3vw, 4.4rem); }
  .hero__satz        { font-size: clamp(1.05rem, 4.8vw, 2.6rem); }
  .hero__fig { margin-inline: calc(var(--pad) * -1); }
  /* Sonst frisst das quadratische Produktbild auf Tablets den halben Bildschirm */
  .hero__fig img { max-height: 58vh; object-fit: cover; }
  .hero__cap { margin-top: .6rem; padding-inline: var(--pad); }
  .hero__cta { margin-top: 1.5rem; }
  .hero__cta .btn { flex: 1 1 100%; }
}

/* ---------- Statusband (Belichtungs-Moment 1) ---------------------------- */

.band {
  border-block: 1px solid var(--rule);
  background: var(--paper-warm);
}
.band__in {
  max-width: var(--shell); margin-inline: auto; padding: .85rem var(--pad);
  display: flex; flex-wrap: wrap; gap: .5rem clamp(1rem, 3vw, 2.5rem);
  color: var(--ink-45);
}
.band__in b { font-weight: 600; color: var(--ink); }
.band__dot { width: 8px; height: 8px; background: var(--red); align-self: center; flex: 0 0 auto; }

/* ---------- Sektionen ---------------------------------------------------- */

.sec { padding-block: clamp(3.5rem, 8vw, 7rem); }
.sec--tight { padding-block: clamp(2.5rem, 5vw, 4rem); }
.sec__head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 1rem 2.5rem; flex-wrap: wrap;
  padding-bottom: 1.35rem; margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
  position: relative;
}
/* Sektionslinie: eine normale Linie. Das Punktband aus dem Logo stand hier
   vorher und wurde auf Wunsch entfernt. */
.sec__head::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0;
  border-bottom: 1px solid var(--ink);
}
.sec__head p { margin: 0; color: var(--ink-45); }
.sec__link { font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }

/* ---------- Produktraster ------------------------------------------------ */

/* Wenige Produkte, also große Karten. Kein Raster, das halb leer stehen bleibt. */
.grid-prod {
  display: grid; gap: clamp(2rem, 4vw, 3.5rem) var(--gap);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
}

.card { display: flex; flex-direction: column; }
.card__media {
  position: relative; display: block;
  aspect-ratio: 4 / 5; overflow: hidden;
  background: #fff;
  border: 1px solid var(--rule);
}
.card__media--dark { background: var(--black); border-color: var(--black); }
.card__media img {
  width: 100%; height: 100%; object-fit: contain; padding: 4%;
  transition: transform .4s cubic-bezier(.2,.6,.2,1);
}
.card:hover .card__media img { transform: scale(1.025); }

.card__stamp {
  position: absolute; top: 1rem; left: 1rem;
  font-family: var(--mono); font-size: 10px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--red-text); border: 1.5px solid var(--red-text);
  padding: .35rem .5rem; transform: rotate(-6deg);
  background: rgba(242,238,231,.9);
}

.card__body { padding-top: .9rem; display: grid; gap: .35rem; }
.card__row { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.card__name { font-size: 1rem; font-weight: 600; margin: 0; letter-spacing: -.005em; }
/* Polster wie bei den Brotkrumen: nur die Trefferfläche wächst, das Raster
   bleibt unberührt. Ohne das bleibt der Titel bei 23 px stehen. */
.card__name a { text-decoration: none; padding-block: .2rem; }
.card__name a:hover { text-decoration: underline; text-underline-offset: 3px; }
.card__meta { color: var(--ink-45); }

/* Kauf direkt aus der Karte (Muster: Aries) — immer sichtbar.
   Ein verstecktes Kaufelement wäre ein Gimmick und würde Leerraum reservieren. */
.card__buy { margin-top: .9rem; padding-top: .9rem; border-top: 1px solid var(--rule-soft); display: grid; gap: .6rem; }
@media (prefers-reduced-motion: reduce) { .card__media img { transition: none; } }

.sizes { display: flex; flex-wrap: wrap; gap: .35rem; }
.size {
  font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: .06em;
  min-width: 44px; min-height: 40px; padding: 0 .5rem;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--rule); background: transparent; color: var(--ink);
  cursor: pointer;
}
.size:hover { border-color: var(--ink); }
.size[aria-pressed='true'] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.size[disabled] { color: var(--ink-45); border-style: dashed; cursor: not-allowed; text-decoration: line-through; }

/* ---------- Belichtungs-Modul (Farbauszüge) ------------------------------ */

.sep { display: grid; gap: var(--gap); grid-template-columns: repeat(3, 1fr); }
.sep__item { display: flex; flex-direction: column; gap: .75rem; }
/* Die Auszüge sind Filmpositive — sie liegen auf ihrem eigenen weißen Feld,
   wie auf dem Leuchttisch. Kein Blendmode: das wäre teuer und fragil. */
.sep__frame {
  position: relative; aspect-ratio: 4 / 5;
  border: 1px solid var(--rule); background: #fff;
  display: grid; place-items: center; overflow: hidden;
}
.sep__frame img { width: 100%; height: 100%; object-fit: contain; padding: 4%; }
.sep__frame--result { background: var(--black); border-color: var(--black); }

.sep__label { display: flex; align-items: center; gap: .5rem; color: var(--ink-45); }
.sep__chip { width: 11px; height: 11px; flex: 0 0 auto; border: 1px solid rgba(0,0,0,.15); }
.sep__label b { color: var(--ink); font-weight: 600; }

/* Mobil laufen die Auszüge nebeneinander durch — man wischt sie in den Passer,
   statt drei volle Bildschirme zu scrollen. */
@media (max-width: 760px) {
  .sep {
    grid-auto-flow: column; grid-auto-columns: 76%;
    grid-template-columns: none;
    overflow-x: auto; scroll-snap-type: x mandatory;
    margin-inline: calc(var(--pad) * -1); padding-inline: var(--pad);
    scrollbar-width: none;
  }
  .sep::-webkit-scrollbar { display: none; }
  .sep__item { scroll-snap-align: center; }
}

.facts-grid {
  margin-top: clamp(2rem, 4vw, 3rem);
  display: grid; gap: 0 var(--gap);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
}
.facts-grid div { padding: 1rem 0; border-top: 1px solid var(--rule); }
.facts-grid dt { color: var(--ink-45); font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; }
.facts-grid dd { margin: .35rem 0 0; font-size: .95rem; }

/* ---------- Manifest (Aushang-Moment) ------------------------------------ */

.manifest { background: var(--paper-warm); border-block: 1px solid var(--rule); }
.manifest__grid {
  display: grid; gap: clamp(1.5rem, 5vw, 4rem);
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); align-items: center;
}
/* Aushang: ein aufgehängter Zettel, kein Bildbanner */
.manifest__scrap {
  justify-self: center;
  width: min(100%, 380px);
  border: 1px solid var(--rule); background: #fff;
  padding: clamp(1rem, 2vw, 1.5rem);
  transform: rotate(-.6deg);
}
.manifest__scrap img { width: 100%; }
/* Startseite zeigt eine gezeichnete Figur statt eines fotografierten
   Zettels — die passt ohne Rahmen und Papierweiß direkt auf den warmen
   Sektionshintergrund. */
.manifest__scrap--plain { border: none; background: none; padding: 0; transform: none; }
.manifest__scrap figcaption { margin-top: .9rem; padding-top: .6rem; border-top: 1px solid var(--rule-soft); color: var(--ink-45); }
.manifest__list { margin: 1.5rem 0 0; padding: 0; list-style: none; display: grid; gap: .55rem; }
.manifest__list li { padding-inline-start: 1.4rem; position: relative; color: var(--ink-70); }
.manifest__list li::before { content: '\2014'; position: absolute; left: 0; color: var(--red-text); }
@media (max-width: 820px) { .manifest__grid { grid-template-columns: 1fr; } }

/* ---------- Archiv (Aushang-Moment) -------------------------------------- */

/* Archiv: alle Kacheln in einer Reihe, Einordnungstext darunter */
.arch-wrap { display: grid; gap: clamp(1.5rem, 4vw, 2.5rem); grid-template-columns: 1fr; }
.arch-note { padding-top: .5rem; }

.arch { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem) var(--gap); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 901px) { .arch { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.arch__item { position: relative; }
.arch__paper {
  position: relative;
  border: 1px solid var(--rule); background: #fff;
  aspect-ratio: 4 / 5; display: grid; place-items: center; overflow: hidden;
  transition: transform .25s ease;
}
/* Aushang: der Stempel liegt auf dem Blatt, nicht daneben */
.arch__stamp {
  position: absolute; z-index: 2; right: 8%; bottom: 9%;
  font-family: var(--mono); font-size: clamp(11px, 1.4vw, 15px); font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--red-text); border: 2px solid var(--red-text);
  padding: .4rem .7rem; transform: rotate(-8deg);
  opacity: .85;
}
.arch__item:nth-child(odd)  .arch__paper { transform: rotate(-.55deg); }
.arch__item:nth-child(even) .arch__paper { transform: rotate(.4deg); }
.arch__item:hover .arch__paper { transform: rotate(0deg); }
.arch__paper::before {
  content: ''; position: absolute; inset: 0;
  border: 1px solid var(--rule-soft); margin: 10px; pointer-events: none;
}
.arch__paper img { width: auto; max-width: 88%; max-height: 88%; object-fit: contain; }
.arch__body { padding-top: .9rem; display: grid; gap: .3rem; }
@media (prefers-reduced-motion: reduce) { .arch__paper { transition: none; } }

/* ---------- Newsletter --------------------------------------------------- */

.news__grid { display: grid; gap: clamp(1.5rem, 4vw, 3rem); grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end; }
.news__form { display: grid; gap: .5rem; }
.news__row { display: flex; gap: .5rem; flex-wrap: wrap; }
.news__form input[type='email'] {
  flex: 1 1 240px; min-height: 48px; padding: .75rem 1rem;
  border: 1px solid var(--ink); background: transparent; color: var(--ink);
  font-family: var(--mono); font-size: 12px; letter-spacing: .06em;
}
.news__form input::placeholder { color: var(--ink-45); text-transform: uppercase; }
.news__note { margin: .9rem 0 0; color: var(--ink-45); }

/* Feldbeschriftung und Hinweiszeile, Wortlaut aus dem Brevo-Formular */
.news__label {
  margin: 0; font-family: var(--mono); font-size: 11px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink);
}
.news__form > .news__label + .news__row { margin-top: -.1rem; }
p.news__label { margin-top: .9rem; }
.news__hint { margin: -.15rem 0 0; color: var(--ink-45); }

/* Einwilligung. Die eigentliche Box wird nicht versteckt, sondern über das
   gezeichnete Kästchen gelegt — so bleibt sie fokussierbar und anklickbar. */
.news__optin {
  display: grid; grid-template-columns: 18px 1fr; gap: .7rem;
  align-items: start; cursor: pointer; margin-top: .35rem;
  color: var(--ink-70); font-size: .9rem; line-height: 1.5;
  max-width: 52ch;
}
.news__optin input {
  grid-area: 1 / 1; width: 18px; height: 18px; margin: .16em 0 0;
  opacity: 0; cursor: pointer;
}
.news__tick {
  grid-area: 1 / 1; position: relative;
  width: 18px; height: 18px; margin-top: .16em;
  border: 1px solid var(--ink); background: transparent;
  pointer-events: none;
}
.news__tick::after {
  content: ''; position: absolute; /* Haken erst bei Auswahl */
  display: block; width: 10px; height: 5px; margin: 4px 0 0 3px;
  border-left: 2px solid var(--paper); border-bottom: 2px solid var(--paper);
  transform: rotate(-45deg); opacity: 0;
}
.news__optin input:checked ~ .news__tick { background: var(--ink); }
.news__optin input:checked ~ .news__tick::after { opacity: 1; }
.news__optin input:focus-visible ~ .news__tick { outline: 2px solid var(--red); outline-offset: 3px; }

/* Honigtopf gegen Bots — nie sichtbar, aber auch nicht display:none,
   sonst füllen ihn manche Bots trotzdem nicht aus. */
.news__pot { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

/* Rückmeldungen */
.news__err, .news__fail {
  margin: 0; padding: .55rem .75rem;
  color: var(--red-text); border-left: 2px solid var(--red-text);
  background: rgba(184, 47, 41, .06);
}
.news__fail { margin-top: .9rem; }
.news__form input[type='email'][aria-invalid='true'] { border-color: var(--red-text); border-width: 2px; }

@media (max-width: 820px) { .news__grid { grid-template-columns: 1fr; } }

/* ---------- Newsletter-Fenster ------------------------------------------- */

/* Das Formular liegt nicht mehr als Sektion auf der Startseite, sondern in
   diesem Fenster. shell.js macht es auf, sobald die Drops nach oben aus dem
   Bild gescrollt sind, und setzt dafür data-open.
   :target ist der Weg ohne JavaScript: der Fußzeilenlink auf #news öffnet das
   Fenster dann allein über das Stylesheet. Beide Zustände sind hier gleich
   behandelt. */
.pop {
  position: fixed; inset: 0; z-index: 120;
  display: grid; place-items: center;
  padding: var(--pad);
  visibility: hidden; opacity: 0; pointer-events: none;
  transition: opacity .22s linear, visibility 0s linear .22s;
}
.pop[data-open='true'], .pop:target {
  visibility: visible; opacity: 1; pointer-events: auto;
  transition: opacity .22s linear, visibility 0s linear 0s;
}
/* Muss NACH der Regel darüber stehen und darf nicht mit ihr verschmolzen
   werden: `:target` bleibt am Element hängen, auch nachdem die Raute per
   history.replaceState aus der Adresse genommen wurde — Browser werten den
   Treffer dabei nicht neu aus. Ohne diese Zeile bliebe ein geschlossenes
   Fenster als unsichtbare Fläche über der ganzen Seite liegen und würde
   jeden Klick abfangen. Gleiche Spezifität wie `.pop:target`, deshalb
   entscheidet die Reihenfolge. Ohne JavaScript gibt es kein data-open,
   dann bleibt :target allein zuständig. */
.pop[data-open='false'] {
  visibility: hidden; opacity: 0; pointer-events: none;
  transition: opacity .22s linear, visibility 0s linear .22s;
}
/* Verdunkelung — dieselbe wie hinter der Warenkorbschublade.
   Als Link, damit ein Klick daneben auch ohne JavaScript schließt. */
.pop__scrim { position: absolute; inset: 0; background: rgba(13, 11, 10, .45); }

/* Der Rahmen scrollt nicht mit, nur sein Inhalt — so bleibt das Schließkreuz
   auch bei langem Formular oben rechts stehen. */
.pop__box {
  position: relative; z-index: 1;
  display: flex; flex-direction: column;
  width: min(660px, 100%); max-height: min(86vh, 900px);
  background: var(--paper); border: 1px solid var(--ink);
  transform: translateY(14px);
  transition: transform .26s cubic-bezier(.2, .7, .2, 1);
}
.pop[data-open='true'] .pop__box, .pop:target .pop__box { transform: none; }
.pop__in { overflow-y: auto; padding: clamp(1.5rem, 4vw, 2.75rem); }
.pop__title { margin: 0 0 .5em; padding-right: 3.2rem; }
@media (prefers-reduced-motion: reduce) { .pop, .pop__box { transition: none; } }

/* Schließkreuz — weißes X auf schwarzem Kreis, oben rechts.
   Die einzige Rundung im ganzen System: als Kasten im Kasten würde das Kreuz
   in der Rasterlogik der Seite untergehen, als Kreis liest es sofort als
   Bedienelement. */
.pop__close {
  position: absolute; top: .75rem; right: .75rem; z-index: 2;
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--ink); color: var(--paper);
  border: 0; cursor: pointer; text-decoration: none;
  transition: background .16s linear;
}
.pop__close:hover { background: var(--red-text); }
.pop__close:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.pop__close svg { width: 15px; height: 15px; display: block; }
@media (prefers-reduced-motion: reduce) { .pop__close { transition: none; } }

/* Auf schmalen Geräten zählt jeder Millimeter Zeilenbreite: sonst trennt die
   Überschrift zu „VER-PASSEN!". Ränder und Kreis rücken enger zusammen, die
   44 px Antippfläche bleiben über den Rand hinaus erhalten. */
@media (max-width: 520px) {
  .pop { padding: 1rem; }
  .pop__in { padding: 1.6rem 1.25rem; }
  .pop__title { padding-right: 3rem; }
  .pop__close { top: .5rem; right: .5rem; width: 40px; height: 40px; }
}

/* ---------- Footer ------------------------------------------------------- */

/* Dunkler Abschluss der Seite — helle Schrift auf Schwarz, dieselbe
   Umkehr-Logik wie im mobilen Menü (.mnav). */
.ft { background: var(--ink); color: var(--paper); border-top: 1px solid var(--ink); padding-block: clamp(2.5rem, 5vw, 4rem) 2rem; }
.ft__grid { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); }
.ft h3 { margin: 0 0 .9rem; color: rgba(255, 255, 255, .55); font-family: var(--mono); font-size: 10px; font-weight: 400; letter-spacing: .12em; text-transform: uppercase; }
.ft ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .15rem; }
.ft li > a, .ft li > .ft__todo { display: inline-flex; align-items: center; min-height: 32px; }
.ft a { text-decoration: none; font-size: .93rem; }
.ft a:hover { text-decoration: underline; text-underline-offset: 3px; }
/* Seiten, die es noch nicht gibt, sehen auch nicht wie Links aus */
.ft__todo { font-size: .93rem; color: rgba(255, 255, 255, .55); display: inline-flex; gap: .5rem; align-items: baseline; flex-wrap: wrap; }
.ft__bottom { margin-top: clamp(2rem, 4vw, 3rem); padding-top: 1.25rem; border-top: 1px solid rgba(255, 255, 255, .16); display: flex; flex-wrap: wrap; gap: .5rem 2rem; justify-content: space-between; color: rgba(255, 255, 255, .55); }
/* Logo ist als schwarze Wortmarke angelegt — auf Schwarz gedreht sie sich um */
.ft__logo { width: 150px; opacity: .9; margin-bottom: 1rem; filter: invert(1); }

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

.scrim {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(13, 11, 10, .45);
  opacity: 0; pointer-events: none; transition: opacity .2s linear;
}
.scrim[data-open='true'] { opacity: 1; pointer-events: auto; }

.cart {
  position: fixed; z-index: 101; top: 0; right: 0; bottom: 0;
  width: min(430px, 100%);
  background: var(--paper); border-left: 1px solid var(--ink);
  display: flex; flex-direction: column;
  transform: translateX(100%); transition: transform .26s cubic-bezier(.2,.7,.2,1);
}
.cart[data-open='true'] { transform: none; }
@media (prefers-reduced-motion: reduce) { .cart, .scrim { transition: none; } }

.cart__hd { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.15rem var(--pad); border-bottom: 1px solid var(--ink); }
.cart__close { background: none; border: 0; cursor: pointer; font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: inherit; padding: .5rem; min-height: 44px; }
.cart__demo { padding: .8rem var(--pad); background: var(--red-text); color: #fff; }
.cart__body { flex: 1 1 auto; overflow-y: auto; padding: 0 var(--pad); }
.cart__empty { padding: 3rem 0; color: var(--ink-45); }

.ci { display: grid; grid-template-columns: 68px 1fr; gap: 1rem; padding: 1.25rem 0; border-bottom: 1px solid var(--rule-soft); }
.ci__img { aspect-ratio: 4/5; background: var(--black); display: grid; place-items: center; overflow: hidden; }
.ci__img img { width: 100%; height: 100%; object-fit: contain; padding: 6%; }
.ci__name { font-size: .95rem; font-weight: 600; margin: 0 0 .2rem; }
.ci__meta { color: var(--ink-45); margin-bottom: .55rem; }
.ci__warn { color: var(--red-text); margin: -.35rem 0 .55rem; }
.ci__ctl { display: flex; align-items: center; gap: .75rem; }
.qty { display: inline-flex; border: 1px solid var(--rule); }
.qty button {
  width: 40px; height: 40px; background: none; border: 0; cursor: pointer;
  font-family: var(--mono); font-size: 13px; color: inherit; line-height: 1;
}
.qty button:hover { background: var(--ink); color: var(--paper); }
.qty span { min-width: 30px; display: inline-flex; align-items: center; justify-content: center; font-family: var(--mono); font-size: 12px; }
.ci__rm { background: none; border: 0; padding: .6rem 0; min-height: 40px; cursor: pointer; color: var(--ink-45); font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; text-decoration: underline; text-underline-offset: 3px; }
.ci__rm:hover { color: var(--red-text); }

.cart__ft { border-top: 1px solid var(--ink); padding: 1.25rem var(--pad) calc(1.25rem + env(safe-area-inset-bottom)); display: grid; gap: .9rem; }
.cart__sum { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.cart__sum b { font-weight: 600; }

/* Rückmeldung nach einer Aktion */
.toast {
  position: fixed; z-index: 120; left: 50%; bottom: 1.5rem; transform: translate(-50%, 130%);
  background: var(--ink); color: var(--paper);
  padding: .85rem 1.25rem; max-width: calc(100vw - 2rem);
  font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  transition: transform .25s cubic-bezier(.2,.7,.2,1);
}
.toast[data-show='true'] { transform: translate(-50%, 0); }
@media (prefers-reduced-motion: reduce) { .toast { transition: none; } }

/* ---------- Produktdetailseite ------------------------------------------- */

.pdp { padding-block: clamp(1.25rem, 3vw, 2.5rem) 0; }
.pdp__crumbs { color: var(--ink-45); margin-bottom: clamp(1rem, 2vw, 2rem); }
/* Senkrechtes Polster an einem Inline-Element vergrößert die Trefferfläche,
   ohne die Zeilenhöhe zu verändern — der Umbruch bleibt also, wie er war.
   Aus 13 px Höhe werden so die 24 px, die auf dem Telefon treffbar sind. */
.pdp__crumbs a { text-decoration: none; padding-block: .35rem; }
.pdp__crumbs a:hover { text-decoration: underline; text-underline-offset: 3px; }

.pdp__grid { display: grid; gap: clamp(1.5rem, 4vw, 4rem); grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: start; }

.pdp__gallery { display: grid; gap: var(--gap); }
.pdp__shot { background: #fff; border: 1px solid var(--rule); display: grid; place-items: center; overflow: hidden; }
.pdp__shot--dark { background: var(--black); border-color: var(--black); }
.pdp__shot img { width: 100%; }
.pdp__shot--pad img { padding: 7%; }

.pdp__panel { position: sticky; top: calc(var(--header-h) + 1.5rem); display: grid; gap: 1.15rem; }
.pdp__nr { color: var(--ink-45); }
.pdp__title { margin: 0; }
.pdp__jp { font-size: 1.05rem; color: var(--ink-70); margin: .35rem 0 0; }
.pdp__jp span { color: var(--ink-45); font-size: .85rem; }
.pdp__price { display: flex; align-items: baseline; gap: .75rem; flex-wrap: wrap; }
.pdp__story { color: var(--ink-70); margin: 0; max-width: 46ch; }

.field { display: grid; gap: .6rem; }
.field__hd { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.field__hd a { font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; padding-block: .3rem; }

.spec { margin: 0; display: grid; grid-template-columns: minmax(90px, auto) 1fr; gap: .55rem 1.25rem; border-top: 1px solid var(--rule); padding-top: 1.1rem; }
.spec dt { color: var(--ink-45); font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; padding-top: .18rem; }
.spec dd { margin: 0; font-size: .93rem; }

.acc { border-top: 1px solid var(--rule); }
.acc__h { margin: 0; }
.acc__btn {
  width: 100%; text-align: start; background: none; border: 0; cursor: pointer; color: inherit;
  padding: 1rem 0; min-height: 48px;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
}
.acc__btn::after { content: '+'; font-size: 15px; }
.acc__btn[aria-expanded='true']::after { content: '–'; }
.acc__panel { padding: 0 0 1.1rem; color: var(--ink-70); font-size: .93rem; }
.acc__panel[hidden] { display: none; }

@media (max-width: 900px) {
  .pdp__grid { grid-template-columns: 1fr; }
  .pdp__panel { position: static; }
  /* Mobile Dramaturgie: Peek-Karussell statt gestapelter Bildspalte */
  .pdp__gallery {
    grid-auto-flow: column; grid-auto-columns: 86%;
    overflow-x: auto; scroll-snap-type: x mandatory;
    margin-inline: calc(var(--pad) * -1); padding-inline: var(--pad);
    scrollbar-width: none;
  }
  .pdp__gallery::-webkit-scrollbar { display: none; }
  .pdp__shot { scroll-snap-align: center; }
}

/* Mobile: dieselbe Kauf-Schaltfläche bleibt erreichbar — kein zweiter Button */
@media (max-width: 900px) {
  .pdp__cta {
    position: sticky; bottom: 0; z-index: 80;
    margin-inline: calc(var(--pad) * -1);
    padding: .75rem var(--pad) calc(.75rem + env(safe-area-inset-bottom));
    background: var(--paper); border-top: 1px solid var(--ink);
  }
}

/* Hinweiszeile (Herkunft, Prüfvermerk) */
.notice {
  border-inline-start: 2px solid var(--red);
  padding: .6rem .9rem; background: var(--paper-warm);
  color: var(--ink-70); font-size: .88rem;
}

/* =========================================================================
   Phase E — weitere Seiten
   ========================================================================= */

/* ---------- Filter (Shopübersicht) --------------------------------------- */

.filters { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: clamp(1.5rem, 3vw, 2.25rem); }
.filter {
  font-family: var(--mono); font-size: 11px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  min-height: 44px; padding: 0 1.1rem;
  display: inline-flex; align-items: center;
  border: 1px solid var(--rule); background: transparent; color: var(--ink);
  cursor: pointer;
}
.filter:hover { border-color: var(--ink); }
.filter[aria-pressed='true'] { background: var(--ink); color: var(--paper); border-color: var(--ink); }

/* ---------- Archivseite --------------------------------------------------- */

.archlist { display: grid; gap: clamp(3rem, 7vw, 6rem); }

/* Jede Zeile ist gleich aufgeteilt: links die Bildstrecke, rechts der Text.
   Vorher wechselten die Spaltenbreiten von Zeile zu Zeile (5fr/7fr gegen
   7fr/5fr) — gemeint war ein Seitenwechsel, der aber nie eintrat, weil das
   dafür gesetzte `order` auf einem Element saß, das gar kein Kind des Rasters
   ist. Übrig blieben unterschiedlich große Kacheln. Jetzt sind sie gleich.
   `align-items: start` hängt den Text an die Oberkante des Rahmens. */
.archrow {
  display: grid; gap: clamp(1.5rem, 4vw, 3.5rem);
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  align-items: start;
  scroll-margin-top: calc(var(--header-h) + 1.5rem);
}
/* Die Oberkante ist die Kante des Rahmens, nicht die des ersten Buchstabens */
.archrow__body > :first-child { margin-top: 0; }

/* Bildstrecke — Shirt und Motiv liegen im selben Rahmen übereinander.
   Das feste Seitenverhältnis hält alle Kacheln der Seite auf einer Größe,
   unabhängig davon, wie viele Bilder eine Arbeit mitbringt. */
.archslide { transform: rotate(-.5deg); transition: transform .25s ease; }
/* Aushang: jedes zweite Blatt hängt andersherum */
.archrow:nth-child(even) .archslide { transform: rotate(.45deg); }
.archslide:hover, .archslide:focus-within { transform: rotate(0deg); }

.archslide__stage {
  position: relative; overflow: hidden;
  border: 1px solid var(--rule); background: #fff;
  aspect-ratio: 4 / 5; display: grid; place-items: center;
}
.archslide__stage::before {
  content: ''; position: absolute; inset: 12px;
  border: 1px solid var(--rule-soft); pointer-events: none;
}
/* Alle Bilder auf demselben Rasterfeld: das ausgeblendete zieht keine Höhe */
.archslide__img { grid-area: 1 / 1; width: auto; max-width: 86%; max-height: 86%; object-fit: contain; }
.archslide__count {
  position: absolute; top: 0; right: 0; z-index: 2;
  background: var(--ink); color: var(--paper);
  padding: .4rem .6rem; letter-spacing: .12em;
}
.archslide__count b { font-weight: 600; }

/* Leiste unter dem Rahmen — gleiche Bauweise wie die Schrittleiste der
   Entstehung (.wip__bar), damit beide Bildstrecken sich gleich bedienen. */
.archslide__bar {
  display: flex; align-items: stretch;
  border: 1px solid var(--rule); border-top: 0;
}
.archslide__arrow {
  flex: 0 0 auto; width: 48px; min-height: 48px;
  background: none; border: 0; cursor: pointer; color: inherit;
  font-family: var(--mono); font-size: 15px; line-height: 1;
}
.archslide__arrow:first-child { border-right: 1px solid var(--rule); }
.archslide__arrow:last-child  { border-left:  1px solid var(--rule); }
.archslide__arrow:hover:not([disabled]) { background: var(--ink); color: var(--paper); }
/* Arbeiten mit nur einem Bild behalten die Leiste, damit die Kacheln
   gleich hoch bleiben — bedienbar ist sie dann nicht. */
.archslide__arrow[disabled] { color: var(--rule); cursor: default; }
.archslide__label {
  flex: 1 1 auto; margin: 0; padding: 0 .5rem;
  display: flex; align-items: center; justify-content: center;
  text-align: center; color: var(--ink-45);
}

@media (prefers-reduced-motion: reduce) { .archslide { transition: none; } }
@media (max-width: 860px) {
  .archrow { grid-template-columns: 1fr; }
}

/* ---------- Prozessschritte (Siebdruck) ---------------------------------- */

.step {
  display: grid; gap: clamp(1.25rem, 3vw, 3rem);
  grid-template-columns: 64px minmax(0, 5fr) minmax(0, 6fr);
  grid-template-areas: 'num body fig';
  align-items: start;
}
/* Gespiegelter Schritt: Spalten tauschen, nicht die Reihenfolge einzelner Kinder —
   sonst landet das Bild in der schmalen Nummernspalte. */
.step--flip {
  grid-template-columns: minmax(0, 6fr) 64px minmax(0, 5fr);
  grid-template-areas: 'fig num body';
}
.step__num  { grid-area: num; }
.step__body { grid-area: body; }
.step__fig  { grid-area: fig; }
.step__num {
  font-size: 13px; font-weight: 600; color: var(--red-text);
  padding-top: .35rem; border-top: 2px solid var(--red-text);
}
.step__body h2 { margin: 0 0 .6em; }
.step__fig { border: 1px solid var(--rule); background: #fff; padding: clamp(1rem, 2vw, 1.75rem); }
.step__fig img { width: 100%; }
.step__fig figcaption { margin-top: .9rem; padding-top: .6rem; border-top: 1px solid var(--rule-soft); color: var(--ink-45); }

@media (max-width: 900px) {
  .step, .step--flip {
    grid-template-columns: 1fr; gap: 1.25rem;
    grid-template-areas: 'num' 'body' 'fig';
  }
  .step__num { border-top: 0; border-left: 2px solid var(--red-text); padding: 0 0 0 .6rem; }
}

/* ---------- Zweispalter (Über) ------------------------------------------- */

.twocol { display: grid; gap: clamp(1.75rem, 5vw, 4rem); grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.manifest__list--neg li::before { content: '\00D7'; color: var(--ink-45); }

/* ---------- Zeitleiste (Über) -------------------------------------------- */

.tl { list-style: none; margin: 0; padding: 0; display: grid; }
.tl__row {
  display: grid; gap: .5rem clamp(1rem, 4vw, 3rem);
  grid-template-columns: minmax(120px, 170px) 1fr;
  padding: 1.05rem 0; border-top: 1px solid var(--rule);
  align-items: baseline;
}
.tl__row:last-child { border-bottom: 1px solid var(--rule); }
.tl__date { color: var(--red-text); font-weight: 600; }
.tl__text { color: var(--ink-70); }
@media (max-width: 620px) { .tl__row { grid-template-columns: 1fr; gap: .2rem; } }

/* ---------- Serviceseiten ------------------------------------------------ */

.svc { display: grid; gap: clamp(2.5rem, 6vw, 4.5rem); max-width: 900px; }
.svc__item { scroll-margin-top: calc(var(--header-h) + 1.5rem); }
.svc__item h2 { margin: 0 0 .6em; }
.svc__item .spec { margin-top: 1.2rem; }
.svc__item code {
  font-family: var(--mono); font-size: .85em;
  background: var(--paper-warm); padding: .1em .35em;
}
.notice a { text-underline-offset: 3px; }

/* Einleitung mit angehängtem Zettel (Über-Seite) */
.lead-split {
  display: grid; gap: clamp(1.75rem, 5vw, 4rem);
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  align-items: start;
}
@media (max-width: 860px) {
  .lead-split { grid-template-columns: 1fr; }
  .lead-split .manifest__scrap { justify-self: start !important; }
}

/* Weiterführender Link in der Sektionsüberschrift */
.sec__link {
  display: inline-block; margin-top: .5rem;
  color: var(--red-text); text-decoration: none;
  border-bottom: 1px solid currentColor; padding-bottom: 1px;
}
.sec__link:hover { color: var(--ink); }

/* =========================================================================
   Handgezeichnete Illustrationen
   Alle aus dem Bestand der Marke, nichts generiert. Sie sitzen dort, wo sonst
   Interface-Sprache stünde — und nirgends sonst.
   ========================================================================= */

/* Newsletter mit Figur */
.news__grid--illu { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; }
.news__illu { justify-self: center; width: min(100%, 300px); }
.news__illu img { width: 100%; }
@media (max-width: 820px) {
  .news__grid--illu { grid-template-columns: 1fr; }
  .news__illu { width: min(70%, 240px); justify-self: start; }
}

/* Bestätigung nach dem Eintragen */
.news__done {
  margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid var(--rule);
  display: grid; grid-template-columns: 92px 1fr; gap: 1.1rem; align-items: center;
}
.news__done img { width: 100%; }
.news__done h3 { font-size: clamp(1.4rem, 3vw, 2rem); }
.news__done h3:focus-visible { outline: 2px solid var(--red); outline-offset: 4px; }

/* Willkommen-Banner auf der Über-Seite */
.welcome { margin-bottom: clamp(1.5rem, 4vw, 2.75rem); }
.welcome img { width: min(100%, 560px); }

/* Das Motivbild stand hier früher als zweites Blatt unter dem Shirt.
   Beide liegen jetzt in einer Bildstrecke übereinander — siehe .archslide
   im Abschnitt „Archivseite". */

/* Willkommen-Animation als Auftakt der Startseite.
   Volle Breite, aber mit Deckel — sonst wird die Handzeichnung matschig.
   Der großzügige Weißraum ist Absicht: die Animation läuft beim Seitenaufbau
   los und soll dabei für sich stehen, nicht mit der Headline konkurrieren. */
.welcome-hero {
  padding-top: clamp(2.5rem, 7vw, 6rem);
  padding-bottom: clamp(3rem, 8vw, 7rem);
}
.welcome-hero img { width: min(100%, 980px); margin-inline: auto; }
.welcome--sm img { width: min(100%, 420px); }

/* =========================================================================
   Header schwarz
   Die Wortmarke liegt als schwarze Zeichnung auf Transparenz — invert(1)
   dreht sie auf Weiß, ohne eine zweite Datei zu brauchen.
   ========================================================================= */

.hd {
  background: var(--ink);
  color: var(--paper);
  border-bottom: 0;
}
.hd__logo img { filter: invert(1); }
.hd__nav a,
.hd__cart { color: var(--paper); }
.hd__nav a::after { border-bottom-color: var(--paper); }
.hd__burger span,
.hd__burger span::before,
.hd__burger span::after { background: var(--paper); }

/* Aktiver Punkt: umrandeter Button statt Unterstrich */
.hd__nav a[aria-current='page'] {
  border: 1px solid var(--paper);
  padding: .5rem .95rem;
  margin-block: -.1rem;
}
.hd__nav a[aria-current='page']::after { content: none; }

/* Mobiles Menü klappt aus dem schwarzen Header heraus — also auch schwarz */
.mnav { background: var(--ink); color: var(--paper); }
.mnav a { border-bottom-color: rgba(255, 255, 255, .16); }
.mnav .mnav__meta { color: rgba(255, 255, 255, .60); }

/* Fokus muss auf Schwarz sichtbar bleiben */
.hd :focus-visible,
.mnav :focus-visible { outline-color: var(--red); }

/* =========================================================================
   Entstehungs-Slider
   Läuft nie von allein — nur auf Klick oder Pfeiltaste. Alle Stände liegen
   im DOM und werden ein- und ausgeblendet, damit das Durchklicken nicht
   auf Nachladen wartet.
   ========================================================================= */

.step__fig--plain { border: 0; background: none; padding: 0; }

.wip { display: grid; gap: 0; }

.wip__stage {
  position: relative;
  border: 1px solid var(--rule); background: #fff;
  padding: clamp(1rem, 2vw, 1.75rem);
}
.wip__img { width: 100%; }
.wip__count {
  position: absolute; top: 0; right: 0;
  background: var(--ink); color: var(--paper);
  padding: .4rem .6rem; letter-spacing: .12em;
}
.wip__count b { font-weight: 600; }

/* Schrittleiste */
.wip__bar {
  display: flex; align-items: stretch; gap: -1px;
  border: 1px solid var(--rule); border-top: 0;
}
.wip__arrow {
  flex: 0 0 auto; width: 48px; min-height: 48px;
  background: none; border: 0; cursor: pointer; color: inherit;
  font-family: var(--mono); font-size: 15px; line-height: 1;
}
.wip__arrow:first-child { border-right: 1px solid var(--rule); }
.wip__arrow:last-child  { border-left:  1px solid var(--rule); }
.wip__arrow:hover { background: var(--ink); color: var(--paper); }

.wip__dots {
  flex: 1 1 auto; display: flex; list-style: none; margin: 0; padding: 0;
}
.wip__dots li { flex: 1 1 0; display: flex; }
.wip__dots li + li { border-left: 1px solid var(--rule-soft); }
.wip__dot {
  flex: 1 1 auto; min-height: 48px; padding: 0;
  background: none; border: 0; cursor: pointer; color: var(--ink-45);
  font-size: 11px; font-weight: 600; letter-spacing: .08em;
}
.wip__dot:hover { color: var(--ink); }
.wip__dot[aria-pressed='true'] { background: var(--ink); color: var(--paper); }

.wip__caption {
  margin: .9rem 0 0; color: var(--ink-70); font-size: .93rem;
  display: flex; gap: .6rem; align-items: baseline; flex-wrap: wrap;
}
.wip__caption b {
  color: var(--ink); font-size: 11px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  border-bottom: 2px solid var(--ink); padding-bottom: 2px;
}

@media (max-width: 480px) {
  .wip__dot { font-size: 10px; }
  .wip__arrow { width: 44px; }
}

/* =========================================================================
   Druck-Szene im Hero
   Der Scrollweg steckt in .press-track, gepinnt wird .press-pin.
   Die Ebenen liegen in Prozent über dem Shirt und sind dadurch in jeder
   Größe deckungsgleich. Die Werte stammen aus einer Messung des echten
   Produktfotos gegen die Druckdateien — siehe DESIGN_DECISIONS.md §K.
   ========================================================================= */

@property --p     { syntax: '<number>'; inherits: false; initial-value: 0; }
@property --rakel { syntax: '<number>'; inherits: false; initial-value: 0; }

.press-track { padding-block: 0; }

/* Bühne: bleibt stehen, während der Scrollweg darunter abläuft */
.press-pin {
  position: sticky;
  top: var(--header-h);
  display: flex; align-items: center;
  min-height: calc(100svh - var(--header-h));
}
@supports not (height: 100svh) {
  .press-pin { min-height: calc(100vh - var(--header-h)); }
}
.press-pin > .hero__grid { width: 100%; padding-block: clamp(1rem, 3vw, 2.5rem); }

/* Scrollweg, in dem gepinnt wird — auf Mobile kürzer, damit die Bühne nur
   kurz stehen bleibt statt wie am Desktop einen ganzen Bildschirm Scrollweg
   zu beanspruchen. */
@media (min-width: 901px) {
  .press-track { height: 300vh; }
}
@media (max-width: 900px) {
  .press-track { height: 145vh; }
  /* Etwas knapperer Innenabstand, damit Titel, Shirt und Eckdaten beim
     Pinnen zusammen in eine Bildschirmhöhe passen. */
  .press-pin > .hero__grid { padding-block: clamp(.375rem, 1.5vh, .75rem); row-gap: clamp(.5rem, 1.5vh, .875rem); }
}

/* ---------- Shirt und Druckebenen ---------- */

/* Der Rahmen schrumpft auf das Bild — nur so bleiben die Prozentwerte der
   Ebenen gültig, wenn das Shirt auf die Fensterhöhe begrenzt wird. */
.press { position: relative; width: fit-content; max-width: 100%; margin-inline: auto; }
.press__base { display: block; width: 100%; height: auto; }

@media (min-width: 901px) {
  /* Bühne darf nie höher werden als das Fenster, sonst rutscht sie beim
     Pinnen aus dem Bild. Das Shirt begrenzt die Höhe, nicht die Breite. */
  .press__base { width: auto; max-height: calc(100svh - var(--header-h) - 5.5rem); }
}
@supports not (height: 100svh) {
  @media (min-width: 901px) {
    .press__base { max-height: calc(100vh - var(--header-h) - 5.5rem); }
  }
}

.press__layer {
  position: absolute;
  /* gemessene Lage des Druckbogens auf dem Shirt */
  left: 29.77%;
  top: 19.98%;
  width: 46.65%;
  aspect-ratio: 1625 / 2000;
  /* Farbe auf hellem Stoff verhält sich multiplikativ; Weiß verschwindet damit
     von selbst und die Ebenen brauchen keine ausgestanzte Transparenz. */
  mix-blend-mode: multiply;
  /* Rakelzug von oben nach unten */
  clip-path: inset(0 0 calc((1 - var(--p)) * 100%) 0);
  /* dezente Verdichtung: die Farbe zieht beim Erscheinen leicht an */
  opacity: calc(.78 + var(--p) * .22);
  will-change: clip-path, opacity;
}
.press__layer img { width: 100%; }

/* Ungeclippte Zwillingsbühne zu .press__layer — exakt dieselbe Lage und
   Fläche, aber ohne dessen Freistellungsmaske, damit die Rakel nie an der
   eigenen Zuglinie abgeschnitten wird. */
.press__rakelbox {
  position: absolute;
  left: 29.77%;
  top: 19.98%;
  width: 46.65%;
  aspect-ratio: 1625 / 2000;
  pointer-events: none;
}

/* Die Rakel selbst — sitzt auf der Rakelzug-Linie und zieht die Farbe frei.
   Etwas breiter als das Motiv, wie ein Sieb, das über den Druck hinausragt.
   Das Foto zeigt die Rakel leicht schräg von vorn; ihre Arbeitskante (die
   Gummilippe) liegt nicht mittig, sondern ganz unten im zugeschnittenen
   Bild — deshalb hängt die Grafik an ihrer Unterkante an der Linie, statt
   mittig zu zentrieren. */
.press__rakel {
  position: absolute; left: -6%; width: 112%; height: auto;
  top: calc(var(--p) * 100%);
  transform: translateY(-97%);
  opacity: var(--rakel);
  filter: drop-shadow(0 4px 8px rgba(13, 11, 10, .35));
  will-change: top, opacity;
}

/* Ohne Bewegungswunsch steht sofort das fertige Motiv */
@media (prefers-reduced-motion: reduce) {
  .press-track { height: auto; }
  .press-pin { position: static; min-height: 0; }
  .press__layer { clip-path: none; opacity: 1; }
  .press__rakelbox { display: none; }
}

/* Im gepinnten Zustand darf die Textspalte nie höher werden als das Fenster,
   sonst würde beim Pinnen unten etwas abgeschnitten. Deshalb hängen Headline
   und Abstände hier zusätzlich an der Fensterhöhe. */
@media (min-width: 901px) {
  /* Zwei Deckel, beide gemessen statt geschätzt:
     – Breite: die längste Zeile „NUR FARBE" misst 8,8 em in der Displayschrift,
       die Spalte ist rund 44 vw breit → maximal ~5 vw, gewählt 4,8 vw.
     – Höhe: die Textspalte braucht rund 5 Zeilenhöhen plus 333 px Beiwerk,
       das passt bei flachen Fenstern nur bis etwa 8,6 vh.
     So bricht die Headline nie um und die Bühne bleibt immer im Fenster. */
  .press-pin .hero__title { font-size: min(clamp(2.4rem, 4.8vw, 5rem), 8.6vh);
                            margin-block: min(.5em, 2vh) min(.45em, 2vh); }
  /* Dieselbe Rechnung für die Satz-Headline der Startseite: die längste Zeile
     „DIY SIEBDRUCK" misst 11,6 em statt 8,8 → 44 vw / 11,6 = 3,8 vw, gewählt
     3,6 vw. Und sie läuft über fünf Zeilen statt vier, deshalb der flachere
     Höhendeckel. */
  .press-pin .hero__title--satz { font-size: min(clamp(1.75rem, 3.6vw, 3.5rem), 7.2vh); }
  /* Unter der Szene stehen jetzt die Eckdaten. Gedeckelt wird über die Breite
     und nicht über die Höhe: das Shirt behält so sein Seitenverhältnis und die
     prozentual gesetzten Druckebenen bleiben deckungsgleich (DESIGN_DECISIONS §K).

     Ein glatter vh-Wert reicht nicht, weil zwei Posten nicht mitskalieren —
     Kopfleiste (60 px) und Eckdaten (110 px). Was bleibt:
        Bildhöhe  ≤ vh − 60 − 0,07·vh (Innenabstand) − 110  =  0,93·vh − 170
     und bei 998 × 1200, also Höhe = Breite × 1,202:
        Bildbreite ≤ 0,774·vh − 141
     Abgerundet auf 77 vh − 145 px. */
  .press-pin .hero__fig { max-width: min(100%, calc(77vh - 145px)); margin-inline: auto; }
  .press-pin .lede        { font-size: min(clamp(1rem, 1.35vw, 1.18rem), 2.1vh); }
  .press-pin .hero__cta   { margin-top: min(2rem, 3vh); }
  .press-pin .hero__facts { margin-top: min(2.25rem, 3vh); padding-top: min(1rem, 1.5vh); }
  .press-pin > .hero__grid { padding-block: min(2.5rem, 3.5vh); row-gap: min(2.5rem, 3.5vh); }
}