/* ===================================================================
   True Legends - Golden Hour
   Teamseite
   =================================================================== */

/* ============ Teamseite ============
   Aufbau wie bei Bound by Blood: oben ein Kopfbereich aus drei Feldern,
   darunter je Teammitglied eine Überschrift und die Karten seiner
   Charaktere. Bildmaß 448 x 196 wie auf der bestehenden Teamseite. */
.team-kopf{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:14px;margin-bottom:26px;
}
.team-kopf section{
  border:1px solid var(--line);background:var(--bg-panel);
  padding:18px 20px;font-size:.95rem;color:var(--text-dim);line-height:1.55;
}
.team-kopf h3{
  font-family:var(--caps);font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold-soft);margin-bottom:10px;
  display:flex;align-items:center;gap:9px;
}
.team-kopf h3 svg{width:16px;height:16px;fill:var(--gold-soft);stroke:none;flex:none;}
.team-kopf .symbol{
  float:left;width:100px;height:100px;margin:0 16px 8px 0;
  display:flex;align-items:center;justify-content:center;
  border:1px solid var(--gold-deep);background:rgb(var(--shadow-rgb) / .4);
}
.team-kopf .symbol svg{width:52px;height:52px;fill:var(--gold);stroke:none;}
.team-kopf a{color:var(--blue);}
.team-kopf .hinweis{font-style:italic;color:var(--text-faint);}

/* Je Teammitglied ein Block aus Überschrift und einer Karte — die
   weiteren Charaktere stecken im Auswahlfeld, nicht in eigenen Karten.
   Zwei Blöcke stehen nebeneinander. */
.team-liste{
  display:grid;grid-template-columns:repeat(auto-fill,450px);
  gap:26px 16px;justify-content:center;
}
.team-block{display:flex;flex-direction:column;}
.team-person{
  font-family:var(--display);font-size:1.18rem;letter-spacing:.03em;
  margin:0 0 10px;padding-bottom:8px;border-bottom:1px solid var(--line);
  background:var(--metal);-webkit-background-clip:text;background-clip:text;color:transparent;
}

/* Karten der Charaktere */
/* Karten genau so breit wie das Bild, damit es bündig sitzt statt
   von Rändern eingerahmt zu werden. */
.team-karten{
  display:grid;grid-template-columns:repeat(auto-fill,450px);
  gap:16px;justify-content:center;
}
.tkarte{
  --gruppe:var(--line);
  border:1px solid var(--line);background:var(--bg-panel);
  overflow:hidden;position:relative;
  display:flex;flex-direction:column;
}
.tkarte::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background:linear-gradient(200deg,transparent 40%,var(--gruppe));opacity:.2;
}
.tkarte > *{position:relative;z-index:1;}

/* Bild mit Einblendung */
.tkarte .bild{
  position:relative;display:block;
  width:448px;max-width:100%;height:196px;
  background-image:url(/images/goldenhour/cat-banner.jpg);
  background-size:cover;background-position:center;
  margin:0 auto;
}
.tkarte .bild .text{
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgb(var(--shadow-rgb) / .86),rgb(var(--shadow-rgb) / .94));
  padding:18px 20px;
  display:flex;align-items:center;justify-content:center;text-align:center;
  font-family:var(--serif);font-style:italic;font-size:1rem;line-height:1.5;color:var(--text);
  opacity:0;transition:opacity .22s ease;
}
.tkarte .bild:hover .text,.tkarte .bild:focus-within .text{opacity:1;}

.tkarte .unten{padding:14px 18px;display:flex;flex-direction:column;gap:9px;}
.tkarte .cname{
  display:flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--display);font-size:1.18rem;letter-spacing:.04em;text-align:center;
}
.tkarte .cname svg{width:15px;height:15px;fill:currentColor;stroke:none;flex:none;}
.tkarte .rolle{
  font-family:var(--caps);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--text-faint);text-align:center;
}
/* Aufgaben und Kontakt je Teammitglied */
/* Aufgaben als zweispaltige Liste — bei einem Dutzend Einträgen wären
   einzelne Kästchen unübersichtlich. */
.tkarte .aufgaben{
  padding-top:9px;border-top:1px solid var(--line);
}
.tkarte .aufgaben h5{
  font-family:var(--caps);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold-soft);font-weight:400;margin-bottom:6px;
}
.tkarte .aufgaben ul{
  margin:0;padding:0;list-style:none;
  columns:2;column-gap:16px;
}
.tkarte .aufgaben li{
  font-size:.84rem;color:var(--text-dim);line-height:1.45;
  padding-left:12px;position:relative;
  break-inside:avoid;
}
.tkarte .aufgaben li::before{
  content:"›";position:absolute;left:0;color:var(--gold-deep);
}
.tkarte .kontakt{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;}
.tkarte .kontakt a{
  display:inline-flex;align-items:center;gap:6px;
  border:1px solid var(--line);padding:5px 11px;
  font-family:var(--caps);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--text-dim);
  transition:border-color .16s ease,color .16s ease,background .16s ease;
}
.tkarte .kontakt a svg{
  width:13px;height:13px;fill:none;stroke:var(--gold-soft);stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round;transition:stroke .16s ease;
}
.tkarte .kontakt a:hover{border-color:var(--gold-deep);color:var(--gold-light);background:rgb(var(--gold-rgb) / .16);}
.tkarte .kontakt a:hover svg{stroke:var(--gold-light);}

.tkarte .wann{
  font-size:.84rem;color:var(--text-faint);text-align:center;
  padding-top:8px;border-top:1px solid var(--line);
}
.tkarte .wann b{font-weight:400;color:var(--online);}
.tkarte select{
  width:100%;background:rgb(var(--shadow-rgb) / .5);border:1px solid var(--line);
  color:var(--text-dim);padding:7px 9px;cursor:pointer;
  font-family:var(--caps);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;
}
.tkarte select:hover{border-color:var(--gold-deep);color:var(--gold-light);}

@media (max-width:1000px){
  .tkarte .bild{width:100%;height:auto;aspect-ratio:448/196;}
}

/* Nicht jedes Teammitglied hat ein Bild hinterlegt - dann steht statt
   der leeren Flaeche ein ruhiger Verlauf in der Gruppenfarbe. */
.tkarte .bild.ohne{
  background-image:linear-gradient(160deg,rgb(var(--panel-rgb) / .9),var(--gruppe));
  opacity:.55;
}
.tkarte .aufgaben:has(p.pleer){display:none;}
.tkarte .rolle:empty{display:none;}

/* ---- Alle Teamkarten gleich hoch --------------------------------------
   Ob jemand weitere Charaktere hat oder viele Aufgaben, darf die Karte
   nicht laenger machen; die Aufgabenliste rollt stattdessen. */
.team-liste{align-items:start;}
.team-block{height:560px;}
.tkarte{height:calc(100% - 42px);}
.tkarte .unten{flex:1;min-height:0;}
.tkarte .aufgaben{flex:1;min-height:0;overflow-y:auto;}
.tkarte .aufgaben::-webkit-scrollbar{width:7px;}
.tkarte .aufgaben::-webkit-scrollbar-track{background:rgb(var(--shadow-rgb) / .3);}
.tkarte .aufgaben::-webkit-scrollbar-thumb{background:var(--gold-deep);}

/* Ueberschrift: Spieler, Rolle und ob gerade jemand da ist */
.team-person{
  font-size:1.02rem;letter-spacing:.02em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.ist-on{color:var(--online);}
.ist-off{color:var(--text-faint);}

/* Steht kein weiterer Charakter zur Wahl, bleibt das Feld als Platzhalter */
.tl-weitere[disabled]{opacity:.45;cursor:default;}

/* Angaben zu den Partnerforen neben dem Nachrichtenknopf */
.tkarte .kontakt .feld{
  display:inline-flex;align-items:center;gap:6px;
  border:1px solid rgb(var(--line-rgb) / .6);padding:5px 11px;
  font-family:var(--caps);font-size:.62rem;letter-spacing:.12em;
  color:var(--text-faint);
}
.tkarte .kontakt .feld i{color:var(--gold-soft);font-size:.9rem;}

		
{
	

}