/* ============================================================================
   felixihno.com 2027 · werk.css · the showcase page of one own tool (/beispiele/<name>/)
   Load after site.css and pages.css. Same rules: colours only through the semantic tokens,
   no hex values, motion off under reduced motion (site.css §18).
   Order of the page (strategy: Showcase-Bauplan 17.10.): the tool first (clip + try button),
   the gauge strip, the scene with three moves, the build log, the transfer to the reader's
   business, one honest limit, frame line and booking.
   ========================================================================== */

/* stage: the clip right under the hero, wider than the text, on the same night ground */
.werk-buehne { padding: 0 var(--gutter) var(--section-y); }
.werk-buehne > .wrap { padding-inline: 0; max-width: var(--max); display: grid; gap: var(--s-4); }
.werk-buehne .shot__frame { box-shadow: 0 0 0 1px var(--c-line), 0 40px 80px -40px var(--black-a40); }
.werk-buehne__leiste { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-6); }

/* gauge strip: real values of the tool, figure big, label small, one rule on top */
.messleiste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-6) var(--s-4); }
.messleiste li { display: grid; gap: var(--s-1); padding-top: var(--s-3); box-shadow: inset 0 1px 0 var(--c-text); min-width: 0; }
.messleiste__wert {
  font: var(--w-semi) var(--fs-h2)/1 var(--font-display); letter-spacing: var(--track-head);
  font-variant-numeric: tabular-nums;
}
.messleiste__wert small { font-size: .5em; letter-spacing: 0; margin-left: .15em; }
.messleiste__was { font: var(--w-reg) var(--fs-mono)/1.45 var(--font-mono); color: var(--c-text-2); }
@media (max-width: 899px) { .messleiste li:first-child:nth-last-child(odd) { grid-column: 1 / -1; } }   /* odd count: the first value wide, then pairs, none alone */
@media (min-width: 900px) { .messleiste { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--s-8); } .messleiste--vier { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* three moves: the steps timeline with three columns and a still per move */
@media (min-width: 900px) { .steps--drei { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.step__bild { margin-top: var(--s-4); border-radius: var(--r-md); overflow: hidden; box-shadow: var(--shadow-card); background: var(--c-inset); }
.step__bild img { width: 100%; height: auto; display: block; }

/* build log: facts on the left column read as a log, the open values stay visible (.ph) */
.baulog dd .ph { font-weight: var(--w-reg); }

/* transfer: text cards without a picture get their padding back */
.card--text { padding-top: var(--s-6); }
.card--text .card__body { padding-top: 0; }

/* the one limit: a quiet inset sheet with a mono label */
.grenze { display: grid; gap: var(--s-2); max-width: 48rem; padding: var(--s-5) var(--s-6); border-radius: var(--r-lg); background: var(--c-surface); box-shadow: var(--shadow-card); }
.grenze p { color: var(--c-text-2); }
.grenze .eyebrow { color: var(--c-text); }

/* frame line under the closing head: duration · price · what stays with the client */
.rahmen { font: var(--w-reg) var(--fs-mono)/1.6 var(--font-mono); color: var(--c-text-2); }

/* the lead card on /beispiele/: one wide own tool before the client cases */
.werk-lead { display: grid; gap: var(--s-6); align-items: center; }
.werk-lead__bild { display: block; border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-lift); }
.werk-lead__bild img { width: 100%; height: auto; display: block; }
.werk-lead__text { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-4); max-width: 34rem; }
.werk-lead__links { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-3) var(--s-6); }
@media (min-width: 900px) { .werk-lead { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--s-12); } }

/* the stage label above a demo on night ground (Pond Revival) */
.buehne-label { margin-bottom: var(--s-4); white-space: normal; }
.werk-buehne .demo { min-width: 0; }
.werk-buehne .demo__wave { overflow: hidden; min-width: 0; }   /* 40 bars cut at the card edge on narrow phones instead of widening it */

/* Mappe: the client's version of an output, re-set as a sheet of paper (Pond Revival, „nachgestellt“).
   Three packages side by side from 900 px, the recommended one carries an ink rule and its lines. */
.mappe { max-width: 64rem; padding: var(--s-8) var(--s-6); border-radius: var(--r-lg); background: var(--c-surface); box-shadow: var(--shadow-lift); display: grid; gap: var(--s-8); }
.mappe__kopf { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--s-2) var(--s-6); padding-bottom: var(--s-4); box-shadow: inset 0 -1px 0 var(--c-line); }
.mappe__titel { font: var(--w-semi) var(--fs-h3)/1.2 var(--font-display); letter-spacing: var(--track-tight); }
.mappe__meta { font: var(--w-reg) var(--fs-mono)/1.5 var(--font-mono); color: var(--c-text-2); }
.mappe__pakete { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-4); }
.paket { display: grid; align-content: start; gap: var(--s-3); padding: var(--s-5); border-radius: var(--r-md); background: var(--c-inset); min-width: 0; }
.paket--empfohlen { background: var(--c-surface); box-shadow: inset 0 0 0 1.5px var(--c-text); }
.paket__name { font: var(--w-reg) var(--fs-mono)/1.4 var(--font-mono); color: var(--c-text-2); }
.paket--empfohlen .paket__name { color: var(--c-text); }
.paket__preis { font: var(--w-semi) var(--fs-h2)/1 var(--font-display); letter-spacing: var(--track-head); font-variant-numeric: tabular-nums; }
.paket__inhalt { list-style: none; margin: 0; padding: 0; display: grid; font-size: var(--fs-sm); color: var(--c-text-2); }
.paket__inhalt li { display: flex; justify-content: space-between; gap: var(--s-3); padding-block: var(--s-2); box-shadow: inset 0 -1px 0 var(--c-line); }
.paket__inhalt li span:last-child:not(:first-child) { font-family: var(--font-mono); font-size: var(--fs-mono); font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--c-text); }
.mappe__fuss { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3) var(--s-6); font-size: var(--fs-sm); color: var(--c-text-2); }
.mappe__annehmen { display: inline-flex; align-items: center; min-height: 44px; padding-inline: var(--s-5); border-radius: var(--r-sm); background: var(--c-btn-bg); color: var(--c-btn-text); font-weight: var(--w-med); }
@media (min-width: 900px) {
  .mappe { padding: var(--s-12) var(--s-12); }
  .mappe__pakete { grid-template-columns: 1fr 1.25fr 1fr; align-items: start; }
}

/* Werkfarbe (Felix 17.10.: „die alb ok das andere ne“, so only Albtrauf carries one): a showcase may take one colour
   from its own world, set on <body class="werk-…">. It tints the night ground a few percent, colours the
   glyph field, the rules over the figures, the units and the step marks. Paper, ink and type stay Regie;
   vermilion keeps its two meanings (brand dot, „ein Mensch entscheidet“) and never turns into the werk colour. */
.werk-alb   { --werk: #A35A1C; --n-werk: #E9A35E;   /* Abendlicht über der Alb (from the tool's sunset) */
              --n-page: #201D18; --n-canvas: #25211D; --n-surface: #2D2823; --n-hover: #34302A; --n-line: #3E3831; }
.werk-alb { --c-werk: var(--werk); }
.werk-alb .night { --c-werk: var(--n-werk); --feld-ink: var(--n-werk); }
.werk-alb .messleiste li { box-shadow: inset 0 2px 0 var(--c-werk); }
.werk-alb .messleiste__wert small { color: var(--c-werk); }
.werk-alb .step:not(.step--decision) .step__mark { background: var(--c-werk); }

/* Abendbild: the landscape itself, edge to edge, no frame and no UI (Albtrauf) */
.abendbild { margin: 0; padding-bottom: var(--s-6); background: var(--n-page); }
.abendbild img { display: block; width: 100%; height: auto; }
.abendbild figcaption { padding-top: var(--s-3); font: var(--w-reg) var(--fs-mono)/1.5 var(--font-mono); color: var(--n-ink-2); }
@media (max-width: 599px) { .abendbild img { aspect-ratio: 4 / 3; object-fit: cover; object-position: 42% 50%; } }   /* phone: taller crop, the Teck stays in frame */