/* ============================================================
   Schreinerei Baumgartner - Entwurf B "Buehne", zweite Fassung
   (12.09.2026): DIE WERKSTATT UM HALB SECHS.

   Carlo zur ersten Fassung: "mega". Also bleibt, was sie ausmacht -
   fast schwarz, aber warm (kein Blauschwarz, das waere Technik); ein
   Bernsteinton als einzige Farbe, Lampe, Glut und Signal in einem;
   Bricolage Grotesque riesig fuer das Wenige, was zaehlt, Space
   Grotesk fuer alles andere; nichts steht mittig, ausser es hat einen
   Grund. Neu: keine Kopfleiste, das Saegeblatt ueber die ganze Hoehe,
   die sieben Stuecke auf derselben Seite, ein zweites Bild, alles
   ohne Javascript. Die drei Zeilen kommen per CSS, die Skizzen
   zeichnen sich beim Scrollen (pathLength="1"), die Punkte am Weg
   leuchten auf, wenn man bei ihnen ankommt.
   ============================================================ */

:root {
  --grund:    #0B0A09;
  --grund-2:  #131110;
  --grund-3:  #1C1815;
  --tinte:    #F4EDE3;
  --tinte-2:  #A99E90;
  --linie:    rgba(244, 237, 227, .13);
  --akzent:   #E8873A;
  --akzent-2: #2A1A0E;

  --gross:  'Bricolage Grotesque', 'Segoe UI', system-ui, sans-serif;
  --text:   'Space Grotesk', 'Segoe UI', system-ui, sans-serif;
  --bahn:   76rem;
  --rand:   clamp(1rem, 4vw, 2.5rem);
  --seite:  max(var(--rand), calc((100% - var(--bahn)) / 2));
  --weich:  cubic-bezier(.22, 1, .36, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body { margin: 0; background: var(--grund); color: var(--tinte); font: 400 1.0625rem/1.6 var(--text); -webkit-text-size-adjust: 100%; }
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3 { margin: 0; font-family: var(--gross); font-weight: 700; letter-spacing: -.02em; text-wrap: balance; }
p, figure, ul, ol, dl, dd, address { margin: 0; font-style: normal; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--akzent); outline-offset: 3px; }

.hinweis { margin: 0; padding: .5rem var(--seite); background: #000; color: #8E8478; font-size: .78rem; line-height: 1.45; border-bottom: 1px solid var(--linie); }
.hinweis b { color: var(--tinte); }
.zurhalle { position: absolute; left: .75rem; top: -5rem; z-index: 10; padding: .6rem 1rem; background: var(--akzent); color: #100B06; font-weight: 700; text-decoration: none; }
.zurhalle:focus { top: 3rem; }


/* ---------- Die Buehne ---------- */

.buehne { position: relative; isolation: isolate; overflow: hidden; min-height: 100svh; display: grid; }
.lichtkegel {
  position: absolute; inset: -20% -10% -10% -10%; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse 42% 55% at 62% 28%, rgba(232, 135, 58, .28) 0%, rgba(232, 135, 58, .08) 40%, transparent 70%);
}
@media (prefers-reduced-motion: no-preference) { .lichtkegel { animation: wandern 26s ease-in-out infinite alternate; } }
@keyframes wandern { from { translate: -3% 0; } to { translate: 4% 2%; } }

.staub { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.staub i {
  position: absolute; left: var(--x); top: var(--y); width: var(--gr); height: var(--gr);
  border-radius: 50%; background: rgba(244, 237, 227, .55); opacity: .5;
}
@media (prefers-reduced-motion: no-preference) { .staub i { animation: schweben var(--dauer, 14s) ease-in-out var(--verzug, 0s) infinite; } }
@keyframes schweben {
  0%   { translate: 0 0; opacity: .15; }
  30%  { opacity: .7; }
  60%  { translate: 18px -34px; opacity: .35; }
  100% { translate: -12px -70px; opacity: 0; }
}

.buehne__innen {
  display: flex; flex-direction: column; justify-content: space-between; gap: 3rem;
  width: 100%; max-width: var(--bahn); margin: 0 auto; min-height: 100svh;
  padding: clamp(1.2rem, 3vw, 2rem) var(--rand) clamp(2rem, 5vw, 3.5rem);
}
.buehne__zeile { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; color: var(--tinte-2); }
.buehne__zeile a { color: var(--akzent); text-decoration: none; font-weight: 700; }

.riese { font-size: clamp(2.8rem, 9.2vw, 8.6rem); line-height: .96; font-weight: 800; letter-spacing: -.035em; color: var(--tinte); }
.riese em { font-style: normal; color: var(--akzent); }
.riese__zeile { display: block; overflow: hidden; padding-bottom: .14em; margin-bottom: -.14em; }
.riese__zeile > span { display: block; }
@media (prefers-reduced-motion: no-preference) {
  .riese__zeile > span { translate: 0 110%; animation: hochkommen 1.1s var(--weich) both; animation-delay: calc(.25s + var(--nr) * .22s); }
}
@keyframes hochkommen { to { translate: 0 0; } }

.buehne__fuss { display: grid; gap: 1.6rem; align-items: end; }
@media (min-width: 56em) { .buehne__fuss { grid-template-columns: minmax(0, 1fr) auto; gap: 3rem; } }
.buehne__satz { max-width: 36rem; font-size: 1.1rem; color: var(--tinte-2); }
.buehne__satz b { color: var(--tinte); font-weight: 500; }
.pfeil { font-weight: 700; text-decoration: none; color: var(--akzent); white-space: nowrap; }
.pfeil span { display: inline-block; transition: translate .3s var(--weich); }
.pfeil:hover span { translate: .35rem 0; }


/* ---------- Laufband der Hoelzer ---------- */

.laufband { overflow: hidden; border-top: 1px solid var(--linie); border-bottom: 1px solid var(--linie); padding: .9rem 0; }
.laufband__spur { display: flex; width: max-content; }
@media (prefers-reduced-motion: no-preference) { .laufband__spur { animation: laufen 38s linear infinite; } }
.laufband:hover .laufband__spur { animation-play-state: paused; }
.laufband__liste { display: flex; align-items: center; gap: 2.2rem; padding-right: 2.2rem; font-family: var(--gross); font-size: 1.05rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--tinte-2); white-space: nowrap; }
.laufband__liste i { width: 6px; height: 6px; border-radius: 50%; background: var(--akzent); }
@keyframes laufen { to { translate: -50% 0; } }


/* ---------- Der Blick ---------- */

.blick { position: relative; overflow: hidden; background: var(--grund); }
.blick img { width: 100%; height: clamp(24rem, 100svh, 60rem); object-fit: cover; object-position: 50% 45%; opacity: .92; }
.blick--zwei img { height: clamp(18rem, 60svh, 36rem); }
@media (prefers-reduced-motion: no-preference) { .blick img { animation: naeher 30s ease-in-out infinite alternate; } }
@keyframes naeher { from { scale: 1; } to { scale: 1.07; } }
.blick::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, var(--grund) 0%, transparent 18%, transparent 82%, var(--grund) 100%); }


/* ---------- Die Halle ---------- */

.halle, .stuecke, .weg { padding: clamp(3.5rem, 8vw, 6.5rem) var(--seite); }
.halle__kopf, .stuecke__kopf, .weg__kopf { max-width: 40rem; }
.halle h2, .stuecke h2, .weg h2, .nachtruf h2 { font-size: clamp(2rem, 4.2vw, 3.4rem); line-height: 1.02; }
.halle__kopf p, .stuecke__kopf p, .weg__kopf p { margin-top: 1rem; color: var(--tinte-2); }

.posten__liste { display: grid; gap: 1px; margin-top: 2.6rem; background: var(--linie); border-top: 1px solid var(--linie); border-bottom: 1px solid var(--linie); }
@media (min-width: 40em) { .posten__liste { grid-template-columns: 1fr 1fr; } }
@media (min-width: 64em) { .posten__liste { grid-template-columns: repeat(4, 1fr); } }
.posten { position: relative; display: flex; flex-direction: column; padding: 1.6rem 1.4rem 1.8rem; background: var(--grund); }
.posten__nr { font-family: var(--gross); font-size: .8rem; font-weight: 700; letter-spacing: .2em; color: var(--akzent); }
.posten h3 { margin-top: .8rem; font-size: 1.45rem; }
.posten p { margin-top: .6rem; color: var(--tinte-2); }
.posten__skizze { margin-top: auto; padding-top: 1.6rem; width: 78px; height: auto; fill: none; stroke: var(--akzent); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; opacity: .8; }


/* ---------- Sieben Stuecke ---------- */

.stuecke { background: var(--grund-2); }
.stuecke__liste { list-style: none; margin: 2.2rem 0 0; padding: 0; }
.stuecke__liste li { display: grid; grid-template-columns: 2.4rem minmax(0, 1fr) auto auto; gap: 1rem; align-items: baseline; padding: .9rem 0; border-top: 1px solid var(--linie); }
.stuecke__liste li:last-child { border-bottom: 1px solid var(--linie); }
.stuecke__nr { font-size: .78rem; color: var(--tinte-2); }
.stuecke__name { font-family: var(--gross); font-size: clamp(1.2rem, 2.2vw, 1.7rem); font-weight: 600; }
.stuecke__holz { font-size: .82rem; color: var(--tinte-2); }
.stuecke__jahr { font-size: .82rem; font-weight: 700; color: var(--akzent); }
@media (max-width: 40em) { .stuecke__liste li { grid-template-columns: 2.4rem minmax(0, 1fr) auto; } .stuecke__holz { grid-column: 2; } }


/* ---------- Der Weg ---------- */

.weg__liste { position: relative; list-style: none; margin: 2.6rem 0 0; padding: 0; }
.weg__liste::before { content: ""; position: absolute; left: 9px; top: 12px; bottom: 12px; width: 2px; background: var(--linie); }
.schritt { position: relative; display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 1.4rem; padding: 1.4rem 0; }
.schritt__punkt { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--tinte-2); background: var(--grund); margin-top: .25rem; }
.schritt__zeit { font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; color: var(--akzent); }
.schritt h3 { margin-top: .25rem; font-size: 1.4rem; }
.schritt p:not(.schritt__zeit) { margin-top: .5rem; color: var(--tinte-2); }
/* Breit: Zeit und Name links, der Satz rechts daneben. */
@media (min-width: 56em) {
  .schritt > div { display: grid; grid-template-columns: 16rem minmax(0, 1fr); column-gap: 2.4rem; align-items: start; }
  .schritt__zeit, .schritt h3 { grid-column: 1; }
  .schritt > div > p:not(.schritt__zeit) { grid-column: 2; grid-row: 1 / span 2; margin-top: .2rem; }
}


/* ---------- Messwerte ---------- */

.messwerte { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--linie); border-top: 1px solid var(--linie); border-bottom: 1px solid var(--linie); }
@media (min-width: 56em) { .messwerte { grid-template-columns: repeat(4, 1fr); } }
.messwerte > div { padding: 2rem var(--rand); background: var(--grund); }
.messwerte b { display: block; font-family: var(--gross); font-size: clamp(2.6rem, 5vw, 4.2rem); font-weight: 800; letter-spacing: -.04em; line-height: 1; }
.messwerte small { font-size: .42em; font-weight: 700; color: var(--akzent); letter-spacing: 0; }
.messwerte span { display: block; margin-top: .6rem; font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--tinte-2); }


/* ---------- Nachtruf ---------- */

.nachtruf { display: grid; gap: 2.5rem; padding: clamp(3.5rem, 8vw, 6.5rem) var(--seite); background: var(--grund-2); }
@media (min-width: 56em) { .nachtruf { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 4rem; align-items: end; } }
.nachtruf__text > p { max-width: 32rem; margin-top: 1rem; color: var(--tinte-2); }
.nachtruf__nummer { display: inline-block; margin-top: 1.6rem; font-family: var(--gross); font-size: clamp(2.4rem, 6vw, 4.6rem); font-weight: 800; letter-spacing: -.03em; line-height: 1; color: var(--akzent); text-decoration: none; }
.nachtruf address { margin-top: 1.4rem; line-height: 1.6; }
.nachtruf__zeiten div { display: flex; justify-content: space-between; gap: 1rem; padding: .6rem 0; border-top: 1px solid var(--linie); }
.nachtruf__zeiten dt { color: var(--tinte-2); }
.nachtruf__zeiten dd { font-weight: 700; }


/* ---------- Sockel ---------- */

.sockel { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 2rem; padding: 1.1rem var(--seite); background: #000; color: #6F665A; font-size: .78rem; }
.sockel__tot { color: #4A433B; }


/* ---------- Beim Scrollen ---------- */

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .posten__skizze path { stroke-dasharray: 1; stroke-dashoffset: 1; animation: zeichnen linear both; animation-timeline: view(); animation-range: entry 0% entry 100%; }
    .schritt__punkt { animation: erreichen linear both; animation-timeline: view(); animation-range: entry 0% cover 30%; }
    .stuecke__liste li { animation: eintragen linear both; animation-timeline: view(); animation-range: entry 0% entry 40%; }
  }
}
@keyframes zeichnen  { to { stroke-dashoffset: 0; } }
@keyframes erreichen { to { background: var(--akzent); border-color: var(--akzent); box-shadow: 0 0 0 6px var(--akzent-2); } }
@keyframes eintragen { from { opacity: .1; translate: 0 .5rem; } to { opacity: 1; translate: 0 0; } }

@media print {
  body { background: #fff; color: #000; }
  .buehne, .blick, .laufband, .staub, .lichtkegel, .zurhalle { display: none; }
}