/* seiten.css — die "kleinen" Seiten: Spielen, Team, Impressum/Datenschutz/AGB, die
   Extras von Anmelden/Registrieren und die 404. Eine Datei, weil jede davon fuer sich
   zu wenig CSS hat, um eine eigene zu rechtfertigen — und weil sie sich die Bausteine
   (Symbolquadrat, Kachel, Inhaltsleiste) teilen. Keine Farbe steht hier direkt. */

/* ================================================================== Gemeinsam */

/* Das Symbolquadrat in Tonfarbe. --c setzt die Seite (var(--blue), var(--amber) ...),
   damit das CSS die Faelle nicht kennen muss. Ohne --c faellt es auf Blau zurueck. */
.sq { width: 44px; height: 44px; border-radius: var(--r-sm); display: grid; place-items: center; flex: none;
      background: color-mix(in srgb, var(--c, var(--blue)) 15%, transparent);
      border: 1px solid color-mix(in srgb, var(--c, var(--blue)) 32%, transparent);
      color: var(--c, var(--blue)); }
.sq svg { width: 21px; height: 21px; }
.sq-lg { width: 54px; height: 54px; border-radius: var(--r); }
.sq-lg svg { width: 26px; height: 26px; }

/* ================================================================== Spielen */

.pl-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(300px, 1fr); gap: 22px; align-items: start; }
.pl-side { display: flex; flex-direction: column; gap: 22px; position: sticky; top: calc(var(--head-h) + 16px); }

.pl-steps { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.pl-step { position: relative; overflow: hidden; padding: 22px 22px 20px; display: flex; flex-direction: column; gap: 12px; }
/* Die grosse Ziffer liegt als Wasserzeichen hinter dem Inhalt: sie ordnet, ohne Platz zu kosten. */
.pl-step-n { position: absolute; right: 14px; top: -6px; font-family: var(--f-head); font-size: 76px; font-weight: 800;
             line-height: 1; letter-spacing: -.05em; color: color-mix(in srgb, var(--blue) 14%, transparent);
             pointer-events: none; user-select: none; }
.pl-step h3 { font-size: 16.5px; position: relative; }
.pl-step p { font-size: 13.5px; line-height: 1.6; color: var(--txt-2); position: relative; }
.pl-step p b { color: var(--txt); font-family: var(--f-mono); font-weight: 600; }

.pl-addr { text-align: center; padding: 26px 24px 22px; overflow: hidden; }
.pl-addr::before { content: ""; position: absolute; inset: -40% -20% auto; height: 190px;
                   background: radial-gradient(60% 100% at 50% 0%, color-mix(in srgb, var(--blue) 22%, transparent), transparent 70%); }
.pl-addr > * { position: relative; }
.pl-ip { display: block; margin: 10px 0 14px; font-family: var(--f-mono); font-size: 30px; font-weight: 700;
         letter-spacing: -.02em; overflow-wrap: anywhere; line-height: 1.15; }
.pl-state { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 18px; font-size: 13.5px; color: var(--txt-2); }
.pl-state b { color: var(--txt); font-variant-numeric: tabular-nums; }
.pl-chips { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.pl-chip { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 11px; border-radius: var(--r-pill);
           background: var(--card-hi); border: 1px solid var(--line-soft); font-size: 12px; font-weight: 700; color: var(--txt-2); }
.pl-chip svg { width: 13px; height: 13px; color: var(--txt-3); }

.pl-modes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.pl-mode { display: flex; align-items: center; gap: 11px; padding: 11px 12px; border-radius: var(--r-sm);
           background: color-mix(in srgb, var(--m) 7%, transparent);
           border: 1px solid color-mix(in srgb, var(--m) 30%, transparent); min-width: 0; }
.pl-mode-ico { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; flex: none; color: var(--txt);
               background: linear-gradient(160deg, color-mix(in srgb, var(--m) 88%, white 12%), var(--m-2)); }
.pl-mode-ico svg { width: 17px; height: 17px; }
.pl-mode-txt { min-width: 0; }
.pl-mode-txt b { display: block; font-size: 13px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-mode-txt i { display: block; font-style: normal; font-size: 11.5px; color: var(--txt-3); font-variant-numeric: tabular-nums; }

.pl-trouble { margin-top: 22px; }
.pl-tr { display: flex; gap: 14px; padding: 15px 0; }
.pl-tr + .pl-tr { border-top: 1px solid var(--line-soft); }
.pl-tr-txt { min-width: 0; }
.pl-tr-txt b { display: block; font-size: 14px; font-weight: 700; margin-bottom: 3px; }
.pl-tr-txt p { font-size: 13px; line-height: 1.6; color: var(--txt-2); }
.pl-tr-txt code { font-family: var(--f-mono); font-size: 12px; color: var(--txt); padding: 1px 6px; border-radius: 5px;
                  background: var(--inset); border: 1px solid var(--line-soft); }
.pl-tr-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
              padding-top: 14px; border-top: 1px solid var(--line-soft); font-size: 13px; color: var(--txt-3); }

/* ================================================================== Team */

.tm-sect + .tm-sect { margin-top: 34px; }
.tm-sect .sect-head { margin-bottom: 14px; }
.tm-sect .sect-head h2 { font-size: 19px; }
.tm-n { font-size: 12px; font-weight: 700; color: var(--txt-4); margin-left: 2px; }
.tm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 18px; }

.tm-card { display: flex; flex-direction: column; gap: 14px; padding: 20px 20px 16px; }
.tm-top { display: flex; align-items: center; gap: 14px; min-width: 0; }
.tm-top .av { width: 56px; height: 56px; border-radius: var(--r-sm); }
.tm-name { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 7px; }
.tm-name a { font-family: var(--f-head); font-size: 17px; font-weight: 800; letter-spacing: -.02em;
             transition: color var(--t); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.tm-name a:hover { color: var(--blue-lite); }
.tm-name .rank { height: 24px; padding: 0 10px; font-size: 11.5px; gap: 5px; border-radius: var(--r-xs); }
.tm-name .rank svg { width: 12px; height: 12px; }
.tm-bio { font-size: 13.5px; line-height: 1.6; color: var(--txt-2); flex: 1; overflow-wrap: anywhere; }
.tm-bio.ist-standard { color: var(--txt-3); }
.tm-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
           padding-top: 12px; border-top: 1px solid var(--line-soft); font-size: 12px; color: var(--txt-3); }
.tm-foot span { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.tm-foot svg { width: 14px; height: 14px; color: var(--txt-4); flex: none; }

.tm-join { display: flex; align-items: center; gap: 22px; margin-top: 36px; padding: 24px 28px; overflow: hidden;
           background: linear-gradient(110deg, color-mix(in srgb, var(--blue) 18%, var(--card-top)), var(--card-bottom) 66%);
           border-color: color-mix(in srgb, var(--blue) 34%, var(--line)); }
.tm-join-txt { flex: 1; min-width: 0; }
.tm-join-txt b { display: block; font-family: var(--f-head); font-size: 21px; font-weight: 800; letter-spacing: -.02em; }
.tm-join-txt p { margin-top: 5px; font-size: 14px; line-height: 1.6; color: var(--txt-2); max-width: 60ch; }

/* ================================================================== Rechtliches */

.lg-grid { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 22px; align-items: start; }
.lg-toc { position: sticky; top: calc(var(--head-h) + 16px); padding: 6px 8px 10px; }
.lg-toc .snav a { height: 36px; font-size: 13px; }
.lg-toc .snav a i { width: 20px; flex: none; font-style: normal; font-size: 11px; font-weight: 800;
                    color: var(--txt-4); font-variant-numeric: tabular-nums; }

.lg-body { max-width: 860px; }
.lg-stand { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 8px; padding: 6px 12px;
            border-radius: var(--r-pill); background: var(--card-hi); border: 1px solid var(--line-soft);
            font-size: 12px; font-weight: 600; color: var(--txt-3); }
.lg-stand svg { width: 13px; height: 13px; color: var(--txt-4); }
.lg-sec { padding: 22px 0; scroll-margin-top: calc(var(--head-h) + 20px); }
.lg-sec + .lg-sec { border-top: 1px solid var(--line-soft); }
.lg-sec h2 { display: flex; align-items: baseline; gap: 12px; font-size: 17px; margin-bottom: 10px; }
.lg-sec h2 i { font-style: normal; font-size: 12px; font-weight: 800; color: var(--blue-lite); font-variant-numeric: tabular-nums; }
/* pre-line: die Texte stehen mit echten Zeilenumbruechen im Quelltext (Anschrift), und die
   sollen auch so stehen bleiben — ohne dass HTML im Text erlaubt wird. */
.lg-sec p { font-size: 14.5px; line-height: 1.8; color: var(--txt-2); white-space: pre-line; }
.lg-sec p a { color: var(--blue-lite); font-weight: 600; }
.lg-sec p a:hover { text-decoration: underline; }
.lg-foot { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 8px; padding-top: 18px;
           border-top: 1px solid var(--line-soft); font-size: 13px; color: var(--txt-3); }

/* ================================================================== Anmelden / Registrieren */

.au-pw { position: relative; }
.au-pw .input { padding-right: 46px; }
.au-eye { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 34px; height: 34px;
          border-radius: var(--r-xs); display: grid; place-items: center; color: var(--txt-3);
          transition: color var(--t), background var(--t); }
.au-eye svg { width: 17px; height: 17px; }
.au-eye:hover { color: var(--txt); background: color-mix(in srgb, var(--txt) 5%, transparent); }
.au-eye.on { color: var(--blue-lite); }

.au-tip { display: flex; gap: 10px; align-items: flex-start; padding: 11px 13px; border-radius: var(--r-sm);
          background: var(--blue-ghost); border: 1px solid var(--blue-line); font-size: 13px; line-height: 1.55; color: var(--txt-2); }
.au-tip svg { width: 16px; height: 16px; flex: none; margin-top: 2px; color: var(--blue-lite); }
.au-tip b { color: var(--txt); }

.au-weiter { display: flex; align-items: center; gap: 8px; margin-top: -8px; font-size: 12.5px; color: var(--txt-3); }
.au-weiter svg { width: 14px; height: 14px; color: var(--txt-4); }
.au-weiter code { font-family: var(--f-mono); font-size: 12px; color: var(--txt-2); }

/* ================================================================== 404 */

.nf { padding-top: 56px; }
.nf-card { max-width: 720px; margin: 0 auto; text-align: center; overflow: hidden; }
.nf-card::before { content: ""; position: absolute; inset: -30% -20% auto; height: 220px;
                   background: radial-gradient(60% 100% at 50% 0%, color-mix(in srgb, var(--blue) 18%, transparent), transparent 70%); }
.nf-card > * { position: relative; }
.nf-code { display: block; font-family: var(--f-head); font-size: 88px; font-weight: 800; line-height: 1; letter-spacing: -.06em;
           color: color-mix(in srgb, var(--blue) 26%, transparent); margin-bottom: -22px; }
.nf-card .sq { margin: 0 auto 16px; }
.nf-card h1 { font-size: 30px; margin-bottom: 10px; }
.nf-card > p { font-size: 14.5px; line-height: 1.65; color: var(--txt-2); max-width: 52ch; margin: 0 auto; }
.nf-card > p code { font-family: var(--f-mono); font-size: 13px; color: var(--txt); padding: 1px 7px; border-radius: 5px;
                    background: var(--inset); border: 1px solid var(--line-soft); overflow-wrap: anywhere; }
.nf-suche { margin: 24px auto 22px; max-width: 460px; display: flex; gap: 10px; }
.nf-suche .input { height: 46px; }
.nf-suche .btn { flex: none; height: 46px; }
.nf-links { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; padding-top: 20px; border-top: 1px solid var(--line-soft); }
.nf-link { display: flex; flex-direction: column; align-items: center; gap: 9px; padding: 14px 10px; border-radius: var(--r);
           background: color-mix(in srgb, var(--txt) 3%, transparent); border: 1px solid var(--line-soft);
           font-size: 13px; font-weight: 700; color: var(--txt-2); transition: border-color var(--t), color var(--t), transform var(--t); }
.nf-link:hover { border-color: var(--line-strong); color: var(--txt); transform: translateY(-2px); }
.nf-link .sq { width: 38px; height: 38px; }
.nf-link .sq svg { width: 18px; height: 18px; }

/* ================================================================== Schmale Fenster */

@media (max-width: 1000px) {
  .pl-grid { grid-template-columns: 1fr; }
  .pl-side { position: static; }
  .lg-grid { grid-template-columns: 1fr; }
  .lg-toc { position: static; }
  .lg-toc .snav { flex-direction: row; flex-wrap: wrap; gap: 4px; }
  .lg-toc .snav-sec { display: none; }
  .lg-toc .snav a.on::before { display: none; }
}
@media (max-width: 640px) {
  .pl-steps { grid-template-columns: 1fr; }
  .pl-ip { font-size: 24px; }
  .tm-join { flex-direction: column; align-items: flex-start; }
  .nf { padding-top: 24px; }
  .nf-code { font-size: 64px; margin-bottom: -14px; }
  .nf-card h1 { font-size: 24px; }
  .nf-links { grid-template-columns: 1fr 1fr; }
  .nf-suche { flex-direction: column; }
}

/* Das "Saatdaten"-Abzeichen im Seitenkopf (Bauanleitung v2): klein und neben dem Titel,
   nicht in seiner Schriftgroesse. */