/* Das Vertragshaus — Handy-Auswahl im Stil einer Spieler-Auswahl (seit 25.10.2026).
   Inhalt erzeugt _tools/handy-deals.py (Handys-Seite + „Deal der Woche“ auf der Startseite), Umschalten: assets/js/handy-auswahl.js.
   Die Arena nimmt den Farbton des gewählten Netzes an (--netz, weich überblendet), darüber die Speedlines.
   Regel (Apple-Richtlinien, Entscheidung Inhaberin 25.10.2026): NICHTS liegt über einem Gerätebild – Netz-Logo als Schild an der
   Werte-Karte, Etiketten/P1 oberhalb des Bildes, Figur daneben bzw. am Handy unter der Karte. Eine schwarze Vitrine wurde probiert
   und auf Wunsch wieder entfernt; Schweben, Schatten und Aufblitzen bleiben.
   Ohne JS: alle Geräte und Angebote untereinander. */
@property --netz{ syntax:'<color>'; inherits:true; initial-value:#0a5cff; }
@keyframes hw-schweben{ 0%,100%{ translate:0 0; } 50%{ translate:0 -10px; } }
@keyframes hw-blitz{ 0%{ filter:brightness(2.2) saturate(.2); } 100%{ filter:none; } }
@keyframes hw-fuellen{ from{ width:0; } }
@keyframes hw-puls{ 50%{ outline-color:var(--cyan); } }

.hw{ position:relative; }
.hw-titel{ text-align:center; margin-bottom:24px; }
.hw-jp{ font:900 .95rem var(--font-jp); letter-spacing:5px; color:var(--cyan); }
.hw-titel h2{ margin:6px 0 0; font-size:clamp(2.4rem,5.4vw,4.4rem); text-transform:uppercase; }
.hw-titel em{ font-style:normal; color:var(--magenta); }

/* ---------- Arena ---------- */
.hw-arena{ position:relative; display:grid; grid-template-columns:250px minmax(0,1fr); align-items:end; min-height:540px; scroll-margin-top:96px;
  border:4px solid var(--ink); border-radius:24px; transition:--netz .6s ease;
  box-shadow:12px 12px 0 var(--ink), 0 0 60px color-mix(in srgb, var(--netz) 40%, transparent);
  background:
    repeating-conic-gradient(from 0deg at 64% 46%, rgba(255,255,255,.1) 0deg 3deg, transparent 3deg 10deg),
    radial-gradient(75% 95% at 64% 46%, color-mix(in srgb, var(--netz) 80%, #fff) 0%, color-mix(in srgb, var(--netz) 62%, #12062e) 42%, color-mix(in srgb, var(--netz) 22%, #0b0420) 100%); }
.hw-figur{ position:relative; z-index:2; display:block; align-self:end; justify-self:center; height:500px; width:auto; max-width:none;
  filter:drop-shadow(6px 6px 0 var(--ink)); }
.hw-buehnen{ position:relative; min-width:0; }

/* ---------- Bühne (ein Gerät) ---------- */
.hw-buehne{ position:relative; display:grid; grid-template-columns:minmax(0,1fr) minmax(300px,390px); gap:24px; align-items:center; padding:34px 34px 34px 8px; }
.hw-buehne + .hw-buehne{ border-top:3px dashed rgba(255,255,255,.25); }            /* nur ohne JS sichtbar */
.hw--js .hw-buehne:not(.ist-aktiv){ display:none; }
.hw--js .hw-buehne + .hw-buehne{ border-top:0; }
.hw-buehne.blitz{ animation:hw-blitz .45s ease-out; }
.hw-geist{ position:absolute; left:0; right:0; top:18px; overflow:hidden; white-space:nowrap; pointer-events:none;
  font:400 clamp(4rem,9vw,8.4rem)/.85 var(--font-display); text-transform:uppercase; color:transparent; -webkit-text-stroke:2px rgba(255,255,255,.24); }
.hw-spot{ position:relative; display:grid; place-items:center; min-height:420px; }
.hw-spot::before{ content:""; position:absolute; width:82%; aspect-ratio:1; border-radius:50%; background:radial-gradient(circle, rgba(255,255,255,.5), transparent 64%); }
.hw-spot::after{ content:""; position:absolute; bottom:14px; width:58%; height:24px; border-radius:50%; background:rgba(7,3,15,.55); filter:blur(5px); }
.hw-geraet{ position:relative; z-index:1; display:block; max-height:400px; max-width:100%; width:auto; height:auto;
  filter:drop-shadow(8px 10px 0 var(--ink)); animation:hw-schweben 3.8s ease-in-out infinite; }
.hw-sticker{ display:block; padding:8px; background:#fff; border:3px solid var(--ink); border-radius:18px; box-shadow:5px 5px 0 var(--ink); rotate:-3deg; }
.hw-sticker img{ display:block; width:100%; height:100%; object-fit:contain; border-radius:10px; }
.hw-spot .hw-sticker{ width:300px; height:300px; }

/* ---------- Werte-Karte (das Netz-Logo hängt als Schild an ihr, nie am Gerät) ---------- */
.hw-karte{ position:relative; align-self:center; padding:20px 22px 22px; color:var(--paper); background:rgba(7,3,15,.9); border:3px solid var(--ink); border-radius:18px;
  box-shadow:7px 7px 0 var(--ink); }
.hw--js .hw-marke{ padding-right:110px; } .hw--js .hw-karte h3{ padding-right:96px; }   /* Platz fürs Netz-Schild */
.hw-marke{ margin:0; font:800 .78rem var(--font-body); letter-spacing:2px; text-transform:uppercase; color:var(--cyan); }
.hw-karte h3{ margin:4px 0 12px; font:400 2.4rem/1 var(--font-display); text-transform:uppercase; color:#fff; }
.hw-netze{ display:flex; flex-wrap:wrap; gap:8px; margin:0 0 16px; }
.hw-netze__titel{ width:100%; font:700 .8rem var(--font-body); color:var(--paper-2); }
.hw-netzwahl{ display:flex; align-items:center; gap:8px; padding:6px 10px; cursor:pointer; color:var(--ink); background:#fff; border:3px solid var(--ink); border-radius:10px;
  box-shadow:3px 3px 0 var(--ink); font:800 .9rem var(--font-body); transition:translate .12s, box-shadow .12s; }
.hw-netzwahl img{ height:20px; width:auto; }
.hw-netzwahl:hover{ translate:-1px -1px; box-shadow:4px 4px 0 var(--ink); }
.hw-netzwahl[aria-pressed="true"]{ background:color-mix(in srgb, var(--netz) 22%, #fff); outline:3px solid var(--netz); outline-offset:2px; }
.hw-netzwahl:focus-visible{ outline:3px solid var(--cyan); outline-offset:2px; }
.hw--js .hw-angebot:not(.ist-aktiv){ display:none; }
.hw-angebot + .hw-angebot{ margin-top:18px; padding-top:18px; border-top:2px dashed rgba(255,255,255,.2); }   /* nur ohne JS */
.hw--js .hw-angebot + .hw-angebot{ margin-top:0; padding-top:0; border-top:0; }
/* ohne JS steht das Schild in jedem Angebot; mit JS hängt das des gewählten Angebots oben an der Karte */
.hw-netzschild{ display:inline-flex; align-items:center; height:40px; margin:0 0 10px; padding:6px 10px; background:#fff;
  border:3px solid var(--ink); border-radius:12px; box-shadow:4px 4px 0 var(--ink); }
.hw-netzschild img{ display:block; height:100%; width:auto; }
.hw--js .hw-netzschild{ position:absolute; z-index:2; right:16px; top:-24px; height:56px; margin:0; padding:9px 14px; box-shadow:5px 5px 0 var(--ink); rotate:4deg; }
.hw-tarif{ display:flex; flex-wrap:wrap; align-items:center; gap:6px 8px; margin:0 0 14px; font-weight:800; }
.hw-etikett{ font:400 .8rem/1 var(--font-display); letter-spacing:1px; padding:4px 8px 3px; color:var(--ink); background:var(--lime); border-radius:5px; }
.hw-chip{ font:400 .8rem/1 var(--font-display); letter-spacing:1px; padding:4px 7px 3px; color:var(--ink); background:var(--cyan); border-radius:5px; }
.hw-werte{ margin:0 0 12px; }
.hw-werte div{ display:grid; grid-template-columns:auto 1fr; gap:3px 10px; margin-bottom:10px; }
.hw-werte dt{ font:800 .74rem var(--font-body); letter-spacing:1.2px; text-transform:uppercase; color:#b9a8e6; }
.hw-werte dd{ margin:0; text-align:right; font-weight:800; }
.hw-balken{ grid-column:1 / -1; height:13px; overflow:hidden; background:#2a1860; border:2px solid var(--ink); border-radius:4px; }
.hw-balken span{ display:block; height:100%; background:linear-gradient(90deg, var(--lime), var(--cyan)); animation:hw-fuellen .7s cubic-bezier(.16,1,.3,1); }
.hw-preis{ margin:6px 0 2px; font:400 3.2rem/1 var(--font-display); color:#fff; text-shadow:3px 3px 0 var(--magenta); }
.hw-preis span{ font-size:.5em; }
.hw-preis small{ margin-left:6px; font:600 .85rem var(--font-body); color:var(--paper-2); text-shadow:none; }
.hw-einmal{ margin:0 0 16px; font-weight:800; color:var(--lime); }
.hw-knopf{ width:100%; justify-content:center; }

/* ---------- Auswahlleiste (Etiketten und P1 oberhalb des Bildes) ---------- */
.hw-roster{ display:grid; grid-template-columns:repeat(auto-fit, minmax(126px, 1fr)); gap:16px; margin-top:30px; }
.hw-kachel{ position:relative; display:flex; flex-direction:column; align-items:center; gap:6px; padding:30px 8px 10px;
  color:var(--paper); cursor:pointer; font:inherit; border:3px solid var(--ink); border-radius:14px; box-shadow:4px 4px 0 var(--ink); transition:border-color .15s;
  background:linear-gradient(180deg, color-mix(in srgb, var(--netz) 58%, #1f1147) 0%, #0e0622 85%); }
.hw-kachel:hover{ border-color:var(--cyan); }
.hw-kachel:focus-visible{ outline:4px solid var(--cyan); outline-offset:3px; }
.hw-kachel.ist-aktiv{ outline:4px solid var(--magenta); outline-offset:3px; animation:hw-puls 1.2s steps(2) infinite; }
/* feste Pixel-Höhe: eine Prozent-Grenze griff in breiten Kacheln nicht – das Bild wuchs über Name und Preis (25.10.2026) */
.hw-kachel__fenster{ display:flex; align-items:center; justify-content:center; width:100%; height:108px; flex:none; }
.hw-kachel__bild{ display:block; max-width:100%; max-height:104px; width:auto; height:auto; object-fit:contain; filter:drop-shadow(3px 4px 0 var(--ink)); }
.hw-kachel .hw-sticker{ width:92px; height:92px; padding:3px; border-width:2px; rotate:0deg; box-shadow:none; }
.hw-kachel__name{ font:400 .95rem/1.05 var(--font-display); text-transform:uppercase; text-align:center; }
.hw-kachel__logos{ display:flex; gap:4px; }
.hw-kachel__logos img{ height:20px; width:auto; padding:2px 4px; background:#fff; border:2px solid var(--ink); border-radius:5px; }
.hw-kachel__preis{ font:800 .84rem var(--font-body); color:var(--lime); }
.hw-kachel__etikett{ position:absolute; top:-11px; right:-7px; z-index:1; font:400 .7rem/1 var(--font-display); letter-spacing:1px; padding:4px 7px 3px; color:#fff;
  background:var(--magenta); border:2px solid var(--ink); border-radius:6px; rotate:4deg; white-space:nowrap; }
.hw-kachel__etikett--netze{ color:var(--ink); background:var(--cyan); }
.hw-p1{ position:absolute; top:7px; left:8px; font:400 .78rem/1 var(--font-display); padding:3px 6px; color:#fff; background:var(--magenta); border-radius:4px; opacity:0; }
.hw-kachel.ist-aktiv .hw-p1{ opacity:1; }

/* ---------- Startseite: Deal der Woche ---------- */
.hw--highlight .hw-arena{ grid-template-columns:270px minmax(0,1fr); margin-top:18px; }
.hw-sticker-wochen{ position:absolute; z-index:3; top:-22px; left:50%; translate:-50% 0; rotate:-2deg; padding:7px 16px 8px; text-align:center; white-space:nowrap;
  font:400 1.15rem/1.1 var(--font-display); letter-spacing:1px; color:#fff; background:var(--magenta); border:3px solid var(--ink); border-radius:10px; box-shadow:4px 4px 0 var(--ink); }
.hw-sticker-wochen [lang="ja"]{ display:block; font:900 .68rem var(--font-jp); letter-spacing:3px; color:#ffe1f9; }
.hw-alle{ display:table; margin:30px auto 0; padding-bottom:2px; font:400 1.2rem var(--font-display); letter-spacing:1px; text-transform:uppercase; color:var(--cyan);
  border-bottom:3px solid var(--cyan); }
.hw-alle:hover{ color:#fff; border-color:#fff; }

/* ---------- Tablet / Handy: Figur steht unter der Karte – nie über einem Gerät ---------- */
@media (max-width:980px){
  .hw{ display:flex; flex-direction:column; }
  .hw-titel{ order:0; } .hw-roster{ order:1; } .hw-arena{ order:2; } .hw-alle{ order:3; }
  .hw-arena, .hw--highlight .hw-arena{ display:flex; flex-direction:column; min-height:0; }
  .hw-buehnen{ order:1; }
  .hw-figur{ order:2; align-self:flex-end; height:190px; margin:-14px 14px 0 0; }
  .hw-buehne{ grid-template-columns:1fr; gap:30px; padding:22px 16px 6px; }
  .hw-spot{ min-height:290px; }
  .hw-geraet{ max-height:270px; }
  .hw-spot .hw-sticker{ width:220px; height:220px; }
  .hw-roster{ display:grid; grid-template-columns:none; grid-auto-flow:column; grid-auto-columns:124px; overflow-x:auto; scroll-snap-type:x mandatory;
    margin:0 0 18px; padding:14px 6px 12px; }
  .hw-kachel{ scroll-snap-align:start; }
  .hw--highlight .hw-arena{ margin-top:26px; }
  .hw--highlight .hw-buehne{ padding-top:44px; }
}
@media (max-width:480px){
  .hw-karte h3{ font-size:2rem; }
  .hw-preis{ font-size:2.8rem; }
  .hw-figur{ height:170px; }
}