/* v21: Bausteine und Tagesgeschichte nach Brand-Guideline v3, Apple-Komposition (09.09.2026).
   Ein Motiv traegt, Text zentriert darueber, Bausteine als ruhige Spalten darunter, kein Text im Bild.
   Laedt nach v17.css. Desktop-Raster nur unter min-width, Handy-Regeln am Dateiende. */
.v18-family{padding:120px 0 0}
/* Kopf: zentriert, eine Stimme (Apple) */
.v21-kopf{max-width:900px;text-align:center;margin-inline:auto;padding-bottom:48px}
.v21-kopf h2{font-size:clamp(38px,4.6vw,64px);line-height:1.02;letter-spacing:-.035em;font-weight:700;text-wrap:balance}
.v21-kopf h2 em{font-style:normal;color:var(--orange)}
.v21-lead{margin-top:20px;font-size:22px;line-height:1.45;font-weight:400;color:var(--muted);max-width:34ch;margin-inline:auto;text-wrap:balance}
.v21-links{display:flex;justify-content:center;gap:40px;margin-top:24px;flex-wrap:wrap}
/* Motiv: eine Flaeche, kein Text darin */
.v21-szene{position:relative;margin-inline:auto;border-radius:12px;overflow:hidden;background:#101820;aspect-ratio:2202/1100}
.v21-szene>img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 62%}
.v21-linien{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}
.v21-linien path{fill:none;stroke:#fff;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke;stroke-width:1.5}
.v21-punkt{position:absolute;z-index:2;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:var(--orange);box-shadow:0 0 0 3px rgba(255,255,255,.95),0 2px 10px rgba(0,0,0,.35)}
.v21-schild{position:absolute;z-index:3;white-space:nowrap;font-size:14px;font-weight:600;line-height:1;color:#111;background:rgba(255,255,255,.96);padding:9px 13px 9px 10px;border-radius:999px;box-shadow:0 4px 18px rgba(0,0,0,.22)}
.v21-schild::before{content:attr(data-n);display:inline-block;margin-right:8px;color:var(--orange-dark);font-weight:700}
.v21-schild.links{transform:translate(-100%,-50%)}
.v21-schild.unten{transform:translate(-50%,0)}
.v21-schild.oben{transform:translate(-50%,-100%)}
/* Lage in Prozent der Szene 2202 x 1536, sichtbarer Ausschnitt object-position 50/62 */
.v21-punkt.p-pv{left:47.7%;top:38.8%}.v21-schild.s-pv{left:40.9%;top:29.7%}
.v21-punkt.p-instinct{left:80.8%;top:33.4%}.v21-schild.s-instinct{left:74.9%;top:25.1%}
.v21-punkt.p-powerbank{left:44.1%;top:71.5%}.v21-schild.s-powerbank{left:40.1%;top:71.5%}
.v21-punkt.p-heatbank{left:68.6%;top:72.4%}.v21-schild.s-heatbank{left:68.6%;top:60%}
.v21-punkt.p-heat{left:78.9%;top:75.2%}.v21-schild.s-heat{left:78.9%;top:89%}
.v21-credit{margin-top:14px;font-size:14px;color:var(--muted);text-align:center}
/* Bausteine: fuenf ruhige Spalten, keine Karten, keine Rahmen */
.v21-liste{list-style:none;margin:72px auto 0;padding:0;display:grid;gap:32px;counter-reset:baustein}
.v21-liste li{border-top:0;padding-top:0}
.v21-liste a{display:block;color:var(--ink);counter-increment:baustein}
.v21-liste img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:12px;background:#eceae5}
.v21-liste a::before{content:counter(baustein);display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--orange);color:#fff;font-size:15px;font-weight:700;margin:18px 0 12px}
.v21-liste b{display:block;font-size:22px;font-weight:600;line-height:1.2;letter-spacing:-.012em}
.v21-liste i{display:block;font-style:normal;font-size:16px;color:var(--muted);margin-top:3px}
.v21-liste span{display:block;font-size:16px;line-height:1.5;color:var(--muted);margin-top:12px}
.v21-liste em{display:block;font-style:normal;font-size:16px;font-weight:600;color:var(--orange-dark);margin-top:12px}
.v21-liste a:hover b{color:var(--orange-dark);text-decoration:underline}
.v21-cta{display:flex;align-items:center;justify-content:center;gap:28px;flex-wrap:wrap;margin-top:64px}
.v21-cta span{font-size:16px;color:var(--muted)}
/* Tagesgeschichte: echtes Haus (Bildfolge sunset/), Radius 12, kein Schatten, kein Creme */
.v16-scenes{border-radius:12px;background:#101820;box-shadow:none}
.v16-scene{object-position:62% 50%}
@media(max-width:1120px){.v16-phase-fig .v16-phase-img{border-radius:12px;object-position:72% 42%}}
@media(min-width:1121px){.v16-day .v16-day-pin>.wrap{display:grid;grid-template-columns:1fr 1fr;gap:0 48px;align-items:start}.v16-day .art-section-title{grid-column:1;grid-row:1}.v16-day .v16-grid{display:contents}.v16-copy{grid-column:1;grid-row:2}.v16-scenes{grid-column:2;grid-row:1/3;align-self:start;aspect-ratio:4/5;max-height:820px}.v16-day .art-section-title h2{font-size:clamp(36px,3.1vw,44px)}}
@media(min-width:901px){.v21-liste{grid-template-columns:repeat(5,1fr);gap:32px}}
@media(max-width:1100px) and (min-width:901px){.v21-schild{font-size:12px;padding:7px 10px 7px 8px}.v21-liste b{font-size:19px}.v21-liste i,.v21-liste span,.v21-liste em{font-size:15px}}
/* Handy: Motiv quadratisch auf das Haus, Ziffernkreise statt Schilder, Bausteine untereinander */
@media(max-width:900px){.v18-family{padding-top:72px}.v21-kopf{padding-bottom:32px}.v21-kopf h2{font-size:34px}.v21-lead{font-size:19px;margin-top:16px}.v21-links{flex-direction:column;align-items:center;gap:4px;margin-top:20px}
 .v21-linien,.v21-schild{display:none}.v21-szene{border-radius:10px;aspect-ratio:1/1}.v21-szene>img{object-position:68% 55%}
 .v21-punkt{width:34px;height:34px;margin:-17px 0 0 -17px;display:grid;place-items:center;font-size:16px;font-weight:700;color:#fff;box-shadow:0 0 0 2px rgba(255,255,255,.95),0 2px 10px rgba(0,0,0,.45)}.v21-punkt::after{content:attr(data-n)}
 .v21-punkt{display:none}  /* Handy: nackte Ziffern erklaeren nichts, die fuenf Spalten darunter tun es (Richter R59) */
 .v21-credit{text-align:left;font-size:13px;line-height:1.45}
 .v21-cta{margin-top:40px;flex-direction:column;gap:12px}.v21-liste{margin-top:48px;gap:28px}.v21-liste b{font-size:21px}.v21-liste i{font-size:16px}.v21-liste span,.v21-liste em{font-size:16px}}
@media(prefers-reduced-motion:reduce){.v21-liste a{transition:none}}