/** * Die Arcade-Seite auf /arcade/. * * Laedt NACH app.css UND nach games.css. Der Kopfbaukasten (pc-eyebrow, * pc-page-title, pc-description, pc-title-rule) und die Uebersichtsleiste * kommen aus app.css, die Spielkarte (pc-game-card und alles darunter) aus * games.css. * * WER HIER EINE REGEL ERGAENZT, die einen Namen aus einem der beiden * trifft, schlaegt sie bei gleicher Genauigkeit. Genau daran ist die * Stats-Seite mit 6.60.2 gescheitert. Alles Eigene traegt deshalb das * Vorsatzstueck `pc-ah-`. * * DIE KARTEN SIND ABSICHTLICH DIESELBEN wie auf /spiele/. Ein zweiter Satz * Regeln fuer dieselbe Karte waere die Doppelung, vor der die erste Zeile * von CLAUDE.md warnt; er liefe beim ersten Griff an die Spiele-Seite * auseinander. Was hier steht, sind nur die drei Unterschiede: Die Karten * stehen nebeneinander statt untereinander, das Vorschaubild ist ein SVG * statt eines Fotos, und der Knopf steht allein. */ /* .pc-arcade-hub-head ist mit 6.88.0 entfallen, die Seite hat ihren Kopfbereich verloren. Die vier !important muessen bleiben: Das Theme setzt Breite, Raender und einen Grund an jedem Block und gewaenne sonst trotz geringerer Genauigkeit. */ .pc-arcade-hub { width: var(--pc-width); max-width: var(--pc-max) !important; margin-left: auto !important; margin-right: auto !important; padding: 0 !important; box-sizing: border-box; background: transparent !important; background-color: transparent !important; display: flex; flex-direction: column; } /* --------------------------------------------------------------- * Der Spielerkopf * * Links die Person, rechts das Guthaben. Derselbe leise Grund und dieselbe * Rundung wie die Setzleiste des Roulettes, damit die drei Seiten * zusammengehoeren. * ------------------------------------------------------------- */ .pc-ah-kopf { display: flex; align-items: center; justify-content: space-between; gap: 28px; flex-wrap: wrap; padding: 22px 24px; margin: 0 0 26px 0; border-radius: 16px; background: rgba(255, 255, 255, 0.025); box-sizing: border-box; } /* --------------------------------------------------------------- * DER SPIELERKOPF IST AUSGEBLENDET, AUF JEDER BREITE * * Roberts Vorgabe vom 17.08.2026, in zwei Schritten: erst am Telefon * ("Da sollen NUR die Buttons zu sehen sein", 6.88.1), dann auch am * Rechner ("in der Desktop Version bitte auch die 2 Bloecke"). * * EIGENE REGEL DIREKT HINTER DER GRUNDREGEL, und zwar aus zwei Gruenden: * Die Grundregel darueber beschreibt, WIE der Kasten aussieht, wenn er * dasteht; sie bleibt unangetastet und ist damit die Vorlage fuer ein * Zurueckdrehen. Und die Sichtbarkeit wird an GENAU EINER Stelle * entschieden - die Zeile in der 768er Medienabfrage aus 6.88.1 ist * deshalb wieder entfallen, zwei Stellen fuer dieselbe Frage laufen * erfahrungsgemaess auseinander. * * Kein !important noetig: gleiche Klasse, gleiche Genauigkeit, spaetere * Stellung. .pc-ah-kopf.is-gast weiter unten ist zwar genauer, setzt * aber kein display. * * WAS DAMIT GANZ WEGFAELLT, und das gehoert gesagt: Die taegliche * Abholung sitzt IM Kopf (.pc-ah-daily), und arcadehub.js ist die * EINZIGE Stelle im Plugin, die POST /daily ruft. Die 500 Punkte je Tag * sind damit auf keinem Geraet mehr zu holen. Robert weiss das, es steht * im Bericht zu 6.88.2. * * BEWUSST NUR AUSGEBLENDET, nicht herausgeschnitten. Der Kurzbefehl * setzt die Huelle weiter, arcadehub.js fuellt sie weiter, der Bootstrap * reist weiter mit - rund ein Kilobyte auf einer Seite. Dafuer ist ein * Zurueckdrehen eine Zeile. Wer arcadehub.js entfernt, entfernt die * Abholung endgueltig; das ist eine Entscheidung und keine Aufraeumung. * ------------------------------------------------------------- */ .pc-ah-kopf { display: none; } /* Die linke Spalte: Name, Levelkarte, Rekorde. * * Bis 6.76.0 stand hier ein grosses Abzeichen daneben, und .pc-ah-person * war die Reihe aus Bild und Text. Mit 6.77.0 ist das Bild weg - es stand * zweimal im selben Kasten, einmal gross und einmal in der Kette vor dem * Namen. Damit ist .pc-ah-person selbst die Spalte, und die Zwischenhuelle * .pc-ah-person-text ist ersatzlos entfallen. * * .pc-ah-av gibt es aus demselben Grund nicht mehr. Die Regel darin war * kein Beiwerk: Sie nahm .pc-av-box den Abstand nach rechts, den die Klasse * aus base.css fuer die Kette mitbringt. Wer hier je wieder ein einzeln * stehendes Abzeichen einbaut, braucht sie erneut - siehe die Lektion aus * 6.60.3. */ .pc-ah-person { min-width: 0; flex: 1 1 320px; } .pc-ah-name { display: block; font-family: var(--pc-font-page); font-size: 20px; font-weight: var(--pc-weight-page); color: var(--pc-text); line-height: 1.3; margin-bottom: 10px; overflow-wrap: anywhere; } /* Die Levelkarte kommt fertig aus site.js. Hier bekommt sie nur ihre Breite; der Balken darf nicht ueber die halbe Seite laufen, sonst erschlaegt er den Namen darueber. */ .pc-ah-level { max-width: 420px; } /* Die Rekorde beider Spiele, eine Zeile unter der Levelkarte. * * Seit 6.77.0 stehen dort zwei Gruppen statt einer. flex-wrap ist deshalb * noetig und nicht nur vorsorglich: Zwei Gruppen mit je drei Teilen sind * am Telefon breiter als die Spalte, und ohne Umbruch liefen sie ueber den * Rand. Der Abstand ZWISCHEN den Gruppen ist groesser als der innerhalb, * sonst laesen sie sich als eine. */ .pc-ah-rekord { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 22px; margin: 10px 0 0 0 !important; font-family: var(--pc-font-page); font-size: 11px; } .pc-ah-rekord-teil { display: inline-flex; align-items: baseline; gap: 8px; } .pc-ah-rekord-wort { font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; color: var(--pc-muted); } .pc-ah-rekord-zahl { font-family: "droid-sans-mono", monospace; font-size: 14px; color: var(--pc-live); } .pc-ah-rekord-zusatz { letter-spacing: 0.6px; text-transform: uppercase; font-size: 10px; color: var(--pc-muted); } /* --------------------------------------------------------------- * Die Primy-Punkte * ------------------------------------------------------------- */ .pc-ah-primy { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex: 0 0 auto; text-align: right; } .pc-ah-primy-label { font-family: var(--pc-font-page); font-size: 10px; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase; color: var(--pc-muted); } .pc-ah-primy-zahl { font-family: "droid-sans-mono", monospace; font-size: 30px; line-height: 1; color: var(--pc-gold); font-variant-numeric: tabular-nums; } .pc-ah-primy.is-aus .pc-ah-primy-zahl { color: var(--pc-muted); } .pc-ah-primy-fuss { font-family: var(--pc-font-page); font-size: 10.5px; color: var(--pc-muted); } /* ---------- Die taegliche Abholung ---------- * * Sie steht UNTER dem Guthaben, so wie Robert es beschrieben hat: gold * solange sie zu holen ist, grau danach. * * Alle Eigenschaften mit !important, und das ist keine Vorsicht: * base.css setzt `button { padding: 10px 20px !important }` und faerbt * jeden Knopf. Ohne das gewaenne die Grundregel trotz geringerer * Genauigkeit - genau die Lektion "!important schlaegt Genauigkeit", an * der die Knoepfe des Roulettes in 6.68.0 haengengeblieben sind. * * NICHT in einer Zustandsliste mit :hover: Was spaeter je nach Zustand * neu gesetzt wird, steht in einer eigenen schlichten Regel. Sonst * verloere sie in genau dem Augenblick, in dem der Finger den Knopf * beruehrt. */ .pc-ah-daily { display: inline-flex !important; align-items: baseline !important; gap: 8px !important; /* Tiefer als bis 6.80.0, Vorgabe von Robert vom 16.08.2026. Er saß mit zehn Pixeln dicht unter der Fußzeile des Guthabens und las sich wie ein Teil davon; mit 22 steht er als eigene Handlung darunter. DAS IST DER WERT FÜRS TELEFON. Am Rechner sitzt der Knopf damit noch immer knapp acht Pixel zu hoch; die Medienabfrage unten setzt ihn dort auf 38. Begründung und Messung stehen dort. Nicht in einer Zustandsliste mit :hover: Dort verlöre die Angabe in dem Augenblick, in dem der Finger den Knopf berührt. */ margin-top: 22px !important; padding: 7px 14px !important; border: 1px solid var(--pc-gold) !important; border-radius: 999px !important; background: rgba(245, 213, 110, 0.10) !important; box-shadow: none !important; color: var(--pc-gold) !important; font-family: var(--pc-font-page) !important; font-size: 11px !important; font-weight: 700 !important; letter-spacing: 1.2px !important; text-transform: uppercase !important; cursor: pointer !important; transform: none !important; transition: background 0.2s ease, opacity 0.2s ease !important; } .pc-ah-daily:hover { background: rgba(245, 213, 110, 0.18) !important; } .pc-ah-daily-wert { font-family: "droid-sans-mono", monospace !important; font-size: 15px !important; letter-spacing: 0 !important; } /* Geholt: grau und ohne Zeigefinger. Der Knopf bleibt STEHEN und verschwindet nicht - sonst waere am naechsten Tag ein Element da, das gestern nicht da war, und niemand wuesste, dass es das gibt. */ .pc-ah-daily.is-aus { border-color: rgba(255, 255, 255, 0.14) !important; background: rgba(255, 255, 255, 0.03) !important; color: var(--pc-muted) !important; cursor: default !important; } .pc-ah-daily.is-aus:hover { background: rgba(255, 255, 255, 0.03) !important; } /* Ein Aussetzer beim Abholen. Rot, damit der Unterschied zu "schon geholt" sichtbar ist: Dort ist nichts schiefgegangen. */ .pc-ah-daily.is-fehler { border-color: var(--pc-accent) !important; color: var(--pc-accent) !important; } /* --------------------------------------------------------------- * Der Gast * ------------------------------------------------------------- */ .pc-ah-kopf.is-gast { justify-content: flex-start; } .pc-ah-gast { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; width: 100%; } .pc-ah-gast-text { margin: 0 !important; font-family: var(--pc-font-page); font-size: 13.5px; color: var(--pc-muted) !important; flex: 1 1 260px; } /* --------------------------------------------------------------- * Die beiden Spielkarten * * Nebeneinander statt untereinander: Es sind genau zwei, und sie sind eine * Wahl. Untereinander wie auf /spiele/ saehe die zweite aus wie ein * Nachtrag. * ------------------------------------------------------------- */ /* DREI KARTEN SEIT 6.99.0, und deshalb keine feste Spaltenzahl mehr. * * Mit `repeat(2, ...)` stuende die dritte Karte allein in einer zweiten * Reihe und liesse daneben ein Loch. auto-fit legt so viele Spalten an, * wie bei 300 Pixeln Mindestbreite hineinpassen, und verteilt die Karten * gleichmaessig darauf: * * ab 1101 px Fenster Behaelter 1200 drei Spalten zu 384 * 901 bis 1100 px Behaelter 88 % zwei Spalten, die dritte darunter * bis 900 px eine Spalte, siehe die Medienabfrage unten * * minmax(300px, 1fr) und nicht minmax(0, 1fr): Die Untergrenze ist der * Punkt, an dem der Titel umbricht. Sie liegt bewusst UEBER dem Wert, bei * dem drei Spalten in 900 Pixel passen wuerden - sonst haette die * Medienabfrage unten, die genau davor schuetzt, keine Wirkung mehr. */ .pc-ah-spiele { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; } /* Die ganze Karte ist der Verweis. * * Sie traegt seit 6.77.0 ein a-Element statt eines article, und damit * braucht sie die Abwehr, die in diesem Projekt jeder Verweis braucht: * Farbe und Unterstreichung kommen sonst vom Theme. Die Zustandsliste ist * (0,2,0) und schlaegt jede spaetere Regel mit nur der Klasse - deshalb * steht hier NICHTS, was die Medienabfrage weiter unten neu setzt. Genau * daran ist das Kreuz der Kopfzahlen mit 6.55.2 gescheitert. * * border-radius traegt !important, weil games.css an .pc-game-card * `border-radius: 0 !important` setzt. Ohne das gewinnt die Grundregel * trotz gleicher Genauigkeit und frueherer Stellung nicht - aber mit * !important auf beiden Seiten entscheidet die Reihenfolge, und * arcadehub.css laedt spaeter. * * DER LINKE RAND BRAUCHT BEIDES, Breite UND Farbe. games.css setzt ihn auf * 2 Pixel in rgba(255,255,255,0.4), also breiter und heller als die * uebrigen drei; auf /spiele/ ist das der Akzent am linken Rand einer * eckigen Karte. Beim ersten Anlauf stand hier nur die Breite, und im * Browser gemessen war der Rand links danach zwar 1 Pixel, aber immer noch * 0.4 gegen 0.16 - an einer runden Karte sieht so etwas aus wie ein * Fehler. Die Kurzschreibweise `border` waere kuerzer, wuerde aber auch den * Stil neu setzen; hier soll nur der linke Rand den drei anderen gleichen. * * Der untere Abstand faellt weg, das Raster setzt ihn. Ohne das stuende * unter jeder Karte noch einmal die margin aus games.css. */ .pc-ah-karte, .pc-ah-karte:hover, .pc-ah-karte:focus, .pc-ah-karte:active { display: flex !important; flex-direction: column !important; margin: 0 !important; border-radius: 16px !important; border-left-width: 1px !important; border-left-color: rgba(255, 255, 255, 0.16) !important; color: inherit !important; text-decoration: none !important; box-shadow: none !important; cursor: pointer !important; transition: background-color 0.2s ease, border-color 0.2s ease !important; } /* Der Rand hebt sich beim Ueberfahren, der Grund wird eine Spur heller. Mehr nicht: Ein Anheben oder ein Schatten liesse die Karte springen, und daneben stuende die zweite still. */ .pc-ah-karte:hover, .pc-ah-karte:focus-visible { background: rgba(255, 255, 255, 0.05) !important; border-color: rgba(245, 213, 110, 0.45) !important; } /* Der Titel wird beim Ueberfahren golden. Das ist das Signal, das den entfallenen Knopf ersetzt: Etwas an der Karte antwortet auf den Zeiger. */ .pc-ah-karte:hover .pc-game-title, .pc-ah-karte:focus-visible .pc-game-title { color: var(--pc-gold) !important; } /* Der Fokusrahmen fuer die Tastatur. Ohne ihn waere die Karte mit dem Tabulator nicht zu finden - sie ist jetzt das einzige Klickziel der Seite. */ .pc-ah-karte:focus-visible { outline: 2px solid var(--pc-gold) !important; outline-offset: 3px !important; } /* Nebeneinander waere in einer halben Seitenbreite fuer Bild UND Angaben zu wenig: Das Bild misst 240 Pixel, und daneben blieben rund 100. Deshalb steht das Bild hier UEBER den Angaben, anders als auf /spiele/. */ .pc-ah-karte .pc-game-row { flex-direction: column; gap: 20px; } .pc-ah-karte .pc-game-media { width: 100%; } .pc-ah-karte .pc-game-img-wrap { height: 150px; } /* Das gezeichnete Vorschaubild fuellt seinen Ausschnitt genauso wie ein Foto es taete. object-fit greift bei einem SVG nicht zuverlaessig, deshalb macht es preserveAspectRatio in der Zeichnung selbst; hier braucht es nur die Masse. */ .pc-ah-bild { display: block; width: 100%; height: 100%; } /* Der Angabenblock fuellt die Karte bis unten aus. Bis 6.76.0 stand hier ein Knopf und brauchte das, damit beide Knoepfe auf derselben Hoehe sassen. Den Knopf gibt es nicht mehr, die Regel bleibt: Sie sorgt dafuer, dass die Liste oben anliegt, statt in einer hoeheren Karte in der Mitte zu schweben. Die Regel fuer .pc-game-action ist mit dem Knopf entfallen. */ .pc-ah-karte .pc-game-info { display: flex; flex-direction: column; flex: 1 1 auto; /* DIE BREITE MUSS DASTEHEN, und das ist ein gemessener Befund, kein Feinschliff. `flex: 1 1 auto` meint in einer SPALTE die Höhe, nicht die Breite - die Karte ist hier ja bewusst eine (siehe die Regel an .pc-game-row darüber). Über die Breite entscheidet stattdessen `align-items: flex-start` aus games.css, und das heißt: auf den Inhalt schrumpfen. Gemessen am Rechner bei 1280 Pixeln: Der Block war 261 breit, das Bild darüber 373 - RECHTS BLIEBEN 112 PIXEL LEER. Bei 375 Pixeln dasselbe Bild mit 189 gegen 307. Der Fehler steckte auf beiden Breiten, seit es die Karte gibt. .pc-game-media eine Regel höher bekommt seine 100 Prozent seit jeher; dem Textblock daneben hat sie gefehlt. Dieselbe Ergänzung steht in games.css für /spiele/, dort in der Medienabfrage - denn dort wird die Karte erst am Telefon zur Spalte. MERKSATZ: Wer einen Flex-Behälter auf `column` dreht, prüft JEDES Kind auf seine Breite. Verwandt mit der Falle aus 6.76.0, wo umgekehrt eine Breitenangabe (`flex: 1 1 320px`) am Telefon zur Höhe wurde. */ width: 100%; } /* --------------------------------------------------------------- * Nur am Rechner: der Claim-Knopf mittig * * DIE GENAUE UMKEHRUNG der Medienabfrage weiter unten - 769 gegen 768. * Ohne diese Sauberkeit gaebe es eine Breite, fuer die beide oder keine * gilt; genau darauf achtet CLAUDE.md seit 6.55.1 bei den Kopfzahlen. * * GEMESSEN, nicht geschaetzt. Am Rechner steht der Knopf in der rechten * Spalte unter der Zeile "Guthaben fuer Roulette und Bird", und darunter * folgt der untere Rand des Kastens. Robert wollte ihn mittig zwischen * beiden; bei 1280 Pixeln gemessen sass er 7,9 Pixel zu hoch. * * WARUM 32 UND NICHT 30: Das Ziel BEWEGT SICH MIT, und das ist der Teil, * der beim ersten Anlauf danebenging. * * Die rechte Spalte ist kuerzer als die linke und wird deshalb mittig * ausgerichtet (align-items: center am Kasten). Ein Zuwachs M am Knopf * verlaengert die Spalte und schiebt sie zugleich um M/2 nach oben: * * Knopf-Mitte = 288 + M/2 (der Knopf wandert um M/2 nach unten) * Soll-Mitte = 312,4 - M/4 (die Fusszeile darueber wandert mit hoch) * * Gleichgesetzt ergibt das M = 32,5. Mit 38 stand der Knopf 4,1 Pixel zu * TIEF - gemessen, nicht geschaetzt. * * Am Telefon gilt der Wert nicht: Dort ist der Kasten eine Spalte, es gibt * keinen Leerraum zu verteilen, und 32 Pixel waeren dort eine Luecke. * ------------------------------------------------------------- */ @media (min-width: 769px) { .pc-ah-daily { margin-top: 32px !important; } } /* --------------------------------------------------------------- * Am Telefon * ------------------------------------------------------------- */ @media (max-width: 1100px) { .pc-arcade-hub { width: 88%; } } @media (max-width: 900px) { /* Unter 900 Pixeln stehen zwei Karten nebeneinander so eng, dass der Titel umbricht. Ab hier untereinander, so wie auf /spiele/. */ .pc-ah-spiele { grid-template-columns: minmax(0, 1fr); gap: 20px; } } @media (max-width: 768px) { .pc-arcade-hub { width: 100%; padding: 0 var(--pc-edge) !important; } /* DIE HIDE-REGEL STAND MIT 6.88.1 HIER und ist mit 6.88.2 nach oben gewandert, an die Grundregel: Seither ist der Kopf auf JEDER Breite aus, und die Sichtbarkeit gehoert damit an eine Stelle. ALLE REGELN DARUNTER, die den Kopf betreffen, greifen seither NICHT MEHR - sie stehen bewusst noch da. Sie sind in 6.76.0, 6.78.0 und 6.85.0 im Browser ausgemessen worden, und ein Zurueckdrehen ist damit eine Zeile statt einer neuen Messreihe. */ /* Person und Guthaben untereinander und mittig, so wie die Setzleiste des Roulettes seit 6.76.0. Nebeneinander blieben fuer das Guthaben rund 90 Pixel, und die Zahl braucht mehr. */ /* 30 statt 18 zwischen Person und Guthaben, aus demselben Grund wie der Abstand ueber den Rekorden weiter unten: Am Telefon stapeln sich hier drei Bloecke, und "Bester Flug" und "Primy-Punkte" gehoerten optisch zusammen, obwohl das eine ein Rekord und das andere ein Kontostand ist. */ .pc-ah-kopf { flex-direction: column; align-items: stretch; gap: 30px; padding: 18px 16px; } /* LINKSBUENDIG, nicht mittig, und das ist Roberts Vorgabe vom 16.08.2026: Am Telefon steht der Kasten ueber die volle Breite, und mittig gesetzte Zeilen unterschiedlicher Laenge haben dort keine gemeinsame Kante mehr. Untereinander stapelt der Block von allein. flex: 0 0 auto ist der eigentliche Befund dieser Fassung. .pc-ah-person traegt aus der Grundregel `flex: 1 1 320px`. Das war fuer die ZEILE gedacht, wo 320 die Breite meint. In der Spalte ist die Hauptachse aber senkrecht, und dieselben 320 wirken dort als HOEHE: Der Inhalt ist rund 130 Pixel hoch, der Rest war Leerraum. Gemessen klafften zwischen den Rekorden und den Primy-Punkten 183 Pixel. */ .pc-ah-person { text-align: left; flex: 0 0 auto; } .pc-ah-level { max-width: none; } /* DIE PUNKTE STEHEN RECHTS, das Level links. * * Das kehrt eine Entscheidung aus 6.78.0 um, und zwar auf Roberts * ausdrueckliche Vorgabe vom 16.08.2026. Dort stand: "space-between * schoebe die Punkte an den rechten Rand, und bei einem Kasten ueber die * volle Breite waeren das ueber 200 Pixel Abstand zwischen zwei Angaben, * die zusammengehoeren." * * Robert sieht es andersherum, und die Begruendung traegt: Der Kasten ist * am Telefon breit, und zwei Angaben mit einem festen Abstand von 22 * Pixeln lassen rechts davon einen langen leeren Streifen stehen. Mit * space-between bekommt jede Angabe ihre eigene Kante - das Level die * linke, die Punkte die rechte -, und darunter fluchtet der * Fortschrittsbalken mit beiden. */ .pc-ah-level .pc-level-head { justify-content: space-between; gap: 22px; margin-bottom: 12px; } /* Die Punkte selbst rechtsbuendig. Ohne das stuende der Block zwar rechts, sein Text darin aber weiterhin links - bei zwei Zeilen ("880 Punkte" und "Noch 20 bis Level 10") faellt das sofort auf. */ .pc-ah-level .pc-level-points { text-align: right; } /* Das Level in der Groesse der Punkte daneben. Bis 6.78.0 stand die Zahl auf 34 Pixel und die der Punkte auf 20; das Level erschlug damit alles andere im Kasten, obwohl es die kleinere Aussage ist. Jetzt tragen beide dieselbe Groesse, und die Beschriftungen ebenso. */ .pc-ah-level .pc-level-badge strong { font-size: 20px; } .pc-ah-level .pc-level-word { font-size: 12.5px; letter-spacing: 1.2px; } /* MEHR LUFT ZWISCHEN DEN DREI BLOECKEN, Vorgabe von Robert vom 16.08.2026: "ein wenig durcheinander und nicht schoen getrennt". Am Telefon stehen Levelkarte, Rekorde und Guthaben untereinander statt wie am Rechner nebeneinander, und mit zehn Pixeln Abstand lasen sich die drei als ein einziger Block. 26 statt 10 trennt sie, ohne dass der Kasten spuerbar hoeher wird - gemessen sechzehn Pixel. */ .pc-ah-rekord { justify-content: flex-start; margin-top: 26px !important; } .pc-ah-primy { align-items: flex-start; text-align: left; } .pc-ah-gast { flex-direction: column; text-align: center; } .pc-ah-karte .pc-game-img-wrap { height: 130px; } }