/* Branchenseite «Maler und Gipser» zu den Automationen. Gilt nur für automationen-maler-gipser.html
   und baut auf style.css auf: Farben, Schrift und die Klassen .szene__*, .bauen__* kommen von dort. */

/* ---------- Bühne: gerenderte Raumecke statt Video. Links der Gipser, rechts der Maler. ---------- */
.mg-buehne__welt { position: relative; aspect-ratio: 1580 / 1320; }
.mg-buehne__bild { display: block; width: 100%; height: auto; }
/* Die drei Bahnen und der Roller liegen in Prozent des gerenderten Bildes (1580 x 1320). */
.mg-buehne__bahn {
  position: absolute; left: 64.557%; top: 16.061%; width: 11.899%; height: auto;
  clip-path: polygon(var(--l) var(--o), var(--r) var(--o2), var(--r) var(--o2), var(--l) var(--o));
}
.mg-buehne__bahn--1 { --l: 5.0%;  --r: 35.7%; --o: 1.6%;  --o2: 7.0%;  --u: 82.3%; --u2: 87.7%; }
.mg-buehne__bahn--2 { --l: 35.1%; --r: 65.8%; --o: 7.0%;  --o2: 12.4%; --u: 87.7%; --u2: 93.1%; }
.mg-buehne__bahn--3 { --l: 65.2%; --r: 95.9%; --o: 12.4%; --o2: 17.8%; --u: 93.1%; --u2: 98.5%; }
.mg-buehne__roller {
  position: absolute; left: 59.494%; top: 16.364%; width: 10.127%; height: auto;
  opacity: 0;
}
.mg-buehne__zurueck { margin: 26px 0 0; max-width: 400px; font-size: 15px; line-height: 1.5; text-wrap: pretty; }
.mg-buehne__zurueck a {
  color: rgba(255,255,255,0.72); text-decoration: underline;
  text-decoration-color: rgba(255,255,255,0.3); text-underline-offset: 4px;
  transition: color 0.2s, text-decoration-color 0.2s;
}
.mg-buehne__zurueck a:hover { color: #fff; text-decoration-color: var(--col-accent-text); }
.mg-buehne__zurueck a:focus-visible { outline: 2px solid var(--col-accent-text); outline-offset: 4px; }

@media (min-width: 881px) {
  .mg-buehne .hero-dark__media { inset: 0; clip-path: none; }
  .mg-buehne__welt {
    position: absolute; top: 50%; right: max(20px, calc((100vw - 1400px) / 2));
    width: min(54vw, 780px, 112vh);
    transform: translateY(-48%);
  }
  .mg-buehne .hero-dark__headline { max-width: 520px; }
}
@media (min-width: 881px) and (max-width: 1099px) {
  .mg-buehne__welt { right: 8px; width: min(52vw, 112vh); }
  .mg-buehne .hero-dark__sub { max-width: 360px; }
}
@media (max-width: 880px) {
  .mg-buehne { flex-direction: column; align-items: stretch; padding-bottom: 24px; }
  .mg-buehne .hero-dark__media { position: relative; inset: auto; order: 2; margin-top: 34px; padding: 0 12px; }
  .mg-buehne__welt { width: min(100%, 560px); margin: 0 auto; }
}

/* Die Wand wird gestrichen: Der Roller fährt drei Bahnen, hinter ihm erscheint die Farbe.
   Ein Durchlauf dauert 15 Sekunden, am Schluss blendet die Farbe aus und es beginnt von vorn. */
@media (prefers-reduced-motion: no-preference) {
  .mg-buehne__bahn--1 { animation: mg-bahn-1 15s linear infinite; }
  .mg-buehne__bahn--2 { animation: mg-bahn-2 15s linear infinite; }
  .mg-buehne__bahn--3 { animation: mg-bahn-3 15s linear infinite; }
  .mg-buehne__roller { animation: mg-roller 15s linear infinite; }
}
@keyframes mg-bahn-1 {
  0%, 6.67% { clip-path: polygon(var(--l) var(--o), var(--r) var(--o2), var(--r) var(--o2), var(--l) var(--o)); opacity: 1; }
  20%, 78%  { clip-path: polygon(var(--l) var(--o), var(--r) var(--o2), var(--r) var(--u2), var(--l) var(--u)); opacity: 1; }
  88%, 100% { clip-path: polygon(var(--l) var(--o), var(--r) var(--o2), var(--r) var(--u2), var(--l) var(--u)); opacity: 0; }
}
@keyframes mg-bahn-2 {
  0%, 24%     { clip-path: polygon(var(--l) var(--o), var(--r) var(--o2), var(--r) var(--o2), var(--l) var(--o)); opacity: 1; }
  37.33%, 78% { clip-path: polygon(var(--l) var(--o), var(--r) var(--o2), var(--r) var(--u2), var(--l) var(--u)); opacity: 1; }
  88%, 100%   { clip-path: polygon(var(--l) var(--o), var(--r) var(--o2), var(--r) var(--u2), var(--l) var(--u)); opacity: 0; }
}
@keyframes mg-bahn-3 {
  0%, 41.33%  { clip-path: polygon(var(--l) var(--o), var(--r) var(--o2), var(--r) var(--o2), var(--l) var(--o)); opacity: 1; }
  54.67%, 78% { clip-path: polygon(var(--l) var(--o), var(--r) var(--o2), var(--r) var(--u2), var(--l) var(--u)); opacity: 1; }
  88%, 100%   { clip-path: polygon(var(--l) var(--o), var(--r) var(--o2), var(--r) var(--u2), var(--l) var(--u)); opacity: 0; }
}
/* Der Weg des Rollers in Prozent seiner eigenen Grösse: je Bahn nach rechts unten versetzt, je Zug gerade hinunter. */
@keyframes mg-roller {
  0%     { transform: translate(0, -14%); opacity: 0; }
  4%     { transform: translate(0, -4.8%); opacity: 1; }
  6.67%  { transform: translate(0, -4.8%); opacity: 1; }
  20%    { transform: translate(0, 178.8%); }
  24%    { transform: translate(35.36%, 8.3%); }
  37.33% { transform: translate(35.36%, 191.9%); }
  41.33% { transform: translate(70.72%, 21.4%); }
  54.67% { transform: translate(70.72%, 205%); opacity: 1; }
  60%, 100% { transform: translate(70.72%, 194%); opacity: 0; }
}
@media (scripting: enabled) {
  [data-mg-buehne]:not(.ist-sichtbar) .mg-buehne__bahn,
  [data-mg-buehne]:not(.ist-sichtbar) .mg-buehne__roller { animation-play-state: paused; }
}
@media (prefers-reduced-motion: reduce) {
  .mg-buehne__bahn, .mg-buehne__roller { display: none; }
}

/* ---------- Anlage «Ein Ausmass, fünf Stationen»: eigene Zeichnungen über dem gerenderten Bild ---------- */
.mg-naht { fill: rgba(42,30,36,0.13); }
.mg-schatten { fill: #000; filter: blur(7px); }
.mg-mass { fill: #FFD9E0; filter: drop-shadow(0 0 5px #D45268); }
.mg-feld { fill: #D45268; fill-opacity: 0.34; stroke: #FFC2CC; stroke-opacity: 0.55; stroke-width: 1.5; }
.mg-etikett { fill: #fff; filter: drop-shadow(0 0 7px #D45268); }
.mg-teil { opacity: 0; }
/* Die Marken stehen über den Wänden: Dort ist der Grund hell, darum etwas kräftiger als auf der Standardseite. */
.mg-szene .szene__marke { text-shadow: 0 1px 6px rgba(10,6,7,0.9); }

/* ---------- Drei weitere Abläufe: drei Spalten, darunter eine ---------- */
@media (min-width: 760px) {
  .bauen__reihe.mg-reihe { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 40px; }
}
@media (max-width: 759px) {
  .bauen__reihe.mg-reihe { grid-template-columns: minmax(0, 1fr); gap: 44px; }
  .mg-reihe .bauen__bild { max-width: 420px; margin: 0 0 4px; }
}
.mg-reihe .bauen__teil p { max-width: 38ch; }
/* Kurze Untertitel sollen nicht mit einem einzelnen Wort in der zweiten Zeile enden. */
.bauen .section__sub, .beispiel .section__sub { text-wrap: pretty; }
/* Die Zeichnungen über den drei kleinen Szenen. Sie halten an, sobald ihre Karte aus dem Sichtfeld ist
   (Regel in style.css), und stehen bei weniger Bewegung still im Endbild. */
/* Karte 1: Der Rapport füllt sich, der Knopf wird gedrückt, die Mappe des Objekts meldet sich. */
.mg-knopf {
  fill: #D45268; transform-box: fill-box; transform-origin: 50% 50%;
  animation: mg-knopf 8s ease-out infinite both;
}
@keyframes mg-knopf {
  0%, 44% { opacity: 0; transform: scale(0.9); }
  50%, 56% { opacity: 1; transform: scale(1); }
  59% { opacity: 1; transform: scale(0.93); }
  62%, 88% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1); }
}
.mg-haken {
  fill: none; stroke: #fff; stroke-width: 0.032px; stroke-linecap: square;
  animation: mg-spaet 8s ease-out infinite both;
}
@keyframes mg-spaet { 0%, 60% { opacity: 0; } 64%, 88% { opacity: 1; } 100% { opacity: 0; } }
.mg-puls {
  fill: none; stroke: #F2A0AE; stroke-width: 0.035px;
  transform-box: fill-box; transform-origin: 50% 50%;
  animation: mg-puls 8s ease-out var(--d, 0s) infinite both;
}
@keyframes mg-puls {
  0%, 18% { opacity: 0; transform: scale(0.45); }
  22% { opacity: 1; }
  38%, 100% { opacity: 0; transform: scale(1.35); }
}
/* Karte 2: Alle vier Sekunden ein anderer Farbton, dazu erscheinen seine Angaben neu. */
.mg-muster { fill: #D45268; animation: mg-muster 12s steps(1) infinite; }
@keyframes mg-muster {
  0%, 100% { fill: #EBA9B5; }
  33.33% { fill: #D45268; }
  66.66% { fill: #A3243F; }
}
.mg-zeiger { fill: #fff; animation: mg-zeiger 12s steps(1) infinite; }
@keyframes mg-zeiger {
  0%, 100% { transform: translateX(0); }
  33.33% { transform: translateX(0.2px); }
  66.66% { transform: translateX(0.4px); }
}
.mg-ein { animation: mg-ein 4s ease-out var(--d, 0s) infinite both; }
@keyframes mg-ein { 0% { opacity: 0; } 8%, 90% { opacity: 1; } 100% { opacity: 0; } }
/* Karte 3: Der Auftrag aus der Mail erscheint als offener Eintrag im Plan. Der gestrichelte Rand sagt:
   Er liegt zum Einplanen bereit, Termin und Leute setzt der Betrieb. */
.mg-neu {
  fill: rgba(212,82,104,0.28); stroke: #F2A0AE; stroke-width: 0.02px; stroke-dasharray: 0.07 0.045;
  transform-box: fill-box; transform-origin: 50% 50%;
  animation: mg-neu 8s cubic-bezier(0.16, 1, 0.3, 1) infinite both;
}
@keyframes mg-neu {
  0%, 46% { opacity: 0; transform: scale(0.7); }
  54%, 88% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .mg-puls { display: none; }
}