/* Schritt Hero 5 (Tims Handy-Durchgang vom 28.10.) – Ergänzungen zu leistungen.css und so-bauen-wir.css. Die beiden Dateien
   werden aus den Prototypen erzeugt (werkzeug/css-zusammenfuehren.mjs); was dieser Schritt ändert, steht hier und gilt danach. */

/* ================= 5 · Schuh: Der Hintergrund bleibt von Anfang an =================
   Vorher wechselte das Fenster beim Heraustreten des Schuhs auf eine weiße Produktseite. Jetzt bleibt die Eishöhle der VEYRA-Seite
   stehen (dieselbe Aufnahme ohne den Schuh, weich: werkzeug/grund-ohne-schuh.py), die Produktseite legt sich mit heller Schrift
   darüber. */
.lk-fenster--web .web-grund { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 46%;
  opacity: 0; transform: scale(1.04); transition: opacity .8s var(--ease), transform 1.2s var(--ease); }
.lk--web.is-raus .web-grund { opacity: 1; transform: scale(1.08); }
.lk--web.is-raus .web-seite { opacity: 1; transform: none; filter: none; }
.lk--web.is-raus .web-held { transform: scale(1.08); }
.lk-fenster--web .web-produkt { z-index: 2; pointer-events: none; color: #fff; opacity: 0; transition: opacity .6s var(--ease) .2s;
  background: linear-gradient(180deg, #0612268c 0%, #06122600 24%, #06122600 46%, #040c1cf2 100%); }
.lk--web.is-raus .web-produkt { opacity: 1; }
.web-produkt .web-nav { color: #ffffffd9; }
.web-produkt .web-nav b { color: #fff; }
.web-produkt .web-tuete { box-shadow: inset 0 0 0 1px #ffffff59; }
.web-produkt .web-tuete i { background: var(--neon); color: var(--tinte); }
.web-produkt .wp-boden { background: radial-gradient(closest-side, #000818b3, #00081800); }
.web-produkt .wp-preis { color: #ffffffbf; }
.web-produkt .wp-preis b { color: #fff; }
.web-produkt .wp-groessen span { background: #ffffff1f; box-shadow: inset 0 0 0 1px #ffffff47; color: #fff; }
.web-produkt .wp-groessen .is-gewaehlt { background: var(--kobalt); box-shadow: none; }
.web-produkt .wp-knopf { align-self: flex-start; min-width: 54%; padding: 0 20px; background: #fff; color: #0b1a3a; }

/* ================= 6 · Ranking: auswählen und abspielen =================
   Die Maßnahmen sind Knöpfe („Wähle aus, was du erreichen willst“); jede hebt den Eintrag einen Platz. „Abspielen“ zeigt 8 → 1. */
.rang-wahl-titel { margin-top: 22px !important; font-size: 13.5px; font-weight: 600; color: #f4f4efbf; }
.rang-mass { margin-top: 10px; }
.rang-mass li { display: block; opacity: 1; }
.rang-mass li::before { content: none; display: none; }
.rang-wahl { display: grid; grid-template-columns: 22px 1fr; column-gap: 12px; align-items: start; width: calc(100% + 16px); margin: 0 -8px; padding: 6px 8px;
  border: 0; border-radius: 12px; background: none; color: var(--papier); font: inherit; text-align: left; cursor: pointer; opacity: .6;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation; transition: opacity .25s var(--ease), background-color .2s ease; }
.rang-wahl::before { content: ''; grid-row: 1 / 3; width: 22px; height: 22px; margin-top: 1px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px #f4f4ef80;
  transition: background-color .3s var(--ease), box-shadow .3s var(--ease), transform .14s var(--ease); }
.rang-wahl b { font-weight: 600; font-size: 15px; }
.rang-wahl span { font-size: 14px; color: #f4f4efb3; }
.rang-mass li.is-an .rang-wahl { opacity: 1; }
.rang-mass li.is-an .rang-wahl::before { background: var(--neon) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 6.2 5.1 8.2 9 4' fill='none' stroke='%2320211f' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 15px no-repeat; box-shadow: 0 0 16px -2px #d7f52a99; }
.rang-wahl:active::before { transform: scale(.88); }
.rang-wahl:focus-visible { outline: 2px solid var(--neon); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .rang-wahl:hover { opacity: 1; background: #ffffff0f; } }
.sbw-knopf--zweit { background: transparent; color: var(--papier); box-shadow: inset 0 0 0 1.5px #f4f4ef59; }
@media (hover: hover) and (pointer: fine) { .sbw-knopf--zweit:hover { background: #ffffff14; } }
.sbw-knopf[aria-busy='true'] { cursor: progress; }
/* sofortige Rückmeldung beim Berühren (auch auf dem iPhone, wo :active ohne Touch-Hörer nicht greift) */
.sbw-knopf.is-gedrueckt { transform: scale(.96); }

/* ================= 8 · Programm: sofort reagieren, am Handy tippen statt ziehen ================= */

/* die Fenster setzen sich sofort in Bewegung (kürzer, ohne Nachlauf), das Programm wächst aus der Mitte */

/* der Knopftext wechselt („Noch einmal“): feste Breite, damit die Zeile nicht umbricht und die Bühne nicht springt */
[data-zusammen] { min-width: 13.2em; }
[data-rang-abspielen] { min-width: 10.5em; }

@media (max-width: 900px) {
  /* Ranking am Handy: Gerät kompakt, die Auswahl direkt darunter – Liste und Knöpfe stehen zusammen im Bild */
  /* Reihenfolge: Titel, Ranking, „Abspielen“, Auswahl – erst danach der erklärende Satz, Preis und Hinweis */
  .sbw-rang .rang-text > h3 { margin-bottom: 12px; font-size: 24px; }
  .rang-geraet { order: 0; margin-bottom: 26px; padding: 8px 8px 32px; }
  .rang-satz { order: 6; margin: 14px 0 0 !important; font-size: 14px !important; }
  .rang-suche { height: 34px; margin-bottom: 6px; font-size: 12.5px; }
  .rang-e { height: 40px; padding: 4px 10px 0 34px; }
  .rang-e::before { top: 8px; }
  .rang-url { font-size: 9.5px; } .rang-t { font-size: 12.5px; }
  .rang-z { display: none; }
  .rang-liste { padding-bottom: 40px; }
  .rang-du { top: calc(7 * 40px); }
  .rang-ki { bottom: -20px; padding: 10px 12px 11px; }
  .rang-ki-text { font-size: 13.5px; }
  .rang-knoepfe { order: 1; margin: 0 0 12px; gap: 10px 16px; }
  .rang-knoepfe [data-rang-abspielen] { min-height: 46px; padding: 0 22px; }
  .rang-wahl-titel { order: 2; margin: 0 0 8px !important; font-size: 13px; }
  .rang-mass { order: 3; margin-top: 0; grid-template-columns: 1fr 1fr; gap: 6px; }
  .rang-preis { order: 7; }
  .rang-ehrlich { order: 8; }
  .rang-wahl { width: 100%; margin: 0; min-height: 46px; align-items: center; grid-template-columns: 18px 1fr; column-gap: 8px; padding: 6px 10px;
    background: #ffffff0d; box-shadow: inset 0 0 0 1px #ffffff1f; opacity: .78; }
  .rang-wahl::before { grid-row: auto; width: 18px; height: 18px; margin: 0; }
  .rang-mass li.is-an .rang-wahl { background: #d7f52a1a; box-shadow: inset 0 0 0 1px #d7f52a73; }
  .rang-mass li.is-an .rang-wahl::before { background-size: 12px; }
  .rang-wahl b { font-size: 12.5px; line-height: 1.2; }
  .rang-wahl span { display: none; }
  .sbw-knopf--zweit { display: none; }
}
@media (prefers-reduced-motion: reduce) { .rang-wahl, .rang-wahl::before { transition: none; } }

/* ================= 7 · Station: größere, detailliertere Blume bei „Lernt dazu“ ================= */
.st-blume { width: 300px; height: 350px; top: 26%; }
.st-knoepfe button { font-size: 14.5px; }
.st-text h3 { max-width: 15ch; }
@media (max-width: 900px) {
  .st-blume { right: 12px; top: 268px; width: 156px; height: 182px; }
  .st-text h3 { font-size: 22px; max-width: none; }
  .st-knoepfe button { font-size: 13.5px; }
}
/* Reparatur 02.11.2026 (Befund 19): „Freigeben“ ist per Tastatur erreichbar – mit demselben Fokusring wie die übrigen Knöpfe der Seite */
.chat-frei:focus-visible { outline: 3px solid #d7f52a; outline-offset: 3px; }