/* Windeltestbox: Einblicke im Raster von Stadtwerke Völklingen (svk/bewegt.css) – Fotos und Animationen (Farben, Box-Finder, Wunschbox,
   Storch und Startseite). Markup: src/daten/wtb-einblicke.html, Ablauf: src/scripts/referenzen/wtb-einblicke.js.
   Schrift der Marke: Manrope für Titel und Text (wtb/fonts/, OFL). Ecken wie überall auf der Seite (--radius). */
@font-face { font-family: "WTB Manrope"; src: url("fonts/manrope-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "WTB Manrope"; src: url("fonts/manrope-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "WTB Manrope"; src: url("fonts/manrope-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-display: swap; }

/* Anordnung wie Völklingen: je Reihe drei Hochformate (4:5) oder zwei Querformate (16:10) – Windeln | Farben | Gründerinnen,
   Box-Finder | Wunschbox, Eltern | Storch und Startseite | Kinderzimmer. Schmal Slider zum Wischen. */
.wtb-raster { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.75rem); }
.wtb-raster figure { margin: 0; }
.wtb-drittel { grid-column: span 2; }
.wtb-halb { grid-column: span 3; }
.wtb-bild img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius); }
/* .galerie-nav.wtb-nav: Seitenstile (referenzen.css, .galerie-nav { display: flex }) laden nach dieser Datei, darum doppelte Klasse (04.11.2026) */
.galerie-nav.wtb-nav { display: none; }
@media (max-width: 760px) {
  .wtb-raster { display: flex; gap: 1rem; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none;
    margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter); }
  .wtb-raster::-webkit-scrollbar { display: none; }
  .wtb-raster > figure { flex: 0 0 84%; scroll-snap-align: start; }
  .galerie-nav.wtb-nav { display: flex; margin-top: 1.25rem; }
}

.wtb-flaeche { position: relative; overflow: hidden; isolation: isolate; border-radius: var(--radius); container-type: inline-size; aspect-ratio: 4 / 5;
  font-family: "WTB Manrope", var(--text); line-height: 1.2; color: #3A3023; background: #F5F0E9; }
.wtb-flaeche :where(p, ul) { margin: 0; }
.wtb-halb .wtb-flaeche { aspect-ratio: 16 / 10; }
@media (max-width: 760px) { .wtb-halb .wtb-flaeche { aspect-ratio: 4 / 5; } }

/* Farben alt und neu: Wischblende von links nach rechts */
.farbwechsel.ohne, .farbwechsel.ohne * { transition: none !important; }
.fw-palette { position: absolute; inset: 0; isolation: isolate; display: flex; flex-direction: column; justify-content: center; padding: 0 9cqw 6cqw; } /* eigene Ebene: Bild und Schleier bleiben in der Blende */
.fw-palette img { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; }
.fw-palette::before { content: ""; position: absolute; inset: 0; z-index: -1; }
.fw-alt img { filter: grayscale(1) brightness(1.1) contrast(.85); }
.fw-alt::before { background: rgba(241, 235, 230, .74); }
.fw-neu::before { background: rgba(245, 240, 233, .68); }
.fw-neu { clip-path: inset(0 100% 0 0); transition: clip-path 1s cubic-bezier(.65, 0, .35, 1); }
.farbwechsel.neu .fw-neu { clip-path: inset(0 0 0 0); }
.fw-titel { margin-bottom: 6cqw !important; font-size: 7cqw; font-weight: 500; }
.fw-alt .fw-titel { color: #5A504B; }
.fw-palette ul { list-style: none; padding: 0; display: grid; gap: 2.6cqw; }
.fw-palette li { display: flex; align-items: center; height: 14.5cqw; padding: 0 7cqw; border-radius: 999px; background: var(--c); color: var(--t); font-size: 5.4cqw; font-weight: 600; }

/* Box-Finder: Nachbau des Finders der Startseite (Maße, Farben, Texte wie dort), Ablauf wie der Tarifrechner bei Stadtwerke Völklingen.
   Maße in --e: wächst mit der Bühne (Containerbreite), damit Text auch auf schmalen Bühnen lesbar bleibt. */
.wtb-buehne .wtb-flaeche > * { --e: 1.6cqw; }
@container (min-width: 900px) { .wtb-buehne .wtb-flaeche > * { --e: 1cqw; } }
@container (max-width: 460px) { .wtb-buehne .wtb-flaeche > * { --e: 2.4cqw; } }
.wtb-buehne .wtb-flaeche.ohne, .wtb-buehne .wtb-flaeche.ohne * { transition: none !important; }
.wtb-buehne .wtb-flaeche::after { content: ""; position: absolute; inset: 0; z-index: 20; background: #F5F0E9; opacity: 0; pointer-events: none; transition: opacity .5s; }
.wtb-buehne .wtb-flaeche.blende::after { opacity: 1; }
.wtb-buehne :where(b, p) { font-weight: inherit; margin: 0; }
.wtb-buehne svg { display: block; }

/* Zeiger: Punkt in Rosé der Marke; Position setzt das Skript Bild für Bild, hier nur Ein-/Ausblenden und Klick */
.wtb-zeiger { position: absolute; left: 0; top: 0; z-index: 15; width: calc(var(--e) * 3.4); aspect-ratio: 1; translate: -50% -50%; opacity: 0; pointer-events: none; will-change: transform; transition: opacity .35s; }
.wtb-zeiger::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: rgba(163, 83, 113, .62); transition: scale .22s cubic-bezier(.4, 0, .2, 1); }
.wtb-zeiger.an { opacity: 1; }
.wtb-zeiger.klick::before { scale: .84; }
.wtb-flaeche.endzustand .wtb-zeiger { display: none; }

.ftb { position: absolute; left: 50%; top: 50%; width: 88%; height: 84%; translate: -50% -50%; overflow: hidden; border-radius: calc(var(--e) * 1.4); background: #EBE3D7; color: #221C13; }
.ftb-fragen, .ftb-panel { position: absolute; inset: 0; display: flex; flex-direction: column; padding: calc(var(--e) * 2.6) calc(var(--e) * 2.4); }
.ftb-fragen { justify-content: center; transition: opacity .45s, transform .6s cubic-bezier(.16, 1, .3, 1); }
.ftb-titel { font-size: calc(var(--e) * 2.4); font-weight: 500; line-height: 1.15; margin-bottom: calc(var(--e) * 1.8) !important; }
.ftb-optionen { display: grid; gap: calc(var(--e) * 1); }
.ftb-option { display: flex; align-items: center; justify-content: space-between; gap: calc(var(--e) * 1.5); padding: calc(var(--e) * 1.1) calc(var(--e) * 1.6); border-radius: calc(var(--e) * 1); background: #FBF9F5;
  box-shadow: inset 0 0 0 1.5px transparent; transition: box-shadow .25s, background-color .25s; }
.ftb-option.hover { box-shadow: inset 0 0 0 1.5px #E4B5C4; }
.ftb-option.ist-an { box-shadow: inset 0 0 0 1.5px #526E80; }
.ftb-opt-titel { font-size: calc(var(--e) * 1.45); font-weight: 500; line-height: 1.25; }
.ftb-opt-unter { margin-top: calc(var(--e) * .3) !important; font-size: calc(var(--e) * 1.15); color: #56463D; }
.ftb-option img { flex: none; width: calc(var(--e) * 5.2); height: auto; }
.ftb-panel { justify-content: flex-start; transform: translateX(100%); transition: transform .7s cubic-bezier(.65, 0, .35, 1); }
.zeigt-empfehlung .ftb-panel { transform: none; }
.zeigt-empfehlung .ftb-fragen { opacity: 0; transform: translateX(-12%); }
.ftb-zurueck { align-self: flex-start; font-size: calc(var(--e) * 1.1); color: #4C687A; /* Taubenblau eine Spur dunkler: 4,6 : 1 auf Creme statt 4,2 (WCAG AA, 03.11.) */ text-decoration: underline; margin-bottom: calc(var(--e) * 1) !important; }
.ftb-panel .ftb-titel { margin-bottom: calc(var(--e) * 1.4) !important; }
.ftb-band { overflow: hidden; border-radius: calc(var(--e) * .9); }
.ftb-spur { display: flex; transition: transform .6s cubic-bezier(.65, 0, .35, 1); }
.ftb-slide { flex: 0 0 100%; display: grid; grid-template-columns: 42% 1fr; background: #fff; border-radius: calc(var(--e) * .9); overflow: hidden; }
.ftb-slide img { width: 100%; height: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.ftb-info { display: flex; flex-direction: column; justify-content: center; padding: calc(var(--e) * 1.4) calc(var(--e) * 1.6); }
.ftb-label { font-size: calc(var(--e) * .95); color: #526E80; text-transform: uppercase; letter-spacing: .02em; }
.ftb-name { margin-top: calc(var(--e) * .4) !important; font-size: calc(var(--e) * 1.9); font-weight: 500; color: #56463D; }
.ftb-chips { display: flex; flex-wrap: wrap; gap: calc(var(--e) * .5); margin-top: calc(var(--e) * .8) !important; }
.ftb-chips span { padding: calc(var(--e) * .3) calc(var(--e) * .9); border-radius: calc(var(--e) * 1); background: #EBE3D7; color: #131927; font-size: calc(var(--e) * .95); font-weight: 500; }
.ftb-preis { margin-top: calc(var(--e) * .8) !important; font-size: calc(var(--e) * 1.45); font-weight: 600; }
.ftb-cta { margin-top: calc(var(--e) * 1.1); display: grid; place-items: center; padding: calc(var(--e) * 1) calc(var(--e) * 1.4); border-radius: 999px; background: #526E80; color: #fff; font-size: calc(var(--e) * 1.2); font-weight: 600; transition: background-color .25s; }
.ftb-cta.hover { background: #3A5060; }
.ftb-pfeile { display: flex; justify-content: flex-end; gap: calc(var(--e) * 1); margin-top: auto; }
.ftb-pfeil { display: grid; place-items: center; width: calc(var(--e) * 4); aspect-ratio: 1.2; border-radius: 46% 54% 50% 50% / 55% 48% 52% 45%; background: #fff; transition: background-color .2s; }
.ftb-pfeil.hover { background: #FBF9F5; }
.ftb-pfeil svg { width: 50%; fill: none; stroke: #221C13; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
/* schmal (4:5): Karte untereinander wie auf dem Handy */
@container (max-width: 520px) {
  .ftb { width: 90%; height: 90%; }
  .ftb-slide { grid-template-columns: 1fr; }
  .ftb-slide img { height: auto; aspect-ratio: 16 / 9; }
  .ftb-info { padding: calc(var(--e) * 1.2) calc(var(--e) * 1.4); }
  .ftb-band { flex: none; }
  .ftb-pfeile { position: absolute; top: calc(var(--e) * 1.9); right: calc(var(--e) * 2.4); margin: 0; } /* neben „Zurück“, sonst wird die Karte unten abgeschnitten */
  .ftb-pfeil { width: calc(var(--e) * 3.6); }
  .ftb-opt-unter, .ftb-label, .ftb-chips span, .ftb-zurueck { font-size: calc(var(--e) * 1.3); }
}

/* Wunschbox: die drei Schritte der Produktseite (Anzahl und Größe, Marken, Mulltuch), gestaltet im neuen Design – Palette Braun #3A3023,
   Taubenblau #526E80, Creme #F5F0E9, Salbeigrau #C4C9BD, Rosé #F7D6E0 –, nicht im alten Terrakotta der Produktseite */
.wtb-wunsch .wtb-flaeche { background: #C4C9BD; }
.wb { position: absolute; left: 50%; top: 50%; width: 88%; height: 84%; translate: -50% -50%; display: flex; flex-direction: column; overflow: hidden;
  padding: calc(var(--e) * 2) calc(var(--e) * 2.4); border-radius: calc(var(--e) * 1.4); background: #FDFAF7; color: #3A3023; }
.wb-kopf { display: flex; align-items: center; justify-content: space-between; gap: calc(var(--e) * 2); }
.wb-name { font-size: calc(var(--e) * 2.2); font-weight: 500; }
.wb-schritte { position: relative; display: flex; gap: calc(var(--e) * 5); margin: 0; padding: 0; list-style: none; }
.wb-schritte::before { content: ""; position: absolute; left: calc(var(--e) * 1.2); right: calc(var(--e) * 1.2); top: 50%; height: 1.5px; background: #C4C9BD; }
.wb-schritte li { position: relative; display: grid; place-items: center; width: calc(var(--e) * 2.4); aspect-ratio: 1; border-radius: 50%; background: #FDFAF7; box-shadow: inset 0 0 0 1.5px #C4C9BD;
  font-size: calc(var(--e) * 1.05); font-weight: 600; color: #3A3023; transition: background-color .3s, color .3s, box-shadow .3s; }
.wb-schritte li.ist-an { background: #526E80; box-shadow: none; color: #fff; }
.wb-band { flex: 1; min-height: 0; overflow: hidden; margin: calc(var(--e) * 1) calc(var(--e) * -.7); }
.wb-spur { display: flex; height: 100%; transition: transform .6s cubic-bezier(.65, 0, .35, 1); }
.wb-schritt { flex: 0 0 100%; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: calc(var(--e) * .7); padding: calc(var(--e) * .7); }
/* min-width: sonst wird der Schritt so breit wie die Marken und die Spur verrutscht; Innenabstand im Schritt (nicht im Band), damit Ringe und Häkchen Platz haben und vom nächsten Schritt nichts hereinragt */
.wb-frage { display: flex; align-items: baseline; justify-content: space-between; font-size: calc(var(--e) * 1.45); font-weight: 500; }
.wb-frage + .wb-wahl, .wb-frage + .wb-marken, .wb-frage + .wb-tuecher, .wb-frage + .wb-reihe { margin-bottom: calc(var(--e) * .8) !important; }
.wb-zahl { font-size: calc(var(--e) * 1.15); font-weight: 600 !important; color: #526E80; }
.wb-wahl { display: flex; flex-wrap: wrap; gap: calc(var(--e) * .8); }
.wb-wahl span { padding: calc(var(--e) * .75) calc(var(--e) * 1.4); border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1.5px #C4C9BD; font-size: calc(var(--e) * 1.2); font-weight: 500; white-space: nowrap;
  transition: background-color .25s, color .25s, box-shadow .25s; }
.wb-wahl small { font-size: .85em; font-weight: 400; color: #6E6259; }
.wb-wahl span.hover { box-shadow: inset 0 0 0 1.5px #526E80; }
.wb-wahl span.ist-an { background: #526E80; box-shadow: none; color: #fff; }
.wb-wahl span.ist-an small { color: #fff; } /* Weiß statt #E4EAEE: 5,4 : 1 auf Taubenblau statt 4,4 (WCAG AA, 03.11.) */
.wb-marken { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: calc(var(--e) * .8); }
.wb-marke { position: relative; display: flex; flex-direction: column; align-items: center; gap: calc(var(--e) * .4); padding: calc(var(--e) * .5); border-radius: calc(var(--e) * .8); background: #fff;
  box-shadow: inset 0 0 0 1.5px #EDE6DC; transition: box-shadow .25s, background-color .25s; }
.wb-marke img { width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; }
.wb-marke small { font-size: calc(var(--e) * .8); line-height: 1.15; text-align: center; color: #56463D; }
.wb-marke.ist-an { box-shadow: inset 0 0 0 2px #526E80; background: #F5F0E9; }
.wb-marke::after { content: ""; position: absolute; top: calc(var(--e) * -.45); right: calc(var(--e) * -.45); width: calc(var(--e) * 1.5); aspect-ratio: 1; border-radius: 50%;
  background: #526E80 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.3l2.3 2.3 4.7-5' fill='none' stroke='%23fff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat;
  opacity: 0; scale: .6; transition: opacity .25s, scale .3s cubic-bezier(.16, 1, .3, 1); } /* Haken gezeichnet statt Schriftzeichen */
.wb-marke.ist-an::after { opacity: 1; scale: 1; }
.wb-marken { padding: calc(var(--e) * .5) calc(var(--e) * .5) 0; margin-inline: calc(var(--e) * -.5); } /* Platz für das Häkchen */
.wb-tuecher { display: flex; gap: calc(var(--e) * 2); }
.wb-tuch { display: flex; flex-direction: column; align-items: center; gap: calc(var(--e) * .5); }
.wb-tuch img { width: calc(var(--e) * 5); aspect-ratio: 1; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px #FDFAF7, 0 0 0 3.5px transparent; transition: box-shadow .25s; }
.wb-tuch.hover img { box-shadow: 0 0 0 2px #FDFAF7, 0 0 0 3.5px #C4C9BD; }
.wb-tuch.ist-an img { box-shadow: 0 0 0 2px #FDFAF7, 0 0 0 3.5px #526E80; }
.wb-tuch small { font-size: calc(var(--e) * 1); color: #56463D; }
.wb-reihe { display: flex; align-items: center; gap: calc(var(--e) * 1.2); }
.wb-feld { flex: 1; max-width: calc(var(--e) * 18); display: flex; align-items: center; height: calc(var(--e) * 3); padding: 0 calc(var(--e) * 1.2); border-radius: calc(var(--e) * .7); background: #fff; box-shadow: inset 0 0 0 1.5px #C4C9BD;
  font-size: calc(var(--e) * 1.2); white-space: nowrap; overflow: hidden; opacity: .4; transition: opacity .3s; }
.wb-feld.offen { opacity: 1; }
.wb-feld:empty::before { content: attr(data-leer); color: #9A8F87; }
.wb-feld.tippt::after { content: ""; display: inline-block; width: 1px; height: 1.1em; margin-left: 1px; background: currentColor; animation: wb-cursor .8s steps(1) infinite; }
.wb-feld.tippt:empty::before { content: none; }
@keyframes wb-cursor { 50% { opacity: 0; } }
.wb-fuss { display: flex; align-items: center; justify-content: space-between; gap: calc(var(--e) * 2); padding-top: calc(var(--e) * 1.2); border-top: 1px solid #EDE6DC; }
.wb-preis { display: flex; align-items: baseline; gap: calc(var(--e) * .8); }
.wb-preis small { font-size: calc(var(--e) * 1); color: #6E6259; text-transform: uppercase; letter-spacing: .04em; }
.wb-preis b { font-size: calc(var(--e) * 1.6); font-weight: 600 !important; font-variant-numeric: tabular-nums; }
.wb-knopf { display: grid; place-items: center; min-width: calc(var(--e) * 12); padding: calc(var(--e) * .95) calc(var(--e) * 2); border-radius: 999px; background: #526E80; color: #fff;
  font-size: calc(var(--e) * 1.2); font-weight: 600 !important; white-space: nowrap; transition: background-color .25s; }
.wb-knopf.hover { background: #3A5060; }
.wb-knopf.fertig { background: #3A3023; }
/* schmal (4:5): Marken in zwei Reihen, Feld unter Ja/Nein */
@container (max-width: 520px) {
  .wb { width: 90%; height: 90%; padding: calc(var(--e) * 1.8); }
  .wb-schritte { gap: calc(var(--e) * 3); }
  .wb-marken { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .wb-marke small { font-size: calc(var(--e) * 1); }
  .wb-reihe { flex-wrap: wrap; }
  .wb-feld { flex-basis: 100%; max-width: none; }
  .wb-wahl small, .wb-preis small, .wb-tuch small { font-size: calc(var(--e) * 1.15); }
  .wb-knopf { min-width: 0; }
}

/* Storch und Startseite: Prinzip des Logo-Films der Marke – der Storch zeichnet sich als Linie und füllt sich, die Buchstaben tauchen
   nacheinander aus ihrer Maske auf. Dann landet das Logo auf dem Logo im Kopf des Screenshots, blendet aus, die Seite scrollt. */
.wtb-logoseite .wtb-flaeche { background: #FDFAF7; }
.wl-logo { position: absolute; left: 12%; top: 46%; width: 76%; aspect-ratio: 275.36 / 40.5; z-index: 4;
  transition: left .9s cubic-bezier(.65, 0, .35, 1), top .9s cubic-bezier(.65, 0, .35, 1), width .9s cubic-bezier(.65, 0, .35, 1), opacity .5s; }
.wl-logo svg { display: block; width: 100%; height: 100%; overflow: visible; fill: #221C13; }
.wl-logo .wtb-storch { stroke: #221C13; stroke-width: .7; stroke-dashoffset: 1; fill-opacity: 0; transition: stroke-dashoffset 1.4s cubic-bezier(.4, 0, .2, 1), fill-opacity .5s; }
.wl-logo .wtb-buchst { transform-box: fill-box; transform: translateY(150%); transition: transform .5s cubic-bezier(.16, 1, .3, 1); }
.wl-logo.zeichnet .wtb-storch { stroke-dashoffset: 0; }
.wl-logo.voll .wtb-storch { fill-opacity: 1; }
.wl-logo.voll .wtb-buchst { transform: none; }
.wl-logo.oben { left: 11.667%; top: 1.067%; width: 13.25%; } /* = Logo im Kopf des Screenshots (x 140, y 16, 159 px breit bei 1200) */
.wl-logo.weg { opacity: 0; }
.wl-seite { position: absolute; left: 0; right: 0; top: 0; opacity: 0; transition: opacity .6s, transform 7s cubic-bezier(.45, 0, .55, 1); }
.wl-seite img { display: block; width: 100%; height: auto; }
.wl-seite.da { opacity: 1; }

/* Im Kopf: Box-Finder und Wunschbox als Bilder der Bilderfolge (pages/referenzen/[referenz].astro, wie der Tarifrechner bei Völklingen).
   Die Bühne hat eine feste Größe wie die Kachel der Einblicke und wird auf die Breite des Kopfs skaliert (--s, Skript); die Karte sitzt
   etwas tiefer, frei vom Schild oben links. Die Bildregel der Folge (alle img füllen) gilt hier nicht für Icons, Marken und Mulltücher. */
.wtb-kopf { position: absolute; inset: 0; z-index: 1; overflow: hidden; }
.wtb-kopf .wtb-flaeche { position: absolute; left: 0; top: 0; width: 640px; aspect-ratio: 3 / 2; border-radius: 0; transform-origin: 0 0; scale: var(--s, 1); }
.wtb-kopf :is(.ftb, .wb) { top: 54%; height: 80%; }
@media (width <= 640px) { .wtb-kopf :is(.ftb, .wb) { top: 50%; height: 84%; } } /* dort kein Schild (styles/folge.css) */
.folge .wtb-kopf .ftb-option img { width: calc(var(--e) * 5.2); height: auto; }
.folge .wtb-kopf .wb-marke img { height: auto; aspect-ratio: 1; object-fit: contain; }
.folge .wtb-kopf .wb-tuch img { width: calc(var(--e) * 5); height: auto; aspect-ratio: 1; }