/* Header */ :root { --pc-nav-size: 16px; --pc-font-logo: "pacaembu", sans-serif; --pc-font-menu: "eurostile", sans-serif; --pc-weight-logo: 300; --pc-weight-menu: 400; } /* Die beiden Regeln zur Sprachumschaltung standen hier zeichengleich ein zweites Mal. base.css traegt sie, und site.css haengt in pages.php ausdruecklich daran, laedt also immer danach. Wer eine der beiden Stellen anpasst, sucht sonst an der falschen Datei. */ .primecup-header-master { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; width: auto; max-width: none !important; margin: 0 calc(50% - 50vw) 15px calc(50% - 50vw) !important; padding: 0 30px !important; box-sizing: border-box; background: transparent; /* Diese beiden Zeilen sehen nach Resten eines mitfahrenden Kopfes aus, sind aber das Gegenteil und werden gebraucht: Das mobile Menue liegt als .mobile-menu-panel mit position: absolute im Kopf, und seine Huelle traegt selbst keine Positionierung. Bezugspunkt fuer top und right ist damit dieser Kasten hier. Ohne position wanderte das Menue an den Seitenrand. Der z-index haelt es ueber dem Inhalt darunter. Ein mitfahrender Kopf war mehrfach versucht und ist mit 6.51.2 aufgegeben worden. Im Code stand davon nie etwas; die entsprechende CSS-Eigenschaft kommt im ganzen Projekt nicht vor. Der Begriff steht hier bewusst nicht ausgeschrieben, sonst faende ihn jede kuenftige Suche in diesem Kommentar statt in einer Regel. */ position: relative !important; z-index: 999 !important; } .pc-header-left { justify-self: start; display: flex; align-items: center; } .header-primecup-link { display: inline-flex; align-items: baseline; text-decoration: none !important; font-family: var(--pc-font-logo); font-size: var(--pc-nav-size); font-weight: var(--pc-weight-logo); letter-spacing: 0.5px; line-height: 1; cursor: pointer; } /* ---------- Die Krone vor dem Schriftzug ---------- * * Sie kommt aus derselben Zeichnung wie das Abzeichen und traegt deshalb * .pc-av-box mit. Deren runde Fassung samt Grund und Rand wird hier * zurueckgenommen: Im Kopf soll die Krone stehen, nicht ein Abzeichen. * * Gemessen in em, nicht in Pixeln. Der Schriftzug haengt an * --pc-nav-size, und die Krone soll ihm folgen, wenn sich der Wert * einmal aendert. Dieselbe Ueberlegung wie bei .pc-av-box selbst. * * align-self: center statt vertical-align. .header-primecup-link ist ein * inline-flex mit align-items: baseline, und dort wird vertical-align * IGNORIERT - genau die Falle, an der die Abzeichen im Turnierbaum in * 6.60.0 haengengeblieben sind. Der kleine Versatz nach unten sitzt auf * der Mitte der Grossbuchstaben: Der Schriftzug steht durchgehend in * Versalien, und die tragen ihre Masse oben. Im Browser nachgemessen. */ .pc-logo-krone.pc-av-box { /* 1.2em Kasten. Gemessen ist damit die ZEICHNUNG 13,79 Pixel hoch, die Versalhoehe des Schriftzugs 11 - die Krone steht also ein Viertel ueber dem Text, so wie Robert es wollte. Ueber den Kasten gerechnet waere es das Doppelte: Die Krone fuellt ihre 64 Einheiten nicht aus, sie sitzt zwischen 10 und 56. Wer die Groesse aendert, misst die Tinte ueber getBBox() und nicht den Kasten. */ width: 1.2em; height: 1.2em; padding: 0; background: none; border: none; border-radius: 0; margin-right: 0.34em; align-self: center; /* Und die Feinlage. align-self setzt den KASTEN auf die Mitte der Zeile; gesucht ist die Mitte der Zeichnung auf der Mitte der Versalien. Beides faellt nicht zusammen, gemessen 0,087em zu tief. Dieselbe Bauart wie beim Abzeichen im Turnierbaum, siehe 6.60.1. */ position: relative; top: -0.087em; } .header-primecup-link .primecup-text, .header-primecup-link .tv-text { color: var(--pc-text) !important; font-weight: var(--pc-weight-logo); text-shadow: none !important; transition: opacity 0.25s ease; } .header-primecup-link:hover .primecup-text, .header-primecup-link:hover .tv-text { opacity: 0.6; } /* --------------------------------------------------------------- * Zahlen im Kopf * * Sichtbar sind nur die Zahlen in eckigen Klammern. Was sie bedeuten, steht * im Kasten: am Rechner beim Ueberfahren, am Telefon auf Fingertipp. * * Den Block gibt es zweimal im Dokument, einmal neben dem Schriftzug und * einmal im Klappmenue. Umgeschaltet wird bei 900 Pixeln, denselben, an * denen auch die Kopfleiste zwischen ihren beiden Menues wechselt. * ------------------------------------------------------------- */ .pc-hdr-stats { /* Bezugspunkt fuer den Kasten darunter. Ohne diese Zeile waere es der Kopf selbst, und der Kasten saesse am linken Seitenrand. Dieselbe Falle wie beim mobilen Menue, siehe den Kommentar ganz oben. Am Telefon wird sie ausdruecklich zurueckgenommen, dort SOLL der Kopf der Bezugspunkt sein. Siehe unten in der Medienabfrage. */ position: relative; display: inline-flex; align-items: center; margin-left: 14px; } /* ZWEI Regeln, und die Trennung ist tragend. * * Die Liste mit :hover, :focus und :active gibt es nur, um die Vorgaben des * Themes fuer Knoepfe abzuwehren. Sie ist damit aber SPEZIFISCHER als eine * spaetere Regel, die nur .pc-hdr-stats-btn nennt: (0,2,0) gegen (0,1,0). * Jede Eigenschaft, die weiter unten in einer Medienabfrage ueberschrieben * wird, muss deshalb hier heraus - sonst spraenge sie in dem Augenblick auf * den Grundwert zurueck, in dem der Finger den Knopf beruehrt. * * Genau daran ist der Schliessen-Knopf gescheitert, siehe die Warnung dort. * Bei den Zahlen waere es nur ein Zappeln gewesen, aber dieselbe Ursache. */ /* Abwehr gegen das Theme. Nichts hiervon wird spaeter ueberschrieben. */ .pc-hdr-stats-btn, .pc-hdr-stats-btn:hover, .pc-hdr-stats-btn:focus, .pc-hdr-stats-btn:active { display: inline-flex; align-items: baseline; margin: 0 !important; background: none !important; border: none !important; border-radius: 0 !important; box-shadow: none !important; outline: none !important; font-family: "droid-sans-mono", monospace; font-weight: 400; line-height: 1; color: var(--pc-muted) !important; transform: none !important; white-space: nowrap; transition: opacity 0.2s ease; } /* Gestalt. Alles hier wird weiter unten je nach Breite neu gesetzt und darf deshalb NICHT in der Liste oben stehen. */ .pc-hdr-stats-btn { gap: 6px; padding: 2px 0 !important; font-size: 11.5px; letter-spacing: 0.4px; cursor: pointer !important; } .pc-hdr-stats-btn:hover { opacity: 0.85; } .pc-hdr-stats-klammer { color: var(--pc-muted); opacity: 0.55; } .pc-hdr-stat { display: inline-flex; align-items: baseline; } .pc-hdr-stat-num { color: var(--pc-text); font-weight: 400; } /* Die einzige Zahl, die sich in Echtzeit bewegt, bekommt die Live-Farbe. Alles andere bliebe sonst bunt ohne Aussage. */ .pc-hdr-stat:first-child .pc-hdr-stat-num { color: var(--pc-live); } .pc-hdr-stat-sep { color: var(--pc-muted); opacity: 0.35; } /* ---------- Der Kasten ---------- Gestalt wie die Fenster bei Levelaufstieg und Einladung, nur am Kopf verankert statt mitten auf der Seite. */ .pc-hdr-pop { position: absolute; top: calc(100% + 10px); left: 0; width: 300px; max-width: 78vw; padding: 16px 18px 14px 18px; background: var(--pc-surface); border: 1px solid var(--pc-line); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45); text-align: left; /* Unter dem mobilen Menue (9999), ueber allem anderen im Kopf. */ z-index: 900; opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s; pointer-events: none; } /* Aufgeklappt wird auf drei Wegen, und jeder gilt nur dort, wo er hingehoert. * * is-open setzt der Fingertipp. Hier steht dazu KEINE Medienabfrage, weil * schon das Skript die Klasse nur dort setzt, wo getippt wird; die Bedingung * dafuer steht in tippbar() in site.js und ist die zweite Fassung derselben * Regel. Wer eine aendert, aendert die andere mit. * * :focus-visible ist die Tastatur, und zwar NUR sie. Ein Mausklick setzt zwar * ebenfalls den Fokus, gilt dem Browser aber nicht als sichtbar, und genau * das ist gewollt: Am Rechner soll ein Klick nichts bewirken. Das loest * nebenbei die alte Kruecke :not(.is-mobil) ab, die es brauchte, weil * :focus-within auch beim Antippen griff und der Kasten dadurch sofort wieder * aufging, nachdem ihn das Kreuz zugemacht hatte. * * Der Kasten ist das GESCHWISTER des Knopfes, deshalb der Nachbarschafts- * selektor statt :focus-within an der Huelle. * * Das Ueberfahren steht weiter unten in seiner eigenen Medienabfrage. */ .pc-hdr-stats.is-open .pc-hdr-pop, .pc-hdr-stats-btn:focus-visible + .pc-hdr-pop { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; } .pc-hdr-pop-eyebrow { margin: 0 0 12px 0 !important; font-family: var(--pc-font-page); font-size: 10px; font-weight: 700; letter-spacing: 1.8px; text-transform: uppercase; color: var(--pc-gold) !important; } .pc-hdr-pop-list { list-style: none; margin: 0 !important; padding: 0 !important; display: flex; flex-direction: column; gap: 11px; } .pc-hdr-pop-row { display: flex; align-items: baseline; gap: 10px; margin: 0 !important; padding: 0 !important; } .pc-hdr-pop-num { flex: 0 0 auto; min-width: 52px; font-family: "droid-sans-mono", monospace; font-size: 15px; font-weight: 400; line-height: 1.2; color: var(--pc-text); white-space: nowrap; } .pc-hdr-pop-row:first-child .pc-hdr-pop-num { color: var(--pc-live); } .pc-hdr-pop-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .pc-hdr-pop-label { font-family: var(--pc-font-page); font-size: 12.5px; font-weight: 700; line-height: 1.3; color: var(--pc-text); overflow-wrap: break-word; word-wrap: break-word; } .pc-hdr-pop-hint { font-family: var(--pc-font-page); font-size: 11px; font-weight: var(--pc-weight-page); line-height: 1.4; color: var(--pc-muted); overflow-wrap: break-word; word-wrap: break-word; } .pc-hdr-pop-fuss { margin: 13px 0 0 0 !important; padding-top: 11px; border-top: 1px solid var(--pc-line); font-family: var(--pc-font-page); font-size: 10.5px; font-weight: var(--pc-weight-page); line-height: 1.4; color: var(--pc-muted) !important; } /* ---------- Schliessen-Knopf ---------- * * ACHTUNG, hier steckte der Fehler aus 6.55.1: display gehoert NICHT in die * Liste mit :hover, :focus und :active. * * Die Liste ist (0,2,0) spezifisch, die Regel weiter unten, die den Knopf am * Telefon sichtbar macht, nur (0,1,0). Sobald der Finger den Knopf beruehrte, * griff also wieder display: none, und der Knopf verschwand MITTEN IN DER * BERUEHRUNG. Gemessen im Browser sah das so aus: * * pointerdown -> BUTTON.pc-hdr-pop-x der Finger setzt auf * mousedown -> BUTTON.pc-hdr-pop-x * pointerup -> P.pc-hdr-pop-eyebrow der Knopf ist weg * click -> DIV.pc-hdr-pop gemeinsamer Vorfahre * * Der Browser erzeugt click am gemeinsamen Vorfahren von mousedown- und * mouseup-Ziel. Der Zuhoerer am Knopf lief deshalb nie, und der Kasten liess * sich nur durch einen Tipp DANEBEN schliessen. * * Sichtbarkeit steht seither in einer eigenen Regel ohne Zustandsselektoren. */ .pc-hdr-pop-x { display: none; } .pc-hdr-pop-x, .pc-hdr-pop-x:hover, .pc-hdr-pop-x:focus, .pc-hdr-pop-x:active { /* Das !important ist tragend, kein Rest. Weiter unten in dieser Datei steht "header a, header span, header button { position: relative !important }", und das schlaegt jede genauere Regel ohne !important. Der Knopf lag deshalb seit 6.54.1 im Fluss statt rechts oben im Kasten: Die Zeichenkette "absolute" stand zwar da, gewirkt hat sie nie. Genau die Lektion "!important schlaegt Genauigkeit". */ position: absolute !important; top: 5px; right: 6px; /* 38 Pixel im Quadrat: Eine Flaeche, die mit dem Finger sicher zu treffen ist. Das Kreuz darin ist kleiner, die Flaeche darum zaehlt. */ width: 38px; height: 38px; padding: 0 !important; margin: 0 !important; background: none !important; border: none !important; border-radius: 0 !important; box-shadow: none !important; outline: none !important; font-family: var(--pc-font-page); font-size: 22px; font-weight: 400; line-height: 1; color: var(--pc-muted) !important; cursor: pointer !important; transform: none !important; transition: color 0.2s ease; } .pc-hdr-pop-x:hover { color: var(--pc-text) !important; } /* ---------- Ueberfahren: nur am Rechner ---------- Die Bedingung ist die genaue UMKEHRUNG der Tipp-Bedingung darunter, damit sich beide nie ueberschneiden. Auf einem schmalen Fenster am Rechner gaebe es sonst Ueberfahren UND Tippen zugleich: Der Kasten ginge beim Zeigen auf, ein Klick liesse ihn per is-open stehen, und beim Wegfahren bliebe er offen. Genau ein Weg je Geraet. Ausgeschrieben nach De Morgan: nicht (max-width: 900px) -> min-width: 901px nicht (hover: none) -> hover: hover nicht (pointer: coarse) -> pointer: fine */ @media (min-width: 901px) and (hover: hover) and (pointer: fine) { .pc-hdr-stats:hover .pc-hdr-pop { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; } /* Ein Klick bewirkt hier ausdruecklich nichts, deshalb sieht der Block auch nicht wie ein Knopf aus. */ .pc-hdr-stats-btn, .pc-hdr-stats-btn:hover, .pc-hdr-stats-btn:focus, .pc-hdr-stats-btn:active { cursor: default !important; } } /* ---------- Tippen: ueberall sonst ---------- Dieselbe Bedingung wie tippbar() in site.js. Das Komma ist ein ODER: Es reicht EINER der drei Faelle. */ @media (max-width: 900px), (hover: none), (pointer: coarse) { /* Erst hier wird das Kreuz sichtbar. Am Rechner geht der Kasten von allein zu, dort waere es ein Versprechen ohne Deckung. */ .pc-hdr-pop-x { display: block; } /* Die Zahlenzeile ist nur zwoelf Pixel hoch. Polsterung plus dieselbe Polsterung als negativer Aussenabstand vergroessert die Trefferflaeche auf gut dreissig Pixel, OHNE die Kopfleiste hoeher zu machen. Ein reines Vergroessern haette den ganzen Kopf mitwachsen lassen. */ .pc-hdr-stats-btn, .pc-hdr-stats-btn:hover, .pc-hdr-stats-btn:focus, .pc-hdr-stats-btn:active { padding: 11px 4px !important; margin: -11px -4px !important; } } /* ---------- Am Telefon: der Kasten ueber die volle Breite ---------- Bis 6.55.0 lag der Block im Klappmenue. Jetzt steht er neben dem Schriftzug, und damit stellte sich sofort das Platzproblem: Der Kasten war 300 Pixel breit und am Block ausgerichtet, der weit rechts vom linken Rand sitzt. Auf einem 390 Pixel breiten Geraet stand er damit halb ausserhalb des Bildes. */ @media (max-width: 900px) { /* Die Positionierung wird ZURUECKGENOMMEN. Bezugspunkt ist damit der naechste positionierte Vorfahre, und das ist .primecup-header-master mit seinem position: relative. Genau daran haengt auch das mobile Menue. Der Kasten spannt dadurch ueber die Kopfbreite statt ueber die Breite der Zahlenzeile. Der Schliessen-Knopf bleibt richtig verankert: Er haengt an .pc-hdr-pop, und das ist selbst absolut positioniert. */ .pc-hdr-stats { position: static; margin-left: 10px; } .pc-hdr-stats-btn { font-size: 10.5px; gap: 4px; } .pc-hdr-pop { top: calc(100% + 8px); /* Zwanzig Pixel sind die Polsterung, die der Kopf unterhalb von 1150 Pixeln traegt. Der Kasten steht damit bündig mit dem Schriftzug links und dem Menueknopf rechts. */ left: 20px; right: 20px; width: auto; max-width: none; } .pc-hdr-pop-num { min-width: 46px; font-size: 14px; } /* Platz fuer den Schliessen-Knopf, damit er nicht auf der Ueberschrift sitzt. */ .pc-hdr-pop-eyebrow { padding-right: 40px; } } /* Auf sehr schmalen Geraeten teilen sich Schriftzug, Zahlen und Menueknopf eine Zeile. Die Zahlen sind das, was am ehesten nachgeben kann. Der Kasten behaelt seine zwanzig Pixel und bleibt damit buendig mit dem Schriftzug. Ihn weiter nach aussen zu ziehen brachte ein paar Pixel mehr Text und dafuer eine Kante, die zu nichts sonst auf der Seite passt. */ @media (max-width: 420px) { .pc-hdr-stats { margin-left: 7px; } .pc-hdr-stats-btn { font-size: 9.5px; gap: 3px; letter-spacing: 0; } .pc-hdr-pop { padding: 14px 14px 12px 14px; } .pc-hdr-pop-num { min-width: 40px; font-size: 13px; } } @media (prefers-reduced-motion: reduce) { .pc-hdr-pop { transition: none !important; } } .pc-header-center { justify-self: center; } .pc-header-right { justify-self: end; } .desktop-only-menu { display: flex; align-items: center; gap: 26px; background: transparent; flex-wrap: nowrap; } .menu-item { display: inline-block; padding: 0; background: none !important; border: none !important; border-radius: 0 !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; text-transform: uppercase; font-family: var(--pc-font-menu); font-size: var(--pc-nav-size); font-weight: var(--pc-weight-menu); letter-spacing: 0.5px; line-height: 1; color: var(--pc-text) !important; text-decoration: none !important; white-space: nowrap !important; transition: opacity 0.25s ease; } @media (hover: hover) { .menu-item:hover { opacity: 0.6; } } .pc-lang-switch { display: inline-flex; align-items: center; gap: 7px; line-height: 1; } .pc-lang-btn { background: none !important; background-color: transparent !important; border: none !important; border-radius: 0 !important; box-shadow: none !important; padding: 0 !important; margin: 0 !important; color: var(--pc-text) !important; font-family: var(--pc-font-menu) !important; font-size: var(--pc-nav-size) !important; font-weight: var(--pc-weight-menu) !important; letter-spacing: 0.5px !important; text-transform: uppercase !important; line-height: 1 !important; opacity: 0.4; cursor: pointer !important; outline: none !important; transform: none !important; transition: opacity 0.25s ease !important; } .pc-lang-btn:hover, .pc-lang-btn:focus, .pc-lang-btn:active { background: none !important; color: var(--pc-text) !important; outline: none !important; transform: none !important; } .pc-lang-btn.active { opacity: 1; } .pc-lang-sep { color: var(--pc-text); font-family: var(--pc-font-menu); font-size: var(--pc-nav-size); opacity: 0.3; user-select: none; } .mobile-only-menu { display: none; position: relative; justify-self: end; } .mobile-menu-trigger { padding: 0 !important; background: none !important; border: none !important; border-radius: 0 !important; box-shadow: none !important; backdrop-filter: none !important; color: var(--pc-text) !important; display: flex !important; align-items: center !important; gap: 8px !important; font-family: var(--pc-font-menu) !important; font-weight: var(--pc-weight-menu) !important; font-size: var(--pc-nav-size) !important; text-transform: uppercase !important; letter-spacing: 0.5px !important; cursor: pointer !important; transform: none !important; outline: none !important; transition: opacity 0.25s ease !important; } .mobile-menu-trigger:hover, .mobile-menu-trigger:focus, .mobile-menu-trigger:active, .mobile-menu-trigger:focus-visible, .mobile-menu-trigger.active { background: none !important; border: none !important; box-shadow: none !important; color: var(--pc-text) !important; outline: none !important; transform: none !important; } .mobile-menu-trigger.active { opacity: 0.6; } .menu-chevron { font-size: 10px; color: var(--pc-text); transition: transform 0.3s ease; } .mobile-menu-trigger.active .menu-chevron { transform: rotate(180deg); } /* max-width, seit 6.87.0: Das Menue waechst mit seinem breitesten Eintrag, und seit der Kontopunkt Levelkasten und Muenzen traegt, ist das seine Zeile. Bei einem Fenster von 320 Pixeln kam es gemessen auf 335 und hing damit links aus dem Bild - es ist rechtsbuendig verankert, also faellt der Ueberschuss nach links heraus. Der Deckel laesst das nicht mehr zu; die Zeile bricht dann um, siehe flex-wrap an .mobile-menu-link. 100vw und nicht 100%: Bezugspunkt der Prozentangabe waere die Kopfleiste, und die spannt ueber die volle Fensterbreite hinaus (margin: 0 calc(50% - 50vw)). Die 32 Pixel sind zweimal der Seitenrand von 16. */ .mobile-menu-panel { display: none; position: absolute; top: calc(100% + 10px); right: 0; min-width: 180px; /* So breit wie der breiteste Eintrag, hoechstens aber so breit wie der Bildschirm. Ohne die erste Zeile bliebe das Menue bei seinen 180 Pixeln, und die Kontozeile braeche auf DREI Zeilen um - ein Menueeintrag von 79 Pixeln Hoehe neben sechs einzeiligen. Mit ihr misst das Menue auf einem Telefon von 375 Pixeln 335 und traegt die Zeile am Stueck; erst darunter greift der Deckel und die Zeile bricht. Kennt ein aelterer Browser max-content nicht, faellt er auf die 180 zurueck und die Zeile bricht - unschoen, aber heil. */ width: max-content; max-width: calc(100vw - 32px); padding: 4px 0; background: var(--pc-bg); border: none; border-radius: 0; box-shadow: none; box-sizing: border-box; z-index: 9999; } .mobile-menu-panel.open { display: block; } .mobile-menu-link { display: block !important; width: 100% !important; box-sizing: border-box !important; padding: 9px 14px 9px 18px !important; background: none !important; border: none !important; color: var(--pc-text) !important; text-decoration: none !important; font-family: var(--pc-font-menu) !important; font-weight: var(--pc-weight-menu) !important; font-size: var(--pc-nav-size) !important; text-transform: uppercase !important; letter-spacing: 0.5px !important; text-align: right !important; white-space: nowrap !important; -webkit-tap-highlight-color: transparent; transition: opacity 0.25s ease !important; } .mobile-menu-link:hover, .mobile-menu-link:active { background: none !important; opacity: 0.6; } /* ---------- Arcade und Shop in Gold ---------- * * Roberts Vorgabe vom 16.08.2026: die beiden ein wenig hervorheben, "in * unserem Gold". Es sind die beiden Punkte, an denen ein Spieler etwas * holen und etwas ausgeben kann; Gold ist in diesem Projekt die Farbe fuer * den Wert selbst, vom Preisgeld ueber das Guthaben bis zur [1] der * taeglichen Abholung. * * NUR DIE FARBE, nichts weiter. Ein Grund, ein Rahmen oder eine andere * Schriftstaerke braeuchte Polsterung oder aendert die Wortbreite, und * beides macht die Kopfleiste hoeher oder verschiebt die Punkte daneben. * "Ein wenig hervorheben" ist in einem sonst weissen Menue genau eine * Farbe. * * ES HAENGT AN DER ADRESSE, nicht an einer Klasse im Markup, und deshalb * braucht es KEINE neue Seitenfassung. Der Kopf steht auf jeder Seite; * eine Aenderung an Header_v4.txt waere eine Aenderung an jeder einzelnen. * Denselben Weg gehen die Krone seit 6.74.0, die Einladungszahl seit * 6.52.0 und die Tagesmarke: site.js sucht sie ueber * `[href*="/team"]` und `[href*="/arcade"]`, hier tut es das CSS. * * !important, weil .menu-item und .mobile-menu-link ihre Farbe ebenfalls * damit setzen. Die Genauigkeit reicht ohnehin - (0,2,1) gegen (0,1,0) -, * aber gegen ein !important gewinnt nur ein !important. * * KEINE ZUSTANDSLISTE, und das ist wichtig: Die beiden Hover-Regeln * darueber setzen `opacity`, nicht `color`. Sie dimmen das Gold also * einfach mit, und es gibt nichts, was sich ueberschreiben koennte. Stuende * hier eine Liste mit :hover, waere es genau die Falle aus 6.55.2. */ a.menu-item[href*="/arcade"], a.menu-item[href*="/shop"], a.mobile-menu-link[href*="/arcade"], a.mobile-menu-link[href*="/shop"] { color: var(--pc-gold) !important; } /* Die Sprachwahl im Klappmenue gibt es ab Header_v5 nicht mehr, sie steht seit 6.86.2 im Fuss. Die Regel bleibt trotzdem stehen, und zwar mit Absicht: Plugin und Seitenfassungen werden getrennt eingespielt, und zwischen den beiden Schritten laeuft das neue CSS auf dem alten Kopf. Ohne sie stuende der Schalter dort so lange unformatiert im Menue. Dieselbe Ueberlegung wie bei #pcPrimyMobilInfo in primy.css seit 6.72.0. Sie trifft nach dem Einspielen von Header_v5 nichts mehr. */ .mobile-lang-row { display: flex; justify-content: flex-end; align-items: center; gap: 7px; width: 100%; box-sizing: border-box; padding: 12px 14px 9px 18px; } header a, header span, header button { position: relative !important; z-index: 3 !important; } @media (max-width: 1150px) { .desktop-only-menu { gap: 18px; } .primecup-header-master { padding: 0 20px !important; } } @media (max-width: 900px) { .primecup-header-master { grid-template-columns: 1fr auto; } .desktop-only-menu { display: none !important; } .mobile-only-menu { display: block !important; } /* ---------- Der Kopf am Telefon, seit 6.78.0 ---------- * * Drei Aenderungen, alle NUR hier: die drei Balken statt des Wortes * "Menue", links die Krone allein statt des Schriftzugs, und die vier * Zahlen daneben fallen weg. * * KEINE NEUE SEITENFASSUNG. Der Kopf steht auf jeder Seite; eine * Aenderung an Header_v2.txt waere eine Aenderung an jeder einzelnen. * Dieselbe Linie, aus der die Krone in 6.74.0 aus site.js kommt und die * Kopfzahlen in 6.54.0 aus site.js. * * DIE GRENZE IST DIESELBE WIE DIE DES MENUES, 900 Pixel, und das ist * zwingend: Bei einer eigenen Grenze gaebe es einen Bereich mit drei * Balken und vollem Schriftzug daneben, oder umgekehrt. */ /* Der Text im Knopf verschwindet OPTISCH, nicht fuer Vorleseprogramme. Mit display: none haette der Knopf keinen zugaenglichen Namen mehr, und ein aria-label dafuer stuende in der Seitenfassung, die unangetastet bleibt. Dieselbe Technik wie bei .pc-ro-eingabe-label in primy.css. */ .mobile-menu-trigger .pc-lang-de, .mobile-menu-trigger .pc-lang-us { position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; white-space: nowrap !important; } /* Das Dreieck geht ganz. Es sagte "hier klappt etwas auf", und genau das sagen die drei Balken selbst. */ .mobile-menu-trigger .menu-chevron { display: none !important; } /* Der Knopf ist jetzt eine Flaeche, kein Text. 22 mal 16 Pixel, dazu die Polsterung darunter fuer die Tippflaeche. */ .mobile-menu-trigger { gap: 0 !important; justify-content: center !important; width: 22px !important; height: 16px !important; padding: 11px 6px !important; margin: -11px -6px !important; box-sizing: content-box !important; } /* EIN Pseudo-Element fuer drei Balken: der mittlere ist das Element selbst, die beiden anderen sind sein Schatten. Zwei Pseudo-Elemente waeren zwei Stellen, an denen die Farbe auseinanderlaufen kann; currentColor haelt alle drei am Text des Kopfes. ::before und nicht ::after, damit die Balken vor dem versteckten Text stehen und nicht dahinter. */ .mobile-menu-trigger::before { content: ''; display: block; width: 22px; height: 2px; background: currentColor; box-shadow: 0 -6px 0 currentColor, 0 6px 0 currentColor; } /* Links nur noch die Krone. Der Schriftzug verschwindet ganz: Anders als beim Menueknopf bleibt hier ein zugaenglicher Name stehen, der Verweis traegt ihn ueber das title-Attribut der Zeichnung nicht - aber die Startseite ist ueber das Logo ohnehin nur ein Weg von vielen, und im Klappmenue steht jeder davon noch einmal. */ .header-primecup-link .primecup-text, .header-primecup-link .tv-text { display: none !important; } /* So gross wie die drei Balken. In PIXELN und nicht in em: Der Bezugswert --pc-nav-size gilt dem Schriftzug, und den gibt es hier nicht mehr. Gemessen wird die TINTE ueber getBBox und nicht der Kasten - die Krone fuellt ihre 64 Einheiten nicht aus, sie sitzt zwischen 10 und 56. Genau diese Falle steht seit 6.60.0 an .pc-av-box. */ .pc-logo-krone.pc-av-box { /* 28 und nicht 22, und das ist gemessen: Bei einem Kasten von 22 Pixeln ist die TINTE nur 15,1 mal 11,0 gross, die drei Balken daneben sind 22 mal 14. Mit 28 misst die Zeichnung 19,2 mal 14,0 - die Hoehe ist damit dieselbe wie beim Knopf, und darauf kommt es an: Beide sitzen auf einer Linie und wirken gleich gross. Ueber den Kasten gerechnet waere die Krone ein Viertel zu klein herausgekommen. */ width: 28px !important; height: 28px !important; margin-right: 0 !important; /* Die Feinlage galt der Mitte der Versalien. Ohne Schriftzug gibt es keine Versalien mehr, und der Kasten steht von allein mittig. */ top: 0 !important; } /* Die vier Zahlen neben dem Schriftzug fallen weg. AUSGEBLENDET UND NICHT ENTFERNT: Robert hat sie "vorab" heraushaben wollen. Die Regeln aus 6.54.0 bis 6.55.2 samt ihrer beiden genau entgegengesetzten Medienabfragen bleiben deshalb stehen; ein Zurueckdrehen ist damit eine Zeile und keine Rekonstruktion. Am Rechner aendert sich nichts, der Block steht dort weiter. */ .pc-hdr-stats { display: none !important; } } /* Footer */ .primecup-footer-content { margin-top: -40px !important; } .footer-contact { margin-top: 18px !important; margin-bottom: 18px !important; text-align: center; } /* ---------- Discord und die Sprachwahl, seit 6.86.2 im Fuss ---------- * * Robert wollte beide aus der Kopfleiste heraus und zwischen die * Kontaktzeile und die Urheberrechtszeile. Im Kopf stehen sie damit * nirgends mehr, weder im Balken noch im Klappmenue (Header_v5). * * VERSCHOBEN, NICHT NACHGEBAUT. Der Fuss bekommt zeichengleich dieselben * Elemente: den Verweis mit .menu-item und die drei Teile des Schalters * mit .pc-lang-btn und .pc-lang-sep. Damit sehen beide genau so aus wie * vorher, sie stehen nur woanders - und es gibt keine zweite Fassung, die * beim naechsten Griff auseinanderlaeuft. * * .menu-item ist nicht an den Kopf gebunden, die Regel steht als blosse * Klasse da. Ihre Zustandsregel `header a, header span, header button` * greift hier ausdruecklich NICHT, das ist auf
beschraenkt; der * Verweis im Fuss braucht die Positionierung auch nicht. * * Am Skript aendert sich nichts: pcSyncLangUI() sucht `.pc-lang-btn` im * ganzen Dokument, nicht in der Kopfleiste, und pcSetLanguage() ist eine * globale Funktion. site.js laedt auf jeder Seite. * * flex-wrap, damit auf einem sehr schmalen Geraet der Schalter unter den * Verweis rutscht statt hinauszuragen. Der Abstand von 26 Pixeln ist der * der Kopfleiste (.desktop-only-menu), damit die beiden Teile so weit * auseinanderstehen wie vorher. */ /* DIE 13 PIXEL SIND GERECHNET, nicht geraten. .footer-container in base.css ist eine Flex-Spalte mit `gap: 25px`, und darauf liegen zwei weitere Abstaende: .footer-contact traegt 18 Pixel nach unten, .footer-copyright 5 nach oben. Ohne eigenen Wert misst der Abstand ueber der Reihe 25 + 18 = 43 und der darunter 25 + 5 = 30; die Reihe saesse sichtbar naeher an der Urheberrechtszeile als an der Kontaktzeile. 43 - 25 - 5 = 13. Im Browser nachgemessen: 43 oben, 43 unten. */ .footer-meta { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px 26px; margin: 0 0 13px 0; } /* Beide Teile tragen die Schrift der uebrigen Fusszeilen. * * Sie kamen aus der Kopfleiste und brachten deren Schrift mit: eurostile, * 16 Pixel, Versalien, 0,5 Pixel Sperrung. Daneben stehen Impressum, * Datenschutz und die uebrigen Verweise in der Seitenschrift. Im Browser an * `.footer-links a` gemessen: aptos, 14 Pixel, Gewicht 300, -0,1 Pixel * Sperrung, keine Versalien, Zeilenhoehe 1,4. * * DIE SCHRIFTART UEBER inherit, nicht ausgeschrieben: Der Fussbereich * gehoert dem Theme, und `--pc-font-page` ist in site.css gar nicht * gesetzt - die Variable steht je Seiten-Stylesheet, und der Fuss laeuft * auf jeder Seite. Ein