:root {
  /* ---- Farbsatz PRIMECUP ---- */

  /* DER SEITENGRUND, seit 6.98.0 dunkler.
   *
   * Er war bis dahin #1B1C1F. Mit 6.97.0 stand dieser Ton eine Fassung
   * lang allein unter Kopf und Fuss; Robert hat das zurueckgenommen und
   * ihn stattdessen fuer die ganze Seite verlangt.
   *
   * WARUM DIESER TON: Er stammt aus derselben Familie wie der bisherige
   * Grund - ein sehr dunkles Neutral mit kuehlem Stich, Blau vier Stufen
   * ueber Rot. Nur die Helligkeit ist zurueckgenommen. Ein warmer oder
   * ein gesaettigter Ton waere eine zweite Farbe im Bild und stuende in
   * Konkurrenz zum Gold; ein reines Schwarz waere eine harte Flaeche und
   * liesse das Gold darauf flimmern.
   *
   * Das ist zugleich, was die grossen Anlagen dieser Branche tun: Twitch
   * #0E0E10, Steam #171A21, Discord #1E1F22. Ein kuehler, in der
   * Saettigung zurueckgenommener Grund gilt als ruhig und technisch; er
   * senkt die Erregung und ueberlaesst die Aufmerksamkeit den Akzenten -
   * Gold fuer den Wert, Rosa fuer die Handlung.
   *
   * IM BROWSER NACHGEMESSEN, nicht von Hand gerechnet - meine erste
   * Rechnung lag bei beiden Zahlen daneben:
   *   Text #E1E4EB darauf       15,06 : 1  (vorher 13,39; die WCAG
   *                                         verlangt 4,5)
   *   Gold #F5D56E darauf       13,35 : 1  (vorher 11,87)
   *   Karten #252629 darauf      1,27 : 1  (vorher 1,13 - sie treten
   *                                         deutlicher hervor)
   *
   * Wer ihn aendert, aendert ihn HIER und nur hier: --bg-main daneben ist
   * der Altbestand und zeigt auf denselben Wert; body und html holen ihn
   * von dort. */
  --pc-bg: #0E0F12;
  --pc-surface: #252629;
  --pc-surface-2: #333538;

  --pc-gold: #F5D56E;
  --pc-accent: #FA437A;
  --pc-live: #45D9A3;
  --pc-green: #45D9A3;
  --pc-warn: #FC7938;
  --pc-rank: #A97CF2;
  --pc-info: #52B0F2;

  --pc-text: #E1E4EB;
  --pc-muted: #8E9299;
  --pc-line: rgba(255, 255, 255, 0.11);

  /* ---- Altbestand, zeigt auf den Farbsatz ---- */

  /* Derselbe Wert wie --pc-bg darueber, und das MUSS so bleiben: An
     dieser Variablen haengt die Regel fuer body und html, also der Grund
     der ganzen Seite. Zwei verschiedene Werte hier waeren zwei
     Seitengruende, und welcher gewinnt, entschiede die Reihenfolge der
     Regeln. */
  --bg-main: #0E0F12;
  --bg-card: #252629;
  --accent-emerald: #45D9A3;
  --accent-gold: #F5D56E;
  --text-main: #E1E4EB;
  --text-muted: #8E9299;
  --border-color: transparent;

  --pc-nav-size: 16px;
  --pc-font: "pacaembu", sans-serif;
  --pc-font-weight: 300;
}

body, html {
  background-color: var(--bg-main) !important;
  color: var(--text-main) !important;
  font-family: "aptos", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  transition: background-color 0.3s ease, color 0.3s ease;
}

header,
.site-header,
#masthead,
.wp-block-template-part-header {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

footer,
.site-footer,
#colophon,
.wp-block-template-part-footer {
  background: transparent !important;
  background-color: transparent !important;
  border-top: none !important;
  border-bottom: none !important;
  border: none !important;
  box-shadow: none !important;
  width: 100% !important;
  padding: 0 !important;
}

/* KOPF UND FUSS STANDEN MIT 6.97.0 EINE FASSUNG LANG DUNKLER, in einem
   kuehlen Fast-Schwarz (#0E0F12). Robert hat es mit 6.97.1 wieder
   zurueckgenommen; beide Bereiche tragen seither erneut den Grund der
   Seite, den die beiden Regeln darueber freilegen.

   Was daran gemessen und gerechnet war, steht im Abschnitt zu 6.97.0 in
   CLAUDE.md: die Wahl der Farbe, die beiden Kontraste und die Masse der
   Template-Teile. Wer den Gedanken wieder aufnimmt, findet dort alles,
   was es dafuer braucht - im Code steht davon bewusst nichts mehr. */

article,
.entry,
.widget,
.wp-block-post {
  background-color: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 20px;
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

.entry-content p a,
.entry-content li a,
p a {
  color: var(--accent-emerald);
  text-decoration: none;
  transition: color 0.2s ease;
}

.entry-content p a:hover,
.entry-content li a:hover,
p a:hover {
  color: var(--accent-gold);
}

button,
.button,
.wp-block-button__link,
input[type="submit"] {
  background-color: var(--accent-emerald) !important;
  color: var(--pc-bg) !important;
  font-weight: bold !important;
  border-radius: 6px !important;
  padding: 10px 20px !important;
  border: none !important;
  transition: background-color 0.2s ease, transform 0.1s ease !important;
  cursor: pointer;
}

button:hover,
.button:hover,
.wp-block-button__link:hover,
input[type="submit"]:hover {
  background-color: var(--accent-gold) !important;
  transform: translateY(-1px);
}

input[type="text"],
input[type="email"],
textarea,
select {
  background-color: var(--bg-main) !important;
  border: 1px solid var(--border-color) !important;
  color: var(--text-main) !important;
  border-radius: 6px !important;
  padding: 8px 12px !important;
}

h1, h2, h3, h4, h5, h6 {
  color: #FFFFFF !important;
  transition: color 0.3s ease;
}

::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: var(--bg-main);
}

::-webkit-scrollbar-thumb {
  background: var(--bg-card);
  border: 2px solid var(--bg-main);
  border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--accent-emerald);
}

::selection {
  background: var(--accent-emerald);
  color: var(--pc-bg);
}

#main, .site-main, #primary, .entry-content, .wp-site-blocks {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* ---------------------------------------------------------------
 * Der Abstand zwischen Kopfleiste und Seitenanfang
 *
 * Er lag bis 6.73.0 bei 130 Pixeln und war damit der groesste leere
 * Fleck der ganzen Seite. AN DER LAUFENDEN SEITE GEMESSEN, nicht
 * geschaetzt; er besteht aus genau drei Teilen, und nur der erste
 * gehoert dem Plugin:
 *
 *   15,00 px  margin-bottom an .primecup-header-master   (Plugin)
 *   48,05 px  padding-bottom der Theme-Gruppe im Kopf    (Theme)
 *   67,27 px  margin-top am <main>                       (Theme)
 *   -------
 *  130,32 px
 *
 * Die dritte Zahl ist der Block-Abstand, den WordPress zwischen die
 * Kinder von .wp-site-blocks legt. Die Regel weiter oben trifft ihn
 * NICHT: Sie zaehlt #main, .site-main und .entry-content auf, das
 * Element heisst hier aber <main id="wp--skip-link--target"> und traegt
 * ausschliesslich Block-Klassen. Genau deshalb ist der Abstand jahrelang
 * stehengeblieben, obwohl es die Regel darueber gibt.
 *
 * Beide Theme-Werte sind fluid: am Telefon sind es 30 und 30 statt 48 und
 * 67, in der Summe 75 statt 130. Ein fester Abzug haette also je nach
 * Breite etwas anderes bewirkt. Stattdessen werden beide auf einen
 * BEKANNTEN Wert gesetzt, und der Abstand ist danach auf jeder Breite und
 * auf jeder Seite derselbe:
 *
 *   15 px (Kopf) + 24 px (--pc-kopf-luecke) = 39 px
 *
 * Das sind 70 Prozent weniger als die 130 vorher, und genau darum hat
 * Robert gebeten.
 *
 * Der Fuss bleibt unberuehrt: Sein Abstand haengt an
 * footer.wp-block-template-part (gemessen 37 px) und nicht am unteren
 * Rand des <main>, der auf 0 steht. Die Regel unten trifft nur margin-top.
 * ------------------------------------------------------------- */

:root {
  /* Der Wert am Telefon. Dort passt er, sagt Robert, und dort bleibt er:
     75 Pixel waren es vorher, 39 sind es jetzt. */
  --pc-kopf-luecke: 24px;
}

/* Am Rechner klebte die Seite mit 39 Pixeln zu eng am Kopf. Der Abstand
   geht deshalb auf 60 Pixel hoch, also 15 vom Kopf plus 45 hier. Gegen die
   130 vom Anfang sind das immer noch 54 Prozent weniger.

   Nur hier, nicht in :root: Am Telefon wuerde derselbe Wert die Seite
   wieder nach unten schieben, und dort stimmt sie bereits. Die Grenze
   liegt bei 768 wie in der Medienabfrage weiter unten in dieser Datei;
   diese hier ist ihre Umkehrung, damit zwischen beiden kein Bereich
   offenbleibt und keiner doppelt trifft. */
@media (min-width: 769px) {
  :root {
    --pc-kopf-luecke: 45px;
  }
}

.wp-site-blocks > main {
  margin-top: 0 !important;
}

/* Zwei Selektoren fuer dasselbe Element. Beide treffen heute die Gruppe,
   in der .primecup-header-master steckt; wird der Kopf im Theme einmal
   umgebaut, traegt voraussichtlich noch einer von beiden. Ein
   Elternselektor waere kuerzer, :has() fehlt aber aelteren Browsern -
   dieselbe Ueberlegung wie bei is-v5 auf der Team-Seite. */
header.wp-block-template-part .wp-block-group.alignwide,
header.wp-block-template-part .wp-block-group .wp-block-group {
  padding-bottom: var(--pc-kopf-luecke) !important;
}

.entry-header, .page-header, .post-title-wrapper {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
  display: none !important;
}

.primecup-footer-content {
  width: 100% !important;
  max-width: 100% !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  box-sizing: border-box !important;
  padding: 45px 20px !important;
  background-color: transparent !important;
}

.footer-container {
  max-width: 1200px !important;
  width: 100% !important;
  margin: 0 auto !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 25px !important;
}

.footer-links {
  display: flex !important;
  flex-direction: row !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 24px !important;
  width: 100% !important;
  flex-wrap: wrap !important;
}

.footer-links a {
  color: #e0e0e0 !important;
  text-decoration: none !important;
  font-size: 14px !important;
  transition: color 0.2s ease !important;
}

.footer-links a:hover {
  color: #ffffff !important;
}

.footer-contact {
  width: 100% !important;
  display: flex !important;
  justify-content: center !important;
}

.contact-pill {
  display: inline-block !important;
  color: #ffffff !important;
  text-decoration: none !important;
  border: 1px solid rgba(255, 255, 255, 0.8) !important;
  border-radius: 50px !important;
  padding: 8px 22px !important;
  font-size: 14px !important;
  transition: all 0.2s ease !important;
}

.contact-pill:hover {
  background-color: rgba(255, 255, 255, 0.1) !important;
  border-color: #ffffff !important;
}

.footer-copyright {
  width: 100% !important;
  color: #8a8d98 !important;
  font-size: 13px !important;
  margin-top: 5px !important;
}

.footer-copyright p {
  margin: 0 !important;
}

body.lang-us .pc-lang-de { display: none !important; }
body:not(.lang-us) .pc-lang-us { display: none !important; }

@media (max-width: 768px) {
  .primecup-footer-content {
    padding: 35px 15px !important;
  }

  .footer-links {
    flex-direction: column !important;
    gap: 16px !important;
  }

  .footer-links a {
    display: block !important;
    font-size: 15px !important;
    text-align: center !important;
  }
}

*:focus,
*:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

* {
  -webkit-tap-highlight-color: transparent;
}
html, body {
  overflow-x: hidden;
  max-width: 100%;
}

/* Platz für die Bildlaufleiste immer freihalten.
   Ohne das springt der zentrierte Inhalt seitlich, sobald eine Seite nach
   dem Laden hoch genug für eine Leiste wird - genau das Zittern beim
   Öffnen von Teams und Stats. Browser ohne diese Eigenschaft verhalten
   sich wie bisher. */
html {
  scrollbar-gutter: stable;
}

.primecup-header-master {
  max-width: 100% !important;
  overflow-x: clip;
}

.desktop-only-menu {
  min-width: 0;
}

.menu-item,
.header-primecup-link {
  min-width: 0;
}

/* ---------- Abzeichen ----------
   Die zwanzig Zeichnungen aus avatars.php. Sie stehen hier und nicht in
   site.css oder account.css, weil sie an drei Stellen erscheinen: im Profil,
   auf der Stats-Seite und in der Spielerkarte. base.css lädt vor allen
   dreien.

   Die Farben stecken in der Zeichnung selbst, als CSS-Variable mit Rückfall.
   Hier steht deshalb nur die Größe, und die kommt vom Elternelement: `.pc-av`
   füllt seinen Platz, das Maß setzt die Stelle, an der es steht. */

.pc-av {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* Die Fassung. Sie setzt das Maß, das Bild darin füllt es aus.

   Das Maß steht in `em` und nicht in Pixeln: Das Abzeichen steht seit 6.60.0
   vor JEDEM Spielernamen, und die Namen sind je nach Stelle 12 bis 26 Pixel
   groß. Mit einem festen Wert wäre es im Leaderboard zu klein und in der
   Spielerkarte zu groß; mit `em` wächst es mit der Schrift der Zeile mit und
   ist überall genauso hoch wie der Name daneben.

   1.35em auf die Fassung, davon 0.16em Polsterung: Die Zeichnungen füllen
   ihr Feld bis an den Rand, ohne Luft klebten sie am Kreis.

   ZWEI Angaben für dieselbe Ausrichtung, und beide werden gebraucht:

   `vertical-align: -0.30em` gilt in einer gewöhnlichen Textzeile.

   Der Wert zielt auf die Mitte der VERSALIEN, nicht auf die der
   Kleinbuchstaben. 6.60.0 hatte -0.38em und traf damit die x-Höhe: rechnerisch
   mittig, sichtbar zu tief. Ein Spielername beginnt mit einem Großbuchstaben
   und trägt seine optische Masse oben; der Kreis saß darunter. Im Browser
   gegen `measureText('H').actualBoundingBoxAscent` nachgemessen, über sieben
   Ausgabestellen: nötig sind 0.282 bis 0.315em, gewählt ist die Mitte davon.

   `align-self: center` gilt, wenn die Zeile ein Flex-Behälter ist. Genau das
   ist der Turnierbaum: `.pc-roster-players .pc-player` ist `inline-flex` mit
   `align-items: baseline`, und dort wird `vertical-align` **ignoriert**. Ein
   Element ohne Text hat seine Grundlinie am unteren Rand, der Kreis säße
   dadurch fast eine halbe Zeile zu hoch. Gemessen: -0,10em überall,
   -0,40em im Turnierbaum. Auf einem Element, das kein Flex-Kind ist, tut
   `align-self` nichts. */
.pc-av-box {
  display: inline-block;
  width: 1.35em;
  height: 1.35em;
  padding: 0.16em;
  box-sizing: border-box;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 50%;
  margin-right: 0.34em;
  flex-shrink: 0;
  vertical-align: -0.30em;
  align-self: center;

  /* Ohne das trüge die Fassung die Zeilenhöhe ihrer Umgebung als eigene
     Höhe und wäre nicht mehr quadratisch. */
  line-height: 0;
}

/* ---------- Team-Kürzel vor dem Spielernamen ---------- */

.pc-ptag {
  /* Gleiche Schrift und Größe wie der Name daneben, dazwischen ein echtes
     Leerzeichen. Der Abstand ist derselbe wie zwischen Levelabzeichen und
     Kürzel (.pc-lvl in site.css), damit die drei Teile [2] ZC Name gleich
     weit auseinanderstehen. Bis 6.57.0 standen hier 0.18em, also weniger
     als ein Leerzeichen der Seitenschrift, und Kürzel und Name klebten
     aneinander.
     Diese eine Regel trifft alle sechs Ausgabestellen: Leaderboard, Kader,
     Mitgliederverwaltung, Turnierbaum, Spielerkarte und die Vorschau im
     Profil. */
  font: inherit;
  letter-spacing: inherit;
  margin-right: 0.34em;
  color: #C6CBD4;
  white-space: nowrap;
}

/* Gold war früher die Grundfarbe und brauchte keine eigene Regel.
   Seit es erst ab Level 9 zu haben ist, ist Silber der Einstieg. */
.pc-ptag.is-gold    { color: var(--pc-gold); }
.pc-ptag.is-silver  { color: #C6CBD4; }
.pc-ptag.is-blue    { color: var(--pc-info); }
.pc-ptag.is-green   { color: var(--pc-live); }
.pc-ptag.is-red     { color: var(--pc-accent); }
.pc-ptag.is-orange  { color: var(--pc-warn); }
.pc-ptag.is-purple  { color: var(--pc-rank); }
.pc-ptag.is-rainbow { color: var(--pc-rank); }

/* Ein heller Streifen gleitet von rechts nach links über das Kürzel.
   Die Grundfarbe liegt darunter, damit nichts verschwindet. */
@supports (-webkit-background-clip: text) or (background-clip: text) {
  .pc-ptag {
    background-color: #C6CBD4;
    background-image: linear-gradient(
      100deg,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, 0) 40%,
      rgba(255, 251, 235, 0.95) 50%,
      rgba(255, 255, 255, 0) 60%,
      rgba(255, 255, 255, 0) 100%
    );
    background-size: 260% 100%;
    background-repeat: repeat-x;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: pc-ptag-shine 3.4s linear infinite;
  }

  .pc-ptag.is-gold   { background-color: var(--pc-gold); }
  .pc-ptag.is-silver { background-color: #C6CBD4; }
  .pc-ptag.is-blue   { background-color: var(--pc-info); }
  .pc-ptag.is-green  { background-color: var(--pc-live); }
  .pc-ptag.is-red    { background-color: var(--pc-accent); }
  .pc-ptag.is-orange { background-color: var(--pc-warn); }
  .pc-ptag.is-purple { background-color: var(--pc-rank); }

  /* Beim Regenbogen ist der Verlauf selbst die Farbe. */
  .pc-ptag.is-rainbow {
    background-color: transparent;
    background-image: linear-gradient(
      100deg,
      #FA437A 0%,
      #FC7938 18%,
      #F5D56E 36%,
      #45D9A3 54%,
      #52B0F2 72%,
      #A97CF2 90%,
      #FA437A 100%
    );
    background-size: 260% 100%;
  }
}

@keyframes pc-ptag-shine {
  from { background-position: 200% 0; }
  to   { background-position: -100% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .pc-ptag {
    animation: none;
    background-position: 50% 0;
  }
}

/* ---------- Notfallcodes: kopieren und sichern ---------- */

.pc-code-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 16px 0 18px 0;
}

.pc-code-tool,
.pc-code-tool:hover,
.pc-code-tool:focus {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  padding: 9px 15px !important;
  margin: 0 !important;
  font-family: var(--pc-font-page) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 1.4px !important;
  text-transform: uppercase !important;
  color: var(--pc-text) !important;
  cursor: pointer !important;
  transform: none !important;
  transition: border-color 0.2s ease, color 0.2s ease !important;
}

.pc-code-tool:hover {
  border-color: var(--pc-gold) !important;
  color: var(--pc-gold) !important;
}

.pc-code-tool.is-done,
.pc-code-tool.is-done:hover {
  border-color: var(--pc-live) !important;
  color: var(--pc-live) !important;
}

/* ---------- Namensfarbe im Leaderboard ----------
   Derselbe Lauf wie beim Kürzel. Die Grundfarbe liegt darunter, damit der
   Name auch dann sichtbar bleibt, wenn der Browser den Verlauf nicht kann. */

.pc-nc-silver  { color: #C6CBD4; }
.pc-nc-gold    { color: var(--pc-gold); }
.pc-nc-ruby    { color: #E0245E; }
.pc-nc-diamond { color: #7FE3E8; }
.pc-nc-rainbow { color: var(--pc-rank); }

@supports (-webkit-background-clip: text) or (background-clip: text) {
  .pc-nc-silver,
  .pc-nc-gold,
  .pc-nc-ruby,
  .pc-nc-diamond,
  .pc-nc-rainbow {
    background-size: 260% 100%;
    background-repeat: repeat-x;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: pc-ptag-shine 3.4s linear infinite;
  }

  /* Silber und Gold: heller Streifen über der Grundfarbe. */
  .pc-nc-silver,
  .pc-nc-gold {
    background-image: linear-gradient(
      100deg,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, 0) 40%,
      rgba(255, 255, 255, 0.9) 50%,
      rgba(255, 255, 255, 0) 60%,
      rgba(255, 255, 255, 0) 100%
    );
  }

  .pc-nc-silver { background-color: #C6CBD4; }
  .pc-nc-gold   { background-color: var(--pc-gold); }

  /* Rubin: tiefes Rot mit warmem Glanz, kein Weiß.
     Weiß würde den Stein blass wirken lassen. */
  .pc-nc-ruby {
    background-color: transparent;
    background-image: linear-gradient(
      100deg,
      #9B0E32 0%,
      #C21744 20%,
      #E0245E 38%,
      #FF6F91 50%,
      #E0245E 62%,
      #C21744 80%,
      #9B0E32 100%
    );
  }

  /* Diamant: kühles Schimmern in Blau und Weiß. */
  .pc-nc-diamond {
    background-color: transparent;
    background-image: linear-gradient(
      100deg,
      #7FE3E8 0%,
      #B8F1F4 22%,
      #FFFFFF 34%,
      #9AD9F5 48%,
      #7FE3E8 62%,
      #C9EEF2 80%,
      #7FE3E8 100%
    );
  }

  /* Regenbogen: derselbe Verlauf wie beim Kürzel. */
  .pc-nc-rainbow {
    background-color: transparent;
    background-image: linear-gradient(
      100deg,
      #FA437A 0%,
      #FC7938 18%,
      #F5D56E 36%,
      #45D9A3 54%,
      #52B0F2 72%,
      #A97CF2 90%,
      #FA437A 100%
    );
  }
}

@media (prefers-reduced-motion: reduce) {
  .pc-ptag,
  .pc-nc-silver,
  .pc-nc-gold,
  .pc-nc-ruby,
  .pc-nc-diamond,
  .pc-nc-rainbow {
    animation: none !important;
  }
}