/* ---------- Die Uebersicht ----------
   Links die Teams und die Suche, rechts das Gruendungsformular und die
   offenen Einladungen. Links ist die breitere Spalte: Dort stehen zwei
   Listen untereinander, rechts nur ein Formular. */

/* KEIN Abstand nach unten, seit 6.91.0.
 *
 * Hier standen 60 Pixel, und Robert hat gemeldet, dass die Team-Seite
 * dadurch weiter vom Fussbereich weg steht als Turniere oder Stats.
 * Gemessen mit Kopf und Fuss: Turniere und Stats enden mit margin-bottom
 * null, den Abstand macht allein der Fussbereich mit seinen 37 Pixeln.
 * Die Team-Seite legte 60 obendrauf.
 *
 * Dieselbe Null steht seither an .pc-team-detail.is-page weiter unten -
 * die Detailansicht trug die 60 ein zweites Mal. */
.pc-team-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 340px);
  gap: 40px;
  width: var(--pc-width);
  max-width: var(--pc-max);
  margin: 0 auto;
  box-sizing: border-box;
  align-items: start;
}

.pc-team-side,
.pc-team-aside,
.pc-team-invites {
  min-width: 0;
}

/* ---------- Die Einladungen als eigener Bereich ----------
 *
 * Ab Teams_v5 liegen sie NICHT mehr in .pc-team-aside, sondern daneben.
 * Grund ist die Reihenfolge am Telefon: Dort sollen erst die Teams stehen
 * und dann das Gründungsformular. Läge alles im aside, ginge das nur, indem
 * der ganze Block nach unten wandert, und dann stünden die Einladungen
 * unter zwei Listen, also außer Sicht. Genau davor warnt die Begründung an
 * `order: -1` weiter unten, und auf dieser Seite gibt es kein
 * Einladungsfenster als Ersatz.
 *
 * DIE KLASSE AM RASTER, nicht `:has()`. Zwei Gründe:
 *   1. `:has()` fällt auf älteren Browsern aus, und dann läge das
 *      Gründungsformular über den Einladungen statt darunter.
 *   2. Es können zwei Seitenfassungen gleichzeitig unterwegs sein. Teams_v4
 *      trägt die Klasse nicht und behält damit unverändert sein
 *      zweispaltiges Raster.
 * Genau dasselbe Muster wie `.pc-team-detail.is-page` seit 6.56.0. */

.pc-team-invites { min-width: 0; }
.pc-team-invites:empty { display: none; }

/* Am Rechner: Einladungen oben rechts, Formular darunter, die Teamliste
   links über beide Zeilen. Ohne die Spanne links bliebe unter dem Formular
   eine Lücke. */
.pc-team-layout.is-v5 .pc-team-side {
  grid-column: 1;
  grid-row: 1 / span 2;
}

.pc-team-layout.is-v5 .pc-team-invites {
  grid-column: 2;
  grid-row: 1;
}

/* Ohne offene Einladung steht das Gruendungsformular in Zeile 1, buendig
 * mit der Suchleiste links daneben.
 *
 * Das ist die VORGABE, und die zweite Zeile ist der Sonderfall. Bis 6.66.0
 * war es umgekehrt: Der Einladungsbereich belegte Zeile 1 auch dann, wenn
 * er nichts zu zeigen hatte. Die Zeile war zwar 0 hoch, der row-gap blieb
 * aber stehen, und im Browser gemessen begann das Formular deshalb genau
 * 40 Pixel unter der Suchleiste.
 *
 * `has-inv` setzt renderMyInvites() in team.js. Herum ist es so, damit ein
 * ausgefallenes Skript den haeufigeren Fall trifft: kein Versatz.
 * `:has()` waere kuerzer, faellt aber auf aelteren Browsern aus - und der
 * Kommentar oben an `is-v5` nennt denselben Grund. */
.pc-team-layout.is-v5 .pc-team-aside {
  grid-column: 2;
  grid-row: 1;
}

.pc-team-layout.is-v5.has-inv .pc-team-aside {
  grid-row: 2;
}

/* In der Detailansicht wird die ganze Übersicht ausgeblendet. Der neue
   Bereich muss mit, sonst bliebe er als einziger stehen. */
.pc-team-layout.is-detail .pc-team-invites { display: none; }

/* ---------- Umschalten auf die Detailansicht ----------
 *
 * Ein Klick auf ein Team blendet die ganze Uebersicht aus, das Team steht
 * dann ueber die volle Breite. Die Klasse setzt team.js.
 *
 * Warum die Klasse am Raster haengt und nicht display an den Elementen:
 * Es koennen zwei Seitenfassungen unterwegs sein. Bis Teams_v3 lag
 * #pcTeamDetail INNEN als zweite Spalte, ab Teams_v4 liegt es daneben. Die
 * eine Spalte hier traegt beide Faelle - innen wird der Detailbereich zur
 * einzigen und damit vollen Spalte, aussen bleibt das Raster leer und der
 * Bereich darunter nimmt die Breite selbst.
 */
.pc-team-layout.is-detail {
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  margin-bottom: 0;
}

.pc-team-layout.is-detail .pc-team-side,
.pc-team-layout.is-detail .pc-team-aside {
  display: none;
}

.pc-team-searchbox {
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.25);
  padding-bottom: 8px;
  margin-bottom: 8px;
}

.pc-team-searchbox input[type="search"],
.pc-team-searchbox input[type="text"] {
  flex: 1 1 auto;
  min-width: 0;
  background: none !important;
  background-color: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  padding: 4px 0 !important;
  margin: 0 !important;
  color: var(--pc-text) !important;
  font-family: var(--pc-font-page) !important;
  font-size: 14px !important;
  font-weight: var(--pc-weight-page) !important;
}

.pc-team-searchbox input::placeholder { color: rgba(255, 255, 255, 0.35); }

.pc-team-counter {
  font-family: var(--pc-font-page);
  font-size: 10.5px;
  font-weight: var(--pc-weight-page);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--pc-muted);
  white-space: nowrap;
}

/* Die Liste ist beim Aufruf leer und wird nachgeladen. Ohne reservierte
   Hoehe waechst die Seite dabei sprunghaft; zusammen mit der auftauchenden
   Bildlaufleiste ergibt das ein sichtbares Zittern. Nach dem Aufbau wird
   die Vorgabe aufgehoben, sonst bliebe bei wenigen Teams Leerraum. */
.pc-team-list {
  min-height: 320px;
  max-height: 620px;
  overflow-y: auto;
  margin-bottom: 26px;
}

.pc-team-list.is-ready {
  min-height: 0;
}

@media (max-width: 900px) {
  .pc-team-list {
    min-height: 260px;
  }
}

.pc-team-row,
.pc-team-row:focus,
.pc-team-row:active {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  width: 100%;
  background: none !important;
  background-color: transparent !important;
  border: none !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  padding: 13px 10px 13px 12px !important;
  margin: 0 !important;
  text-align: left !important;
  cursor: pointer !important;
  transform: none !important;
  transition: background 0.2s ease, box-shadow 0.2s ease !important;
}

.pc-team-row:hover {
  background: rgba(255, 255, 255, 0.04) !important;
  transform: none !important;
}

/* Beide Angaben brauchen !important. Der Gruppenselektor weiter oben setzt
   box-shadow: none !important, und eine Regel mit !important schlaegt jede
   genauere ohne. Der Akzentbalken erschien deshalb nie, obwohl Zeile 96
   eigens einen Uebergang dafuer deklariert. */
.pc-team-row.is-active {
  background: rgba(250, 67, 122, 0.07) !important;
  box-shadow: inset 2px 0 0 var(--pc-accent) !important;
}

.pc-team-row-main {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

/* Name und Kürzel nebeneinander halten.
   Vorher stand beides direkt im selben Element mit overflow-wrap: anywhere.
   Das Kürzel ist ein eigener Kasten und rutschte auf schmalen Zeilen als
   Ganzes nach unten - mal ja, mal nein, je nach Namenslänge. */
.pc-team-name {
  display: flex;
  align-items: baseline;
  gap: 9px;
  min-width: 0;
}

.pc-team-name-text {
  font-family: var(--pc-font-page);
  font-size: 14.5px;
  font-weight: 700;
  color: var(--pc-text);
  letter-spacing: -0.2px;
  overflow-wrap: anywhere;
  min-width: 0;
}

.pc-team-tag {
  display: inline-block;
  flex: 0 0 auto;
  white-space: nowrap;
  margin-left: 0;
  font-family: "droid-sans-mono", monospace;
  font-size: 10.5px;
  letter-spacing: 1px;
  color: var(--pc-gold);
}

.pc-team-sub {
  font-family: var(--pc-font-page);
  font-size: 11.5px;
  font-weight: var(--pc-weight-page);
  color: var(--pc-muted);
  overflow-wrap: anywhere;
}

.pc-team-row-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
  flex-shrink: 0;
}

.pc-team-count {
  font-family: "droid-sans-mono", monospace;
  font-size: 17px;
  color: var(--pc-gold);
}

.pc-team-open,
.pc-team-closed {
  font-family: var(--pc-font-page);
  font-size: 9.5px;
  font-weight: var(--pc-weight-page);
  letter-spacing: 1.2px;
  text-transform: uppercase;
  white-space: nowrap;
}

.pc-team-open { color: var(--pc-live); }
.pc-team-closed { color: var(--pc-muted); }

.pc-team-empty,
.pc-team-note {
  font-family: var(--pc-font-page);
  font-size: 13px;
  font-weight: var(--pc-weight-page);
  line-height: 1.6;
  color: var(--pc-muted) !important;
  margin: 12px 0 !important;
  max-width: 620px;
}

.pc-team-detail {
  min-width: 0;
}

/* Ab Teams_v4 steht der Detailbereich NEBEN dem Raster, nicht darin. Dann
   traegt er die Seitenbreite selbst, wie .pc-tournament-detail auf der
   Turnierseite auch.
   Eine eigene Klasse statt eines Geschwisterselektors: WordPress kann
   zwischen zwei Bloecken ein weiteres Element einfuegen, und ein + waere
   dann still wirkungslos. Teams_v3 traegt die Klasse nicht und bleibt
   damit unveraendert die zweite Spalte. */
/* Ohne Abstand nach unten seit 6.91.0, aus demselben Grund wie oben an
   .pc-team-layout: Den Abstand zum Fussbereich macht der Fussbereich. */
.pc-team-detail.is-page {
  width: var(--pc-width);
  max-width: var(--pc-max);
  margin: 0 auto;
  box-sizing: border-box;
}

.pc-team-placeholder {
  border: 1px dashed rgba(255, 255, 255, 0.16);
  padding: 40px 24px;
  text-align: center;
}

.pc-team-placeholder p {
  font-family: var(--pc-font-page);
  font-size: 13.5px;
  font-weight: var(--pc-weight-page);
  color: var(--pc-muted) !important;
  margin: 0 !important;
}

/* Das Kuerzel neben dem Titel der Detailkarte. Stand bis 6.56.0 an
   .pc-team-title; den Kopf gibt es nicht mehr, der Titel heisst jetzt
   .pc-t-title und kommt aus app.css. Nur der Selektor hat sich geaendert,
   die Werte sind dieselben. */
.pc-t-title .pc-team-tag {
  display: inline-block;
  margin: 0 0 0 16px !important;
  padding-left: 16px;
  border-left: 1px solid rgba(255, 255, 255, 0.22);
  font-family: "droid-sans-mono", monospace !important;
  font-size: 0.5em !important;
  font-weight: 400 !important;
  letter-spacing: 1.5px;
  color: var(--pc-gold) !important;
  vertical-align: middle;
  white-space: nowrap;
}

.pc-team-about {
  font-family: var(--pc-font-page);
  font-size: 13.5px;
  font-weight: var(--pc-weight-page);
  line-height: 1.6;
  color: var(--pc-muted) !important;
  margin: 12px 0 0 0 !important;
  max-width: 620px;
}

.pc-team-block {
  margin-bottom: 30px;
}

.pc-team-h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--pc-font-page) !important;
  font-size: 11px !important;
  font-weight: var(--pc-weight-page) !important;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--pc-gold) !important;
  margin: 0 0 14px 0 !important;
}

/* ---------- Aufklappbare Bloecke ----------
 *
 * Seit 6.64.2 stehen vier Bloecke der Detailansicht zugeklappt: Team-Kuerzel,
 * Beitrittsanfragen, Mitglieder verwalten und Team bearbeiten. Offen
 * untereinander war die Seite mehrere Bildschirmhoehen lang, und der Kader
 * ganz oben verschwand aus dem Blick.
 *
 * Der Titel ist derselbe Baustein wie vorher, nur als <summary> statt <h3>:
 * Gold, gesperrt, in Grossbuchstaben. Die Klasse traegt beides, damit ein
 * aufgeklappter Block genauso aussieht wie ein fester daneben. */

.pc-team-summary {
  cursor: pointer;
  list-style: none;
  padding: 4px 0;
  transition: color 0.15s ease;
}

/* Das Dreieck von WebKit gehoert zu einem eigenen Pseudo-Element und laesst
   sich nur dort abschalten. list-style allein reicht nicht. */
.pc-team-summary::-webkit-details-marker { display: none; }
.pc-team-summary::marker { content: ""; }

.pc-team-summary:hover { color: var(--pc-text) !important; }

/* Der Abstand des Titels nach unten gehoert zum OFFENEN Block.
   Zugeklappt stuenden sonst 14 Pixel ins Leere, und die vier Titel
   untereinander saessen zu weit auseinander. */
.pc-team-klapp:not([open]) > .pc-team-summary {
  margin-bottom: 0 !important;
}

/* Der Pfeil ganz rechts, nicht direkt hinter dem Text: Die vier Blöcke
   stehen untereinander, und an derselben Kante ist er als Bedienelement
   zu erkennen. Gebaut aus Raendern statt aus einem Zeichen, damit er in
   jeder Schrift gleich aussieht. */
.pc-team-klapp-icon {
  margin-left: auto;
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid currentColor;
  transition: transform 0.15s ease;
  flex-shrink: 0;
}

.pc-team-klapp[open] > .pc-team-summary .pc-team-klapp-icon {
  transform: rotate(180deg);
}

/* Ein zugeklappter Block braucht weniger Luft nach unten: Es folgt kein
   Inhalt, nur der naechste Titel. */
.pc-team-klapp:not([open]) {
  margin-bottom: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  padding-bottom: 10px;
}

.pc-team-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  background: var(--pc-accent);
  color: #FFFFFF;
  font-family: "droid-sans-mono", monospace;
  font-size: 10.5px;
  letter-spacing: 0;
}

.pc-roster,
.pc-crew,
.pc-requests {
  list-style: none;
  padding: 0;
  margin: 0;
}

.pc-roster li {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  padding: 9px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.pc-roster li:last-child { border-bottom: none; }

.pc-roster-role {
  font-family: var(--pc-font-page);
  font-size: 10px;
  font-weight: var(--pc-weight-page);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  min-width: 104px;
}

.pc-roster-name {
  font-family: var(--pc-font-page);
  font-size: 14px;
  font-weight: 700;
  color: var(--pc-text);
  overflow-wrap: anywhere;
}

.pc-roster-ok,
.pc-roster-missing {
  font-family: var(--pc-font-page);
  font-size: 10px;
  font-weight: var(--pc-weight-page);
  letter-spacing: 1.2px;
  text-transform: uppercase;
  margin-left: 4px;
}

.pc-roster-ok { color: var(--pc-live); }
.pc-roster-missing { color: var(--pc-warn); }

.pc-crew li,
.pc-requests li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  padding: 11px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.pc-crew-name,
.pc-req-name {
  font-family: var(--pc-font-page);
  font-size: 13.5px;
  font-weight: 700;
  color: var(--pc-text);
  overflow-wrap: anywhere;
}

.pc-req-note {
  flex: 1 1 100%;
  font-family: var(--pc-font-page);
  font-size: 12.5px;
  font-weight: var(--pc-weight-page);
  color: var(--pc-muted);
  line-height: 1.5;
}

.pc-crew-actions,
.pc-req-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.pc-crew-locked {
  font-family: var(--pc-font-page);
  font-size: 10.5px;
  font-weight: var(--pc-weight-page);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--pc-accent);
}

/* ---------- Einladungen verwalten ----------
   Aufbau wie .pc-crew darueber, nur mit einer zweiten Zeile je Eintrag:
   Rolle, Absender und Zeitpunkt stehen unter dem Namen statt daneben, sonst
   riss die Zeile auf einem schmalen Geraet in vier Teile. */

.pc-invlist {
  list-style: none;
  padding: 0;
  margin: 0;
}

.pc-invlist li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  padding: 11px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.pc-invlist li:last-child { border-bottom: none; }

.pc-inv-main {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.pc-inv-name {
  font-family: var(--pc-font-page);
  font-size: 13.5px;
  font-weight: 700;
  color: var(--pc-text);
  overflow-wrap: anywhere;
}

.pc-inv-meta {
  font-family: var(--pc-font-page);
  font-size: 11px;
  font-weight: var(--pc-weight-page);
  color: var(--pc-muted);
  overflow-wrap: anywhere;
}

.pc-inv-actions {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.pc-inv-state {
  font-family: var(--pc-font-page);
  font-size: 10px;
  font-weight: var(--pc-weight-page);
  letter-spacing: 1.3px;
  text-transform: uppercase;
  color: var(--pc-muted);
  white-space: nowrap;
}

/* Offen ist eine Aufforderung, angenommen eine gute Nachricht, der Rest
   nur ein Vermerk. Die drei Farben sind dieselben wie an den Statuszeilen
   der Detailkarte. */
.pc-inv-state.is-invited  { color: var(--pc-warn); }
.pc-inv-state.is-accepted { color: var(--pc-live); }

/* Erledigte Zeilen treten zurueck, sie sind Nachschlagewerk. */
.pc-invlist li.is-done .pc-inv-name { font-weight: var(--pc-weight-page); }

.pc-inv-log {
  margin-top: 6px;
}

.pc-inv-log > summary {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  list-style: none;
  padding: 8px 0;
  font-family: var(--pc-font-page);
  font-size: 10.5px;
  font-weight: var(--pc-weight-page);
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--pc-muted);
}

/* Das Dreieck von WebKit gehoert zu einem eigenen Pseudo-Element und
   verschwindet nicht ueber list-style. */
.pc-inv-log > summary::-webkit-details-marker { display: none; }

.pc-inv-log > summary:hover { color: var(--pc-text); }

.pc-inv-logcount {
  display: inline-block;
  min-width: 16px;
  padding: 1px 5px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  font-family: "droid-sans-mono", monospace;
  font-size: 10px;
  letter-spacing: 0;
  text-align: center;
}

.pc-team-detail select,
.pc-team-detail input[type="text"],
.pc-team-detail textarea,
.pc-team-create input[type="text"],
.pc-team-create textarea {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: var(--pc-text) !important;
  font-family: var(--pc-font-page) !important;
  font-size: 13px !important;
  font-weight: var(--pc-weight-page) !important;
  padding: 8px 10px !important;
  margin: 0 !important;
  box-sizing: border-box;
}

.pc-team-detail select {
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='7' fill='%23FFFFFF'><polygon points='0,0 10,0 5,7'/></svg>") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  padding-right: 34px !important;
}

.pc-team-detail select option {
  background-color: var(--pc-surface-2);
  color: #FFFFFF;
}

.pc-team-detail select:focus,
.pc-team-detail input:focus,
.pc-team-detail textarea:focus,
.pc-team-create input:focus,
.pc-team-create textarea:focus {
  outline: none !important;
  border-color: var(--pc-accent) !important;
}

.pc-mini-btn,
.pc-mini-btn:focus,
.pc-mini-btn:active {
  background: none !important;
  background-color: transparent !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  padding: 7px 11px !important;
  margin: 0 !important;
  color: var(--pc-muted) !important;
  font-family: var(--pc-font-page) !important;
  font-size: 10.5px !important;
  font-weight: var(--pc-weight-page) !important;
  letter-spacing: 1.3px !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  transform: none !important;
  transition: color 0.2s ease, border-color 0.2s ease !important;
}

.pc-mini-btn:hover {
  background: none !important;
  color: var(--pc-text) !important;
  border-color: rgba(255, 255, 255, 0.5) !important;
  transform: none !important;
}

.pc-mini-btn.is-danger:hover {
  color: var(--pc-accent) !important;
  border-color: var(--pc-accent) !important;
}

.pc-mini-btn[disabled] { opacity: 0.45; cursor: default !important; }

.pc-team-btn,
.pc-team-btn:focus,
.pc-team-btn:active {
  display: inline-block;
  background: none !important;
  background-color: transparent !important;
  border: none !important;
  border-bottom: 2px solid var(--pc-accent) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  padding: 0 0 6px 0 !important;
  margin: 4px 22px 0 0 !important;
  color: var(--pc-text) !important;
  font-family: var(--pc-font-page) !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  letter-spacing: 1.6px !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  cursor: pointer !important;
  transform: none !important;
  transition: opacity 0.2s ease !important;
}

.pc-team-btn:hover { background: none !important; opacity: 0.68; transform: none !important; }

.pc-team-btn.is-plain {
  border-bottom-color: rgba(255, 255, 255, 0.3) !important;
  color: var(--pc-muted) !important;
  font-weight: var(--pc-weight-page) !important;
}

.pc-team-btn[disabled] { opacity: 0.45; cursor: default !important; }

.pc-team-form {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 16px;
}

.pc-team-form input[type="text"] { flex: 1 1 220px; }

.pc-team-fields {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}

.pc-team-label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1 1 200px;
  font-family: var(--pc-font-page);
  font-size: 10.5px;
  font-weight: var(--pc-weight-page);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--pc-muted);
}

.pc-team-label-wide { flex: 1 1 100%; }

.pc-team-check {
  display: flex;
  align-items: center;
  gap: 9px;
  flex: 1 1 100%;
  font-family: var(--pc-font-page);
  font-size: 13px;
  font-weight: var(--pc-weight-page);
  color: var(--pc-text);
  cursor: pointer;
}

.pc-team-check input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--pc-accent);
  margin: 0;
  cursor: pointer;
}

.pc-team-create {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding-top: 22px;
}

/* In der rechten Spalte ist das Formular ein eigener Kasten, keine
   Fortsetzung der Liste darueber. Die Trennlinie oben faellt deshalb weg,
   sie haette dort nichts zu trennen. */
.pc-team-aside .pc-team-create {
  border-top: none;
  border: 1px solid var(--pc-line);
  border-left: 2px solid var(--pc-accent);
  background: rgba(250, 67, 122, 0.03);
  padding: 20px 20px 22px 20px;
}

.pc-team-create .pc-team-h3 { margin-top: 0 !important; }

.pc-team-create input[type="text"],
.pc-team-create textarea {
  width: 100%;
  margin-bottom: 10px !important;
}

/* Der Kopfbereich der Seite (.pc-team-head-page) ist mit 6.88.0 entfallen.
   Seine Breitenregel stand hier; die Breite des Inhalts fuehren
   .pc-team-layout und .pc-team-detail.is-page weiter unten. */

@media (max-width: 900px) {
  .pc-team-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 30px;
  }
  .pc-team-list { max-height: 380px; }

  /* Untereinander kommt die rechte Spalte zuerst.
     Dort stehen die offenen Einladungen, und die sind eine Aufforderung an
     genau diese Person. Das Fenster im Stil des Levelaufstiegs bleibt auf
     dieser Seite ausdruecklich aus (site.js, einladungStart), der sichtbare
     Bereich ist hier also das einzige Signal. Unter zwei Listen waere er auf
     einem Telefon ausser Sicht.

     GILT NUR NOCH FUER Teams_v4. Ab Teams_v5 liegen Einladungen und
     Gruendungsformular getrennt, und dann ordnet der Zweig darunter. */
  .pc-team-aside { order: -1; }

  /* Ab Teams_v5: Einladungen zuerst, dann die Teams, dann das Gruenden.
     Damit steht das Gruendungsformular wie gewuenscht hinter den Listen,
     ohne dass die Einladungen ihre Sichtbarkeit verlieren.

     Die Rasterzuweisungen von oben muessen zurueckgenommen werden: Bei einer
     Spalte wuerde grid-column: 2 eine zweite erzwingen, und grid-row haelt
     die Reihenfolge fest, die hier gerade umgestellt wird. */
  .pc-team-layout.is-v5 .pc-team-side,
  .pc-team-layout.is-v5 .pc-team-invites,
  .pc-team-layout.is-v5 .pc-team-aside {
    grid-column: 1;
    grid-row: auto;
  }

  .pc-team-layout.is-v5 .pc-team-invites { order: -1; }
  .pc-team-layout.is-v5 .pc-team-side    { order: 0; }
  .pc-team-layout.is-v5 .pc-team-aside   { order: 1; }
}

@media (max-width: 1100px) {
  .pc-team-layout,
  .pc-team-detail.is-page { width: 88%; }
}

@media (max-width: 768px) {
  .pc-team-layout,
  .pc-team-detail.is-page {
    width: 100%;
    padding: 0 var(--pc-edge);
  }

  .pc-roster li { gap: 8px; }
  .pc-roster-role { min-width: 0; flex: 1 1 100%; }
  .pc-team-btn { margin-right: 16px !important; }
}

/* ---------- Rückmeldungen ---------- */

.pc-feedback {
  display: none;
  margin-top: 10px;
  padding: 10px 14px;
  font-family: var(--pc-font-page);
  font-size: 13px;
  font-weight: var(--pc-weight-page);
  border-radius: 4px;
  line-height: 1.5;
  max-width: 420px;
}

.pc-feedback.success {
  display: block;
  background: rgba(69, 217, 163, 0.1);
  border: 1px solid var(--pc-live);
  color: var(--pc-live);
}

.pc-feedback.error {
  display: block;
  background: rgba(250, 67, 122, 0.1);
  border: 1px solid var(--pc-accent);
  color: var(--pc-accent);
}

.pc-feedback.pending {
  display: block;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--pc-muted);
}

/* ---------- Verborgene Namen ---------- */

.pc-roster-veiled {
  font-family: var(--pc-font-page);
  font-size: 10px;
  font-weight: var(--pc-weight-page);
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--pc-muted);
  margin-left: 4px;
}

.pc-roster li.is-veiled .pc-roster-name {
  color: var(--pc-muted);
  font-style: italic;
}

/* ---------- Eigene Teams ---------- */

#pcMyTeams {
  margin: 0 0 26px 0;
  padding: 0 0 22px 0;
  border-bottom: 1px solid var(--pc-line);
}

.pc-myteams-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 12px 0 !important;
  font-family: var(--pc-font-page);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--pc-gold) !important;
}

/* Die Ueberschrift ueber allen uebrigen Teams. Gedaempft statt golden: Gold
   ist in dieser Spalte der eigene Bestand, die Liste darunter ist das
   Verzeichnis. Legt team.js an, Teams_v3 kennt sie nicht. */
.pc-myteams-title.is-all {
  color: var(--pc-muted) !important;
  margin-top: 0 !important;
}

.pc-myteams-title.is-all .pc-myteams-count {
  border-color: rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.04);
  color: var(--pc-muted);
}

.pc-myteams-count {
  display: inline-block;
  min-width: 18px;
  padding: 1px 6px;
  border: 1px solid rgba(245, 213, 110, 0.35);
  background: rgba(245, 213, 110, 0.08);
  font-size: 10px;
  letter-spacing: 0.5px;
  text-align: center;
  color: var(--pc-gold);
}

.pc-myteams-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Hervorhebung, auch in der vollständigen Liste darunter */
.pc-team-row.is-mine {
  border-left: 2px solid var(--pc-gold) !important;
}

/* Beide Selektoren tragen is-mine. Der zweite hatte es nicht und traf damit
   JEDE Zeile der Teamliste; mit !important schlug er die Grundregel, und alle
   Teamnamen standen in Gold. Die Hervorhebung der eigenen Teams war dadurch
   wirkungslos. Im Browser nachgemessen und mit 6.56.0 behoben. */
.pc-team-row.is-mine .pc-team-name,
.pc-team-row.is-mine .pc-team-name .pc-team-name-text {
  color: var(--pc-gold) !important;
}

.pc-myteams-list .pc-team-row {
  background: rgba(245, 213, 110, 0.04) !important;
}

@media (max-width: 768px) {
  #pcMyTeams {
    margin-bottom: 20px;
    padding-bottom: 18px;
  }
}

/* ---------- Deine Einladungen ----------
   Aufbau wie "Meine Teams" darunter, nur in Orange: Es ist eine
   Aufforderung, keine Uebersicht. */

#pcMyInvites {
  margin: 0 0 26px 0;
  padding: 0 0 22px 0;
  border-bottom: 1px solid var(--pc-line);
}

.pc-myinv-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 12px 0 !important;
  font-family: var(--pc-font-page);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--pc-warn) !important;
}

.pc-myinv-count {
  display: inline-block;
  min-width: 18px;
  padding: 1px 6px;
  border: 1px solid rgba(252, 121, 56, 0.35);
  background: rgba(252, 121, 56, 0.08);
  font-size: 10px;
  letter-spacing: 0.5px;
  text-align: center;
  color: var(--pc-warn);
}

.pc-myinv-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.pc-myinv-item {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 14px;
  background: rgba(252, 121, 56, 0.05);
  border-left: 2px solid var(--pc-warn);
}

.pc-myinv-main {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.pc-myinv-team {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-family: var(--pc-font-page);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.3px;
  color: var(--pc-text);
  overflow-wrap: break-word;
  word-wrap: break-word;
}

.pc-myinv-role {
  font-family: var(--pc-font-page);
  font-size: 11px;
  font-weight: var(--pc-weight-page);
  letter-spacing: 0.4px;
  color: var(--pc-muted);
}

/* Absender und Zeitpunkt. Eine Stufe leiser als die Rolle darueber: Die
   Rolle entscheidet, die Herkunft ordnet nur ein. */
.pc-myinv-von {
  font-family: var(--pc-font-page);
  font-size: 10.5px;
  font-weight: var(--pc-weight-page);
  letter-spacing: 0.4px;
  color: rgba(142, 146, 153, 0.75);
}

.pc-myinv-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* Wann die eigene Anfrage gestellt wurde, auf der Detailseite hinter dem
   Hinweistext. Eine Stufe leiser als der Satz davor, aus demselben Grund
   wie bei .pc-myinv-von: Der Satz sagt, was ansteht, das Datum ordnet nur
   ein. Kein eigener Block, sondern im Fluss - es ist ein Nachsatz. */
.pc-req-seit {
  color: rgba(142, 146, 153, 0.75);
}

@media (max-width: 768px) {
  #pcMyInvites {
    margin-bottom: 20px;
    padding-bottom: 18px;
  }
}