/* VeloSchweiz TV-Kanal — Darstellung.
   Übernommen aus dem Prototyp, den Tim am 01.10.2026 abgenommen hat (dispatch/tv-kanal-0110-prototyp.dc.html):
   Layout quer/hochkant (Container-Query 759 px), Masse, Übergänge. Angepasst sind nur Farben und Schrift
   an veloschweiz.ch (Tims Regel 27.08.: fertige Vorlage einsetzen, nur Farben anpassen):
     Akzent #1F5BD6 → Astra-Farbe 0 (#fb2056), Hover → Astra-Farbe 1 (#da1c4b)
     Barlow Condensed → Montserrat 700 (Titelschrift der Seite), Barlow Semi Condensed → Schrift der Seite (Noto Sans)
     Spar-Badge → Spar-Grün der Kaufbegleitung (#15803d, wie .vskb-co-saving), Seitengrund → Astra-Farbe 4
   Klassen mit Präfix vsk-, damit Theme-Regeln für .card, .info, .form nicht hineingreifen.
   Tims Korrekturen vom 01.10.2026 nach seinem Test (tv-kanal-layout-0110 + Nachtrag iPhone):
     Infofläche oben gekürzt, damit die Einblendung «DAUERWERBESENDUNG» der Clips sichtbar bleibt (gemessen in
     allen drei Clips: Schrift y 46–56 von 720 px, mit Kontur bis ~58 px = 4.5cqw; die Grafik des Clips beginnt bei
     58–63 px) → oberer Rand 5cqw. Bot-Knopf als Pille gleich breit wie die Infofläche direkt darunter, mit Puls
     und wechselndem Text. «Jetzt Angebot sichern» Grün der Kaufbegleitung. Nachtrag 3 (Tim 17:58): Pause/Ton und
     Angebot ragen nur 15 % ihrer Höhe ins Video (Tims Mass 10–20 %), der Rest liegt unter der Unterkante.
     Hochkant: Chat-Knopf als Pille so breit wie die Grafikspalte des Clips (x 999–1217 von 1280 = 78.05–95.08 %),
     ein Viertel ragt unter die Unterkante, Puls und Sprechblase (Nachtrag 2); Infofläche rückt unter die Knöpfe;
     der Chat öffnet zwischen Infofläche und Angebot. Kontrast weiss auf Grün #15803d 4.99:1, auf #da1c4b 4.95:1 (Akzent #fb2056 hätte nur 3.86:1).
   Tims Korrektur vom 01.10. abends (tv-kanal-chat-rund-0110): quer ist der Bot-Knopf wieder rund — ein Kreis, so gross
   wie die Infofläche breit ist, oder so gross wie der Platz bis «Jetzt Angebot sichern». Darin oben das Chat-Symbol,
   darunter der Text gross und fett (Schriftgrösse misst kanal.js, damit alle Texte im Kreis stehen). Die Chat-Fläche
   beginnt auf der Höhe der Kreis-Oberkante und wächst nach unten.
   Nachtrag 1 (Tim ~21:05 nach dem iPhone-Test): kein Ton-Knopf mehr (quer und hochkant). Hochkant ein Kreis von 22 % der
   Videobreite, rechts bündig mit der Grafikspalte, 16 % unter der Unterkante (wie Pause); die Sprechblase steht zwischen
   Pause und Kreis, Unterkante = Unterkante Pause, mindestens so hoch wie Pause (ragt also leicht ins Video). Symbol:
   gefüllte weisse Sprechblase mit Fragezeichen in Knopffarbe, quer ≥ 40 px, hochkant 55 % des Kreises.
   Tims Korrektur nach dem iPhone-Test (01.10. ~23:58, tv-kanal-iphone-0110), nur hochkant: Kreis 28 % der Videobreite,
   Mitte auf der Mitte von Pause; Infofläche und alles darunter rücken unter den Kreis. Im Kreis statt des Symbols
   «E-Bike» / «Beratung» in zwei Zeilen, weiss und fett, so gross wie es passt (misst kanal.js, mindestens 15 px).
   Bei offenem Chat zeigt der Kreis × wie bisher. Quer bleibt unverändert (dort ist der Name ausgeblendet).
   Nachtrag 1 (Tim 02.10. ~00:05, quer): Die Chat-Fläche öffnet halb so hoch wie --vsk-chat-h (Starthöhe) und wächst mit
   dem Gespräch bis --vsk-chat-h (kanal.js setzt --vsk-chat-jetzt), der Platz darunter wächst mit.
   Nachtrag 2 (Tim 02.10. ~00:15, quer): Chat und Formular als eine Spalte — gleiche Breite --vsk-spalte (die heutige
   Formularbreite, mindestens die bisherige Chatbreite, höchstens der Platz zwischen Pause und Kreis); bei offenem Chat
   steht das Formular mit denselben Kanten 8 px unter dem Chat und wandert mit. Chat zu: Formular wie bisher.
   Tims Korrektur vom 02.10. ~08:55 (tv-kanal-look-0210), quer und hochkant gleich: im Kreis das Velo-Symbol der
   Kaufbegleitung statt des Fragezeichens (hochkant über «E-Bike» / «Beratung»), kein Puls mehr, Textwechsel etwa alle
   90 s (kanal.js), hochkant steht die Sprechblase dauernd. Unten rechts am Kreis ein Mauszeiger-Pfeil, weiss mit roter
   Kontur, zur Hälfte auf dem Kreis (.vsk-bot-zeiger). */
.vsk-seite{--vsk-akzent:var(--ast-global-color-0,#fb2056);--vsk-akzent-hover:var(--ast-global-color-1,#da1c4b);
  --vsk-gruen:#15803d;--vsk-gruen-hover:#166534;--vsk-bot-grund:#da1c4b;--vsk-bot-hover:#b3163e;
  --vsk-titel:'Montserrat',system-ui,sans-serif;
  box-sizing:border-box;width:100%;padding:32px 24px 24px;background:var(--ast-global-color-4,#f5f5f5);color:#13171A;font-family:inherit}
/* Unten Platz für den schwebenden Sprachumschalter der Seite (unten fest, ~44 px), damit er nichts Letztes verdeckt. */
.vsk-seite{padding-bottom:72px}
@media (max-width:759px){.vsk-seite{padding:0 0 72px}}
/* tv-kanal-karte-0610: Linkfarbe des Kanals nicht im Panel der Kaufbegleitung — dort gelten die Farben des Widgets wie unten. */
.vsk-seite a:where(:not(.vskb-panel *)){color:var(--vsk-akzent)}.vsk-seite a:where(:not(.vskb-panel *)):hover{color:var(--vsk-akzent-hover)}
.vsk-seite [hidden]{display:none!important}
.vsk-tv{--vsk-ctl-gr:clamp(44px,4.4cqw,58px);--vsk-ang-h:clamp(48px,4.4cqw,58px);--vsk-chat-h:max(420px,45cqw);--vsk-chat-unten:calc(var(--vsk-kreis-oben) + var(--vsk-chat-jetzt,calc(var(--vsk-chat-h) / 2)) - 56.25cqw);--vsk-chat-platz:calc(100cqw - 26.8cqw - var(--vsk-ctl-gr) - 1.2cqw);--vsk-spalte:min(var(--vsk-chat-platz),max(clamp(320px,46cqw,640px),min(520px,var(--vsk-chat-platz))));--vsk-kreis-oben:36.6cqw;--vsk-kreis:min(19cqw,calc(56.25cqw - var(--vsk-ang-h) * .15 - .6cqw - var(--vsk-kreis-oben)));position:relative;container-type:inline-size;container-name:vsktv;width:100%;max-width:min(1280px,calc(100svh * 1.7778));margin:0 auto;display:flex;flex-direction:column}
.vsk-stage{order:0;position:relative;aspect-ratio:16/9;border-radius:14px;overflow:hidden;background:#0C1115;color:#fff}
.vsk-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#0C1115}
.vsk-ph{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.4cqw;padding-right:22cqw;text-align:center;background:#0C1115}
.vsk-bike{width:30cqw;height:auto;color:rgba(255,255,255,.42);margin-bottom:1.2cqw;animation:vsk-drift 9s ease-in-out infinite alternate}
.vsk-tv.is-paused .vsk-bike{animation-play-state:paused}
@keyframes vsk-drift{from{transform:translateX(-1.6cqw)}to{transform:translateX(1.6cqw)}}
.vsk-ph-marke{font-size:clamp(11px,1.2cqw,16px);letter-spacing:.06em;color:rgba(255,255,255,.7)}
.vsk-ph-modell{font-family:var(--vsk-titel);font-weight:700;font-size:clamp(26px,4.4cqw,60px);line-height:1}
.vsk-info{position:absolute;right:3cqw;top:5cqw;width:19cqw;height:31cqw;z-index:2;border-radius:12px;overflow:hidden;color:#fff;background:rgba(9,13,17,.84);box-shadow:0 12px 32px rgba(0,0,0,.28)}
@supports ((backdrop-filter:blur(8px)) or (-webkit-backdrop-filter:blur(8px))){.vsk-info{background:rgba(9,13,17,.62);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}}
.vsk-card{position:absolute;inset:0;box-sizing:border-box;padding:clamp(13px,1.6cqw,22px) clamp(12px,1.6cqw,22px) clamp(12px,1.6cqw,22px);display:flex;flex-direction:column;gap:clamp(3px,.5cqw,7px);opacity:0;transform:translateY(12px);transition:opacity .6s ease,transform .6s ease}
.vsk-card.is-active{opacity:1;transform:none}
.vsk-kicker{font-size:clamp(11px,1.05cqw,14px);letter-spacing:.06em;color:rgba(255,255,255,.72);padding-right:36px}
/* Montserrat/Noto Sans laufen breiter als Barlow (Prototyp): Titel und Preis etwas kleiner, Preis nie umbrochen. */
.vsk-ttl{font-size:clamp(15px,1.6cqw,22px);font-weight:600;line-height:1.1}
.vsk-preis{margin-top:auto}
.vsk-pre{font-size:clamp(12px,1.2cqw,16px);color:rgba(255,255,255,.8)}
.vsk-big{font-family:var(--vsk-titel);font-weight:700;font-size:clamp(18px,2.4cqw,34px);line-height:1;white-space:nowrap;font-variant-numeric:tabular-nums}
.vsk-badge{align-self:flex-start;margin-top:clamp(4px,.6cqw,8px);padding:.28em .75em;border-radius:999px;background:#15803d;color:#fff;font-weight:600;font-size:clamp(12px,1.15cqw,15px)}
.vsk-lines{margin-top:auto;display:flex;flex-direction:column;gap:clamp(4px,.55cqw,8px);font-size:clamp(13px,1.3cqw,17px);line-height:1.25}
.vsk-line{padding-top:clamp(4px,.55cqw,8px);border-top:1px solid rgba(255,255,255,.16)}
.vsk-dots{position:absolute;right:clamp(10px,1.2cqw,16px);top:clamp(10px,1.2cqw,16px);display:flex;gap:6px}
.vsk-dot{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.3);transition:background .3s}
.vsk-dot.is-active{background:#fff}
.vsk-ctl-row{position:absolute;z-index:2;left:2.4cqw;top:calc(56.25cqw - var(--vsk-ctl-gr) * .15);display:flex;gap:clamp(8px,.8cqw,12px)}
.vsk-seite .vsk-ctl{width:var(--vsk-ctl-gr);height:var(--vsk-ctl-gr);min-width:0;box-sizing:border-box;border-radius:50%;border:1px solid rgba(255,255,255,.28);background:rgba(9,13,17,.72);box-shadow:0 6px 16px rgba(0,0,0,.22);color:#fff;display:grid;place-items:center;cursor:pointer;padding:0;line-height:0}
.vsk-seite .vsk-ctl:hover{background:rgba(9,13,17,.82);color:#fff}
.vsk-ctl span{display:grid;place-items:center;width:46%;height:46%}
.vsk-ctl svg,.vsk-bot svg,.vsk-x svg{width:100%;height:100%}
/* Bot-Knopf quer: Kreis unter der Infofläche, Durchmesser = deren Breite oder der Platz bis zum Angebot (der kleinere Wert),
   mittig in deren Spalte. Hochkant überschreibt Lage und Mass (unten). */
.vsk-seite .vsk-bot{position:absolute;z-index:4;right:calc(3cqw + (19cqw - var(--vsk-kreis)) / 2);top:var(--vsk-kreis-oben);width:var(--vsk-kreis);height:var(--vsk-kreis);min-width:0;min-height:44px;box-sizing:border-box;padding:0;border:0;border-radius:50%;background:var(--vsk-bot-grund);color:#fff;display:flex;align-items:center;justify-content:center;gap:.5em;cursor:pointer;font:inherit;font-weight:600;font-size:clamp(13px,1.25cqw,17px);line-height:1.15;text-align:left;text-transform:none;letter-spacing:normal;box-shadow:0 8px 22px rgba(0,0,0,.3);transition:background .2s ease}
.vsk-seite .vsk-bot:hover{background:var(--vsk-bot-hover);color:#fff}
.vsk-bot-icon{flex:0 0 auto;display:grid;place-items:center;width:1.3em;height:1.3em;line-height:0}
.vsk-bot-text{transition:opacity .35s ease}
.vsk-bot-name{display:none}
.vsk-bot-text.is-weg{opacity:0}
/* Mauszeiger unten rechts am Kreis, Teil des Knopfs (klickt wie der Kreis). Breite 18 % des Durchmessers, Höhe nach dem
   Seitenverhältnis des Pfeils (20:28). Lage gesucht und gemessen (isPointInFill über die Pfeilform): 50 % der Pfeilfläche
   liegen auf dem Kreis; unten bleibt der Pfeil über der Unterkante des Knopfs (verdeckt also nichts darunter), rechts ragt
   er 2 % des Durchmessers über das Quadrat hinaus (dort liegt quer und hochkant nichts). Grösser (24 %) drückte quer die
   Schrift im Kreis von 22.5 auf 14 px, weil kanal.js die Texte um den Pfeil herum misst (frei()). */
.vsk-bot-zeiger{position:absolute;left:84%;top:66%;width:18%;height:25.2%;line-height:0;color:var(--vsk-bot-grund)}
.vsk-ctl:focus-visible,.vsk-bot:focus-visible{outline:3px solid #fff;outline-offset:2px}
/* Chat-Fläche: links neben Infofläche/Kreis/Angebot (verdeckt keins davon) und rechts von Pause/Ton. Oberkante = Kreis-Oberkante,
   von dort nach unten über die Videounterkante hinaus auf den Seitenhintergrund. */
.vsk-chat{position:absolute;z-index:3;right:23.2cqw;top:var(--vsk-kreis-oben);width:var(--vsk-spalte);height:var(--vsk-chat-jetzt,calc(var(--vsk-chat-h) / 2));box-sizing:border-box;background:#fff;color:#13171A;border-radius:16px;overflow:hidden;box-shadow:0 12px 40px rgba(0,0,0,.28);clip-path:inset(0 0 0 100% round 16px);opacity:0;visibility:hidden;transition:clip-path .45s cubic-bezier(.2,.8,.2,1),opacity .25s ease,height .45s ease,visibility 0s linear .45s}
.vsk-chat.is-open{clip-path:inset(0 0 0 0 round 16px);opacity:1;visibility:visible;transition:clip-path .45s cubic-bezier(.2,.8,.2,1),opacity .25s ease,height .45s ease,visibility 0s}
/* Das bestehende Widget der Kaufbegleitung in der Chat-Fläche: dieselbe Datei, nur die feste Ecke aufgehoben. */
.vsk-chat .vskb-panel{position:relative!important;inset:auto!important;right:auto!important;bottom:auto!important;z-index:auto!important;width:100%!important;max-width:none!important;height:100%!important;max-height:none!important;border-radius:16px;box-shadow:none}
/* Eingabefeld beim Scrollen über dem schwebenden Sprachumschalter der Seite (TranslatePress, unten fest) halten. */
.vsk-chat .vskb-foot input,.vsk-seite .vsk-angebot{scroll-margin-bottom:72px}
/* tv-kanal-startseite-0210: Der Launcher der Kaufbegleitung ist nur aus, solange der Kanal mindestens zur Hälfte im Bild ist —
   dann ist der Kreis der Eingang. Sonst steht er wie auf jeder Seite. Beide öffnen dasselbe Panel (eine Sitzung, kanal.js).
   Das HTML ist zeitlos (erstes Segment): Karten, Punkte, Bot-Text und Platzhalter bleiben unsichtbar, bis kanal.js die Stelle
   nach der Uhr des Besuchers gesetzt hat (Klasse ist-bereit). */
body.vsk-kanal-im-bild .vskb-launch{display:none!important}
/* tv-kanal-karte-0610: ebenso, solange die offene Chat-Fläche des Kanals im Bild ist (kanal.js launcherSetzen) — der Launcher läge sonst hochkant über «Senden». */
body.vsk-chat-im-bild .vskb-launch{display:none!important}
/* tv-kanal-karten-760-0610 Nachtrag 2: hochkant ebenso der schwebende Sprachumschalter (TranslatePress, unten fest) — er lag auf dem Handy
   über «Jetzt Angebot sichern». Der Umschalter hängt an body, ausserhalb des Containers vsktv; darum hier die Fensterbreite statt der
   Container-Query: Auf der Startseite ist der Kanal unter 1025 px Fenster 108 px schmaler, also hochkant (Kanal < 760) genau bis 867 px
   Fenster. Quer bleibt der Umschalter immer stehen. Ändert sich der Seitenrand des Kanal-Abschnitts, muss diese Zahl nach. */
@media (max-width:867.98px){body.vsk-chat-im-bild .trp-floating-switcher{display:none!important}}
.vsk-tv:not(.ist-bereit) .vsk-card,.vsk-tv:not(.ist-bereit) .vsk-dots,.vsk-tv:not(.ist-bereit) .vsk-bot-text,.vsk-tv:not(.ist-bereit) .vsk-ph{visibility:hidden}
/* Platz unter dem Video: die zu 85 % herausragenden Knöpfe, mit offenem Chat dessen Teil unter der Videounterkante. */
.vsk-spacer{order:1;height:calc(var(--vsk-ang-h) * .85 + 16px);transition:height .45s ease}
.vsk-tv.chat-open .vsk-spacer{height:max(calc(var(--vsk-ang-h) * .85 + 16px),calc(var(--vsk-chat-unten) + 16px))}
.vsk-seite .vsk-angebot{position:absolute;z-index:5;right:3cqw;top:calc(56.25cqw - var(--vsk-ang-h) * .15);width:19cqw;box-sizing:border-box;height:var(--vsk-ang-h);min-height:0;padding:.2em .8em;border:0;border-radius:999px;background:var(--vsk-gruen);color:#fff;font:inherit;font-weight:600;font-size:clamp(14px,1.35cqw,18px);line-height:1.15;text-transform:none;letter-spacing:normal;cursor:pointer;box-shadow:0 8px 22px rgba(0,0,0,.3);transition:transform .2s ease}
.vsk-seite .vsk-angebot:hover{transform:translateY(-1px);background:var(--vsk-gruen-hover);color:#fff}
.vsk-angebot:focus-visible{outline:3px solid #fff;outline-offset:2px}
.vsk-form{order:2;align-self:flex-end;width:clamp(320px,46cqw,640px);margin:0 3cqw 0 0;box-sizing:border-box;background:#fff;color:#13171A;border-radius:16px;box-shadow:0 14px 34px rgba(0,0,0,.16);overflow:hidden;max-height:0;opacity:0;visibility:hidden;transition:max-height .5s cubic-bezier(.2,.8,.2,1),opacity .25s ease,margin .5s ease,visibility 0s linear .5s}
/* Prototyp: max-height 720px für den Platzhalter. Das echte Fluent-Formular ist länger; offen scrollt es in sich. */
.vsk-form.is-open{max-height:2400px;opacity:1;visibility:visible;margin-top:12px;transition:max-height .5s cubic-bezier(.2,.8,.2,1),opacity .25s ease,margin .5s ease,visibility 0s}
.vsk-form-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 8px 8px 18px}
.vsk-form-kicker{font-size:13px;letter-spacing:.06em;color:#5B6369}
.vsk-form-title{font-weight:600;font-size:18px}
.vsk-seite .vsk-x{width:44px;height:44px;min-width:0;border:0;background:transparent;border-radius:50%;display:grid;place-items:center;cursor:pointer;color:#13171A;padding:0;line-height:0}
.vsk-seite .vsk-x:hover{background:#EEF0EC;color:#13171A}
.vsk-x:focus-visible{outline:3px solid var(--vsk-akzent);outline-offset:2px}
.vsk-x svg{width:20px;height:20px}
.vsk-farben{display:flex;flex-wrap:wrap;gap:8px;padding:0 18px 8px}
.vsk-seite .vsk-farbe{min-height:44px;padding:.4em 1em;border:1px solid #CDD2CC;border-radius:999px;background:#fff;color:#13171A;font:inherit;font-size:15px;text-transform:none;letter-spacing:normal;cursor:pointer}
.vsk-seite .vsk-farbe:hover{border-color:var(--vsk-akzent);background:#fff;color:#13171A}
.vsk-seite .vsk-farbe[aria-pressed="true"]{border-color:var(--vsk-akzent);background:var(--vsk-akzent);color:#fff}
.vsk-farbe:focus-visible{outline:3px solid var(--vsk-akzent);outline-offset:2px}
.vsk-form-body{padding:4px 18px 18px}
.vsk-hinweis{padding:12px 16px;border:2px solid #da1c4b;border-radius:8px;background:#fff}
/* Im Kreis: Symbol oben, Text darunter, beides mittig. Schriftgrösse und Breite des Textblocks (--vsk-kreis-text) setzt
   kanal.js: die grösste Schrift, bei der alle Texte mit jedem Kartentitel und «Schliessen» im Kreis stehen, höchstens 26 px. Unter 14 px zeigt der Kreis nur das Symbol
   (.nur-symbol), und der Text läuft als Sprechblase links daneben — wie hochkant. */
@container vsktv (min-width:760px){
.vsk-seite .vsk-bot{flex-direction:column;gap:calc(var(--vsk-kreis) * .04);font-weight:700;font-size:calc(var(--vsk-kreis) * .08);line-height:1.15;text-align:center}
.vsk-bot-icon{width:max(40px,calc(var(--vsk-kreis) * .18));height:max(40px,calc(var(--vsk-kreis) * .18))}
.vsk-bot-text{box-sizing:border-box;width:calc(var(--vsk-kreis) * var(--vsk-kreis-text,.8));overflow-wrap:break-word;hyphens:manual}
.vsk-bot.nur-symbol .vsk-bot-icon{width:calc(var(--vsk-kreis) * .5);height:calc(var(--vsk-kreis) * .5)}
.vsk-bot.nur-symbol .vsk-bot-text{position:absolute;right:calc(100% + 10px);top:50%;transform:translateY(-50%);width:max-content;max-width:min(260px,40cqw);padding:8px 12px;border-radius:14px;background:#fff;color:#13171A;font-size:14px;font-weight:600;line-height:1.25;text-align:left;box-shadow:0 6px 18px rgba(0,0,0,.28);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .35s ease,visibility 0s linear .35s}
.vsk-bot.nur-symbol .vsk-bot-text::after{content:"";position:absolute;right:-6px;top:50%;margin-top:-6px;border:6px solid transparent;border-right:0;border-left-color:#fff}
.vsk-bot.nur-symbol.blase-an .vsk-bot-text{opacity:1;visibility:visible;transition:opacity .35s ease,visibility 0s}
/* Nachtrag 2: bei offenem Chat Formular in der Spalte des Chats, Oberkante = Chat-Unterkante + 8 px (der Abstand rechnet
   den Platzhalter darüber heraus), Übergang im Takt von Chat und Platzhalter (.45s). */
.vsk-tv.chat-open .vsk-form{width:var(--vsk-spalte);margin-right:23.2cqw;transition:max-height .5s cubic-bezier(.2,.8,.2,1),opacity .25s ease,margin .45s ease,visibility 0s linear .5s}
.vsk-tv.chat-open .vsk-form.is-open{margin-top:calc(var(--vsk-chat-unten) + 8px - max(calc(var(--vsk-ang-h) * .85 + 16px),calc(var(--vsk-chat-unten) + 16px)));transition:max-height .5s cubic-bezier(.2,.8,.2,1),opacity .25s ease,margin .45s ease,visibility 0s}
}
@container vsktv (max-width:759px){
.vsk-stage{border-radius:0}
.vsk-ph{padding-right:0}
.vsk-bike{width:44cqw}
.vsk-info{position:relative;right:auto;top:auto;width:auto;height:140px;margin:calc(14cqw + 24px) 10px 0}
.vsk-ctl-row{left:10px;top:calc(56.25cqw - 7px);gap:10px}
.vsk-seite .vsk-ctl{width:44px;height:44px}
/* Chat-Knopf: Kreis, 28 % der Videobreite, rechts bündig mit der Grafikspalte des Clips (x 1217 von 1280). Pause: Oberkante
   7 px über der Videounterkante, 44 px hoch → Mitte 15 px, Unterkante 37 px unter der Videounterkante; die Kreismitte liegt
   auf der Mitte von Pause. Darunter beginnt die Infofläche 9 px unter dem Kreis (oben: margin). Im Kreis «E-Bike» /
   «Beratung» unter dem Velo-Symbol (Schriftgrösse aus kanal.js), bei offenem Chat ×. Der Text steht dauernd als
   Sprechblase links daneben (kanal.js: Wechsel etwa alle 90 s, bei offenem Chat aus): zwischen Pause (x 10–54) und Kreis, Unterkante = Unterkante Pause (14cqw − 22 px
   über der Kreis-Unterkante), mindestens 44 px hoch, längere Texte wachsen nach oben ins Video; der Zipfel zeigt auf die
   Kreismitte (22 px über der Unterkante). */
.vsk-seite .vsk-bot{width:28cqw;height:28cqw;min-height:0;padding:0;right:4.92cqw;top:calc(56.25cqw + 15px - 14cqw);border-radius:50%;flex-direction:column;justify-content:center;gap:calc(28cqw * .015);font-size:14px}
.vsk-bot-icon{width:calc(28cqw * .55);height:calc(28cqw * .55)}
.vsk-bot-icon[data-teil="icon-chat"]{width:calc(28cqw * .24);height:calc(28cqw * .24)}
.vsk-bot-name{display:flex;flex-direction:column;align-items:center;font-weight:700;font-size:15px;line-height:1.1;text-align:center;white-space:nowrap;color:#fff}
.vsk-bot-text{position:absolute;right:calc(100% + 10px);bottom:calc(14cqw - 22px);box-sizing:border-box;display:flex;align-items:center;min-height:44px;width:max-content;max-width:calc(100cqw - 4.92cqw - 28cqw - 10px - 64px);padding:8px 12px;border-radius:14px;background:#fff;color:#13171A;font-weight:600;line-height:1.25;box-shadow:0 6px 18px rgba(0,0,0,.28);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .35s ease,visibility 0s linear .35s}
.vsk-bot-text::after{content:"";position:absolute;right:-6px;bottom:16px;border:6px solid transparent;border-right:0;border-left-color:#fff}
.vsk-bot.blase-an .vsk-bot-text{opacity:1;visibility:visible;transition:opacity .35s ease,visibility 0s}
.vsk-chat{position:relative;left:auto;right:auto;top:auto;height:auto;margin:0 10px;clip-path:none;max-height:0;overflow:hidden;transition:max-height .45s cubic-bezier(.2,.8,.2,1),opacity .25s ease,margin .45s ease,visibility 0s linear .45s}
.vsk-chat.is-open{clip-path:none;max-height:470px;height:440px;margin-top:10px;transition:max-height .45s cubic-bezier(.2,.8,.2,1),opacity .25s ease,margin .45s ease,visibility 0s}
.vsk-chat .vskb-panel{border-radius:16px}
.vsk-spacer{height:0}
.vsk-tv.chat-open .vsk-spacer{height:0}
.vsk-info{order:1}
.vsk-seite .vsk-angebot{order:4;position:relative;right:auto;top:auto;width:auto;height:auto;margin:10px 10px 0;min-height:52px;font-size:17px}
.vsk-form{order:5;align-self:stretch;width:auto;margin:0 10px}
.vsk-form.is-open{margin-top:10px}
.vsk-chat{order:3;width:auto}
.vsk-spacer{order:6}
}
/* Textwechsel in der Sprechblase (hochkant, quer im Ersatz): die Blase blendet kurz aus und mit dem nächsten Text ein. */
.vsk-seite .vsk-bot.blase-an .vsk-bot-text.is-weg{opacity:0}
@media (prefers-reduced-motion:reduce){.vsk-bike{animation:none}.vsk-bot-text{transition:none}.vsk-card,.vsk-dot,.vsk-bot,.vsk-chat,.vsk-chat.is-open,.vsk-form,.vsk-form.is-open,.vsk-spacer,.vsk-angebot{transition:none}}
/* tv-kanal-startseite-0210 Nachtrag 2 (Tim 02.10. ~13:53, «Werden die Grafiken noch etwas gefüllt?»): keine leere Mitte. Der Inhalt
   folgt dem Titel im Abstand von etwa einer Zeile (statt unten anzuschlagen), der Block steht mittig in der Karte; Preis, «Nur» und
   «Du sparst» grösser, Zeilen grösser (Technik bis 5, Service 4). Der Preis bleibt einzeilig: 2.65cqw ist die grösste Schrift, bei der
   «CHF 2'490» in Montserrat 700 in die 19cqw breite Karte passt. Stil unverändert (Farben, Schrift, Trennlinien, Transparenz, Punkte).
   Leere Zeilen-Plätze (Bike mit weniger Technik-Zeilen) sind aus. Hochkant bleibt die Infofläche 140 px hoch: Zeilen zweispaltig,
   Schrift kleiner. */
.vsk-card{justify-content:center}
.vsk-preis,.vsk-lines{margin-top:clamp(6px,1.2cqw,16px)}
.vsk-pre{font-size:clamp(12px,1.35cqw,18px)}
.vsk-big{font-size:clamp(20px,2.65cqw,36px)}
.vsk-badge{font-size:clamp(13px,1.4cqw,19px);line-height:1.2;padding:.32em .8em;border-radius:.9em}
.vsk-lines{font-size:clamp(13px,1.5cqw,19px)}
.vsk-line:empty{display:none}
@container vsktv (max-width:759px){
.vsk-card{justify-content:flex-start;padding:10px 12px 10px;gap:2px}
.vsk-kicker{font-size:11px}
.vsk-ttl{font-size:16px}
.vsk-preis{margin-top:4px}
.vsk-pre{font-size:12px}
.vsk-big{font-size:28px}
.vsk-badge{font-size:13px;margin-top:5px}
.vsk-lines{margin-top:4px;display:grid;grid-template-columns:1fr 1fr;column-gap:10px;row-gap:2px;font-size:12px;line-height:1.12}
.vsk-line{padding-top:2px}
}
/* Nachtrag 3 (Tim 02.10. ~14:00): Hinweis «Ton an» oben links im Video, Stil wie Pause (dunkel, halbtransparent, weiss). Oben links ist in
   allen fünf Clips frei (Bildaufbau tv-kanal-sendung-0210: Einblendungen unten links, DAUERWERBESENDUNG oben rechts); die
   Vollbild-Tafel «VELO LOFT» beginnt erst bei ~5cqw — der Hinweis endet darüber (1.4cqw + 3.2cqw). */
.vsk-seite .vsk-ton-hinweis{position:absolute;z-index:3;left:1.5cqw;top:1.4cqw;display:flex;align-items:center;gap:.45em;box-sizing:border-box;height:clamp(32px,3.2cqw,44px);min-height:0;margin:0;padding:0 .95em 0 .75em;border-radius:999px;border:1px solid rgba(255,255,255,.28);background:rgba(9,13,17,.72);box-shadow:0 6px 16px rgba(0,0,0,.22);color:#fff;font:inherit;font-weight:600;font-size:clamp(13px,1.15cqw,16px);line-height:1;text-transform:none;letter-spacing:normal;cursor:pointer}
.vsk-seite .vsk-ton-hinweis:hover{background:rgba(9,13,17,.82);color:#fff}
.vsk-ton-hinweis svg{width:1.3em;height:1.3em;flex:none}
@container vsktv (max-width:759px){.vsk-seite .vsk-ton-hinweis{left:10px;top:10px;height:32px;font-size:13px}}
/* Nachtrag 5 (Tim 02.10. ~15:05): kein Pause-Knopf; der Hinweis ist der Ton-Knopf an/aus. Mit Ton nur das Lautsprecher-Symbol, rund. */
.vsk-ton-hinweis .vsk-ton-icon{display:flex}
.vsk-seite .vsk-ton-hinweis.ist-an{padding:0;width:clamp(32px,3.2cqw,44px);justify-content:center}
@container vsktv (max-width:759px){.vsk-seite .vsk-ton-hinweis.ist-an{width:32px}}
/* Messung auf der echten Vorschau (02.10. ~17:05): Das Theme (Astra) vererbt line-height 1.7 — Kicker, «Nur» und Abzeichen wurden
   höher als in der Testseiten-Vorschau, hochkant stand die Preis-Karte 8 px über (Abzeichen abgeschnitten). Zeilenhöhe in der Karte
   fest, unabhängig vom Theme. */
.vsk-seite .vsk-card{line-height:1.25}
@container vsktv (max-width:759px){.vsk-seite .vsk-card{line-height:1.15}}
/* tv-kanal-karten-760-0610: Quer knapp über der Schwelle (Kanal 760–859 px, Fenster ab ~868 px) ist die Infofläche 144–163 px breit,
   jede Technik-Zeile bricht zweizeilig um, und die fünfzeilige Karte war bis 30 px höher als die Fläche (AktivPlus/ProTour je 15 px
   oben und unten abgeschnitten). Hier rücken nur die Zeilen enger zusammen; Schrift bleibt 13 px, Inhalt, Farben und Trennlinien bleiben.
   Ab 826 px passt es auch ohne, der Bereich reicht bis 859 px, weil der Umbruch an der Schrift hängt (live 0.45 px höher gemessen). */
@container vsktv (760px <= width < 860px){
.vsk-seite .vsk-card .vsk-lines{margin-top:4px;gap:2px;line-height:1.15}
.vsk-seite .vsk-card .vsk-line{padding-top:2px}
}
/* tv-kanal-karte-0610 (Tim 06.10.2026, «Ist es der gleiche bot? Das bestellformular sieht zum beispiel anders aus... bitte optimieren»):
   Es ist derselbe Bot — ein Panel, eine Sitzung. Im Kanal hängt das Panel aber im Elementor-Bereich der Startseite, unten an body.
   Dort greifen Regeln, die unten nicht greifen, und sie schlagen widget.css an Spezifität: `.elementor a` (keine Unterstreichung),
   `.elementor img` (Höhe auto, Ecken eckig), `.entry-content` (overflow-wrap) und die Textfarbe der Kanal-Fläche. Der Bot unten ist das
   Mass: Das Panel bekommt die Textfarbe der Seite (body, Astra-Farbe 3), und die Werte aus widget.css, die die Seite im Kanal
   überdeckt, stehen hier noch einmal — wörtlich, nur mit `.vsk-chat .vskb-panel` davor. tests/test_widget_gleich.py prüft, dass jede
   Zeile hier gleich wie in widget.css lautet und keine Angabe dieser Selektoren fehlt; die Probe sim/vergleich-probe.js misst es im Browser.
   Rahmenschatten der Chat-Fläche = Schatten des Panels unten (oben in .vsk-chat). Breite, Lage und Höhe bleiben Sache des Kanals. */
.vsk-chat .vskb-panel{color:var(--ast-global-color-3,#404040);overflow-wrap:normal}
/* widget-gleich: anfang */
.vsk-chat .vskb-panel .vskb-link{color:#fb2056;text-decoration:underline;text-underline-offset:2px}
.vsk-chat .vskb-panel .vskb-link:hover{text-decoration-thickness:2px}
.vsk-chat .vskb-panel .vskb-action a,.vsk-chat .vskb-panel .vskb-action button{display:inline-block;background:#191919;color:#fff;text-decoration:none;border:none;border-radius:20px;padding:8px 14px;font-size:13px;cursor:pointer}
.vsk-chat .vskb-panel .vskb-co-add a{color:var(--co-add-hint,#1d4ed8);text-decoration:underline;cursor:pointer}
.vsk-chat .vskb-panel .vskb-co-legal a{color:var(--co-legal,#6b7280);text-decoration:none}
.vsk-chat .vskb-panel .vskb-co-legal a:hover{text-decoration:underline}
.vsk-chat .vskb-panel .vskb-co-fallback a{color:var(--co-btn-primary,#1d4ed8)}
.vsk-chat .vskb-panel .vskb-co-img{width:100%;max-height:180px;object-fit:contain;border-radius:8px;background:#f0f0f0}
.vsk-chat .vskb-panel .vskb-co-sum-img{width:36px;height:36px;object-fit:contain;border-radius:6px;background:#fff;flex-shrink:0}
.vsk-chat .vskb-panel .vskb-k-bild{width:72px;height:56px;object-fit:contain;border-radius:8px;background:#f0f0f0;flex-shrink:0}
@media(max-width:400px){.vsk-chat .vskb-panel .vskb-co-img{max-height:150px}}
@media(max-width:400px){
  .vsk-chat .vskb-panel .vskb-k-bild{width:56px;height:44px}
}
/* widget-gleich: ende */
/* Ohne eigene Unterstreichung in widget.css: unten unterstreicht der Browser (Vorgabe für Links), im Kanal nähme `.elementor a` sie weg. */
.vsk-chat .vskb-panel .vskb-co-fallback a{text-decoration:underline}
/* Steht eine Bestellkarte im Verlauf (kanal.js: .chat-karte), ist die Chat-Fläche hochkant so hoch wie das Panel unten: 520 px, höchstens
   Fensterhöhe − 120 px (widget.css .vskb-panel), nie niedriger als ohne Karte. Quer rechnet kanal.js dieselbe Höhe (chatWachsen). */
@container vsktv (max-width:759px){
.vsk-tv.chat-karte .vsk-chat.is-open{height:max(440px,min(520px,calc(100vh - 120px)));max-height:max(470px,min(520px,calc(100vh - 120px)))}
}