/* Branchenseite «Schreinerei und Holzbau». Ergänzt style.css und ändert dort nichts.
   Schrift, Farben und Aufbau kommen von der Standardseite, eigen sind das Bühnenbild,
   die Zusätze der Anlage und die zwei Karten. */

/* ---------- Bühne: Text links, die gerenderte Werkstatt rechts ---------- */
.holz-buehne { --holz: #D9B98A; }
.holz-buehne .hero-dark__eyebrow { align-items: flex-start; max-width: 440px; line-height: 1.55; }
.holz-buehne .hero-dark__eyebrow::before { flex: none; margin-top: 0.72em; background: var(--holz); }
.holz-buehne__bild {
  position: absolute; z-index: 0; top: 50%; right: max(8px, calc(50vw - 716px));
  width: min(50vw, 740px); transform: translateY(-50%); pointer-events: none;
}
.holz-buehne__bild img { display: block; width: 100%; height: auto; }
/* Die zweite Ebene trägt nur das rosa Licht (Bildschirm, Lichtleiste, Signal). Sie atmet langsam. */
.holz-buehne__licht { position: absolute; left: 0; top: 0; animation: holz-atmen 4.8s ease-in-out infinite alternate; }
@keyframes holz-atmen { from { opacity: 0.12; } to { opacity: 1; } }
.holz-buehne__zurueck { margin: 26px 0 0; max-width: 430px; font-size: 14.5px; line-height: 1.55; }
.holz-buehne__zurueck a {
  color: rgba(255,255,255,0.7); text-decoration: underline;
  text-decoration-color: rgba(217,185,138,0.7); text-underline-offset: 4px;
  transition: color 0.2s;
}
.holz-buehne__zurueck a:hover { color: #fff; }
.holz-buehne__zurueck a:focus-visible { outline: 2px solid var(--col-accent-licht); outline-offset: 3px; }
/* Schmaler als 961 Pixel steht das Bild unter dem Text statt daneben. */
@media (max-width: 960px) {
  .holz-buehne { flex-direction: column; align-items: stretch; }
  .holz-buehne__bild {
    position: relative; top: auto; right: auto; transform: none; order: 2;
    width: min(calc(100% - 16px), 620px); margin: 36px auto -28px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .holz-buehne__licht { animation: none; opacity: 1; }
}

/* ---------- Anlage: Zusätze zu den Regeln .szene__* aus style.css ---------- */
/* Hinter den Stationen stehen helle Maschinen und Holz. Die Beschriftungen bekommen darum einen dunklen Grund. */
.szene--holz .szene__marke { z-index: 1; }
.szene--holz .szene__marke::before {
  content: ""; position: absolute; z-index: -1; left: -7px; right: -7px; top: -4px; bottom: 9px;
  background: rgba(10,6,7,0.78); border: 1px solid rgba(255,255,255,0.16); border-radius: 3px;
}
.szene--holz .szene__marke.ist-aktiv::before { border-color: rgba(255,255,255,0.5); }
.szene--holz .szene__marke.ist-fertig::before { border-color: rgba(224,105,125,0.5); }
.holz__stufe { opacity: 0; }
.holz__lauf { fill: #F2A0AE; }
.holz__lauf-schein { fill: rgba(212,82,104,0.3); }
.holz__frei { fill: rgba(255,230,236,0.16); stroke: #FFE6EC; stroke-width: 2.5; stroke-linejoin: round; }
.holz__termin { fill: #D45268; }
.holz__plan { fill: #FFD3DB; }
.holz__mass { fill: #D45268; }

/* ---------- Weitere Abläufe: zwei Karten mit gerenderter Szene und Zeichnung darüber ---------- */
.page-dark .holz-mehr { background: var(--flaeche-hoch); }
.holz-mehr__reihe { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 44px 56px; }
.holz-mehr__bild { position: relative; margin: -14px -3% 4px; }
.holz-mehr__bild img { display: block; width: 100%; height: auto; }
.holz-mehr__teil h3 {
  margin: 0 0 10px;
  font-family: var(--font-display); font-weight: 700; font-size: 24px; line-height: 1.25; color: #fff;
}
.holz-mehr__teil p { margin: 0; max-width: 48ch; font-size: 16.5px; line-height: 1.6; color: rgba(255,255,255,0.78); text-wrap: pretty; }
/* Der dritte Liefertermin rückt eine Spalte nach rechts und wird rosa: Ein Lieferant hat einen neuen Termin gemeldet.
   Gleiche Dauer und gleicher Start wie die Zeile, in der er steht, damit er nicht sichtbar zurückspringt. */
.holz-mehr__rueckt { fill: #FFE6EC; animation: holz-ruecken 8s ease-in-out 1.2s infinite both; }
@keyframes holz-ruecken {
  0%, 40% { transform: none; fill: #FFE6EC; }
  52%, 100% { transform: translateX(0.215px); fill: #D45268; }
}
@media (max-width: 760px) {
  .holz-mehr__reihe { grid-template-columns: minmax(0, 1fr); }
  .holz-mehr__bild { margin: 0 0 4px; }
}