/* ==========================================================================
   konfigurator.css — Die Werkbank als Musterblatt. Setzt stil/welt.css voraus.
   ========================================================================== */

/* Die Kennzeile „Musterblatt 06 · Entwurf · Essen" ist am 02.09.2026
   entfallen — sie sagte dasselbe wie die Blattzeile darunter und kostete Höhe,
   bevor das Werkzeug anfing. Ihre Regel .werkbank__kennung ist mit ihr weg. */
.werkbank__kopf { padding-block: var(--luft-l) var(--luft-m); display: grid; gap: var(--luft-m); }
.werkbank__kopf .fliess { margin-top: -.5rem; }

.werkbank { display: grid; gap: var(--luft-l); align-items: start; padding-block: var(--luft-m) var(--luft-xl); }
@media (min-width: 62rem) {
  .werkbank { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: var(--luft-xl); }
}

/* ------------------------------------------------------------------- Bühne */

.buehne { display: grid; gap: var(--luft-m); }
.buehne__oben, .buehne__unten { display: grid; gap: var(--luft-m); }

/* Der Halter wird über seine Höhe bemessen, die Breite folgt dem Seitenmaß der
   Aufnahme. Deshalb steht er mittig, und die beiden Zeilen darunter laufen
   über die volle Breite. Ohne das käme bei begrenzter Höhe ein zu breites
   graues Feld unter ein schmaleres Teil. */
.buehne__oben { justify-items: center; }
.buehne__oben > .buehne__ansicht,
.buehne__oben > .buehne__zeile { justify-self: stretch; width: 100%; }

.buehne__halter {
  position: relative;
  /* Die Aufnahmen sind 1402 × 1122. Bei 1 / 1 lagen oben und unten je rund
     60 px leeres Feld, und die Bühne passte auf dem Laptop nicht neben die
     Schritte. */
  aspect-ratio: 1402 / 1122;
  /* Die Höhe setzen die beiden Medienabfragen. Diese Breite ist nur der
     Rückfall, falls keine greift: ohne eine der beiden hätte das Rasterfeld
     keine Ausdehnung, weil sein Inhalt absolut gesetzt ist. */
  width: 100%;
  touch-action: none;
}

/* Auf dem Laptop klebt die ganze Spalte: Teil und Lupe stehen zusammen, und
   das Auge vergleicht sie ohne zu scrollen. Das geht nur, wenn die Spalte in
   den Bildschirm passt — position: sticky nützt nichts an einem Element, das
   höher ist als das Fenster. Gemessen bei 1440 × 900 mit Logo und Lupe: 773 px
   bei 812 px verfügbarer Höhe. */
@media (min-width: 62rem) {
  .buehne { position: sticky; top: 5.5rem; }
  .buehne, .buehne__oben, .buehne__unten { gap: var(--luft-s); }
  .buehne__halter { width: auto; height: min(46vh, 560px); max-width: 100%; }
}

/* Auf dem Handy klebt nur der obere Teil: Teil, Ansicht, Ablesezeile. Vorher
   klebte die ganze Bühne — mit geladenem Logo 1095 px bei 844 px Fensterhöhe,
   für die zwölf Schritte blieb rechnerisch minus 370 px. Die Lupe wandert zu
   Schritt 07 (lupeEinsortieren in konfigurator.js), die Hinweise stehen
   ohnehin bei ihrem Schritt. */
@media (max-width: 61.99rem) {
  .buehne__oben {
    position: sticky; top: 4rem; z-index: 30;
    background: var(--grund);
    padding-bottom: var(--luft-s);
    border-bottom: var(--linie) solid var(--linie-farbe);
    gap: var(--luft-s);
  }
  /* 25 vh, nicht mehr. Der klebende Block darf höchstens 40 vh hoch sein:
     Kopfleiste (65) und Daumenleiste (54) gehen zusätzlich ab, und was bleibt,
     ist der Platz für die zwölf Schritte. Beurteilt wird der Aufdruck ohnehin
     in der Lupe, und die steht bei Schritt 07. */
  .buehne__halter { width: auto; height: 25vh; }

  /* Die beiden Behälter lösen sich auf, damit .buehne__oben ein Feld des
     .werkbank-Rasters wird.

     Das ist keine Kosmetik: `position: sticky` klebt nur innerhalb des eigenen
     Elternelements. Bliebe .buehne stehen, wäre die Grenze 339 px hoch — das
     Teil verschwände nach zwei Fingerbreit nach oben, und damit genau die
     Livevorschau, für die die Seite gebaut ist. Mit `display: contents` ist die
     Grenze wieder .werkbank (rund 6960 px), also die ganze Werkbank.

     Hintergrund, Innenabstand und Haarlinie des klebenden Blocks liegen oben
     auf .buehne__oben und nicht auf .buehne, sind davon also nicht betroffen.

     .buehne__unten löst sich mit auf: sie ist auf dem Handy leer, weil die Lupe
     bei Schritt 07 steht. Als eigenes Rasterfeld brächte sie einen Abstand von
     --luft-l mit, den niemand sieht und jeder scrollt. */
  .buehne, .buehne__unten { display: contents; }
}

.buehne__halter::before {
  content: '';
  position: absolute; inset: 4% 6% 8%;
  background: var(--feld);
  transition: background-color var(--d-farbe) var(--ease-aus);
}
.buehne__teil { position: absolute; inset: 0; will-change: transform; }
.buehne__rueckfall, .buehne__blaetter { position: absolute; inset: 0; }
.buehne__rueckfall { width: 100%; height: 100%; object-fit: contain; }
.buehne__blaetter { display: grid; cursor: grab; }
.buehne__blaetter.zieht { cursor: grabbing; }
.buehne__blaetter[hidden], .buehne__rueckfall[hidden] { display: none; }

/* Zwei deckungsgleiche Blätter. Gezeichnet wird immer auf das hintere, dann
   werden die Rollen getauscht: nur so lässt sich ein Farbwechsel überblenden
   statt ihn umspringen zu lassen. */
.buehne__blatt {
  grid-area: 1 / 1;
  width: 100%; height: 100%; object-fit: contain;
  opacity: 1; filter: none;
  transition: opacity var(--d-farbe) var(--ease-aus), filter var(--d-farbe) var(--ease-aus);
}
.buehne__blatt--weg { opacity: 0; }
/* Beim Wechsel des Verfahrens sieht man sonst zwei Logos übereinander. Etwas
   Unschärfe auf dem abgehenden Blatt verbindet beide zu einer Bewegung. */
.buehne__blatt--verfahren { transition-duration: var(--d-verfahren); }
.buehne__blatt--verfahren.buehne__blatt--weg { filter: blur(3px); }

.buehne__schatten {
  position: absolute; left: 14%; right: 14%; bottom: 3%; height: 8%;
  background: radial-gradient(ellipse at center, rgba(10,10,10,.28), transparent 68%);
  filter: blur(10px);
  will-change: transform;
}

.buehne__zeile {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 1rem;
  margin: 0; padding-top: .7rem;
  border-top: var(--linie) solid var(--schrift);
}
.buehne__ziehen[hidden] { display: none; }

/* ------------------------------------------------------------------- Lupe

   Kein Kasten mit Rahmen, sondern ein zweiter Ausschnitt derselben Aufnahme:
   oben das ganze Teil, hier die Stelle, um die es geht. Der Stoff darin ist
   vergroessert und deshalb weich — das ist ehrlich, das Foto gibt nicht mehr
   her. Der Aufdruck dagegen wird in dieser Groesse neu gerechnet und ist
   wirklich scharf. Genau darum geht es: der Besucher soll seinen Schnitt
   sehen, nicht einen Fleck. */
.lupe { margin: 0; display: grid; gap: .55rem; }
.lupe[hidden] { display: none; }

.lupe__blatt {
  display: block; width: 100%; height: auto;
  background: var(--papier-2);
  outline: var(--linie) solid var(--schrift); outline-offset: 0;
}

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

/* ---------------------------------------------------------------- Schritte */

.schritte { display: grid; }

/* Ein Schritt ist eine Zeile auf dem Blatt, kein Kasten: Nummer links,
   Inhalt rechts, getrennt durch eine Haarlinie. */
.schritt {
  display: grid; gap: .55rem;
  grid-template-columns: 3rem minmax(0, 1fr);
  margin: 0; padding: var(--luft-m) 0;
  border: 0; border-top: var(--linie) solid var(--linie-farbe);
}
.schritt:first-child { border-top-color: var(--schrift); }
.schritt[hidden] { display: none; }
.schritt > *:not(.schritt__nummer) { grid-column: 2; }
.schritt__nummer {
  grid-column: 1; grid-row: 1 / span 2;
  padding: 0 .8rem 0 0; float: none;
  background: var(--grund);
  font-size: var(--t-schild); color: var(--leise-farbe);
  letter-spacing: .1em;
  transition: color var(--d-wahl) var(--ease-aus);
}
.schritt:focus-within .schritt__nummer { color: var(--ware-tinte); }
.schritt__schild { grid-row: 1; }
.schritt__frage {
  grid-row: 2; margin: 0 0 .35rem;
  font-size: clamp(1.05rem, 1rem + .4vw, 1.3rem);
  line-height: 1.35;
}
.schritt__eigene { max-width: 11rem; }

/* Die Hinweise stehen bei dem Schritt, der sie auslöst: Verlauf, Schnittform,
   kleine Datei und Fehler bei Schritt 05 (Logo), der Kontrasthinweis bei
   Schritt 04 (Folienfarbe), „liegt auf der Rückseite" bei Schritt 07. Vorher
   sammelten sie sich unter der Bühne und schoben Lupe und Teil aus dem Bild.
   Sind alle verborgen, verschwindet auch der Behälter — sonst bliebe eine
   Lücke im Schritt stehen. */
.schritt__meldungen { display: grid; }
.schritt__meldungen .knopf { margin-top: .3rem; }
/* Solange jeder Hinweis darin verborgen ist, verschwindet der Behälter selbst.
   Sonst bliebe der Zeilenabstand des Schrittes als Lücke stehen. */
.schritt__meldungen:not(:has(> :not([hidden]))) { display: none; }
.schritt__lupe:empty { display: none; }
/* Die Lupe: auf dem Handy hier, auf dem Laptop unter der Bühne. */
.schritt__lupe { display: grid; margin-top: .4rem; }

/* Die Schriftproben in Schritt 06. Jedes Schild zeigt seine eigene Schrift,
   damit der Besucher sieht, was er wählt. Die Werte stammen aus
   inhalt/produkte.json (Feld schriften) und werden dort gepflegt; hier stehen
   sie nur, damit kein style-Attribut im Markup landet. */
/* Der Umweg über #schriften ist Absicht: .wahl label setzt selbst
   font-family und font-weight und hat mit 0-1-1 die höhere Spezifität als
   eine blosse Klasse. Vorher gewann das style-Attribut, jetzt gewinnt die
   Kennung des Halters. */
#schriften label { letter-spacing: .04em; }
#schriften .schrift--anzeige  { font-family: 'Archivo', sans-serif; font-weight: 900; font-stretch: 62%; }
#schriften .schrift--grotesk  { font-family: 'Archivo', sans-serif; font-weight: 700; font-stretch: 100%; }
#schriften .schrift--breit    { font-family: 'Archivo', sans-serif; font-weight: 800; font-stretch: 118%; }
#schriften .schrift--maschine { font-family: 'JetBrains Mono', ui-monospace, monospace; font-weight: 700; font-stretch: 100%; }
.schritt__probe { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin: 0; }
.schritt__probe .knopf { padding: .6rem 1rem; }

.mengen { display: grid; gap: .5rem; grid-template-columns: repeat(auto-fit, minmax(3.6rem, 1fr)); }
.menge { display: grid; gap: .2rem; text-align: center; }
.menge input { text-align: center; padding: .5rem 0; }

.summe {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem 1rem;
  margin: .4rem 0 0; padding-top: .7rem;
  border-top: var(--linie) solid var(--linie-farbe);
}
.summe .anzeige { color: var(--ware-tinte); transition: color var(--d-farbe) var(--ease-aus); }

.groesse { display: grid; gap: .5rem; }
.groesse[hidden] { display: none; }

.kontakt { display: grid; gap: var(--luft-s) var(--luft-m); }
@media (min-width: 34rem) { .kontakt { grid-template-columns: 1fr 1fr; } }
.kontakt__nachricht { margin-top: var(--luft-s); }

.honigtopf { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.absenden {
  display: grid; gap: var(--luft-s);
  margin-top: var(--luft-m); padding-top: var(--luft-m);
  border-top: var(--linie) solid var(--schrift);
}
.absenden__knopf { justify-self: start; padding: 1.1rem 1.8rem; }

@media (max-width: 61.99rem) { .fuss { padding-bottom: 6rem; } }

/* --------------------------------------------- Maßtabelle, Nummer, Teilen */

.groessentabelle { margin-top: .4rem; }
.groessentabelle summary { cursor: pointer; }
.groessentabelle summary::marker { color: var(--ware-tinte); }
.masse {
  width: 100%; margin-top: .8rem;
  border-collapse: collapse;
  font-family: var(--schrift-daten); font-size: var(--t-notiz);
  font-variant-numeric: tabular-nums;
}
.masse caption { caption-side: bottom; padding-top: .6rem; text-align: left; }
.masse th, .masse td { padding: .45rem .5rem; text-align: left; border-top: var(--linie) solid var(--linie-farbe); }
.masse thead th { border-top: 0; color: var(--leise-farbe); font-weight: 600; }
.masse tbody th { font-weight: 700; }

.entwurfsnummer {
  display: grid; gap: var(--luft-s);
  margin-top: var(--luft-m); padding-top: var(--luft-m);
  border-top: var(--linie) solid var(--linie-farbe);
}
.entwurfsnummer .anzeige { color: var(--ware-tinte); transition: color var(--d-farbe) var(--ease-aus); }