/* Das Vertragshaus — „Gaming-Internet“ (gaming.html) + „Gaming-Internet der Woche“ (index.html). Erzeugt: _tools/internet.py,
   Anbieter-Wahl: internet-auswahl.js. Seit 26.10.2026 (User wählte Konzept B „Speedtest-Arena“, Mockup _entwurf/gaming-internet/).
   Anbieterfarbe je Box/Arena als --n, Anschlussfarbe als --t, Levelfarbe als --l. Ohne JS: Reiter aus, alle Angebote untereinander. */
@property --n{ syntax:'<color>'; inherits:true; initial-value:#e60000; }

.gi-jp{ font:900 .95rem var(--font-jp); letter-spacing:6px; color:var(--cyan); }
.gi-titel{ margin-bottom:24px; }
.gi-titel h2{ margin:6px 0 0; font:400 clamp(2.1rem,4.4vw,3.5rem)/.95 var(--font-display); text-transform:uppercase; color:var(--paper); }
.gi-titel h2 em{ font-style:normal; color:var(--magenta); }
.gi-titel p{ max-width:640px; margin:10px 0 0; color:#c9b8f0; }
.gi-fuss{ margin:18px 0 0; font-size:.84rem; color:#a897d6; }

/* ---------- Bausteine ---------- */
.gi-anb{ display:inline-flex; align-items:center; justify-content:center; height:34px; padding:4px 8px; background:#fff; border:2px solid var(--ink); border-radius:8px; }
.gi-anb img{ display:block; height:24px; width:auto; max-width:90px; object-fit:contain; }
.gi-typ{ font:400 .8rem/1 var(--font-display); letter-spacing:1px; color:var(--ink); background:var(--t); padding:5px 8px 4px; border:2px solid var(--ink); border-radius:6px; }
.gi-etikett{ margin-left:auto; font:400 .8rem/1 var(--font-display); letter-spacing:.8px; color:var(--ink); background:#ffd23f; padding:5px 8px 4px;
  border:2px solid var(--ink); border-radius:5px; rotate:-3deg; box-shadow:2px 2px 0 var(--ink); }
.gi-gauge{ position:relative; text-align:center; }
.gi-gauge svg{ display:block; width:100%; max-width:180px; margin:0 auto; }
.gi-gauge__z{ position:absolute; left:0; right:0; top:36%; margin:0; }
.gi-gauge__z b{ display:block; font:400 2.1rem/1 var(--font-display); color:#fff; }
.gi-gauge__z small{ font-size:.72rem; color:#c9b8f0; }
.gi-gauge__l{ margin:2px 0 0; font-size:.78rem; font-weight:800; letter-spacing:1px; text-transform:uppercase; color:#c9b8f0; }
.gi-gauges{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.gi-preis{ padding-top:12px; border-top:2px dashed rgba(201,184,240,.22); }
.gi-preis__z{ margin:0; display:flex; align-items:baseline; flex-wrap:wrap; }
.gi-preis__z b{ font:400 3.1rem/.95 var(--font-display); color:#fff; }
.gi-preis__z span{ font:400 1.55rem var(--font-display); color:#fff; }
.gi-preis__z small{ margin-left:6px; font-size:.85rem; color:#c9b8f0; }
.gi-preis__info{ margin:4px 0 0; font-size:.86rem; color:#c9b8f0; }
.gi-vort{ list-style:none; margin:0; padding:0; display:grid; gap:5px; font-size:.92rem; }
.gi-vort li::before{ content:"✓ "; color:var(--lime); font-weight:800; }
.gi-vort .gi-vort__router{ font-weight:700; color:#fff; }
.gi-vort .gi-vort__router::before{ content:"📶 "; }
.gi-knopf{ justify-self:start; }
.gi-mehr{ display:inline-block; font:400 1.1rem var(--font-display); letter-spacing:1px; text-transform:uppercase; color:var(--cyan); text-decoration:none;
  border-bottom:3px solid var(--cyan); padding-bottom:2px; }
.gi-mehr:hover{ color:#fff; border-color:#fff; }
.gi-box{ display:grid; gap:12px; padding:20px; color:var(--paper); background:rgba(7,3,15,.84); border:3px solid var(--ink); border-radius:20px;
  box-shadow:0 0 0 2px color-mix(in srgb, var(--n) 70%, transparent), 8px 8px 0 var(--ink); }
.gi-box__kopf{ display:flex; align-items:center; gap:8px; }
.gi-box__name{ margin:0; font:400 2rem/1 var(--font-display); text-transform:uppercase; color:var(--paper); }
.gi-box__name small{ display:block; font:800 .75rem var(--font-body); letter-spacing:1.6px; color:var(--cyan); margin-bottom:3px; }

/* ---------- Banner: Figur + Router links, Box rechts (Seitenkopf und Startseite) ----------
   Korrektur 26.10.2026: Router mit Abstand zur Box, „Router gratis“ direkt am Gerät, linke Seite füllt die Höhe der Box. */
.gi-banner{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,480px); gap:24px 36px; align-items:center; padding:24px 28px;
  border:3px solid var(--ink); border-radius:26px; box-shadow:10px 10px 0 var(--ink);
  background:radial-gradient(ellipse 42% 55% at 30% 82%, color-mix(in srgb, var(--n) 55%, transparent), transparent 70%),
             repeating-linear-gradient(115deg, color-mix(in srgb, var(--n) 16%, transparent) 0 26px, transparent 26px 66px),
             linear-gradient(165deg, color-mix(in srgb, var(--n) 38%, var(--bg-3)), var(--bg-3) 78%); }
.page-head .gi-banner{ margin-top:30px; }
/* Figur + Router wachsen mit der Spaltenbreite (Container-Einheiten); die Figur ist etwas größer als der Router */
.gi-buehne{ container-type:inline-size; display:grid; grid-template-rows:auto minmax(0,1fr) auto; justify-items:center; gap:14px; align-self:stretch; }
.gi-sticker{ justify-self:start; display:inline-flex; align-items:center; gap:10px; font:400 1.1rem var(--font-display); letter-spacing:1px; text-transform:uppercase;
  color:var(--ink); background:#ffd23f; border:3px solid var(--ink); border-radius:8px; padding:6px 12px; box-shadow:4px 4px 0 var(--ink); rotate:-3deg; }
.gi-sticker span{ font:900 .8rem var(--font-jp); letter-spacing:2px; }
.gi-spot{ position:relative; align-self:end; display:flex; align-items:flex-end; justify-content:center; gap:3cqi; padding-right:5cqi; }
.gi-spot::after{ content:""; position:absolute; left:4%; right:8%; bottom:-14px; height:30px; border-radius:50%; background:radial-gradient(closest-side, rgba(7,3,15,.75), transparent); }
/* Figur = .kopf-figur (atmet, Tipp beim Antippen); 2 Klassen schlagen .page-head .kopf-figur aus style.css */
.kopf-figur.kopf-figur--banner{ position:relative; z-index:3; display:block; right:auto; bottom:auto; height:min(430px, 68cqi); max-height:none; flex:none; }
.kopf-figur--banner .kopf-figur__bild{ filter:drop-shadow(6px 6px 0 var(--ink)) drop-shadow(0 0 28px rgba(255,43,214,.35)); }
.gi-geraet{ position:relative; z-index:1; flex:none; }
.gi-router{ display:block; height:min(380px, 56cqi); width:auto; max-width:none; filter:drop-shadow(8px 10px 0 rgba(7,3,15,.75)) drop-shadow(0 0 40px rgba(20,224,255,.25)); }
/* das Foto hat links ~30 % freie Fläche – dort sitzt der Sticker direkt am Gerät */
.gi-gratis{ position:absolute; left:0; top:8%; width:clamp(58px, 14cqi, 88px); aspect-ratio:1; display:grid; place-items:center; text-align:center;
  font:400 clamp(.8rem, 2.6cqi, 1.08rem)/1 var(--font-display); text-transform:uppercase; color:#fff; background:var(--n);
  border:3px solid var(--ink); border-radius:50%; box-shadow:4px 4px 0 var(--ink); rotate:-10deg; }
.gi-buehne__fuss{ display:grid; justify-items:center; gap:4px; text-align:center; }
.gi-buehne__satz{ margin:10px 0 0; font-size:1.05rem; color:#fff; }
.gi-buehne__satz b{ color:#ffd23f; }
.gi-buehne__fuss .gi-mehr{ margin-top:8px; }
.gi-banner__box{ display:grid; justify-items:stretch; }

/* ---------- Anbieter-Wahl ---------- */
.gi-tabs{ display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); gap:10px; margin-bottom:18px; }
.gi-tabs[hidden]{ display:none; }
.gi-tabs button{ display:grid; justify-items:start; gap:6px; padding:12px; text-align:left; color:var(--paper); font:inherit; border:3px solid var(--ink); border-radius:14px;
  cursor:pointer; background:linear-gradient(160deg, color-mix(in srgb, var(--n) 22%, var(--bg-2)), var(--bg-3)); box-shadow:4px 4px 0 var(--ink); transition:translate .12s, background .2s; }
.gi-tabs button:hover{ translate:0 -2px; }
.gi-tabs button[aria-selected="true"]{ background:var(--n); color:#fff; translate:0 -4px; box-shadow:6px 8px 0 var(--ink); }
.gi-tabs__name{ font-weight:700; font-size:.9rem; line-height:1.2; }
.gi-tabs__preis{ font:400 1.35rem var(--font-display); }
.gi-arena{ display:grid; grid-template-columns:minmax(0,560px) minmax(0,1fr); gap:26px; align-items:start; padding:26px; border:3px solid var(--ink); border-radius:24px;
  background:repeating-linear-gradient(115deg, color-mix(in srgb, var(--n) 18%, transparent) 0 24px, transparent 24px 60px), linear-gradient(170deg, color-mix(in srgb, var(--n) 36%, var(--bg-3)), var(--bg-3) 75%); }
.gi-arena + .gi-arena{ margin-top:22px; }                  /* ohne JS stehen alle untereinander */
.gi-arena[hidden]{ display:none; }
.gi-dahinter{ display:grid; gap:10px; padding:20px; background:rgba(7,3,15,.66); border:3px solid var(--ink); border-radius:18px; }
.gi-dahinter__l{ margin:0; font-size:.75rem; font-weight:800; letter-spacing:1.4px; text-transform:uppercase; color:#a897d6; }
.gi-dahinter h4{ margin:0; font:400 1.8rem/1 var(--font-display); text-transform:uppercase; color:var(--t); }
.gi-dahinter p{ margin:0; color:#c9b8f0; }
.gi-dahinter dl{ margin:0; display:grid; gap:6px; }
.gi-dahinter dl div{ display:grid; grid-template-columns:70px 1fr; align-items:center; }
.gi-dahinter dt{ font-size:.78rem; font-weight:800; color:#a897d6; }
.gi-dahinter dd{ margin:0; display:flex; align-items:center; gap:8px; font:400 1.15rem var(--font-display); }
.gi-dahinter a{ color:var(--cyan); font-weight:700; }
.gi-ping{ display:inline-flex; gap:3px; width:90px; }
.gi-ping i{ flex:1; height:9px; background:rgba(255,255,255,.1); border:1.5px solid var(--ink); transform:skewX(-18deg); }
.gi-ping i.an{ background:var(--lime); }

/* ---------- Tutorial: vier Levels, jedes eine eigene Bühne ---------- */
.section.gi-tut{ background:var(--bg-2) radial-gradient(rgba(255,43,214,.07) 1.3px, transparent 1.6px) 0 0/14px 14px; }
.gi-lvlnav{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:10px; }
.gi-lvlnav a{ display:inline-flex; align-items:center; gap:8px; padding:8px 14px; color:var(--paper); text-decoration:none; font-weight:700; background:var(--bg-3);
  border:2px solid var(--ink); border-radius:999px; box-shadow:3px 3px 0 var(--ink); }
.gi-lvlnav a:hover{ translate:0 -1px; }
.gi-lvlnav a b{ font:400 .95rem var(--font-display); letter-spacing:1px; color:var(--ink); background:var(--cyan); padding:2px 8px; border-radius:999px; }
.gi-lvlnav a:nth-child(2) b{ background:var(--magenta); } .gi-lvlnav a:nth-child(3) b{ background:var(--lime); } .gi-lvlnav a:nth-child(4) b{ background:#ffd23f; }
.gi-lvl{ position:relative; margin-top:40px; scroll-margin-top:90px; border:3px solid var(--ink); border-radius:26px; box-shadow:9px 9px 0 var(--ink); overflow:hidden;
  background:linear-gradient(150deg, color-mix(in srgb, var(--l) 13%, var(--bg-3)) 0%, var(--bg-3) 55%); }
.gi-lvl__kopf{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:20px; align-items:center; padding:22px 26px 18px; border-bottom:2px dashed color-mix(in srgb, var(--l) 40%, transparent); }
.gi-lvl__nr{ display:grid; place-items:center; width:92px; height:92px; font:400 3.2rem/.8 var(--font-display); color:var(--ink); background:var(--l); border:3px solid var(--ink);
  border-radius:20px; box-shadow:5px 5px 0 var(--ink); rotate:-5deg; }
.gi-lvl__nr small{ font:700 .62rem var(--font-body); letter-spacing:2px; }
.gi-lvl__kopf .gi-jp{ color:var(--l); letter-spacing:4px; }
.gi-lvl__kopf h3{ margin:2px 0 4px; font:400 clamp(1.8rem,3.2vw,2.6rem)/1 var(--font-display); text-transform:uppercase; color:var(--paper); }
.gi-lvl__kopf p{ margin:0; color:#c9b8f0; }
.gi-lvl__inhalt{ padding:24px 26px 28px; }

/* LV 1: Vergleich wie ein Charakter-Statusbildschirm */
.gi-stats{ display:grid; gap:10px; }
.gi-stats__kopf, .gi-stats__zeile{ display:grid; grid-template-columns:minmax(0,2.3fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1.1fr) 170px; gap:16px; align-items:center; }
.gi-stats__kopf{ padding:0 16px; font-size:.72rem; font-weight:800; letter-spacing:1.2px; text-transform:uppercase; color:#a897d6; }
.gi-stats__zeile{ padding:14px 16px; background:rgba(31,17,71,.85); border:2px solid var(--ink); border-radius:14px; }
.gi-stats__name{ display:grid; grid-template-columns:48px minmax(0,1fr); gap:12px; align-items:center; }
.gi-ico{ display:grid; place-items:center; width:48px; height:48px; font-size:1.5rem; background:var(--bg-3); border:2px solid var(--t); border-radius:50%; }
.gi-stats__name b{ display:block; font:400 1.35rem/1 var(--font-display); text-transform:uppercase; }
.gi-stats__name b span{ font:900 .7rem var(--font-jp); letter-spacing:2px; color:var(--t); }
.gi-stats__name small{ display:block; margin-top:3px; font-size:.84rem; line-height:1.35; color:#c9b8f0; }
.gi-stats__wert{ display:grid; gap:5px; font:400 1rem var(--font-display); }
.gi-sb{ display:block; height:9px; border:2px solid var(--ink); border-radius:999px; background:rgba(7,3,15,.6); overflow:hidden; }
.gi-sb i{ display:block; height:100%; border-radius:999px; background:var(--cyan); }
.gi-sb--up i{ background:var(--magenta); }
.gi-chip{ display:inline-block; padding:5px 10px; font-size:.8rem; font-weight:800; color:var(--ink); background:var(--t); border:2px solid var(--ink); border-radius:999px; }

/* LV 2: Power-Ups mit großer Zahl + Ladezeit-Vergleich */
.gi-tipps{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:16px; }
.gi-tipp{ display:grid; gap:6px; align-content:start; padding:18px; background:rgba(31,17,71,.85); border:2px solid var(--ink); border-radius:16px; box-shadow:5px 5px 0 var(--ink); }
.gi-tipp__gross{ margin:0; display:flex; align-items:baseline; gap:6px; }
.gi-tipp__gross b{ font:400 3.4rem/.9 var(--font-display); color:var(--t); text-shadow:3px 3px 0 var(--ink); }
.gi-tipp__gross span{ font:400 1rem var(--font-display); color:var(--t); }
.gi-tipp h4{ margin:4px 0 0; font:400 1.2rem/1.05 var(--font-display); text-transform:uppercase; color:var(--paper); }
.gi-tipp p{ margin:0; font-size:.9rem; color:#c9b8f0; }
.gi-tipp a{ color:var(--cyan); font-weight:700; font-size:.9rem; }
.gi-laden{ margin-top:22px; padding:18px 20px; background:rgba(7,3,15,.55); border:2px solid var(--ink); border-radius:16px; }
.gi-laden h4{ margin:0 0 12px; font:400 1.2rem var(--font-display); text-transform:uppercase; color:var(--paper); }
.gi-laden h4 small{ font:500 .8rem var(--font-body); text-transform:none; color:#a897d6; }
.gi-laden__zeile{ display:grid; grid-template-columns:110px minmax(0,1fr) 120px; gap:14px; align-items:center; padding:5px 0; }
.gi-laden__speed{ font:400 1rem var(--font-display); color:#c9b8f0; }
.gi-laden__balken{ height:16px; background:rgba(255,255,255,.06); border:2px solid var(--ink); border-radius:999px; overflow:hidden; }
.gi-laden__balken i{ display:block; height:100%; background:linear-gradient(90deg, var(--lime), #ffd23f 50%, var(--pink)); }
.gi-laden__zeile b{ font:400 1.1rem var(--font-display); text-align:right; }

/* LV 3: Weg mit vier Stationen */
.gi-weg{ position:relative; list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:18px; }
.gi-weg::before{ content:""; position:absolute; left:12%; right:12%; top:34px; height:4px; background:repeating-linear-gradient(90deg, var(--l) 0 14px, transparent 14px 24px); }
.gi-weg li{ position:relative; display:grid; justify-items:center; gap:6px; text-align:center; }
.gi-weg__ico{ display:grid; place-items:center; width:70px; height:70px; font-size:1.8rem; background:var(--bg-3); border:3px solid var(--l); border-radius:50%; box-shadow:4px 4px 0 var(--ink); }
.gi-weg b{ font:400 1.25rem var(--font-display); text-transform:uppercase; }
.gi-weg p{ margin:0; max-width:240px; font-size:.9rem; color:#c9b8f0; }
.gi-merke{ margin:22px 0 0; padding:12px 16px; background:rgba(77,255,176,.1); border:2px solid var(--l); border-radius:12px; }
.gi-merke b{ color:var(--l); }

/* LV 4: Router */
.gi-router-lvl{ display:grid; grid-template-columns:220px minmax(0,1fr); gap:28px; align-items:center; }
.gi-router-lvl--ohne{ grid-template-columns:minmax(0,1fr); }
.gi-router-lvl__bild{ margin:0; display:grid; justify-items:center; gap:8px; }
.gi-router-lvl__bild img{ height:260px; width:auto; filter:drop-shadow(8px 10px 0 rgba(7,3,15,.75)); }
.gi-router-lvl__bild figcaption{ font-size:.8rem; color:#a897d6; text-align:center; }
.gi-mini-titel{ margin:0 0 10px; font:400 1.2rem var(--font-display); text-transform:uppercase; color:var(--paper); }
.gi-rdeals{ list-style:none; margin:0; padding:0; display:grid; gap:8px; }
.gi-rdeals li{ display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:12px; align-items:center; padding:8px 12px; background:rgba(31,17,71,.85); border:2px solid var(--ink); border-radius:12px; }
.gi-rdeals li span{ font-weight:700; font-size:.92rem; }
.gi-rdeals li b{ font:400 1.15rem var(--font-display); color:var(--lime); text-align:right; }
.gi-rtipps{ list-style:none; margin:18px 0 0; padding:0; display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px; }
.gi-rtipps li{ display:grid; grid-template-columns:34px minmax(0,1fr); gap:2px 10px; align-items:center; padding:10px 12px; background:rgba(7,3,15,.5); border:2px solid var(--ink); border-radius:12px; }
.gi-rtipps li span{ grid-row:span 2; font-size:1.4rem; }
.gi-rtipps li b{ font:400 1.05rem var(--font-display); text-transform:uppercase; color:#ffd23f; }
.gi-rtipps li small{ font-size:.85rem; color:#c9b8f0; }

/* ---------- Responsive ---------- */
@media (max-width:1100px){
  .gi-banner{ grid-template-columns:minmax(0,1fr) minmax(0,420px); }
  .gi-tabs{ grid-template-columns:repeat(3, minmax(0,1fr)); }
  .gi-stats__kopf{ display:none; }
  .gi-stats__zeile{ grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1fr); }
  .gi-stats__name{ grid-column:1 / -1; }
  .gi-stats__zeile > [role="cell"]:last-child{ grid-column:1 / -1; }
  .gi-tipps{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}
@media (max-width:860px){
  .gi-banner{ grid-template-columns:minmax(0,1fr); padding:18px; }
  .gi-arena{ grid-template-columns:minmax(0,1fr); padding:16px; }
  .gi-weg{ grid-template-columns:minmax(0,1fr); }
  .gi-weg::before{ left:34px; right:auto; top:12px; bottom:12px; width:4px; height:auto; background:repeating-linear-gradient(180deg, var(--l) 0 14px, transparent 14px 24px); }
  .gi-weg li{ grid-template-columns:70px minmax(0,1fr); justify-items:start; text-align:left; gap:2px 14px; }
  .gi-weg__ico{ grid-row:span 2; }
  .gi-router-lvl{ grid-template-columns:minmax(0,1fr); }
  .gi-router-lvl__bild img{ height:200px; }
  .gi-lvl__kopf{ grid-template-columns:minmax(0,1fr); }
  .gi-lvl__inhalt{ padding:20px 18px 22px; }
}
@media (max-width:560px){
  .gi-tabs{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .gi-tipps, .gi-rtipps{ grid-template-columns:minmax(0,1fr); }
  .gi-stats__zeile{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
  .gi-stats__zeile > [role="cell"]:nth-child(4){ grid-column:1 / -1; }
  .gi-laden__zeile{ grid-template-columns:86px minmax(0,1fr); }
  .gi-laden__zeile b{ grid-column:2; text-align:left; }
  .gi-spot{ padding-right:0; }
  .gi-sticker{ white-space:nowrap; font-size:1rem; }
  .gi-box__name{ font-size:1.7rem; }
}
@media (max-width:460px){ .gi-sticker span{ display:none; } }
@media (max-width:400px){                                  /* sehr schmale Handys (320 px): Box und Knopf passen in die Breite */
  .gi-banner{ padding:14px 12px; }
  .gi-box{ padding:16px 14px; }
  .gi-box .gi-knopf{ white-space:normal; font-size:1rem; padding:12px 16px; }
  .gi-preis__z b{ font-size:2.6rem; }
}   /* schmal: nur „★ … der Woche“, sonst bricht der Sticker um */
@media (prefers-reduced-motion:reduce){ .gi-tabs button, .gi-lvlnav a{ transition:none; } }