/* ============================
   GESUCHSSTECKBRIEF - MODULE
   ============================ */

/* GRUPPENFARBEN + SYMBOLE
   ======================= */


.pfm-group-order   { --group-color:var(--order);      --group-symbol:"✧"; }
.pfm-group-death   { --group-color:var(--deatheater);--group-symbol:"⛥"; }
.pfm-group-neworder{ --group-color:var(--neworder);   --group-symbol:"✶"; }
.pfm-group-magic   { --group-color:var(--magic);      --group-symbol:"⨺"; }
.pfm-group-muggle  { --group-color:var(--muggle);     --group-symbol:"△"; }
.pfm-group-beings  { --group-color:var(--beings);     --group-symbol:"☾"; }
.pfm-group-bewerber{ --group-color:var(--bewerber);   --group-symbol:"◎"; }

/* Wenn Gruppenklasse gesetzt ist, Akzent auf Gruppenfarbe umbiegen */
.pfm-card[class*="pfm-group-"],
.pfm-wanted-item[class*="pfm-group-"]{
  --pfm-accent: var(--group-color);
}

/* Gruppensymbol im Kopf */
.pfm-card[class*="pfm-group-"] .pfm-head{
  position:relative;
  padding-left:28px;
}

.pfm-card[class*="pfm-group-"] .pfm-head::before{
  content: var(--group-symbol, "⨺");
  position:absolute;
  left:0;
  top:50%;
  transform:translateY(-50%);
  width:20px;
  height:20px;
  display:grid;
  place-items:center;
  background: var(--group-color, var(--pfm-accent));
  box-shadow:0 0 0 2px var(--tbl-main-tr);
  font-size:11px;
  line-height:1;
  color: var(--tbl-main);
}

/* Icons global – keine currentColor nötig */
.pfm-ico svg{
  width:100%;
  height:100%;
  display:block;
  fill: var(--pfm-accent);
  stroke: var(--pfm-accent);
}

.pfm-card[class*="pfm-group-"] .pfm-ico{
  visibility:hidden;
}

/* 1) Suchender Charakter
   ---------------------- */

.pfm-card.pfm-search-owner{
  position: relative;
  background:
    linear-gradient(135deg,
      color-mix(in srgb, var(--pfm-accent) 12%, rgba(0,0,0,0) 88%),
      var(--tbl-main-tr)
    );
  border: 1px solid var(--hairline);
  box-shadow: 0 0 0 1px rgba(0,0,0,.12);
}

.pfm-card.pfm-search-owner::before{
  content:"Suchende Figur";
  position:absolute;
  right:10px;
  top:10px;
  padding:.05em .5em;
  font-size: var(--txtxsmall);
  text-transform:uppercase;
  letter-spacing:.12em;
  border:1px solid rgba(255,255,255,.15);
  background: color-mix(in srgb, var(--pfm-accent) 35%, rgba(0,0,0,.7) 65%);
  color:#fff;
  opacity:.95;
  pointer-events:none;
}

.pfm-search-owner .pfm-portrait{
  border-color: color-mix(in srgb, var(--pfm-accent) 65%, var(--tbl-main-tr2) 35%);
}

.pfm-search-owner .pfm-portrait::after{
  opacity: 1;
}

.pfm-search-owner .pfm-label{
  letter-spacing:.18em;
}

/* Meta-Chips Suchender */
.pfm-search-meta{
  margin:.4em 0 .2em;
  padding:0;
  list-style:none;
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}

.pfm-search-meta li{
  position:relative;
  padding:.15em .7em;
  border:1px solid var(--hairline);
  background: var(--tbl-main-tr2);
  color: var(--akzent-hell);
  font-size: var(--txtxsmall);
  display:inline-flex;
  align-items:baseline;
  gap:4px;
}

.pfm-search-meta li::before{
  content:none;
}

.pfm-meta-label{
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.08em;
  font-size: var(--txtxsmall);
  opacity:.9;
}

.pfm-meta-value{
  font-size: var(--txtxsmall);
}

/* 2) Gesuchte Charaktere (Liste)
   ------------------------------ */

.pfm-card.pfm-wanted-list{
  position: relative;
}

.pfm-card.pfm-wanted-list::before{
  content:"Localis Revelio!";
  position:absolute;
  right:10px;
  top:10px;
  padding:.05em .5em;
  font-size: var(--txtxsmall);
  text-transform:uppercase;
  letter-spacing:.12em;
  border:1px solid rgba(255,255,255,.15);
  background: color-mix(in srgb, var(--pfm-accent) 35%, rgba(0,0,0,.7) 65%);
  color:#fff;
  opacity:.95;
  pointer-events:none;
}

.pfm-wanted-grid{
  margin-top:10px;
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap:10px;
}

.pfm-wanted-grid .pfm-wanted-item{
  border:1px solid var(--hairline);
  background: var(--tbl-main-tr2);
  padding:10px 10px 9px;
  display:block;
  position:relative;
  overflow:hidden;
}

.pfm-wanted-grid:has(.pfm-wanted-item:first-child:last-child){
  grid-template-columns: minmax(0,1fr);
}

.pfm-wanted-grid:has(.pfm-wanted-item:nth-child(odd):last-child)
  .pfm-wanted-item:last-child {
  grid-column: 1 / -1;
}

@media (max-width: 1040px){
  .pfm-wanted-grid{
    grid-template-columns: 1fr;
  }

  .pfm-wanted-grid .pfm-wanted-item{
    grid-column: auto;
  }
}


/* Text + Portrait nebeneinander */
.pfm-wanted-item .pfm-wanted-inner{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:10px;
  align-items:flex-start;
}

.pfm-wanted-grid .pfm-wanted-item .pfm-head{
  border-left:none;
  padding-left:0;
  margin-bottom:4px;
}

.pfm-wanted-grid .pfm-wanted-item .pfm-label{
  font-size:var(--txtm);
  letter-spacing:.16em;
padding-left: 30px;
}

/* linke farbige Markierung */
.pfm-wanted-grid .pfm-wanted-item::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  inline-size:3px;
  background: color-mix(in srgb, var(--pfm-accent) 60%, rgba(0,0,0,0) 40%);
  opacity:.9;
}

/* Meta-Chips Gesuchte */
.pfm-wanted-meta{
  margin:.4em 0 .2em;
  padding:0;
  list-style:none;
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}

.pfm-wanted-meta li{
  position:relative;
  padding:.15em .7em;
  border:1px solid var(--hairline);
  background: var(--tbl-main-tr2);
  color: var(--akzent-hell);
  font-size: var(--txtxsmall);
  display:inline-flex;
  align-items:baseline;
  gap:4px;
}

.pfm-wanted-meta li::before{
  content:none;
}

.pfm-wanted-meta li strong{
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.08em;
  font-size: var(--txtxsmall);
  opacity:.9;
}

.pfm-wanted-item p{
  margin:.25em 0 0;
  font-size:var(--txtm);
}

/* mobile – Wanted-Spalten untereinander + Portrait unten */
@media (max-width:760px){
  .pfm-wanted-grid{
    grid-template-columns:1fr;
  }
  .pfm-wanted-item .pfm-wanted-inner{
    grid-template-columns:1fr;
  }
  .pfm-mini-portrait{
    justify-self:flex-start;
  }
}

/* 3) Einleitung und Outro
   ----------------------- */

.pfm-card.pfm-seek-intro,
.pfm-card.pfm-seek-outro{
  position:relative;
  overflow:hidden;
}

.pfm-card.pfm-seek-intro::before,
.pfm-card.pfm-seek-outro::before{
  content:"";
  position:absolute;
  left:-1px;
  right:-1px;
  top:-1px;
  height:4px;
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--pfm-accent) 80%, rgba(0,0,0,0) 20%),
    color-mix(in srgb, var(--pfm-accent) 40%, rgba(255,255,255,.1) 60%)
  );
  opacity:.95;
}

.pfm-card.pfm-seek-intro{
  background:
    radial-gradient(circle at top left,
      color-mix(in srgb, var(--pfm-accent) 18%, rgba(0,0,0,0) 82%) 0,
      transparent 55%
    ),
    var(--tbl-main-tr);
}

.pfm-card.pfm-seek-outro{
  border-style:solid;
  border-width:1px;
  border-color: color-mix(in srgb, var(--pfm-accent) 40%, var(--hairline) 60%);
}

.pfm-card.pfm-seek-intro p,
.pfm-card.pfm-seek-outro p{
  margin-top:.35em;
  line-height:1.5;
}

/* Einleitungstitel */
.pfm-ges-title{
  font-size: var(--txtxl);
  text-transform: uppercase;
  letter-spacing: .02em;
  color: var(--design);
  font-family: var(--akzenttext);
}

/* kleine generische Helfer */
.pfm-wanted-list .pfm-ico svg,
.pfm-seek-intro .pfm-ico svg,
.pfm-seek-outro .pfm-ico svg{
  transform:translateY(1px);
}

/* Mini-Portrait (rechts im Wanted) */
.pfm-mini-portrait{
  width:120px;
  height:120px;
  overflow:hidden;
  border:1px solid var(--hairline);
  background:var(--tbl-main-tr2);
filter: grayscale(100%);
}

.pfm-mini-portrait img{
  width:100%;
  height:100%;
  object-fit:cover;
}

/* Platzhalter für Status-Chips falls du später welche baust */
.pfm-chip--wanted-status{
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.08em;
}

.pfm-chip--frei{
  color: color-mix(in srgb, #9be29b 65%, #ffffff 35%);
  border-color: color-mix(in srgb, #72c972 45%, var(--hairline) 55%);
  background: color-mix(in srgb, #2a7a2a 18%, var(--tbl-main-tr2) 82%);
}

.pfm-chip--reserviert{
  color: color-mix(in srgb, #ffe59a 70%, #ffffff 30%);
  border-color: color-mix(in srgb, #f2c94c 45%, var(--hairline) 55%);
  background: color-mix(in srgb, #8a6a10 18%, var(--tbl-main-tr2) 82%);
}

.pfm-chip--vergeben{
  color: color-mix(in srgb, #ffb1b1 70%, #ffffff 30%);
  border-color: color-mix(in srgb, #ff6b6b 45%, var(--hairline) 55%);
  background: color-mix(in srgb, #7a1e1e 18%, var(--tbl-main-tr2) 82%);
}