/* Stadtwerke Völklingen: Einblicke wie auf der alten Referenzseite – Bilder und die Videos als Animationen nachgebaut
   (Farben alt/neu, Tarifrechner, Logo mit Startseite, Kundenportal). Markup: src/daten/svk-bewegt.html, Ablauf: svk/bewegt.js.
   Schriften der Marke: Titel Ubuntu, sonst Inter (svk/fonts/, OFL bzw. Ubuntu Font Licence). Ecken wie überall auf der Seite (--radius).
   Maße in --e: wächst mit der Bühne (Containerbreite), damit Text auch auf schmalen Bühnen lesbar bleibt. */
@font-face { font-family: "SVK Ubuntu"; src: url("fonts/ubuntu-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "SVK Ubuntu"; src: url("fonts/ubuntu-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "SVK Inter"; src: url("fonts/inter-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "SVK Inter"; src: url("fonts/inter-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-display: swap; }

/* Anordnung (Sophie, 29.10.): je Reihe drei Hochformate (4:5) oder zwei Querformate (16:10) – Laptop | Farben | Plakat,
   Tarifrechner | Kundenportal, Flaschen | Website-Scroll | Haltestelle. Schmal alles untereinander. */
.svk-raster { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.75rem); }
.svk-raster figure { margin: 0; }
.svk-drittel { grid-column: span 2; }
.svk-halb { grid-column: span 3; }
.svk-bild img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius); }
/* Schmal: Slider zum Wischen (alle Bühnen dann 4:5), Pfeile und Zähler darunter wie bei den Bildbändern der Seite */
/* .galerie-nav.svk-nav: Seitenstile (referenzen.css, .galerie-nav { display: flex }) laden nach dieser Datei, darum doppelte Klasse (04.11.2026) */
.galerie-nav.svk-nav { display: none; }
@media (max-width: 760px) {
  .svk-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); }
  .svk-raster::-webkit-scrollbar { display: none; }
  .svk-raster > figure { flex: 0 0 84%; scroll-snap-align: start; }
  .galerie-nav.svk-nav { display: flex; margin-top: 1.25rem; }
}

.svk-flaeche {
  --rot: #DB023E; --tief: #1E4855; --tafel: #24505E; --hell: #DCEBEF; --linie: #C9D6DA; --r-in: calc(var(--radius) * .6);
  position: relative; overflow: hidden; isolation: isolate; border-radius: var(--radius); container-type: inline-size;
  font-family: "SVK Inter", var(--text); color: var(--tief); line-height: 1.2; aspect-ratio: 4 / 5; background: var(--hell);
}
.svk-flaeche > * { --e: 1.6cqw; }
@container (min-width: 900px) { .svk-flaeche > * { --e: 1cqw; } }
@container (max-width: 460px) { .svk-flaeche > * { --e: 2.4cqw; } }
.svk-flaeche.ohne, .svk-flaeche.ohne * { transition: none !important; }
.svk-flaeche::after { content: ""; position: absolute; inset: 0; z-index: 20; background: var(--tafel); opacity: 0; pointer-events: none; transition: opacity .5s; }
.svk-flaeche.blende::after { opacity: 1; }
.svk-flaeche :where(b, small, p) { font-weight: inherit; margin: 0; }
.svk-flaeche svg { display: block; }
.svk-halb .svk-flaeche { aspect-ratio: 16 / 10; }
@media (max-width: 760px) { .svk-halb .svk-flaeche { aspect-ratio: 4 / 5; } }
/* Titel in Ubuntu */
.svk-flaeche :is(.svk-titel, .svk-login-titel, .svk-farbe b, .svk-pal-titel, .svk-reiter, .svk-knopf) { font-family: "SVK Ubuntu", var(--text); }

/* Zeiger: der rosa Punkt aus den Videos */
/* Die Position setzt das Skript Bild für Bild (gleitend, leicht gebogen), hier nur Ein-/Ausblenden und Klick */
.svk-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; }
/* Der Punkt selbst ist ein eigenes Element: so schrumpft er beim Klick um seine Mitte, statt mitsamt Position Richtung Ecke zu rutschen */
.svk-zeiger::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: rgba(232, 80, 120, .72); transition: scale .22s cubic-bezier(.4, 0, .2, 1); }
.svk-zeiger.an { opacity: 1; }
.svk-zeiger.klick::before { scale: .84; }

/* Eingabefelder und Knöpfe */
.svk-feld { display: block; min-height: calc(var(--e) * 3.4); padding: calc(var(--e) * .85) calc(var(--e) * 1.1); border: 1px solid var(--linie); border-radius: calc(var(--r-in) * .5); background: #fff; font-size: calc(var(--e) * 1.35); white-space: nowrap; overflow: hidden; }
.svk-feld:empty::before { content: attr(data-leer); color: #8AA0A7; }
.svk-feld.tippt::after { content: ""; display: inline-block; width: 1px; height: 1.1em; margin-left: 1px; vertical-align: -.15em; background: currentColor; animation: svk-cursor .8s steps(1) infinite; }
.svk-feld.tippt:empty::before { content: none; }
@keyframes svk-cursor { 50% { opacity: 0; } }
.svk-knopf { display: grid; place-items: center; padding: calc(var(--e) * .9) calc(var(--e) * 1.6); border-radius: 999px; background: var(--tief); color: #fff; font-size: calc(var(--e) * 1.2); font-weight: 700; white-space: nowrap; transition: background-color .25s; }
.svk-knopf.rot { background: var(--rot); }
.svk-knopf-rand { background: none; color: var(--tief); box-shadow: inset 0 0 0 1.5px var(--tief); }

/* Tarifrechner */
.svk-tarif .svk-flaeche { background: var(--tafel); }
.svk-rechner { position: absolute; left: 50%; top: 50%; width: 84%; translate: -50% -50%; background: #fff; border-radius: var(--r-in); overflow: hidden; transition: opacity .45s, transform .6s cubic-bezier(.16, 1, .3, 1); }
.svk-reiter { display: flex; justify-content: space-between; gap: calc(var(--e) * 1.5); padding: calc(var(--e) * 1.3) calc(var(--e) * 3); background: #EEF4F6; font-size: calc(var(--e) * 1.4); font-weight: 600; }
.svk-reiter span { display: inline-flex; align-items: center; gap: calc(var(--e) * .6); }
.svk-reiter svg { width: calc(var(--e) * 1.7); height: calc(var(--e) * 1.7); fill: currentColor; }
.svk-reiter .weiss { fill: none; stroke: #EEF4F6; stroke-width: 1.6; }
.svk-reiter .ist-an { color: var(--rot); }
.svk-rechner-innen { padding: calc(var(--e) * 2.4) calc(var(--e) * 3) calc(var(--e) * 3); }
.svk-titel { font-size: calc(var(--e) * 2.7); font-weight: 700; margin-bottom: calc(var(--e) * 1.4) !important; }
.svk-felder { display: grid; grid-template-columns: 1fr 1fr 1.35fr .85fr auto; gap: calc(var(--e) * 1); align-items: end; }
.svk-f > span { display: block; font-size: calc(var(--e) * 1.15); margin-bottom: calc(var(--e) * .45); }
.svk-personen { display: flex; height: calc(var(--e) * 3.4); border: 1px solid var(--linie); border-radius: calc(var(--r-in) * .5); overflow: hidden; }
.svk-personen i { flex: 1; display: grid; place-items: center; transition: background-color .2s; }
.svk-personen svg { width: calc(var(--e) * 2.4); height: auto; fill: var(--tief); }
.svk-personen i.ist-an { background: var(--rot); }
.svk-personen i.ist-an svg { fill: #fff; }
.svk-tarife { position: absolute; inset: 0; display: flex; justify-content: center; align-items: center; gap: calc(var(--e) * 2.5); pointer-events: none; }
.svk-tarifkarte { position: relative; width: calc(var(--e) * 19); aspect-ratio: .92; display: grid; place-items: center; padding: calc(var(--e) * 1.4); background: #fff; border-radius: var(--r-in);
  opacity: 0; transform: translateY(calc(var(--e) * 3)); transition: opacity .4s, transform .6s cubic-bezier(.16, 1, .3, 1); }
.svk-tarifkarte img { width: 100%; height: 100%; object-fit: contain; }
.svk-empfehlung { position: absolute; top: calc(var(--e) * -1.5); left: 50%; translate: -50% 0; padding: calc(var(--e) * .5) calc(var(--e) * 1); border-radius: calc(var(--r-in) * .5); background: var(--rot); color: #fff; font-size: calc(var(--e) * 1.05); white-space: nowrap; }
.svk-tarifkarte.hebt { transform: translateY(calc(var(--e) * -1)); box-shadow: 0 calc(var(--e) * 1.5) calc(var(--e) * 3) -1em rgba(0, 0, 0, .45); }
.zeigt-tarife .svk-rechner { opacity: 0; transform: scale(.94); }
.zeigt-tarife .svk-tarifkarte { opacity: 1; transform: none; }
.zeigt-tarife .svk-tarifkarte:nth-child(2) { transition-delay: .12s; }
.zeigt-tarife .svk-tarifkarte:nth-child(3) { transition-delay: .24s; }
.zeigt-tarife .svk-tarifkarte.hebt { transform: translateY(calc(var(--e) * -1)); transition-delay: 0s; }
@container (max-width: 700px) {
  .svk-rechner { width: 90%; }
  .svk-reiter { padding-inline: calc(var(--e) * 1.6); }
  .svk-rechner-innen { padding: calc(var(--e) * 1.8) calc(var(--e) * 1.8) calc(var(--e) * 2.2); }
  .svk-felder { grid-template-columns: 1fr 1fr; }
  .svk-f-pers { grid-column: 1 / -1; order: 1; }
  .svk-felder > :nth-child(4) { order: 2; }
  .svk-felder .svk-knopf { order: 3; }
  .svk-tarifkarte { width: 27cqw; }
}

/* Tarifrechner im Kopf: liegt im ersten Bild der Bilderfolge über einer Petrol-Fläche, füllt die Bühne; die Karte etwas tiefer
   wegen des Schilds oben links. Die Bildregel der Folge (alle img füllen und beschneiden) gilt hier nicht für die Tarif-Logos. */
.svk-kopf-tarif { position: absolute; inset: 0; z-index: 1; }
.svk-kopf-tarif .svk-flaeche { position: absolute; inset: 0; aspect-ratio: auto; border-radius: 0; }
/* feste Größe im Verhältnis zur Bühne (nicht die Stufen der Einblicke): Karte zweispaltig, passt bei jeder Breite unter das Schild */
.svk-kopf-tarif .svk-flaeche > * { --e: 1.35cqw; }
.svk-kopf-tarif .svk-rechner { width: 86%; top: calc(50% + 1.4rem); }
.svk-kopf-tarif .svk-reiter { padding-inline: calc(var(--e) * 1.6); }
.svk-kopf-tarif .svk-rechner-innen { padding: calc(var(--e) * 1.8) calc(var(--e) * 1.8) calc(var(--e) * 2.2); }
.svk-kopf-tarif .svk-felder { grid-template-columns: 1fr 1fr; }
.svk-kopf-tarif .svk-f-pers { grid-column: 1 / -1; order: 1; }
.svk-kopf-tarif .svk-felder > :nth-child(4) { order: 2; }
.svk-kopf-tarif .svk-felder .svk-knopf { order: 3; }
.svk-kopf-tarif .svk-tarife { top: 1.4rem; }
.svk-kopf-tarif .svk-tarifkarte { width: calc(var(--e) * 17); }
.folge > figure .svk-kopf-tarif .svk-tarifkarte img { width: 100%; height: 100%; object-fit: contain; }

/* Kundenportal */
.svk-portal .svk-flaeche { background: var(--hell); }
/* Kacheln und Login maßstabsgetreu nach dem Screenshot der Startseite (Block 902 × 577 px, Kachel 296 × 285, Abstand 7):
   --k ist ein Pixel dieser Vorlage, gemessen an der Breite des Blocks. Nur die äußeren Ecken des Blocks sind stark gerundet. */
.svk-kacheln { position: absolute; left: 50%; top: 50%; translate: -50% -50%; height: 84%; aspect-ratio: 902 / 577; container-type: inline-size;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 1.213% .776%; perspective: 900px; } /* 7 px der Vorlage: Prozent von Höhe bzw. Breite des Blocks */
.svk-kacheln > * { --k: calc(100cqw / 902); }
.svk-k { position: relative; overflow: hidden; border-radius: calc(var(--k) * 5); background: var(--tief); }
.svk-kacheln > :nth-child(1) { border-top-left-radius: calc(var(--k) * 20); }
.svk-kacheln > :nth-child(3) { border-top-right-radius: calc(var(--k) * 20); }
.svk-kacheln > :nth-child(4) { border-bottom-left-radius: calc(var(--k) * 20); }
.svk-kacheln > :nth-child(6) { border-bottom-right-radius: calc(var(--k) * 20); }
.svk-login { display: flex; flex-direction: column; padding: calc(var(--k) * 24) calc(var(--k) * 26); background: #fff; color: #003B49; transition: background-color .4s; }
.svk-login-titel { font-size: calc(var(--k) * 25); line-height: 1.1; white-space: nowrap; font-weight: 700; margin-bottom: calc(var(--k) * 14) !important; }
.svk-login .svk-feld { min-height: 0; height: calc(var(--k) * 37); display: flex; align-items: center; padding: 0 calc(var(--k) * 15); border: 1px solid #D5E0E3; border-radius: calc(var(--k) * 4); font-size: calc(var(--k) * 14); color: #003B49; }
.svk-login .svk-feld + .svk-feld { margin-top: calc(var(--k) * 7); }
.svk-login .svk-knopf { height: calc(var(--k) * 37); padding: 0; font-family: "SVK Inter", var(--text); font-size: calc(var(--k) * 12); font-weight: 600; background: #003B49; }
.svk-login .svk-knopf.rot { background: var(--rot); }
.svk-login [data-ziel="login"] { margin-top: calc(var(--k) * 10); }
.svk-login .svk-knopf-rand { margin-top: calc(var(--k) * 7); background: none; color: #003B49; box-shadow: inset 0 0 0 calc(var(--k) * 1.5) #003B49; }
.svk-login small { margin-top: calc(var(--k) * 12); font-size: calc(var(--k) * 11); }
.svk-login > * { transition: opacity .4s .2s; }
.svk-kachel img { width: 100%; height: 100%; object-fit: cover; transition: opacity .5s, transform .7s cubic-bezier(.16, 1, .3, 1); }
.svk-k.zu { background: #0F3440; }
.svk-login.zu > * { opacity: 0; transition-delay: 0s; }
.svk-kachel.zu img { opacity: 0; transform: rotateY(80deg); }
/* Maße relativ zur Kachel (Container), damit der Titel so groß ist wie der Titel im Foto (rund 9 % der Kachelbreite) */
.svk-kachel { container-type: inline-size; }
.svk-farbe { position: absolute; inset: 0; padding: 7.5cqw 7.5cqw; background: var(--f); color: #fff; display: flex; flex-direction: column; gap: 3cqw;
  clip-path: circle(0% at var(--cx, 50%) var(--cy, 50%)); transition: clip-path .55s cubic-bezier(.4, 0, .2, 1); }
.svk-farbe b { font-size: 8.9cqw; line-height: 1.12; font-weight: 700; }
.svk-farbe small { max-width: 26em; font-size: 4.9cqw; line-height: 1.4; }
.svk-kachel.farbig .svk-farbe { clip-path: circle(150% at var(--cx, 50%) var(--cy, 50%)); }
/* schmal: zwei Spalten, drei Reihen (Block 599 × 869 in Pixeln der Vorlage), äußere Ecken entsprechend */
@media (max-width: 760px) {
  .svk-kacheln { height: 90%; aspect-ratio: 599 / 869; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(3, minmax(0, 1fr)); gap: .806% 1.169%; }
  .svk-kacheln > * { --k: calc(100cqw / 599); border-radius: calc(var(--k) * 5) !important; }
  .svk-kacheln > :nth-child(1) { border-top-left-radius: calc(var(--k) * 20) !important; }
  .svk-kacheln > :nth-child(2) { border-top-right-radius: calc(var(--k) * 20) !important; }
  .svk-kacheln > :nth-child(5) { border-bottom-left-radius: calc(var(--k) * 20) !important; }
  .svk-kacheln > :nth-child(6) { border-bottom-right-radius: calc(var(--k) * 20) !important; }
}

/* Farben alt und neu: Wischblende von links nach rechts */
.svk-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 */
.svk-palette img { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; }
.svk-alt img { filter: grayscale(1) brightness(1.15) contrast(.85); }
.svk-alt::before, .svk-neu::before { content: ""; position: absolute; inset: 0; z-index: -1; }
.svk-alt::before { background: rgba(176, 178, 182, .55); }
.svk-neu::before { background: rgba(178, 222, 232, .45); }
.svk-neu { clip-path: inset(0 100% 0 0); transition: clip-path 1s cubic-bezier(.65, 0, .35, 1); }
.svk-flaeche.neu .svk-neu { clip-path: inset(0 0 0 0); }
.svk-pal-titel { font-size: 7cqw; line-height: 1.1; font-weight: 500; color: #003B49; margin-bottom: 6cqw !important; }
.svk-palette ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2.6cqw; }
.svk-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; }

/* Logo und Startseite */
.svk-logoseite .svk-flaeche { aspect-ratio: 4 / 5; background: #E6F0F2; }
.svk-logo { position: absolute; left: 16%; top: 42%; width: 68%; aspect-ratio: 754 / 292; 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; }
.svk-logo svg, .svk-logo img, .svk-logo-fuell { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.svk-logo-fuell { background: #fff; opacity: 0; -webkit-mask: var(--maske) 0 0 / 100% 100% no-repeat; mask: var(--maske) 0 0 / 100% 100% no-repeat; transition: opacity .5s; }
.svk-logo-rand { fill: none; stroke: #DB023E; stroke-width: 14; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.2s cubic-bezier(.4, 0, .2, 1); }
.svk-logo-schrift { opacity: 0; transition: opacity .5s .15s; }
.svk-logo.zeichnet .svk-logo-rand { stroke-dashoffset: 0; }
.svk-logo.voll .svk-logo-fuell, .svk-logo.voll .svk-logo-schrift { opacity: 1; }
.svk-logo.oben { left: 9.25%; top: 2.85%; width: 10.75%; } /* = Logo im Kopf des Screenshots */
.svk-logo.weg { opacity: 0; }
/* Die echte Startseite (Screenshot in drei Streifen, max. 2400 px): Logo landet genau auf dem Logo im Kopf und blendet aus, dann scrollt die Seite */
.svk-seite { position: absolute; left: 0; right: 0; top: 0; opacity: 0; transition: opacity .6s, transform 6.5s cubic-bezier(.45, 0, .55, 1); }
.svk-seite img { display: block; width: 100%; height: auto; }
.svk-seite.da { opacity: 1; }

/* Ohne Bewegung: alles im Endzustand, ohne Zeiger */
.svk-flaeche.endzustand .svk-zeiger { display: none; }