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

/* ============ Profilansicht ============
   Links die Karte mit Avatar und Spielerdaten, in der Mitte der Inhalt des
   gewählten Reiters, rechts die Reiterleiste mit Icon und Beschriftung.
   Umgeschaltet wird wie im bestehenden Board rein über CSS mit versteckten
   Radio-Feldern — ohne JavaScript. */
.profil{
  --gruppe:var(--line);
  display:grid;grid-template-columns:270px minmax(0,1fr) 186px;
  gap:16px;align-items:start;
}
/* Karte und Reiterleiste laufen über beide Zeilen, dazwischen erst die
   Charakterbilder, darunter der Inhalt des gewählten Reiters. */
.profil .pkarte {grid-column:1;grid-row:1 / span 2;}
.profil .pgifs  {grid-column:2;grid-row:1;}
.profil .pinhalt{grid-column:2;grid-row:2;}
.profil .preiter{grid-column:3;grid-row:1 / span 2;}
.profil .pbilder{grid-column:1 / -1;}

/* Charakterbilder nebeneinander über dem Reiterinhalt */
.pgifs{
  border:1px solid var(--line);background:var(--bg-panel);
  padding:18px;display:flex;gap:18px;align-items:center;flex-wrap:wrap;
  /* eines links, eines rechts */
  justify-content:space-between;
}
.pgifs span{
  display:block;box-shadow:inset 0 0 0 1px var(--gold-deep);
  background-image:url(/images/goldenhour/cat-bg.jpg);background-size:cover;
}
.pgifs .gif-klein{width:167px;height:184px;background-position:22% 52%;}
.pgifs .gif-gross{width:191px;height:191px;background-position:38% 46%;}

/* --- linke Karte --- */
.pkarte{
  border:1px solid var(--line);background:var(--bg-panel);
  padding:20px;position:relative;overflow:hidden;
  display:flex;flex-direction:column;align-items:center;gap:12px;
}
.pkarte::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(200deg,transparent 35%,var(--gruppe));opacity:.2;
}
.pkarte > *{position:relative;z-index:1;}
.pkarte .ava{
  width:220px;height:370px;
  background-image:url(/images/goldenhour/header.jpg);
  background-size:520px auto;background-position:52% 30%;
}
.pkarte .pname{
  font-family:var(--display);font-size:1.5rem;letter-spacing:.05em;text-align:center;line-height:1.2;
  background:var(--metal);-webkit-background-clip:text;background-clip:text;color:transparent;
}
.pkarte .prolle{
  font-family:var(--caps);font-size:.86rem;letter-spacing:.16em;text-transform:uppercase;
}
.pkarte .prolle::before{content:"‹ ";}
.pkarte .prolle::after{content:" ›";}

.pdaten{
  width:100%;border:1px solid var(--line);background:rgb(var(--shadow-rgb) / .35);
  padding:13px 15px;display:grid;gap:7px;
}
.pdaten div{display:flex;justify-content:space-between;gap:10px;font-size:.9rem;}
.pdaten .k{
  font-family:var(--caps);font-size:.66rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--text-faint);flex:none;padding-top:3px;
}
.pdaten .v{color:var(--text-dim);text-align:right;min-width:0;}

/* Aktionen und Zahlen direkt unter dem Avatar */
.paktionen{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;width:100%;}
.paktionen a{
  display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;
  border:1px solid var(--line);background:rgb(var(--shadow-rgb) / .35);
  padding:9px 4px;
  font-family:var(--caps);font-size:.58rem;letter-spacing:.09em;text-transform:uppercase;
  color:var(--text-dim);line-height:1.2;
  transition:border-color .16s ease,color .16s ease,background .16s ease;
}
.paktionen a svg{
  width:17px;height:17px;fill:none;stroke:var(--gold-soft);stroke-width:1.4;
  stroke-linecap:round;stroke-linejoin:round;transition:stroke .16s ease;
}
.paktionen a:hover{border-color:var(--gold-deep);color:var(--gold-light);background:rgb(var(--gold-rgb) / .16);}
.paktionen a:hover svg{stroke:var(--gold-light);}

.pzahlen{
  display:flex;justify-content:center;gap:22px;width:100%;
  padding:9px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
}
.pzahlen div{text-align:center;}
.pzahlen b{
  display:block;font-family:var(--display);font-size:1.16rem;font-weight:600;
  font-variant-numeric:tabular-nums;
  background:var(--metal);-webkit-background-clip:text;background-clip:text;color:transparent;
}
.pzahlen span{
  font-family:var(--caps);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--text-faint);
}

/* Charakterbilder in der Karte, unter den Daten */
.pkarte .gif-klein,.pkarte .gif-gross{
  display:block;box-shadow:inset 0 0 0 1px var(--gold-deep);
  background-image:url(/images/goldenhour/cat-bg.jpg);background-size:cover;
}
.pkarte .gif-klein{width:167px;height:184px;background-position:22% 52%;}
.pkarte .gif-gross{width:191px;height:191px;background-position:38% 46%;}

.pstatus{text-align:center;font-size:.86rem;color:var(--text-faint);line-height:1.6;}
.pstatus b{
  display:block;font-family:var(--caps);font-size:.74rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--online);font-weight:400;
}
.pstatus i{font-size:.8rem;}

/* --- Reiterleiste rechts --- */
.preiter{display:flex;flex-direction:column;gap:4px;}
.preiter label{
  display:flex;align-items:center;gap:10px;cursor:pointer;
  border:1px solid var(--line);background:var(--bg-panel);
  padding:10px 12px;
  font-family:var(--caps);font-size:.72rem;letter-spacing:.11em;text-transform:uppercase;
  color:var(--text-dim);
  transition:border-color .16s ease,color .16s ease,background .16s ease;
}
.preiter label svg{
  width:17px;height:17px;flex:none;
  fill:none;stroke:var(--gold-soft);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;
  transition:stroke .16s ease;
}
.preiter label:hover{border-color:var(--gold-deep);color:var(--gold-light);}
.preiter label:hover svg{stroke:var(--gold-light);}

/* --- Inhaltsfläche --- */
.pinhalt{
  border:1px solid var(--line);background:var(--bg-panel);
  padding:24px 26px;min-height:520px;
}
.pinhalt h2{
  font-family:var(--display);font-size:1.42rem;letter-spacing:.04em;margin-bottom:4px;
  background:var(--metal);-webkit-background-clip:text;background-clip:text;color:transparent;
}
.pinhalt > section{display:none;}
.pinhalt p{margin:0 0 12px;font-size:1rem;line-height:1.65;color:var(--text-dim);}
.pinhalt p b{color:var(--text);font-weight:600;}

/* Feldliste im Reiter „Allgemein" */
.pfelder{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:2px 26px;}
.pfelder h6{
  grid-column:1/-1;margin:16px 0 4px;font-weight:400;
  font-family:var(--caps);font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold-soft);border-bottom:1px solid var(--line);padding-bottom:5px;
}
.pfelder h6:first-child{margin-top:0;}
.pfelder div{
  display:flex;justify-content:space-between;gap:12px;align-items:baseline;
  padding:5px 0;border-bottom:1px dashed rgb(var(--line-rgb) / .5);
}
.pfelder .k{
  font-family:var(--caps);font-size:.66rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--text-faint);flex:none;
}
.pfelder .v{color:var(--text);text-align:right;min-width:0;font-size:.95rem;}

/* Charaktere desselben Spielers */
.pchars{display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:14px;}
.pchars a{
  display:flex;flex-direction:column;gap:8px;
  border:1px solid var(--line);background:rgb(var(--shadow-rgb) / .3);
  padding:10px;transition:border-color .16s ease;
}
.pchars a:hover{border-color:var(--gold-deep);}
.pchars .bild{
  width:100%;aspect-ratio:220/370;display:block;
  background-image:url(/images/goldenhour/header.jpg);
  background-size:340px auto;
}
.pchars .n{
  font-family:var(--display);font-size:.98rem;letter-spacing:.03em;color:var(--text);
  text-align:center;line-height:1.25;
}
.pchars .g{
  font-family:var(--caps);font-size:.62rem;letter-spacing:.13em;text-transform:uppercase;
  text-align:center;
}

/* --- Bilder und Signatur unter dem Profil --- */
.pbilder{
  grid-column:1/-1;
  border:1px solid var(--line);background:var(--bg-panel);
  padding:22px;margin-top:2px;
  display:flex;flex-wrap:wrap;gap:22px;align-items:center;justify-content:center;
}
.pbilder .gif-klein,.pbilder .gif-gross,.pbilder .sig{
  display:block;box-shadow:inset 0 0 0 1px var(--gold-deep);
  background-image:url(/images/goldenhour/cat-bg.jpg);background-size:cover;
}
.pbilder .gif-klein{width:167px;height:184px;background-position:22% 52%;}
.pbilder .gif-gross{width:191px;height:191px;background-position:38% 46%;}
.pbilder .sig{
  width:500px;height:250px;max-width:100%;
  background-image:url(/images/goldenhour/cat-banner.jpg);background-position:30% 50%;
}
.pbilder figure{margin:0;display:flex;flex-direction:column;align-items:center;gap:8px;}
.pbilder figcaption{
  font-family:var(--caps);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--text-faint);
}

/* Radiofelder tragen die Umschaltung, ohne sichtbar zu sein */
.profil input[name="ptab"]{position:absolute;opacity:0;width:0;height:0;pointer-events:none;}
.profil input[name="ptab"]:nth-of-type(1):checked ~ .pinhalt section:nth-of-type(1),
.profil input[name="ptab"]:nth-of-type(2):checked ~ .pinhalt section:nth-of-type(2),
.profil input[name="ptab"]:nth-of-type(3):checked ~ .pinhalt section:nth-of-type(3),
.profil input[name="ptab"]:nth-of-type(4):checked ~ .pinhalt section:nth-of-type(4),
.profil input[name="ptab"]:nth-of-type(5):checked ~ .pinhalt section:nth-of-type(5),
.profil input[name="ptab"]:nth-of-type(6):checked ~ .pinhalt section:nth-of-type(6),
.profil input[name="ptab"]:nth-of-type(7):checked ~ .pinhalt section:nth-of-type(7),
.profil input[name="ptab"]:nth-of-type(8):checked ~ .pinhalt section:nth-of-type(8){display:block;}
.profil input[name="ptab"]:nth-of-type(1):checked ~ .preiter label:nth-of-type(1),
.profil input[name="ptab"]:nth-of-type(2):checked ~ .preiter label:nth-of-type(2),
.profil input[name="ptab"]:nth-of-type(3):checked ~ .preiter label:nth-of-type(3),
.profil input[name="ptab"]:nth-of-type(4):checked ~ .preiter label:nth-of-type(4),
.profil input[name="ptab"]:nth-of-type(5):checked ~ .preiter label:nth-of-type(5),
.profil input[name="ptab"]:nth-of-type(6):checked ~ .preiter label:nth-of-type(6),
.profil input[name="ptab"]:nth-of-type(7):checked ~ .preiter label:nth-of-type(7),
.profil input[name="ptab"]:nth-of-type(8):checked ~ .preiter label:nth-of-type(8){
  border-color:var(--gold);color:var(--gold-light);
  background:linear-gradient(90deg,rgb(var(--gold-rgb) / .22),var(--bg-panel));
}
.profil input[name="ptab"]:focus-visible ~ .preiter label{outline:2px solid var(--gold);outline-offset:2px;}

@media (max-width:1000px){
  .profil{grid-template-columns:1fr;}
  .preiter{flex-direction:row;flex-wrap:wrap;}
  .pkarte .ava{width:100%;max-width:220px;}
}

/* ---- Inhalte der Reiter -----------------------------------------------
   Die Reiter liefern fertige Bausteine der Plugins; sie tragen die
   Klassen des bestehenden Boards und werden hier eingekleidet. */

/* Der erste Reiter ist eine Feldliste und darf zweispaltig laufen */
.pinhalt section:nth-of-type(1){
  grid-template-columns:repeat(auto-fill,minmax(258px,1fr));
  gap:0 30px;align-content:start;
}
.pinhalt section:nth-of-type(1) > h1{grid-column:1 / -1;}

/* Gruppenueberschriften zwischen den Feldern */
.pinhalt h1{
  font-family:var(--caps);font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;
  font-weight:400;color:var(--gold-soft);
  border-bottom:1px solid var(--line);padding-bottom:6px;margin:22px 0 8px;
}
.pinhalt h1:first-child{margin-top:0;}

/* Eine Zeile: links die Beschriftung, rechts der Wert */
.pinhalt .info,
.pinhalt .info2,
.pinhalt .info3{
  display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  padding:6px 0;border-bottom:1px dashed rgb(var(--line-rgb) / .5);
}
.pinhalt .info .c,
.pinhalt .info2 .c,
.pinhalt .info3 .c{
  font-family:var(--caps);font-size:.66rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--text-faint);flex:none;
}
.pinhalt j{color:var(--text);font-size:.95rem;text-align:right;min-width:0;}
.pinhalt x{font:inherit;color:inherit;}

/* Gesuche und aehnliche Aufzaehlungen */
.pinhalt .info4{
  border:1px solid var(--line);background:rgb(var(--shadow-rgb) / .3);
  padding:16px 18px;margin:0 0 14px;
}
.pinhalt .info4 .c{
  font-family:var(--caps);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold-soft);margin-bottom:10px;display:block;
}
.pinhalt .info4 .j{padding:5px 0;border-bottom:1px dashed rgb(var(--line-rgb) / .5);}
.pinhalt .info4 .j:last-child{border-bottom:0;}

/* Tabellen, die Plugins mitbringen (Inplaytracker) */
.pinhalt table.tborder{
  width:100%;margin:0 0 14px;border:1px solid var(--line);
  background:rgb(var(--shadow-rgb) / .25);border-collapse:collapse;
}
.pinhalt table.tborder td,
.pinhalt table.tborder th{
  border:0;border-bottom:1px solid rgb(var(--line-rgb) / .5);
  padding:9px 12px;background:none;font-size:.92rem;color:var(--text-dim);
}
.pinhalt table.tborder tr:last-child td{border-bottom:0;}

/* Inplayzitate */
.pinhalt .inplayquotes-quote{
  border-left:2px solid var(--gold-deep);padding:10px 0 10px 16px;
  font-family:var(--serif);font-style:italic;color:var(--text-dim);
}

/* Beziehungen */
.pinhalt .memrelas{display:grid;gap:10px;}
.pinhalt .memrelas-request__item{
  border:1px solid var(--line);background:rgb(var(--shadow-rgb) / .3);padding:10px 13px;
}

/* Leere Reiter sollen nicht wie ein Fehler wirken */
.pinhalt section:empty::before{
  content:"Hier ist noch nichts eingetragen.";
  color:var(--text-faint);font-style:italic;
}

/* ---- Bilder in Karte und Kopf ---------------------------------------- */
/* Avatar und Charakterbilder kommen als Adresse bzw. fertiges Bild;
   beide sollen ihren Rahmen fuellen. */
.pkarte .ava img{width:100%;height:100%;object-fit:cover;display:block;}
.pkarte .ava:has(img){background-image:none;}
.pgifs span img{width:100%;height:100%;object-fit:cover;display:block;}
.pgifs span:not(:has(img[src]:not([src=""]))){display:none;}
.pgifs:not(:has(img[src]:not([src=""]))){display:none;}

/* Die Umschaltung setzt den gewaehlten Reiter auf "block". Der erste
   Reiter ist eine Feldliste und soll dabei ein Raster bleiben. */
.profil input[name="ptab"]:nth-of-type(1):checked ~ .pinhalt section:nth-of-type(1){display:grid;}

/* Die Aktionslinks stecken je in einem eigenen Behaelter; damit sie sich
   im Raster nebeneinander stellen, wird dieser durchgereicht. */
.paktionen .links{display:contents;}

/* Die Karte laeuft ueber beide Zeilen. Ohne diese Angabe zieht das
   Raster die obere Zeile auf und reisst eine Luecke unter die Bilder. */
.profil{align-content:start;}
.profil .pgifs{align-self:start;}
.profil .pinhalt{align-self:start;}

/* Die Aktionslinks liegen in zwei Behaeltern verschachtelt; beide werden
   durchgereicht, damit die Knoepfe selbst im Raster stehen. */
.paktionen > div{display:contents;}

/* Die Karte laeuft ueber beide Zeilen und ist hoeher als Bilder und
   Reiterinhalt zusammen. Ohne feste Zeilenaufteilung verteilt das Raster
   ihre Ueberlaenge auf beide Zeilen und reisst eine Luecke unter die
   Bilder; die erste Zeile bekommt daher nur, was sie braucht. */
.profil{grid-template-rows:auto 1fr;}

/* Symbol links, Beschriftung rechts - nebeneinander statt uebereinander */
.paktionen{grid-template-columns:1fr;gap:6px;}
.paktionen a{
  flex-direction:row;justify-content:flex-start;align-items:center;gap:10px;
  text-align:left;padding:9px 12px;font-size:.62rem;letter-spacing:.12em;
}
.paktionen a i{
  flex:none;width:19px;text-align:center;font-size:1rem;color:var(--gold-soft);
  transition:color .16s ease;
}
.paktionen a:hover i{color:var(--gold-light);}

/* Die Rasse unter dem Namen erbte einen zu dunklen Ton */
.pkarte .prolle{color:var(--gold-soft);}

/* Neunter Reiter: die weiteren Charaktere desselben Spielers */
.profil input[name="ptab"]:nth-of-type(9):checked ~ .pinhalt section:nth-of-type(9){display:block;}
.profil input[name="ptab"]:nth-of-type(9):checked ~ .preiter label:nth-of-type(9){
  border-color:var(--gold);color:var(--gold-light);
  background:linear-gradient(90deg,rgb(var(--gold-rgb) / .22),var(--bg-panel));
}
.pchars a{text-decoration:none;}
.pchars .bild{
  width:100%;aspect-ratio:167/184;display:block;overflow:hidden;
  box-shadow:inset 0 0 0 1px var(--gold-deep);
}
.pchars .bild img{width:100%;height:100%;object-fit:cover;display:block;}
.pleer{color:var(--text-faint);font-style:italic;}

/* Die Rasse unter dem Namen war noch immer zu dunkel */
.pkarte .prolle{color:var(--gold-light);}

/* ---- Reiterleiste mit Symbolen ---------------------------------------
   Die Beschriftungen stehen im Template; die Symbole setzt das Design
   davor, damit die Reihenfolge der Reiter im Template frei bleibt. */
.preiter label::before{
  font-family:"Font Awesome 6 Sharp";font-weight:100;
  font-size:1rem;width:19px;text-align:center;flex:none;
  color:var(--gold-soft);transition:color .16s ease;
}
.preiter label:nth-of-type(1)::before{content:"\f007";}  /* Allgemein  */
.preiter label:nth-of-type(2)::before{content:"\f0c0";}  /* Familie    */
.preiter label:nth-of-type(3)::before{content:"\f004";}  /* Relations  */
.preiter label:nth-of-type(4)::before{content:"\f002";}  /* Gesuche    */
.preiter label:nth-of-type(5)::before{content:"\f091";}  /* Awards     */
.preiter label:nth-of-type(6)::before{content:"\f073";}  /* Tracker    */
.preiter label:nth-of-type(7)::before{content:"\f10d";}  /* Zitate     */
.preiter label:nth-of-type(8)::before{content:"\f086";}  /* Klatsch    */
.preiter label:nth-of-type(9)::before{content:"\f2c2";}  /* Zweitcharas */
.preiter label:hover::before{color:var(--gold-light);}

/* Lange Reiter bekommen einen eigenen Rollbalken, damit die Seite nicht
   ins Endlose waechst - der Tracker sammelt jede beendete Szene. */
.profil input[name="ptab"]:nth-of-type(6):checked ~ .pinhalt section:nth-of-type(6),
.profil input[name="ptab"]:nth-of-type(8):checked ~ .pinhalt section:nth-of-type(8){
  max-height:560px;overflow-y:auto;padding-right:8px;
}

/* Die Zweitcharaktere zeigen den Avatar, nicht das Charakterbild */
.pchars{grid-template-columns:repeat(auto-fill,minmax(124px,1fr));gap:12px;}
.pchars .bild{aspect-ratio:1 / 1;}
.pchars .g{font-size:.6rem;}

		

/* Awards im Profil: lange Award-Listen in eine Scrollbox; die Kopfzeile "Awards von …" bleibt sichtbar */
tbody[id^="ougcAwardsProfileTable"] {
	display: block;
	max-height: 360px;
	overflow-y: auto;
}
tbody[id^="ougcAwardsProfileTable"] > tr {
	display: table;
	width: 100%;
	table-layout: fixed;
}