/* =====================================================================
   HANDY UND TABLET (KONZEPT §23b)
   ---------------------------------------------------------------------
   Grundsätze, an die sich JEDE Regel hier hält:

   1. KEIN Skin-Präfix. Alles hängt an den vorhandenen Klassen und an den
      vorhandenen CSS-Variablen. Der zweite Skin (heute „bento", morgen
      sein Nachfolger) erbt diesen Block unverändert; wo ein Skin ein
      eigenes Raster mitbringt, wird es hier per !important flach gelegt —
      nicht dupliziert.
   2. Die SEITE scrollt nie seitwärts. Was breit ist (Tabellen, Scoreboard,
      Heatmap, Reiterleisten), bekommt seinen EIGENEN Scrollbereich.
   3. Nichts wird weggelassen. Was am Rechner erreichbar ist, ist auf dem
      Telefon erreichbar — notfalls hinter einem Aufklapper.
   ===================================================================== */

/* =====================================================================
   Ideen & Account-Wünsche (öffentliches Formular + Admin-Liste)
   ---------------------------------------------------------------------
   Die Seite steht offen im Netz. Das Formular kann jeder benutzen, aber
   NIEMAND sieht damit die Einreichungen anderer: die eigene Liste kommt
   aus dem localStorage dieses Browsers, alle Einreichungen zusammen
   stehen ausschliesslich in der Admin-Ansicht.
   Ausschliesslich vorhandene CSS-Variablen — beide Skins erben den Block.
   ===================================================================== */
.sugform{display:flex;flex-direction:column;gap:14px}
.sugfield{display:flex;flex-direction:column;gap:6px;min-width:0}
.suglbl{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;
  font-size:11.5px;font-weight:700;color:var(--ink);letter-spacing:.2px}
.sugtag{font-size:8.5px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;
  padding:1px 6px;border-radius:6px;color:var(--ink3);
  box-shadow:inset 2px 2px 4px var(--lo),inset -2px -2px 4px var(--hi)}
.sugtag.req{color:var(--cyan)}
.sughint{font-size:10.5px;line-height:1.5;color:var(--ink3)}
.sugta{width:100%;min-height:132px;resize:vertical;border:0;outline:none;
  background:var(--canvas);color:var(--ink);font:inherit;font-size:12.5px;line-height:1.5;
  padding:11px 14px;border-radius:12px;
  box-shadow:inset 4px 4px 9px var(--lo),inset -4px -4px 9px var(--hi)}
.sugta::placeholder{color:var(--ink3)}
.sugin{width:100%}
/* Der Zähler steht IMMER da, nicht erst wenn die Grenze fällt — man muss
   sie sehen können, bevor man sie reisst. */
.sugmeter{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;
  font-size:10.5px;color:var(--ink3);font-variant-numeric:tabular-nums}
.sugmeter b{font-weight:700;color:var(--ink2)}
.sugmeter.near b,.sugmeter.near{color:var(--amber)}
.sugmeter.full b,.sugmeter.full{color:var(--loss)}
.sugbar{flex:1 1 90px;max-width:190px;height:4px;border-radius:3px;overflow:hidden;
  box-shadow:inset 2px 2px 4px var(--lo),inset -1px -1px 3px var(--hi)}
.sugbar i{display:block;height:100%;border-radius:3px;background:var(--cyan);transition:width .12s}
.sugmeter.near .sugbar i{background:var(--amber)}
.sugmeter.full .sugbar i{background:var(--loss)}
.sugnote{font-size:11.5px;line-height:1.55;color:var(--ink3);
  padding:10px 14px;border-radius:var(--rw);
  box-shadow:inset 4px 4px 9px var(--lo),inset -4px -4px 9px var(--hi)}
.sugnote.ok{color:var(--win)} .sugnote.bad{color:var(--loss)} .sugnote.warn{color:var(--amber)}
.sugnote b{color:var(--ink2)}
/* Eigene Einreichungen — bewusst als eigene Karte mit klarer Ansage,
   dass sie nur in diesem Browser stehen. */
.sugmine{display:flex;flex-direction:column;gap:9px}
.sugcard{border-radius:var(--rw);padding:11px 13px;
  box-shadow:inset 3px 3px 7px var(--lo),inset -3px -3px 7px var(--hi)}
.sughead{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin-bottom:6px}
.sugkind{font-size:8.5px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;
  color:var(--cyan);white-space:nowrap}
.sugkind.account{color:var(--violet)}
.sugwhen{font-size:10.5px;color:var(--ink3);font-variant-numeric:tabular-nums}
.sugref{font-size:10.5px;color:var(--ink3);font-variant-numeric:tabular-nums;margin-left:auto}
/* Fremder Text. Er wird IMMER maskiert eingesetzt; pre-wrap erhält nur die
   Zeilenumbrüche, die der Einreichende getippt hat. */
.sugtext{font-size:12px;line-height:1.5;color:var(--ink);white-space:pre-wrap;
  overflow-wrap:anywhere;word-break:break-word}
.sugrid{font-size:12.5px;font-weight:700;color:var(--ink);
  font-family:ui-monospace,"Cascadia Mono",Consolas,monospace;overflow-wrap:anywhere}
.sugstat{font-size:8.5px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;
  padding:1px 7px;border-radius:6px;white-space:nowrap;
  box-shadow:inset 2px 2px 4px var(--lo),inset -2px -2px 4px var(--hi)}
.sugstat.new{color:var(--cyan)} .sugstat.done{color:var(--win)} .sugstat.rejected{color:var(--ink3)}
/* Admin: Zählwerte, Filter, Liste */
.sugstats{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(120px,100%),1fr));gap:10px;margin-bottom:14px}
.sugstat1{border-radius:var(--rw);padding:10px 13px;
  box-shadow:inset 3px 3px 7px var(--lo),inset -3px -3px 7px var(--hi)}
.sugstat1 .v{display:block;font-size:20px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums;line-height:1.2}
.sugstat1 .l{display:block;font-size:8.5px;font-weight:800;letter-spacing:.5px;
  text-transform:uppercase;color:var(--ink3)}
.sugbar2{display:flex;align-items:center;gap:8px 14px;flex-wrap:wrap;margin-bottom:14px}
.sugbar2 .flbl{font-size:10px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;color:var(--ink3)}
/* Der Absender: die einzige Handhabe gegen jemanden, der das Formular
   vollmüllt. Kein Klartext-Kontakt in der Zeile, nur was zum Zuordnen taugt. */
.sugauth{display:flex;gap:6px 14px;flex-wrap:wrap;margin-top:8px;padding-top:7px;
  border-top:1px solid rgba(0,0,0,.30);font-size:10.5px;color:var(--ink3)}
.sugauth b{color:var(--ink2);font-weight:700}
.sugauth .mono{font-family:ui-monospace,"Cascadia Mono",Consolas,monospace}
.sugact{display:flex;align-items:center;gap:8px 10px;flex-wrap:wrap;margin-top:10px}
.sugact .w-admin{flex:1 1 220px}
.skin-bento .sugta,.skin-bento .sugbar,.skin-bento .sugtag,.skin-bento .sugstat{
  background:var(--inset);border:1px solid var(--line);box-shadow:none}
.skin-bento .sugnote,.skin-bento .sugcard,.skin-bento .sugstat1{
  background:var(--inset);border:1px solid var(--line);box-shadow:none}
.skin-bento .sugauth{border-top:1px solid var(--line)}

/* =====================================================================
   Wendepunkt eines Spiels (Match-History, aufgeklapptes Spiel)
   ---------------------------------------------------------------------
   Die Uhrzeit im Spiel steht gross: sie wird in den Replay-Regler getippt.
   „Nie gekippt" ist hier ein Ergebnis und keine Luecke — es steht als Satz
   an derselben Stelle, an der sonst die Uhrzeit steht.
   ===================================================================== */
.tpwrap{display:flex;align-items:flex-start;gap:14px 18px;flex-wrap:wrap}
.tpbig{flex:0 0 auto;min-width:104px}
.tpclock{display:block;font-size:31px;font-weight:700;color:var(--ink);
  font-variant-numeric:tabular-nums;line-height:1.05;letter-spacing:.5px}
.tpclock.none{font-size:15px;line-height:1.3;max-width:15ch}
.tplbl{display:block;font-size:8.5px;font-weight:800;letter-spacing:.5px;
  text-transform:uppercase;color:var(--ink3);margin-top:3px}
.tpmain{flex:1 1 230px;min-width:0;font-size:11.5px;line-height:1.55;color:var(--ink2)}
.tpmain b{color:var(--ink);font-weight:700}
.tprow{display:flex;gap:7px;flex-wrap:wrap}
.tpwhy{margin-top:5px;font-size:10.5px;line-height:1.5;color:var(--ink3)}
.tpcurve{flex:1 1 260px;min-width:0}
.tpcurve svg{display:block;width:100%;height:auto}
.tpmoments{display:flex;flex-direction:column;gap:5px;margin-top:10px}
.tpmom{display:flex;align-items:baseline;gap:5px 10px;flex-wrap:wrap;
  padding:5px 9px;border-radius:9px;font-size:11.5px;line-height:1.4}
/* Jedes Ereignis traegt seine Richtung als Farbe — man soll die Liste
   ueberfliegen und den Umschlag sehen, ohne eine Zeile zu lesen. Die Farbe
   kommt aus gold_delta (wohin die Bilanz danach lief) und NICHT aus side
   (wer es gemacht hat). Zweiter Kanal ist das Vorzeichen an der Zahl —
   ohne ihn waere die Aussage bei Rot-Gruen-Schwaeche weg. */
.tpmom .d{flex:0 0 auto;align-self:stretch;width:4px;min-height:15px;
  border-radius:2px;background:var(--ink3)}
.tpmom.good .d{background:var(--win)}
.tpmom.bad .d{background:var(--loss)}
/* Die schmale Leiste ueber die Spielzeit: dieselbe Aussage in einem Blick. */
.tpstripwrap{margin-top:12px}
.tpstrip{position:relative;height:16px;border-radius:8px;
  box-shadow:inset 3px 3px 7px var(--lo),inset -3px -3px 7px var(--hi)}
.tpstrip i{position:absolute;top:3px;width:5px;height:10px;margin-left:-2.5px;
  border-radius:2px;background:var(--ink3)}
.tpstrip i.good{background:var(--win)}
.tpstrip i.bad{background:var(--loss)}
.tpstrip b{position:absolute;top:-3px;width:2px;height:22px;margin-left:-1px;
  border-radius:1px;background:var(--violet)}
.tpstriplbl{display:flex;justify-content:space-between;gap:10px;margin-top:4px;
  font-size:9.5px;line-height:1.4;color:var(--ink3);font-variant-numeric:tabular-nums}
.tpstriplbl em{font-style:normal;text-align:center;flex:1 1 auto}
.tpmom.turn{box-shadow:inset 2px 2px 5px var(--lo),inset -2px -2px 5px var(--hi)}
.tpmom .c{font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums;
  min-width:46px;flex:0 0 auto}
.tpmom .l{flex:1 1 150px;min-width:0;color:var(--ink2);overflow-wrap:anywhere}
.tpmom .g{color:var(--ink3);font-variant-numeric:tabular-nums;white-space:nowrap}
.tpmom .g.up{color:var(--win)} .tpmom .g.dn{color:var(--loss)}
/* WER etwas gemacht hat (side) steht als eigenes Merkmal — bewusst NICHT in
   der Farbe. Die Farbe gehoert der Zahl, und beide koennen sich
   widersprechen: Elder geholt und danach trotzdem 2.400 Gold verloren. */
.tpmom .l .s{font-style:normal;font-size:9px;font-weight:800;letter-spacing:.5px;
  text-transform:uppercase;color:var(--ink3);margin-left:9px;white-space:nowrap}
.tptrig{display:flex;align-items:baseline;gap:5px 9px;flex-wrap:wrap;margin-top:6px}
.tptrig b{color:var(--ink);font-weight:700;white-space:nowrap}
.tptrig .g{font-variant-numeric:tabular-nums}
.tptrig .g.up{color:var(--win)} .tptrig .g.dn{color:var(--loss)}
.tpmomwhy{margin-top:8px;font-size:10.5px;line-height:1.5;color:var(--ink3)}
.skin-bento .tpmom.turn{background:var(--inset);border:1px solid var(--line);box-shadow:none}
.skin-bento .tpstrip{background:var(--inset);border:1px solid var(--line);box-shadow:none}

/* ---- Gilt in JEDER Breite: nichts darf breiter werden als sein Kasten ---- */
img,svg.chart,.lpchart{max-width:100%}
/* Raster mit fester Mindestspalte: auf einem 320-px-Gerät war die
   Mindestbreite größer als der Behälter — min() deckelt sie. */
.w-btgrid{grid-template-columns:repeat(auto-fill,minmax(min(330px,100%),1fr))}
.w-c2grid{grid-template-columns:repeat(auto-fit,minmax(min(215px,100%),1fr))}
.w-admtiles{grid-template-columns:repeat(auto-fit,minmax(min(150px,100%),1fr))}
/* Eigene Scrollbereiche: Trägheitsscrollen, und die Wischgeste zieht nicht
   die Seite mit (sonst wandert der Seitenkörper doch seitwärts). */
.tblwrap,.sbwrap,.w-admtblwrap,.xscroll{overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}
/* .xstrip markiert eine Knopfleiste, die auf schmalen Geräten waagerecht
   scrollt, statt umzubrechen oder die Seite zu verbreitern. Die Wirkung
   steht bewusst NUR im Telefon-Umbruchpunkt: am Rechner würde ein
   Scrollbereich die weichen Außenschatten der aktiven Knöpfe abschneiden. */
.xstrip::-webkit-scrollbar{display:none}
/* Heatmap: unter ~520 px sind 13 Stundenspalten nicht mehr lesbar. Sie
   behält ihre Breite und bekommt einen eigenen Scrollbereich. */
.hmwell{overflow-x:auto;overscroll-behavior-x:contain}

/* Filter-Aufklapper: am Rechner gibt es ihn nicht, dort steht die Leiste
   immer offen. Er erscheint erst im Telefon-Umbruchpunkt. */
.fbtoggle{display:none}

/* =====================================================================
   Umbruchpunkt Telefon (≤ 640 px)
   ===================================================================== */
@media(max-width:640px){

  /* ---- Grundmaße ---- */
  body{padding:12px 12px 44px;line-height:1.45}
  .wrap{gap:14px}
  .viewwrap,.stack,.w-btwrap,.w-btsecs,.w-admwrap{gap:14px}
  .card{padding:14px 14px}
  .well{padding:12px}
  .chead{min-height:0;margin-bottom:10px}
  /* Kleinstschriften anheben: 9–9,5 px sind auf einem Telefon nicht mehr
     zu lesen. Alles Nachrangige liegt danach bei mindestens 10,5 px. */
  .flbl,.tile .lbl,.swell .lbl,.rcard .rl,.w-c2l,.w-btrv em,.w-btrk,
  .rlstat .l,.obar .olbl,.w-lfname,.w-c2meta,.w-c2badge,.w-btchip,
  .cxrow span,.tick,.reflabel{font-size:10.5px}
  .sub,.fmeta,.stripnote,.cmp-note,.livenote,.lpfoot,.w-btq,.w-btci{font-size:11.5px}

  /* Die 44-px-Fingerflächen stehen NICHT hier, sondern in einem eigenen
     Block am Gerät (siehe „Fingerbedienung" weiter unten): ein Tablet ist
     820 px breit und trotzdem ein Fingergerät. */
  .seg button{padding:6px 12px;font-size:12.5px}
  /* Knopfleisten scrollen in sich. Sichtbare Scrollleisten wären auf 6 px
     Höhe nur Schmutz — deshalb ausgeblendet, das Wischen bleibt. */
  .xstrip{overflow-x:auto;overflow-y:hidden;flex-wrap:nowrap;scrollbar-width:none;
    overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;max-width:100%}
  .chbar>.seg{overflow-x:auto;overflow-y:hidden;flex-wrap:nowrap;scrollbar-width:none;
    overscroll-behavior-x:contain;max-width:100%}
  .chbar>.seg::-webkit-scrollbar{display:none}
  /* Ohne sichtbare Scrollleiste bliebe unsichtbar, DASS es weitergeht — die
     Kante blendet deshalb aus, solange dort noch Knöpfe stehen. Die Klassen
     .xmore/.xback setzt xstripPaint() beim Scrollen und beim Aufbau. */
  .xstrip.xmore{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 26px),transparent);
    mask-image:linear-gradient(90deg,#000 calc(100% - 26px),transparent)}
  .xstrip.xback{-webkit-mask-image:linear-gradient(90deg,transparent,#000 24px);
    mask-image:linear-gradient(90deg,transparent,#000 24px)}
  .xstrip.xback.xmore{
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 24px,#000 calc(100% - 26px),transparent);
    mask-image:linear-gradient(90deg,transparent,#000 24px,#000 calc(100% - 26px),transparent)}
  /* Abschnittsüberschriften brechen um, statt die Unterzeile zu quetschen. */
  .secthead,.w-sechead{flex-wrap:wrap;gap:2px 10px}
  /* ---- Topbar: umbrechen statt quetschen ---- */
  .topbar{padding:12px 14px;gap:10px 12px;align-items:center}
  /* Am Telefon hat die Marke eine eigene Zeile — dort darf sie etwas groesser
     stehen als in der EINEN Zeile ab 641 px, ohne jemandem Platz zu nehmen.
     Der Untertitel bleibt deshalb hier als Einziger erhalten. */
  .logo{width:32px;height:32px;border-radius:10px;font-size:12px}
  .appname{font-size:14px;flex:1 1 auto;min-width:0;color:var(--ink)}
  .appname span{font-size:10.5px}
  /* Der Sync-Knopf bekommt die rechte Kante seiner Zeile — sonst steht die
     Vorwahl-Gruppe allein linksbuendig und der Knopf klebt an ihr. */
  .tb-sync .btn{margin-left:auto}
  /* Reiterleiste: eigene Zeile, waagerecht scrollbar (.xstrip am Element). */
  .viewseg{order:2;flex:0 0 100%;margin-left:0;display:flex;justify-content:flex-start}
  .viewseg button{flex:0 0 auto}
  /* Accountwahl bekommt die volle Breite — der Name ist der wichtigste
     Text der Kopfzeile und darf nicht auf drei Zeichen zusammenschrumpfen. */
  .tb-profile{order:3;flex:1 1 100%;margin-left:0;padding-left:0;border-left:0}
  .acctwrap{flex:1 1 auto;min-width:0}
  .acctbtn{width:100%;padding:4px 10px 4px 4px}
  .acctbtn .who{max-width:none;flex:1 1 auto}
  .acctmenu{width:auto;left:0;right:0;max-width:none}
  .tb-sync{order:4;flex:1 1 100%;margin-left:0;gap:8px}
  .tb-sync .syncstat{display:none}

  /* ---- Filterleiste: Aufklapper statt Dauerband ----
     Sechs Filtergruppen mit 44-px-Knöpfen wären rund 250 px hoch und
     stünden bei jedem Seitenaufruf vor den Zahlen. Deshalb: ein Knopf,
     der sie öffnet. Nichts entfällt, alles bleibt einen Tipp entfernt. */
  .stickybar{position:static;margin:0;padding:0}
  .fbtoggle{display:flex;align-items:center;gap:9px;width:100%;
    border:0;font:inherit;font-size:12.5px;font-weight:700;color:var(--ink2);cursor:pointer;
    background:var(--canvas);padding:10px 16px;border-radius:12px;text-align:left;
    box-shadow:5px 5px 10px var(--lo),-4px -4px 9px var(--hi)}
  /* Kurzfassung der aktiven Auswahl: sie steht auch im zugeklappten
     Zustand da, damit niemand Zahlen liest, ohne den Filter zu kennen. */
  .fbtoggle .fbsum{flex:1 1 auto;min-width:0;font-size:11px;font-weight:600;color:var(--ink3);
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:right}
  .fbtoggle .fbchev{flex:0 0 auto;color:var(--ink3);font-size:11px;transition:transform .15s}
  .stickybar.fbopen .fbtoggle .fbchev{transform:rotate(180deg)}
  .stickybar .filterbar{display:none}
  .stickybar.fbopen .filterbar{display:flex;flex-direction:column;align-items:stretch;
    gap:0;padding:6px 12px 10px;margin-top:10px}
  .filterbar .fgroup{width:100%;gap:9px;flex-wrap:nowrap;padding:7px 0;min-width:0}
  .filterbar .fgroup+.fgroup{border-left:0;padding-left:0;box-shadow:none;
    border-top:1px solid rgba(0,0,0,.30)}
  .filterbar .fgroup>.seg{flex:1 1 auto;min-width:0;justify-content:flex-start}
  .filterbar .selwrap{flex:1 1 auto;display:block;min-width:0}
  .filterbar select{width:100%}
  #customrange{flex-wrap:wrap}
  #customrange .dinput{flex:1 1 42%;min-width:0}

  /* ---- Ein-Spalten-Raster.
     !important, weil ein Skin (heute „bento") für seine Karten eigene
     Spaltenspannen setzt. Die Regel greift dadurch auch für jeden
     künftigen zweiten Skin, ohne dass er etwas dafür tun muss. ---- */
  .tiles{grid-template-columns:1fr!important}
  .tiles>.tile{grid-column:span 1!important;grid-row:span 1!important}
  .tile.hero .hval{font-size:44px}
  .tile.hero .hval small{font-size:19px}
  .tile .spark{width:96px}
  .tile.hero .spark,.tile.tall .spark{width:100%}
  .grid3,.row3,.rowsplit,.lgrid,.mugrid,.cmp-grid,.streakgrid,.mkgrid,
  .w-h2h,.w-c2h2h,.lpgrid,.w-btgrid,.cb2{grid-template-columns:1fr!important}
  .lpgrid .swell.lpsay{grid-column:span 1}
  .cmstats{grid-template-columns:repeat(2,1fr)}
  /* Rekord-Kacheln bleiben zu zweit: sie tragen genau eine Zahl, und
     einspaltig wären es über dreißig Bildschirmhöhen. */
  .recgrid,.recgrid.small{grid-template-columns:repeat(2,1fr)!important;gap:10px}
  .rcard{padding:11px 12px}
  .rcard .rv{font-size:19px}

  /* ---- Breite Tabellen: je ein eigener Scrollbereich ---- */
  .tblwrap,.sbwrap,.w-admtblwrap{overflow-x:auto;max-width:100%}
  th{padding:7px 8px}
  td{padding:8px 8px}
  /* Kopfzeile der Match-History klebt beim Querscrollen nicht mit —
     ein Skin setzt sie am Rechner sticky, auf dem Telefon stört das. */
  #hist thead th{position:static}

  /* ---- Heatmap ---- */
  .hm{min-width:472px}
  .legend{font-size:10.5px;gap:8px}
  .lgrad{width:110px}

  /* ---- Vergleichsrangliste: zwei Zahlenspalten je Zeile ---- */
  .w-c2main{grid-template-columns:20px minmax(0,1fr) minmax(0,1fr);gap:9px;row-gap:11px}
  .w-c2who{grid-column:2/-1}
  .w-c2duel{grid-column:1/-1}
  .w-c2row{padding:10px 11px}
  .w-c2big{font-size:19px;min-width:46px}

  /* ---- Beta-Ranglisten: Balken auf eigene Zeile ---- */
  .w-btrow{grid-template-columns:minmax(0,1fr) 92px;row-gap:4px}
  .w-bttrack{grid-column:1/-1}
  .w-btcard{padding:13px 14px 12px}
  .w-btnum b{font-size:22px}
  .w-btbarrow .btn{margin-left:0}

  /* ---- Steuerleisten in den Tabs: eine Zeile je Gruppe, scrollbar ---- */
  .chbar{gap:8px 10px}
  .chbar .btn{margin-left:0}
  .chbar>.seg{max-width:100%}
  .w-c2tabs{gap:5px}

  /* ---- Formulare ---- */
  .cmp-input{min-width:0;flex:1 1 100%}
  .w-keyform input,.w-admin,.w-admsel{min-width:0;flex:1 1 100%}
  .w-admform{gap:8px}
  .w-progwrap,.w-sptrack,.w-btprog{min-width:90px}
  /* Ideen-Formular: volle Breite, grosse Antippflaechen, nichts steht neben-
     einander, was auf 360 px nur noch halb passt. */
  .sugta{min-height:150px;font-size:16px}    /* 16px: iOS zoomt sonst hinein */
  .sugact .w-admin,.sugact .btn,.sugbar2 .seg{flex:1 1 100%}
  .sugstats{grid-template-columns:repeat(2,1fr)}
  .sugref{margin-left:0}
  /* ---- Wendepunkt ---- */
  .tpclock{font-size:27px}
  .tpbig{flex:1 1 100%}

  /* ---- Live ---- */
  .obar{grid-template-columns:40px 1fr 76px 1fr 40px;gap:7px}
  .w-lfrow{grid-template-columns:74px 1fr 92px;gap:8px}
  .livetime{font-size:21px}
  .livescore{margin-left:0}

  /* ---- Diagramme mit weiter Zeichenfläche ----
     Zwei Diagramme sind für eine breite Fläche gezeichnet (LP-Verlauf
     1120 Einheiten, Vollansicht 1000). Auf 330 px zusammengestaucht wäre
     ihre Achsenbeschriftung rund 3 px hoch — also gar nicht lesbar. Statt
     sie zu verkleinern bekommen sie ihren eigenen Scrollbereich und
     behalten eine lesbare Größe. Die Zahlen selbst stehen ohnehin im
     Antipp-Hinweis bzw. in der Bildunterschrift. */
  .lpwell{overflow-x:auto;overscroll-behavior-x:contain}
  .lpchart{min-width:900px}

  /* ---- Chart-Vollansicht ---- */
  .cmback{padding:10px 8px}
  .cmwin{width:100%}
  .cmlegend{margin-left:0;width:100%}
  .cmbar select{max-width:100%}
  .cmplot{padding:8px 10px 6px;overflow-x:auto;overscroll-behavior-x:contain}
  .cmplot .chart{min-width:860px}
  .cmcap{font-size:11.5px}

}

/* =====================================================================
   Fingerbedienung — an das EINGABEGERÄT gebunden, nicht an die Breite.
   Ein Tablet ist 820 px breit und trotzdem ein Fingergerät, ein Telefon
   im Querformat sogar rund 800 px. Würden die 44-px-Ziele im Breiten-
   Umbruchpunkt stehen, hätte ausgerechnet das Tablet 27 px hohe Reiter.
   ===================================================================== */
@media (hover:none),(pointer:coarse){
  .btn,.seg button,.w-c2tab,.acctbtn,.copybtn,.rolehead,
  select,.w-admsel,.dinput,.cmclose,.cmzoom,.fbtoggle,
  /* .sugin / .sugact .w-admin: Eingabefelder des Ideen-Formulars und die
     Notiz an einem Eintrag — auch sie werden mit dem Finger getroffen. */
  .w-btrl,.jclose,.aopt,button.rcard,.sugin,.sugact .w-admin{min-height:44px}
  .cmzoom,.jclose,.w-btrl{min-width:44px}
  .seg{padding:2px}
  /* Details-Aufklapper (Nerd-Infos, Beta-Abschnitte, „mehr zeigen") sind
     Bedienelemente — auch sie brauchen die Fingerfläche. */
  .w-c2nerd>summary,.w-c2why>summary,.w-btdet>summary,.w-btmore>summary{
    min-height:44px;display:flex;align-items:center}
  .w-btsec>summary{min-height:44px;align-items:center;padding-top:6px}
  /* Kleine Ziele, die einen Hinweis tragen, etwas vergrößern. */
  .strip .chip{width:24px;height:24px;font-size:11px}
  .sess .schip{width:17px;height:11px}
  .cell{height:32px}
}

/* Sehr schmale Geräte (≤ 340 px): die letzten zwei Spalten fallen weg. */
@media(max-width:340px){
  body{padding:10px 10px 40px}
  .card{padding:12px 12px}
  .recgrid,.recgrid.small{grid-template-columns:1fr!important}
  .cmstats{grid-template-columns:1fr}
}

/* =====================================================================
   Antipp-Hinweise (Ersatz für Hover) — siehe „Tooltip" im Skript.
   #tip wird auf Zeigegeräten wie bisher am Cursor gezeichnet; auf
   Fingergeräten wird es an das angetippte Element geheftet (.pin) und
   trägt dann eine Fußzeile, die sagt, wie man es wieder schließt.
   ===================================================================== */
#tip.pin{max-width:min(300px,calc(100vw - 20px));font-size:12.5px;line-height:1.45;
  padding:10px 13px 9px;
  box-shadow:0 12px 34px rgba(0,0,0,.72),0 0 0 1px rgba(255,255,255,.10)}
#tip .tipx{display:none}
#tip.pin .tipx{display:block;margin-top:8px;padding-top:7px;font-style:normal;
  font-size:10.5px;letter-spacing:.3px;color:#9aa5b4;
  border-top:1px solid rgba(255,255,255,.14)}
/* Auf Fingergeräten kein Doppel-Highlight beim Antippen. */
@media(hover:none){
  [data-tip]{-webkit-tap-highlight-color:transparent}
  /* Ohne Hover gibt es keine :hover-Rückmeldung — Listenzeilen bekommen
     stattdessen eine dauerhaft leicht abgesetzte Fläche, damit ihre
     Grenzen sichtbar bleiben. */
  .frow:nth-child(even),.w-btrow:nth-child(even),.obar:nth-child(even){
    background:rgba(255,255,255,.025)}
}