/* Pflaster-Verlegung als Schritt-für-Schritt-Animation (Ratgeber /blog, 10.11.2026, Kundenwunsch)
   Gehört zu assets/js/pflaster-verlegung-animation.js – dort steht der Aufbau (Markup, data-ab / data-nur).
   Farben der Zeichnung wie img/skizzen/pflaster-aufbau.svg; Bedienleiste dunkel wie die LKW-Abspielsymbole.
   © HOCH-M.D. Natursteine – Inhaberin Beatrix Hoch. Alle Rechte vorbehalten. */

.pv-spieler { margin-top: 18px; }

/* ---------- Abspieler ---------- */
.pv-buehne {
    max-width: 760px;
    margin: 0 auto;
    border: 1px solid #d8d2c4;
    border-radius: 8px;
    overflow: hidden;
    background: #fdfcf8;
}
.pv-bild { position: relative; }
.pv-szene { display: block; width: 100%; height: auto; }

/* großer Abspiel-Knopf über dem Standbild */
.pv-gross {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 72px;
    height: 72px;
    padding: 0;
    border: 0;
    background: none;
    transform: translate(-50%, -50%);
    cursor: pointer;
    transition: transform .2s ease;
}
.pv-gross[hidden] { display: none; }
.pv-gross:hover { transform: translate(-50%, -50%) scale(1.08); }
.pv-gross svg { display: block; width: 100%; height: 100%; }

.pv-leiste {
    background: #2b2b2b;
    color: #fff;
    padding: 10px 14px 10px;
}
.pv-text {
    margin: 0 0 8px;
    min-height: 6em;                   /* Platz für vier Zeilen, damit die Leiste nicht springt */
    font-size: .95rem;
    line-height: 1.5;
    color: #fff;
}
.pv-bedienung { display: flex; align-items: center; gap: 12px; }
.pv-knopf {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #fff;
    cursor: pointer;
}
.pv-knopf svg { display: block; width: 100%; height: 100%; fill: #2b2b2b; }
.pv-sym-halt { display: none; }
.pv-laeuft .pv-sym-halt { display: inline; }
.pv-laeuft .pv-sym-spiel { display: none; }

/* Zeitleiste: ein Abschnitt je Schritt, anklickbar */
.pv-teile { flex: 1 1 auto; display: flex; gap: 4px; }
.pv-teil {
    flex: 1 1 0;
    height: 22px;                       /* Klickfläche; sichtbar ist nur der 6-px-Streifen in der Mitte */
    padding: 8px 0;
    border: 0;
    background: #6b6b6b;
    background-clip: content-box;
    cursor: pointer;
}
.pv-teil > span { display: block; width: 0; height: 6px; background: #8cc63f; }
.pv-teil:hover { background-color: #909090; }
.pv-zahl { flex: 0 0 auto; min-width: 3.2em; text-align: right; font-size: .8rem; color: #d6d6d6; }
.pv-knopf:focus-visible, .pv-teil:focus-visible, .pv-gross:focus-visible, .pv-bereit .pv-schritte > li:focus-visible {
    outline: 2px solid #1877F2;
    outline-offset: 2px;
}

/* ---------- Schrittliste unter dem Abspieler (steht im Seiten-HTML) ---------- */
.pv-schritte { margin: 16px 0 0; padding-left: 1.4em; }
.pv-schritte > li { margin-bottom: 8px; padding: 4px 8px; border-left: 3px solid transparent; }
.pv-schritte > li > strong::after { content: " – "; font-weight: normal; }
.pv-bereit .pv-schritte > li { cursor: pointer; border-radius: 0 4px 4px 0; }
.pv-bereit .pv-schritte > li:hover { background: rgba(104, 171, 3, .10); }
.pv-bereit .pv-schritte > li.pv-aktuell { background: rgba(104, 171, 3, .18); border-left-color: #68AB03; }

/* ---------- Zeichnung ---------- */
.pv-szene text { font-family: Arial, Helvetica, sans-serif; paint-order: stroke; stroke: #fdfcf8; stroke-width: 4px; }
.pv-kopf { font-size: 22px; font-weight: bold; fill: #1a1a1a; }
.pv-unterkopf { font-size: 15px; fill: #444; }
.pv-kurz { font-size: 15px; font-weight: bold; fill: #1a1a1a; }
.pv-neben { font-size: 15px; fill: #1a1a1a; }
.pv-rot { font-size: 15px; font-weight: bold; fill: #c0392b; }
.pv-rot-gross { font-size: 16px; }
.pv-blau { font-size: 15px; font-weight: bold; fill: #2f7fbf; }
.pv-misch { font-size: 16px; font-weight: bold; fill: #1a1a1a; }
.pv-misch-klein { font-size: 14px; fill: #1a1a1a; }
.pv-wand { font-size: 13px; font-weight: bold; fill: #6b5f50; stroke: #e6ddd0; stroke-width: 3px; }
.pv-urheber { font-size: 11px; fill: #9a9186; stroke-width: 3px; }

/* Teile erscheinen mit .pv-da (vom Skript gesetzt) */
.pv-t { opacity: 0; transition: opacity .9s ease, transform .9s ease; }
.pv-t.pv-da { opacity: 1; }
.pv-hoch { transform: translateY(14px); }
.pv-hoch.pv-da { transform: none; }
.pv-spaeter.pv-da { transition-delay: 1.2s; }                  /* zweite Lage der Tragschicht */
.pv-fall { transform: translateY(-46px); transition: opacity .35s ease, transform .55s cubic-bezier(.3, 1.3, .6, 1); }
.pv-fall.pv-da { transform: none; }
/* Bettung wird von links nach rechts abgezogen, Fugen füllen sich von unten */
.pv-wisch, .pv-fuell { opacity: 1; transform-box: fill-box; }
.pv-wisch { transform: scaleX(0); transform-origin: 0 50%; transition: transform 4s linear .8s; }
.pv-wisch.pv-da { transform: none; }
.pv-fuell { transform: scaleY(0); transform-origin: 50% 100%; transition: transform 3.2s ease-out 1.2s; }
.pv-fuell.pv-da { transform: none; }
/* Steine sitzen zunächst etwas höher und setzen sich beim Abrütteln */
.pv-steine { transform: translateY(-4px); transition: transform 1.4s ease 2.6s; }
.pv-steine.pv-gesetzt { transform: none; }

/* Werkzeuge: laufen, solange ihr Schritt sichtbar ist */
.pv-platte.pv-da { transition-delay: 2.2s; }
.pv-platte-trag { transform: translate(110px, 263px); }
.pv-platte-trag.pv-da { animation: pv-fahrt-trag 4.6s linear 2.6s both; }
.pv-platte-pflaster { transform: translate(100px, 193px); }
.pv-platte-pflaster.pv-da { transition-delay: .2s; animation: pv-fahrt-pflaster 5.4s linear .8s both; }
.pv-platte.pv-da .pv-zittern { animation: pv-zittern .12s linear infinite alternate; }
.pv-latte { transform: translate(60px, 240px); }
.pv-latte.pv-da { animation: pv-abziehen 4s linear .8s both; }
.pv-tropfen.pv-da path { animation: pv-tropfen 1.5s ease-in infinite; }
@keyframes pv-fahrt-trag { from { transform: translate(110px, 263px); } to { transform: translate(505px, 271px); } }
@keyframes pv-fahrt-pflaster { from { transform: translate(100px, 193px); } to { transform: translate(438px, 200px); } }
@keyframes pv-zittern { from { transform: translateY(-1.2px); } to { transform: translateY(1.2px); } }
@keyframes pv-abziehen { from { transform: translate(60px, 240px); } to { transform: translate(478px, 248.7px); } }
@keyframes pv-tropfen { from { transform: translateY(-14px); opacity: 0; } 25% { opacity: 1; } to { transform: translateY(42px); opacity: 0; } }

/* Springen (ohne Bewegung) und Anhalten */
.pv-sofort, .pv-sofort * { transition: none !important; }
.pv-pause * { animation-play-state: paused !important; }

/* Handy: größere Kurzbeschriftung, Nebenzeilen entfallen (die Erklärung steht in der Textzeile darunter) */
@media (max-width: 575.98px) {
    .pv-kopf { font-size: 27px; }
    .pv-unterkopf { font-size: 19px; }
    .pv-kurz, .pv-rot, .pv-blau, .pv-misch { font-size: 20px; }
    .pv-wand { font-size: 17px; }
    .pv-neben, .pv-misch-klein, .pv-urheber { display: none; }
    .pv-text { min-height: 9em; font-size: .9rem; }      /* sechs Zeilen: die längsten Erklärungen sind ausführlich */
    .pv-gross { width: 58px; height: 58px; }
    .pv-leiste { padding: 8px 10px; }
}
@media (min-width: 992px) {
    .pv-bereit .pv-schritte { max-width: 760px; margin-left: auto; margin-right: auto; }
}
/* „Bewegung reduzieren“: Schritte wechseln ohne Fahrten und Fallen */
@media (prefers-reduced-motion: reduce) {
    .pv-t, .pv-steine { transition-duration: .01s !important; transition-delay: 0s !important; }
    .pv-platte, .pv-latte, .pv-tropfen path, .pv-zittern { animation: none !important; }
}