/* =============================================================================
   portal/probuilder.css  -  Sportportal-Look: PRO BUILDER (probuilder)
   Wird NACH portal.css geladen.

   GELTUNGSBEREICH
     .pb-*   kommt nur aus js/probuilder.js
   Diesen Vorsatz gibt es sonst nirgends im Hub - deshalb braucht er kein
   body[data-bereich]. Alles, was FREMDE Klassen anfasst, steht unter einer
   eigenen Wurzel (.pb-seite ...).

   Marken, Bausteine (.p-*) und Icons: werkzeug/DESIGN.md. Kein !important,
   keine freien z-index-Zahlen, keine Farben ausserhalb der Palette, Bilder
   ueber window.isoCssUrl, Bewegung nur ueber transform/opacity (bei
   "Bewegung reduzieren" schaltet portal.css alles ab). Handy ab 360 px muss
   ohne waagerechtes Scrollen auskommen, Tippziele mindestens 40 px.

   AUFBAU
     1  Eigene Marken und das Zeichen-Sprite
     2  Seite, Kopf, klebende AP-Leiste, Reiter
     3  Reiter "Aufbau": Archetypen, Level, Koerper, Beschleunigungstyp
     4  Reiter "Attribute": Gruppen, Attributzeile, Sterne
     5  Reiter "Stile": Slots, Perks, Katalog, Meisterungen, Amps, Anlagen
     6  Reiter "Builds": Liste, Vergleich
     7  Fenster (Bild-Export)
     8  Handy
   ============================================================================= */

/* ---------------------------------------------------------------- 1 Marken */
.pb-seite{
  /* Eigene Marken heissen --pb-*, wie in DESIGN.md gefordert. Sie leiten
     sich aus der Palette ab - hier steht keine neue Farbe. */
  --pb-luecke: var(--p-5);
  --pb-karte: var(--p-flaeche);
  --pb-karte-tief: var(--p-flaeche-tief);
  --pb-gut: var(--zusage);
  --pb-schlecht: #F0708A;
  --pb-gold: var(--p-gold-hell);
  display:flex; flex-direction:column; gap:var(--pb-luecke); min-width:0;
}

/* Das eigene Sprite (public/icons_probuilder.svg). Die Strichstaerke steht
   bewusst NICHT in der Datei, sondern hier - so wiegen ein Zeichen aus
   icons.svg und eines von hier in derselben Zeile gleich schwer.
   Keine Regel auf ".pb-icon *" - sie wuerde die Innenteile treffen. */
.pb-icon{
  width:1.15em; height:1.15em; flex:none; display:inline-block; vertical-align:-.18em;
  fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round;
  pointer-events:none;
}
.pb-icon.klein{ width:14px; height:14px }
.pb-icon.gross{ width:24px; height:24px }
.pb-icon.riesig{ width:52px; height:52px; stroke-width:1.4 }

.pb-stapel{ display:flex; flex-direction:column; gap:var(--pb-luecke); min-width:0 }
.pb-zwei{ display:grid; gap:var(--pb-luecke); grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:start }

.pb-hilfe{
  margin:var(--p-2) 0 0; font-size:.82rem; line-height:1.5; color:var(--silber-matt); max-width:70ch;
}
.pb-feld-marke{
  font-family:var(--eng); font-weight:600; font-size:.66rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--silber-matt);
}
.pb-warnung{
  display:flex; align-items:flex-start; gap:8px; margin:var(--p-3) 0 0;
  padding:9px 12px; border-radius:var(--p-r-m);
  background:rgba(212,166,42,.10); border:1px solid rgba(212,166,42,.34);
  color:var(--silber); font-size:.84rem; line-height:1.5;
}
.pb-warnung .p-icon{ flex:none; margin-top:2px; color:var(--vielleicht) }
.pb-ok{
  display:flex; align-items:center; gap:8px; margin:0;
  font-family:var(--eng); font-weight:600; font-size:.74rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--rot);
}

/* -------------------------------------------------- 2 Kopf, Leiste, Reiter */
.pb-kopf{ display:flex; flex-wrap:wrap; align-items:flex-end; gap:var(--p-5) var(--p-6) }
.pb-kopf-haupt{ display:flex; align-items:center; gap:var(--p-4); min-width:0; flex:1 1 380px }
.pb-kopf-zeichen{
  flex:none; display:grid; place-items:center; width:84px; height:84px; border-radius:var(--p-r-l);
  color:var(--rot); background:rgba(47,160,94,0.06); border:1px solid rgba(47,160,94,0.3);
}
.pb-kopf-text{ min-width:0 }
.pb-kopf-dach{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:6px }
.pb-kopf-dach .p-eng{ font-size:.68rem; color:var(--rot) }
/* Der Datenstand ist ein Nebenhinweis und darf den Namen des Builds nicht
   ueberstrahlen: kleiner, ohne Versalien, ohne Sperrung. Sichtbar ist nur
   das Datum - der erklaerende Zusatz steht im Tipp (und ist ohnehin je
   Sprache getrennt, siehe standLang() in probuilder.js). */
.pb-kopf-dach .pb-stand{
  font-family:var(--text); font-weight:500; font-size:.72rem;
  letter-spacing:0; text-transform:none;
}
/* "Entwurf" ist ein ZUSTAND und kein Knopf - er stand frueher in der
   Knopfreihe und lud zum Tippen ein. Hier oben traegt er dieselbe flache
   Form wie der Datenstand daneben. */
.pb-marke-entwurf{
  font-family:var(--text); font-weight:500; font-size:.72rem;
  letter-spacing:0; text-transform:none; color:var(--silber-matt);
}
/* Der Datenstand ist ein ganzer Satz - als Chip mit einer Zeile waere er am
   Handy abgeschnitten. Er darf umbrechen. */
.pb-stand{ max-width:100%; height:auto; min-height:22px; padding:3px 9px;
  white-space:normal; text-align:left; line-height:1.35 }
.pb-kopf-titel{
  margin:0; font-family:var(--anzeige); font-weight:900; font-size:2.4rem; line-height:1;
  letter-spacing:-.02em; text-transform:uppercase; color:var(--weiss);
}
.pb-kopf-zeile{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  margin:8px 0 0; font-size:.88rem; color:var(--silber-matt);
}
.pb-kopf-werkzeug{ display:flex; align-items:center; gap:var(--p-2); flex-wrap:wrap; margin-left:auto }
/* Fremder Build: die Zeile sagt, wem er gehoert - und bietet den einen Weg
   an, der hier sinnvoll ist. */
.pb-nurlesen{
  flex:1 1 100%; display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:0;
  padding:10px 14px; border-radius:var(--p-r-m);
  background:rgba(201,162,39,.10); border:1px solid rgba(201,162,39,.32);
  font-size:.86rem; color:var(--silber);
}
.pb-nurlesen > .p-icon{ color:var(--p-gold-hell) }
.pb-nurlesen > span{ flex:1 1 200px; min-width:0 }
.pb-kopf-name{ max-width:220px }

/* Die klebende Leiste: Level, AP und Beschleunigungstyp bleiben beim
   Verteilen immer sichtbar. Klebt unter Kopfzeile + Unterleiste. */
.pb-kleb{
  position:sticky; top:var(--p-kleb-oben); z-index:var(--p-z-kleb);
  display:grid; gap:var(--p-3) var(--p-5);
  grid-template-columns:auto minmax(0,1fr) auto; align-items:center;
  padding:10px var(--p-5); border-radius:var(--p-r-l);
  background:var(--karbon-hoch); border:1px solid var(--p-rand-hell);
  box-shadow:var(--p-schatten-2);
}
.pb-kleb-teil{ display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; min-width:0 }
/* Die Marke steht auf der dokumentierten Mindestgroesse (DESIGN §2:
   "kleinste Schrift im Hub, nichts darunter") - .62rem waren 9,9 px. Die
   Leiste hat Platz genug: bei 1366 px bleibt der Balken ueber 800 px breit. */
.pb-kleb-marke{
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--eng); font-weight:600; font-size:var(--p-schrift-min); letter-spacing:.16em;
  text-transform:uppercase; color:var(--silber-matt);
}
.pb-kleb-marke .pb-icon{ color:var(--rot) }
.pb-kleb-teil > b{ font-family:var(--anzeige); font-weight:900; font-size:1.2rem; color:var(--weiss) }
.pb-kleb-gross{ font-size:1.7rem; line-height:1 }
.pb-kleb-gross.drueber{ color:var(--absage) }
.pb-kleb-teil > small{ font-family:var(--zahl); font-size:.72rem; color:var(--silber-matt) }
.pb-kleb-balken{ flex:1 1 120px; min-width:80px }
.pb-kleb.drueber{ border-color:var(--absage); box-shadow:0 0 0 1px rgba(224,69,94,.25),var(--p-schatten-2) }
.pb-kleb.drueber .p-balken i{ background:var(--absage) }
/* Im Minus sagt die Zahl allein nicht, dass sich so nichts speichern laesst.
   Die Zeile steht ueber die ganze Breite unter den drei Teilen - und nur
   dann, wenn es so weit ist (das Skript setzt hidden). */
.pb-kleb-drueber{
  grid-column:1 / -1; margin:0; padding-top:8px; border-top:1px solid rgba(224,69,94,.3);
  font-family:var(--text); font-weight:600; font-size:.82rem; line-height:1.4; color:#F0708A;
}
.pb-kleb-drueber[hidden]{ display:none }
/* Der Speichern-Knopf sagt dasselbe, bevor jemand ihn drueckt. */
.pb-kopf .p-knopf.pb-sackgasse{ border-color:rgba(224,69,94,.5) }
.pb-kleb-typ > b{ font-family:var(--eng); font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  font-size:.92rem; color:var(--rot-hell) }

.pb-reiter > button{ gap:8px }
.pb-reiter .pb-icon{ width:17px; height:17px }

/* ------------------------------------------------------------- 3 Aufbau */
.pb-filter{ margin-bottom:var(--p-4) }
.pb-filter .pb-icon{ width:15px; height:15px }

.pb-arch-raster{
  display:grid; gap:var(--p-3);
  grid-template-columns:repeat(auto-fill,minmax(min(228px,100%),1fr));
}
.pb-arch{
  position:relative; display:grid; gap:4px 12px; align-items:center; text-align:left;
  grid-template-columns:auto minmax(0,1fr) auto;
  padding:12px 14px; min-height:76px; border-radius:var(--p-r-l); cursor:pointer;
  background:var(--pb-karte); border:1px solid var(--p-rand-hell); color:var(--silber);
  transition:border-color var(--p-t),background var(--p-t),transform var(--p-t-schnell);
}
.pb-arch:hover{ border-color:var(--p-rand-stark); background:var(--karbon-hoch); transform:translateY(-1px) }
.pb-arch:disabled{ opacity:.5; cursor:not-allowed; transform:none }
.pb-arch-zeichen{ display:grid; place-items:center; width:38px; height:38px; border-radius:var(--p-r-m);
  color:var(--silber-matt); background:var(--pb-karte-tief); border:1px solid var(--p-rand) }
.pb-arch-zeichen .pb-icon{ width:22px; height:22px }
.pb-arch-text{ min-width:0; display:flex; flex-direction:column; gap:2px }
/* "Sweeper Keeper" darf umbrechen statt "Sweeper K…" zu heissen - die
   Kachelhoehe richtet sich ohnehin nach der hoechsten der Reihe. */
.pb-arch-text b{ font-family:var(--anzeige); font-weight:800; font-size:1rem; line-height:1.15;
  color:var(--weiss); overflow-wrap:anywhere }
/* --p-schrift-min ist die kleinste Schrift im Hub (DESIGN §2) - .62rem
   waeren 9,9 px und damit darunter. */
.pb-arch-text small{ font-family:var(--eng); font-weight:600; font-size:var(--p-schrift-min); letter-spacing:.14em;
  text-transform:uppercase; color:var(--silber-matt) }
.pb-arch-sig{
  grid-column:1 / -1; display:flex; align-items:center; gap:6px; min-width:0;
  font-size:.74rem; color:var(--silber-matt);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.pb-arch-sig .pb-icon{ color:var(--p-gold-hell) }
.pb-arch.an{ border-color:var(--rot); background:rgba(47,160,94,0.06); box-shadow:var(--p-glut) }
.pb-arch.an .pb-arch-zeichen{ color:var(--rot); border-color:rgba(47,160,94,0.45);
  background:rgba(47,160,94,0.12) }
.pb-arch-fuss{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:var(--p-4);
  padding-top:var(--p-3); border-top:1px solid var(--p-rand) }

.pb-level-zeile{ display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; margin-bottom:6px }
.pb-level-zahl{ font-family:var(--anzeige); font-weight:900; font-size:2.6rem; line-height:1; color:var(--weiss) }
.pb-level-von{ font-family:var(--zahl); font-size:.9rem; color:var(--silber-matt) }
.pb-level-zeile .p-knopf{ margin-left:auto }

/* Regler: 40 px hoch, damit das Tippziel am Handy passt. */
.pb-regler{
  width:100%; height:40px; margin:0; padding:0; border:0; background:none;
  accent-color:var(--rot); cursor:pointer;
}
.pb-regler:focus-visible{ outline:2px solid var(--rot-hell); outline-offset:2px; border-radius:var(--p-r-s) }
.pb-regler:disabled{ opacity:.5; cursor:not-allowed }

.pb-ap-tafel{
  display:grid; gap:1px; grid-template-columns:repeat(auto-fit,minmax(110px,1fr));
  margin-top:var(--p-3); border-radius:var(--p-r-m); overflow:hidden;
  background:var(--p-rand); border:1px solid var(--p-rand);
}
.pb-ap-feld{ display:flex; flex-direction:column; gap:4px; padding:10px 12px; background:var(--pb-karte) }
.pb-ap-feld span{ font-family:var(--eng); font-weight:600; font-size:var(--p-schrift-min); letter-spacing:.16em;
  text-transform:uppercase; color:var(--silber-matt) }
.pb-ap-feld b{ font-family:var(--anzeige); font-weight:900; font-size:1.3rem; color:var(--weiss) }
.pb-ap-feld.klein b{ font-size:1rem; color:var(--silber) }

.pb-frei{ display:flex; flex-wrap:wrap; gap:8px; margin-top:var(--p-4) }
.pb-frei-chip{
  display:grid; gap:2px 8px; align-items:center; grid-template-columns:auto minmax(0,1fr) auto;
  padding:7px 10px; min-width:132px; border-radius:var(--p-r-m);
  background:var(--pb-karte-tief); border:1px solid var(--p-rand);
}
.pb-frei-chip b{ font-family:var(--eng); font-weight:600; font-size:.66rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--silber); overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.pb-frei-chip small{ grid-column:1 / -1; font-size:.68rem; color:var(--silber-matt); line-height:1.35 }
.pb-frei-chip .p-icon{ color:var(--silber-matt) }
.pb-frei-chip.frei{ border-color:rgba(47,160,94,0.3); background:rgba(47,160,94,0.06) }
.pb-frei-chip.frei .p-icon{ color:var(--rot) }
.pb-frei-chip.frei b{ color:var(--weiss) }
.pb-frei-chip.nie{ border-color:rgba(212,166,42,.30) }
.pb-frei-chip.nie .p-icon{ color:var(--vielleicht) }
.pb-frei-chip .pb-icon{ color:inherit }

.pb-modus{ margin-top:var(--p-5); padding-top:var(--p-4); border-top:1px solid var(--p-rand);
  display:flex; flex-direction:column; gap:8px; align-items:flex-start }

.pb-geschlecht{ display:flex; flex-direction:column; gap:8px; align-items:flex-start;
  margin-bottom:var(--p-4) }
.pb-mass{ margin-bottom:var(--p-4) }
.pb-mass-kopf{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; cursor:pointer }
.pb-mass-kopf b{ font-family:var(--zahl); font-size:1.05rem; color:var(--weiss) }
.pb-mass-fuss{ display:flex; justify-content:space-between; gap:8px }
.pb-mass-fuss small{ font-family:var(--zahl); font-size:var(--p-schrift-min); color:var(--silber-matt) }

.pb-wirkung{ display:grid; gap:6px; grid-template-columns:repeat(auto-fill,minmax(min(150px,100%),1fr)) }
/* Der Satz "Standardmasse - kein Attribut veraendert" ist keine Kachel:
   er laeuft ueber alle Spalten, sonst bricht er in einer 150-px-Saeule um. */
.pb-wirkung > p{ grid-column:1 / -1; margin:0; font-size:.84rem; color:var(--silber-matt) }
.pb-wirkung-zeile{
  display:flex; align-items:center; justify-content:space-between; gap:8px; min-width:0;
  padding:6px 10px; border-radius:var(--p-r-s);
  background:var(--pb-karte-tief); border:1px solid var(--p-rand); font-size:.8rem; color:var(--silber);
}
.pb-wirkung-zeile b{ font-family:var(--zahl); font-weight:600 }
.pb-wirkung-zeile.gut{ border-color:rgba(51,192,106,.34) }
.pb-wirkung-zeile.gut b{ color:var(--pb-gut) }
.pb-wirkung-zeile.schlecht{ border-color:rgba(224,69,94,.30) }
.pb-wirkung-zeile.schlecht b{ color:var(--pb-schlecht) }
.pb-wirkung-zeile.null b{ color:var(--silber-matt) }

.pb-typ-platte{ position:relative; overflow:hidden }
.pb-typ-haupt{ display:flex; align-items:baseline; gap:var(--p-4); flex-wrap:wrap }
.pb-typ-name{
  font-family:var(--anzeige); font-weight:900; font-size:2rem; line-height:1;
  letter-spacing:-.01em; text-transform:uppercase; color:var(--rot);
}
.pb-typ-platte[data-typ="CONTROLLED"] .pb-typ-name{ color:var(--silber) }
.pb-typ-platte[data-typ="LENGTHY"] .pb-typ-name{ color:var(--p-gold-hell) }
.pb-typ-text{ margin:0; flex:1 1 260px; font-size:.9rem; color:var(--silber-matt) }
.pb-typ-regeln{ display:grid; gap:var(--p-3); grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));
  margin-top:var(--p-4) }
.pb-typ-block{ padding:12px 14px; border-radius:var(--p-r-m); background:var(--pb-karte-tief);
  border:1px solid var(--p-rand) }
.pb-typ-block > b{ display:block; margin-bottom:8px; font-family:var(--eng); font-weight:600;
  font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--silber-matt) }
.pb-typ-block.an{ border-color:rgba(47,160,94,0.45); background:rgba(47,160,94,.06) }
.pb-typ-block.an > b{ color:var(--rot) }
.pb-typ-zeile{ display:grid; gap:8px; grid-template-columns:auto minmax(0,1fr) auto auto;
  align-items:center; padding:4px 0; font-size:.82rem; color:var(--silber) }
.pb-typ-zeile em{ font-style:normal; font-weight:600; color:var(--weiss) }
.pb-typ-zeile small{ color:var(--silber-matt) }
.pb-typ-zeile.ja .p-icon{ color:var(--pb-gut) }
.pb-typ-zeile.nein .p-icon{ color:var(--pb-schlecht) }

.pb-meldungen{ border-color:rgba(212,166,42,.26) }
.pb-meldung-liste{ margin:0 0 var(--p-3); padding-left:1.2em; font-size:.86rem; line-height:1.55;
  color:var(--silber) }
.pb-meldung-liste.fehler{ color:var(--pb-schlecht) }

/* ----------------------------------------------------------- 4 Attribute */
.pb-attr-kopfzeile{ display:flex; align-items:center; gap:var(--p-3); flex-wrap:wrap }
.pb-attr-kopfzeile .pb-hilfe{ margin:0; flex:1 1 280px }
/* Der Weg in den Pflegebereich ist ein Knopf und kein Link (er setzt vorher
   einen Merker) - er soll aber aussehen wie jedes andere "Weiter" im Hub. */
.pb-attr-kopfzeile button.p-etikett-weiter{
  border:0; background:none; padding:0; cursor:pointer; font:inherit;
  font-family:var(--text); font-weight:500; font-size:.8rem; color:var(--rot);
}
.pb-attr-kopfzeile button.p-etikett-weiter:focus-visible{ outline:2px solid var(--rot); outline-offset:3px }
.pb-gruppen{ display:flex; flex-direction:column; gap:var(--p-4) }

.pb-gruppe{ padding:0; overflow:hidden }
.pb-gruppe-kopf{
  display:grid; gap:12px; align-items:center; grid-template-columns:auto minmax(0,1fr) auto auto auto;
  padding:14px var(--p-5); min-height:56px; cursor:pointer; list-style:none;
  background:var(--p-flaeche); border-bottom:1px solid var(--p-rand);
}
.pb-gruppe-kopf::-webkit-details-marker{ display:none }
.pb-gruppe-kopf:hover{ background:var(--karbon-hoch) }
.pb-gruppe-kopf > b{ font-family:var(--anzeige); font-weight:800; font-size:1.02rem; color:var(--weiss);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.pb-gruppe-kopf > small{ font-family:var(--zahl); font-size:.72rem; color:var(--silber-matt) }
.pb-gruppe-kopf > .p-icon{ color:var(--silber-matt); transition:transform var(--p-t) }
.pb-gruppe[open] > .pb-gruppe-kopf > .p-icon{ transform:rotate(180deg) }
.pb-gruppe-zeichen{ display:grid; place-items:center; width:34px; height:34px; border-radius:var(--p-r-s);
  color:var(--rot); background:rgba(47,160,94,0.06); border:1px solid rgba(47,160,94,0.2) }
.pb-gruppe-zeichen .pb-icon{ width:19px; height:19px }
.pb-gruppe-schnitt{ display:inline-flex; align-items:baseline; gap:6px;
  font-family:var(--eng); font-weight:600; font-size:.66rem; letter-spacing:.12em; color:var(--silber-matt) }
.pb-gruppe-schnitt em{ font-style:normal; font-family:var(--anzeige); font-weight:900; font-size:1.4rem;
  letter-spacing:0; color:var(--weiss) }

.pb-attr-liste{
  display:grid; gap:2px; padding:var(--p-3);
  grid-template-columns:repeat(auto-fill,minmax(min(330px,100%),1fr));
}
.pb-attr{
  display:grid; gap:4px 12px; align-items:center;
  grid-template-columns:minmax(0,1fr) auto;
  padding:9px 10px; border-radius:var(--p-r-m); border:1px solid transparent;
  transition:background var(--p-t),border-color var(--p-t);
}
.pb-attr:hover{ background:rgba(255,255,255,.022); border-color:var(--p-rand) }
.pb-attr.gesteigert{ background:rgba(47,160,94,0.06); border-color:rgba(47,160,94,.20) }
.pb-attr.unbekannt{ background:rgba(212,166,42,.05); border-color:rgba(212,166,42,.22) }
.pb-attr-name{ display:flex; align-items:baseline; gap:7px; min-width:0 }
/* Der eigene Name weicht NIE - "Faire Zweikae..." waere schlimmer als ein
   fehlender Zweitname. */
.pb-attr-name b{ flex:0 0 auto; max-width:100%; font-size:.92rem; font-weight:600; color:var(--weiss) }
/* Der zweite Name (andere Sprache) gibt zuerst nach - "Faire Zweikae..."
   waere schlimmer als "Standing Ta...". */
.pb-attr-name small{ flex:0 3 auto; min-width:0; font-size:.7rem; color:var(--silber-matt) }
.pb-attr-stern{ display:inline-flex; flex:none; color:var(--p-gold-hell) }
.pb-attr-wert{ display:flex; align-items:baseline; gap:6px; justify-self:end; cursor:help }
.pb-attr-wert b{ font-family:var(--anzeige); font-weight:900; font-size:1.35rem; line-height:1; color:var(--weiss) }
.pb-attr-bonus{ font-family:var(--zahl); font-size:.72rem; font-weight:500 }
.pb-attr-bonus.gut{ color:var(--pb-gut) }
.pb-attr-bonus.schlecht{ color:var(--pb-schlecht) }
.pb-attr-bonus.weg{ display:none }

/* Der Balken erzaehlt die Herkunft: matt = Startwert des Archetyps (gratis),
   gruen = mit AP gekauft, gold = Boni ohne AP. */
.pb-balken{
  grid-column:1; display:flex; height:8px; min-width:0; border-radius:4px; overflow:hidden;
  background:var(--pb-karte-tief); border:1px solid var(--p-rand);
}
.pb-balken > span{ display:block; height:100%; transition:width var(--p-t) var(--p-kurve) }
.pb-balken > span:first-child{ background:rgba(198,206,214,.30) }
.pb-balken > span:nth-child(2){ background:linear-gradient(90deg,var(--rot-tief),var(--rot)) }
.pb-balken > span:last-child{ background:var(--gold) }

.pb-attr-steuer{ grid-column:2; display:flex; align-items:center; gap:6px; justify-self:end }
.pb-attr-preis{
  min-width:56px; text-align:center; font-family:var(--zahl); font-size:.76rem; color:var(--silber);
}
.pb-attr-preis.unbekannt{ color:var(--p-gold-hell); font-size:.68rem; line-height:1.2 }
.pb-schritt{ width:40px; min-height:40px }
.pb-attr-fuss{ grid-column:1 / -1; display:flex; flex-direction:column; gap:3px }
.pb-attr-fuss small{ font-size:var(--p-schrift-min); color:var(--silber-matt) }
.pb-unbekannt-text{ display:flex; align-items:flex-start; gap:6px; color:var(--p-gold-hell);
  line-height:1.4; font-size:.7rem }
.pb-unbekannt-text .p-icon{ flex:none; margin-top:2px }

.pb-sterne-liste{ display:grid; gap:var(--p-4); padding:var(--p-4);
  grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr)) }
.pb-stern-reihe{ display:flex; flex-direction:column; gap:8px; padding:12px 14px;
  border-radius:var(--p-r-m); background:var(--pb-karte-tief); border:1px solid var(--p-rand) }
.pb-stern-kopf{ display:flex; align-items:baseline; gap:8px; flex-wrap:wrap }
.pb-stern-kopf b{ font-family:var(--anzeige); font-weight:800; font-size:.98rem; color:var(--weiss) }
.pb-stern-kopf small{ margin-left:auto; font-family:var(--zahl); font-size:.72rem; color:var(--silber-matt) }
.pb-stern-kopf .pb-icon{ color:var(--rot) }
.pb-stern-knoepfe{ display:flex; gap:4px }
.pb-stern{
  width:42px; height:42px; display:grid; place-items:center; border-radius:var(--p-r-s);
  color:var(--p-rand-stark); background:none; border:1px solid transparent; cursor:pointer;
  transition:color var(--p-t),transform var(--p-t-schnell);
}
.pb-stern .p-icon{ width:24px; height:24px }
.pb-stern:hover{ color:var(--silber) }
.pb-stern.an{ color:var(--rot) }
.pb-stern.an .p-icon{ fill:currentColor }
.pb-stern.an.gratis{ color:var(--p-gold-hell) }
.pb-stern:disabled{ cursor:default }
.pb-stern:disabled.an{ opacity:.8 }
.pb-stern:focus-visible{ outline:2px solid var(--rot-hell); outline-offset:2px }
.pb-sterne-platte .pb-hilfe{ padding:0 var(--p-4) var(--p-4) }

/* --------------------------------------------------------------- 5 Stile */
.pb-slots{ display:grid; gap:var(--p-3); grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr)) }
.pb-slot{
  position:relative; display:flex; flex-direction:column; align-items:center; gap:6px; text-align:center;
  padding:var(--p-5) var(--p-4) var(--p-4); min-height:168px; border-radius:var(--p-r-l);
  background:var(--pb-karte-tief); border:1px dashed var(--p-rand-stark);
}
.pb-slot-nr{ position:absolute; left:10px; top:8px; font-family:var(--eng); font-weight:600;
  font-size:var(--p-schrift-min); letter-spacing:.14em; text-transform:uppercase; color:var(--silber-matt) }
.pb-slot > b{ font-family:var(--anzeige); font-weight:800; font-size:1rem; color:var(--weiss); line-height:1.2 }
.pb-slot > small{ font-size:.74rem; color:var(--silber-matt); line-height:1.4 }
.pb-slot .p-icon,.pb-slot .pb-icon{ color:var(--silber-matt); margin-top:6px }
.pb-slot.voll{ border-style:solid; border-color:rgba(47,160,94,0.3); background:rgba(47,160,94,.06) }
.pb-slot.voll .pb-icon{ color:var(--rot) }
.pb-slot.voll.warnt{ border-color:rgba(224,69,94,.36); background:rgba(224,69,94,.05) }
.pb-slot.plus{ border-color:rgba(201,162,39,.38) }
.pb-slot.plus.voll{ background:rgba(201,162,39,.08) }
.pb-slot.plus .pb-icon{ color:var(--p-gold-hell) }
.pb-slot.zu{ opacity:.72 }
.pb-slot .p-knopf{ margin-top:auto }

.pb-perks{ display:grid; gap:var(--p-3); grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr)) }
.pb-perk{
  display:grid; gap:12px; align-items:start; grid-template-columns:auto minmax(0,1fr);
  padding:14px; border-radius:var(--p-r-l); background:var(--pb-karte-tief); border:1px solid var(--p-rand);
}
.pb-perk-zeichen{ display:grid; place-items:center; width:42px; height:42px; border-radius:var(--p-r-m);
  color:var(--silber-matt); background:var(--pb-karte); border:1px solid var(--p-rand) }
.pb-perk-text{ min-width:0; display:flex; flex-direction:column; gap:5px }
.pb-perk-text b{ font-family:var(--anzeige); font-weight:800; font-size:1rem; color:var(--weiss) }
.pb-perk-text small{ font-size:.82rem; line-height:1.5; color:var(--silber-matt) }
.pb-perk-stand{ font-family:var(--eng); font-weight:600; font-size:.64rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--silber-matt) }
.pb-perk .p-knopf{ grid-column:1 / -1; justify-self:start }
.pb-perk.an{ border-color:rgba(47,160,94,0.45); background:rgba(47,160,94,.06) }
.pb-perk.an .pb-perk-zeichen{ color:var(--rot); border-color:rgba(47,160,94,0.3) }
.pb-perk.an .pb-perk-stand{ color:var(--rot) }
.pb-perk.zu{ opacity:.7 }

.pb-ps-raster{ display:grid; gap:var(--p-3); grid-template-columns:repeat(auto-fill,minmax(min(280px,100%),1fr)) }
.pb-katalog > .pb-filter{ margin:var(--p-4) var(--p-5) 0 }
.pb-katalog > .pb-ps-raster{ padding:var(--p-4) var(--p-5) var(--p-5) }
.pb-ps{
  display:flex; flex-direction:column; gap:10px;
  padding:14px; border-radius:var(--p-r-l); background:var(--pb-karte-tief); border:1px solid var(--p-rand);
  transition:border-color var(--p-t),background var(--p-t);
}
.pb-ps:hover{ border-color:var(--p-rand-stark) }
.pb-ps.an{ border-color:rgba(47,160,94,0.45); background:rgba(47,160,94,.06) }
.pb-ps-kopf{ display:flex; align-items:center; gap:10px; min-width:0 }
.pb-ps-kopf .pb-icon{ flex:none; color:var(--silber-matt) }
.pb-ps.erfuellt .pb-ps-kopf .pb-icon{ color:var(--rot) }
.pb-ps-namen{ min-width:0; display:flex; flex-direction:column; gap:1px }
.pb-ps-namen b{ font-family:var(--anzeige); font-weight:800; font-size:.98rem; color:var(--weiss);
  line-height:1.2 }
.pb-ps-namen small{ font-size:.7rem; color:var(--silber-matt) }
.pb-ps-text{ margin:0; font-size:.82rem; line-height:1.5; color:var(--silber-matt) }
.pb-vor-liste{ display:flex; flex-direction:column; gap:4px; margin-top:auto }
.pb-vor-marke{ font-family:var(--eng); font-weight:600; font-size:var(--p-schrift-min);
  letter-spacing:.16em; text-transform:uppercase; color:var(--silber-matt) }
/* Alles erfuellt: die Ueberschrift sagt es, statt dass man drei Zeilen
   Ist/Soll nachrechnen muss. */
.pb-vor-marke.ja{ color:var(--zusage) }
.pb-vor{
  display:grid; gap:8px; grid-template-columns:minmax(0,1fr) auto auto; align-items:baseline;
  padding:4px 8px; border-radius:var(--p-r-xs); background:var(--pb-karte); font-size:.78rem;
  color:var(--silber);
}
.pb-vor b{ font-family:var(--zahl); font-weight:600 }
.pb-vor small{ font-family:var(--zahl); color:var(--silber-matt); font-size:.7rem }
.pb-vor.ja b{ color:var(--pb-gut) }
.pb-vor.nein b{ color:var(--pb-schlecht) }
.pb-ps-fuss{ display:flex; align-items:center; gap:8px; flex-wrap:wrap }
.pb-ps-warum{ flex:1 1 100%; font-size:.72rem; line-height:1.4; color:var(--silber-matt) }
/* "ist 65 / noetig 75 · + 80" - ohne Legende ein Zahlenraetsel, und zwar an
   der wichtigsten Entscheidungsstelle der ganzen Seite. Der Tipp allein
   reicht nicht: am Handy ruft ihn niemand auf. */
.pb-vor-legende{
  margin-top:2px; font-family:var(--text); font-size:var(--p-schrift-min);
  line-height:1.4; color:var(--silber-matt);
}

/* ------------------------------------------- Stufen-Segmente (0 / 1 / 2 / 3)
   Die NULL-Stufe wird neutral gezeichnet, nicht in Hausgruen. Im
   Ausgangszustand ist bei 13 Meisterungen und 34 Anlagen ueberall die erste
   Stufe aktiv - 47 leuchtende Pillen lasen sich wie "alles aktiv, alles
   gut", gemeint war "nichts eingetragen". Die Markenfarbe betonte damit
   genau den leeren Zustand, und die spaeter wirklich gewaehlten Stufen
   fielen im selben Gruen nicht mehr auf. Gruen bleibt den Stufen 1-3 bzw.
   Level 10/30 vorbehalten. */
.pb-stufen > button.pb-stufe-keine.an,
.pb-stufen > button.pb-stufe-keine[aria-pressed="true"]{
  /* eine Stufe heller als die Schiene darunter (--p-flaeche-tief), damit
     "gewaehlt" trotzdem zu sehen ist - nur eben nicht in der Markenfarbe */
  background:var(--karbon-hoch); color:var(--weiss);
  box-shadow:inset 0 0 0 1px var(--p-rand-stark);
}
/* Was nicht ins Budget passt, ist sichtbar aus - mit Grund im title=. */
.pb-stufen > button:disabled{ opacity:.38; cursor:not-allowed }
.pb-stufen > button:disabled:hover{ color:var(--silber-matt) }

.pb-klapp{ padding:0; overflow:hidden }
.pb-klapp-kopf{
  display:flex; align-items:center; gap:12px; padding:14px var(--p-5); min-height:56px;
  cursor:pointer; list-style:none; background:var(--p-flaeche); border-bottom:1px solid var(--p-rand);
}
/* Der Titel weicht, nicht der Pfeil: sonst rutscht das Zeichen zum Aufklappen
   in eine zweite Zeile. */
.pb-klapp-kopf > b{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.pb-klapp-kopf > .p-chip{ flex:0 1 auto; min-width:0; overflow:hidden }
.pb-klapp-kopf::-webkit-details-marker{ display:none }
.pb-klapp-kopf:hover{ background:var(--karbon-hoch) }
.pb-klapp-kopf > b{ font-family:var(--anzeige); font-weight:800; font-size:1.02rem; color:var(--weiss) }
.pb-klapp-kopf > .pb-icon,.pb-klapp-kopf > .p-icon:first-child{ color:var(--rot) }
.pb-klapp-kopf > .p-icon:last-child{ margin-left:auto; color:var(--silber-matt); transition:transform var(--p-t) }
.pb-klapp[open] > .pb-klapp-kopf > .p-icon:last-child{ transform:rotate(180deg) }
.pb-klapp > .pb-hilfe,.pb-klapp > .pb-warnung,.pb-klapp > .p-balken{ margin-left:var(--p-5);
  margin-right:var(--p-5) }
.pb-klapp > .pb-hilfe:first-of-type{ margin-top:var(--p-4) }
.pb-klapp > .p-balken{ margin-top:var(--p-3) }

.pb-mastery-liste{ display:grid; gap:8px; padding:var(--p-4);
  grid-template-columns:repeat(auto-fill,minmax(min(330px,100%),1fr)) }
.pb-mastery{
  display:grid; gap:10px; align-items:center; grid-template-columns:auto minmax(0,1fr);
  padding:10px 12px; border-radius:var(--p-r-m); background:var(--pb-karte-tief); border:1px solid var(--p-rand);
}
.pb-mastery.an{ border-color:rgba(47,160,94,0.3); background:rgba(47,160,94,0.06) }
.pb-mastery-zeichen{ display:grid; place-items:center; width:34px; height:34px; border-radius:var(--p-r-s);
  color:var(--silber-matt); background:var(--pb-karte); border:1px solid var(--p-rand) }
.pb-mastery.an .pb-mastery-zeichen{ color:var(--rot) }
.pb-mastery-text{ min-width:0; display:flex; flex-direction:column; gap:1px }
.pb-mastery-text b{ font-size:.9rem; font-weight:600; color:var(--weiss) }
.pb-mastery-text small{ font-size:.72rem; color:var(--silber-matt) }
.pb-mastery .p-segment{ grid-column:1 / -1 }

.pb-amp-liste{ display:grid; gap:10px; padding:var(--p-4) }
.pb-amp{
  display:grid; gap:10px; align-items:end; grid-template-columns:auto minmax(0,1fr) 104px;
  padding:12px; border-radius:var(--p-r-m); background:var(--pb-karte-tief); border:1px solid var(--p-rand);
}
.pb-amp.voll{ border-color:rgba(47,160,94,.30) }
.pb-amp-zeichen{ display:grid; place-items:center; width:40px; height:40px; border-radius:var(--p-r-s);
  color:var(--silber-matt); background:var(--pb-karte); border:1px solid var(--p-rand) }
.pb-amp.voll .pb-amp-zeichen{ color:var(--rot) }

/* ---------------------------------------------------------------- Anlagen
   Eine Kachel je Stufe, wie in der Vorlage: Preis oben, Boni darunter, bei
   Stufe 3 der PlayStyle. Die alte Fassung war eine Zeile mit vier kleinen
   Knoepfen - man sah weder, was eine Stufe kostet, noch was sie bringt, und
   musste jede einzeln antippen, um es zu erfahren.
   -------------------------------------------------------------------- */
.pb-anlagen-wer{ display:flex; align-items:flex-start; gap:7px }
.pb-anlagen-wer .p-icon{ flex:none; margin-top:2px }

.pb-anlagen-level{ display:flex; flex-wrap:wrap; align-items:center; gap:8px;
  padding:var(--p-2) var(--p-4) var(--p-3) }
.pb-anlagen-level label{ font-family:var(--eng); font-weight:600; font-size:.66rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--silber-matt) }
.pb-anlagen-level select{ background:var(--p-flaeche-tief); color:var(--kreide);
  border:1px solid var(--p-rand); border-radius:var(--p-r-s);
  padding:5px 9px; font-family:var(--text); font-size:.84rem }
.pb-anlagen-level select:focus{ outline:2px solid var(--rot); outline-offset:-1px }
.pb-anlagen-level > b{ color:var(--weiss); font-size:.86rem }
.pb-anlagen-level small{ flex:1 1 220px; color:var(--silber-matt); font-size:.74rem;
  line-height:1.4 }

.pb-anlagen-budget{ padding:0 var(--p-4) }
.pb-anlagen-zahlen{ display:flex; justify-content:space-between; gap:10px;
  margin-top:5px; font-size:.76rem }
.pb-anlagen-zahlen b{ color:var(--weiss); font-weight:600 }
.pb-anlagen-zahlen span{ color:var(--silber-matt); font-variant-numeric:tabular-nums }

.pb-anlagen-filter{ display:flex; flex-wrap:wrap; gap:6px; padding:var(--p-3) var(--p-4) 0 }
.pb-anlagen-filter > button{
  appearance:none; cursor:pointer; border:1px solid var(--p-rand);
  background:var(--p-flaeche-tief); color:var(--silber);
  border-radius:999px; padding:4px 11px;
  font-family:var(--eng); font-weight:600; font-size:.68rem;
  letter-spacing:.06em; transition:all var(--p-t-schnell) }
.pb-anlagen-filter > button:hover{ color:var(--weiss); border-color:var(--p-rand-stark) }
.pb-anlagen-filter > button.an{ background:var(--leder); border-color:var(--leder);
  color:var(--auf-marke) }
.pb-anlagen-filter > button:focus-visible{ outline:2px solid var(--rot-hell); outline-offset:2px }
.pb-anlagen-filter .pb-anlagen-leer{ margin-left:auto; display:flex; align-items:center; gap:5px;
  border-color:color-mix(in srgb,var(--absage) 40%,transparent); color:#F0708A }
.pb-anlagen-filter .pb-anlagen-leer:hover{ color:#F0708A;
  background:color-mix(in srgb,var(--absage) 12%,transparent) }

.pb-anlagen-netz{ display:grid; gap:10px; padding:var(--p-3) var(--p-4) var(--p-4);
  grid-template-columns:repeat(auto-fill,minmax(300px,1fr)) }
.pb-anlage-karte{ border:1px solid var(--p-rand); border-radius:var(--p-r-m);
  background:var(--p-flaeche-tief); padding:10px }
.pb-anlage-karte.an{ border-color:rgba(201,162,39,.38); background:rgba(201,162,39,.05) }
.pb-anlage-karte h4{ margin:0 0 8px; font-family:var(--eng); font-weight:600;
  font-size:.74rem; letter-spacing:.1em; text-transform:uppercase; color:var(--weiss) }

.pb-tiers{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px }
.pb-tier{ appearance:none; cursor:pointer; text-align:left;
  display:flex; flex-direction:column; gap:5px; min-width:0;
  border:1px solid var(--p-rand); border-radius:var(--p-r-s);
  background:var(--karbon); color:var(--silber); padding:7px 8px;
  transition:all var(--p-t-schnell) }
.pb-tier:hover:not(:disabled){ border-color:var(--p-rand-stark); background:var(--p-flaeche) }
.pb-tier:focus-visible{ outline:2px solid var(--rot-hell); outline-offset:2px }
.pb-tier:disabled{ opacity:.4; cursor:not-allowed }
.pb-tier.an{ border-color:color-mix(in srgb,var(--gold) 55%,transparent); background:rgba(201,162,39,.14) }
.pb-tier.an:disabled{ opacity:.85 }

.pb-tier-kopf{ display:flex; flex-direction:column; gap:1px; min-width:0 }
.pb-tier-kopf b{ font-family:var(--eng); font-weight:600; font-size:.64rem;
  letter-spacing:.1em; text-transform:uppercase; color:var(--silber-matt) }
.pb-tier.an .pb-tier-kopf b{ color:var(--p-gold-hell) }
.pb-tier-kopf em{ font-style:normal; font-family:var(--zahl); font-size:.78rem;
  color:var(--weiss); font-variant-numeric:tabular-nums }

.pb-tier-boni{ display:flex; flex-wrap:wrap; gap:3px }
.pb-bonus{ font-size:.66rem; line-height:1.3; color:var(--silber-matt);
  background:rgba(255,255,255,.05); border-radius:4px; padding:1px 5px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100% }
.pb-tier.an .pb-bonus{ color:var(--kreide) }

.pb-tier-ps{ display:flex; align-items:center; gap:4px; font-size:.66rem;
  color:var(--p-gold-hell); white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.pb-tier-ps .p-icon{ width:11px; height:11px; flex:none }

@media (max-width:520px){
  /* Drei Kacheln nebeneinander sind auf 320 Pixeln je 90 breit - darin
     steht kein Bonus mehr. Dann lieber untereinander. */
  .pb-tiers{ grid-template-columns:minmax(0,1fr) }
  .pb-tier{ flex-direction:row; align-items:center; flex-wrap:wrap; gap:8px }
  .pb-tier-kopf{ flex:none; min-width:92px }
  .pb-tier-boni{ flex:1 1 auto }
  .pb-anlagen-netz{ grid-template-columns:minmax(0,1fr) }
}

/* -------------------------------------------------------------- 6 Builds */
.pb-build-liste{ display:flex; flex-direction:column; gap:10px }
.pb-build{
  display:grid; gap:12px; align-items:start; grid-template-columns:auto minmax(0,1fr) auto;
  padding:14px; border-radius:var(--p-r-l); background:var(--pb-karte-tief); border:1px solid var(--p-rand);
  transition:border-color var(--p-t),background var(--p-t);
}
.pb-build:hover{ border-color:var(--p-rand-stark) }
.pb-build.offen{ border-color:rgba(47,160,94,0.45); background:rgba(47,160,94,0.06) }
.pb-build.gewaehlt{ box-shadow:inset 3px 0 0 var(--gold) }
.pb-build-zeichen{ display:grid; place-items:center; width:46px; height:46px; border-radius:var(--p-r-m);
  color:var(--rot); background:rgba(47,160,94,0.06); border:1px solid rgba(47,160,94,0.2) }
.pb-build-text{ min-width:0; display:flex; flex-direction:column; gap:6px }
.pb-build-text > b{ font-family:var(--anzeige); font-weight:800; font-size:1.05rem; color:var(--weiss) }
.pb-build-zeile{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; min-width:0;
  font-size:.84rem; color:var(--silber) }
.pb-build-zeile.matt{ color:var(--silber-matt); font-size:.78rem }
.pb-build-zeile.matt small{ font-family:var(--zahl); font-size:.72rem }
.pb-build-notiz{ margin:0; font-size:.82rem; line-height:1.5; color:var(--silber-matt) }
.pb-build-knoepfe{ display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-end }
.pb-build-knoepfe .p-knopf.an{ color:var(--p-gold-hell); border-color:rgba(201,162,39,.5) }

.pb-vgl-werkzeug{ display:flex; align-items:center; justify-content:space-between; gap:var(--p-3);
  flex-wrap:wrap; margin-bottom:var(--p-3) }
.pb-vgl{ display:flex; flex-direction:column; gap:var(--p-3) }
.pb-vgl-koepfe{ display:grid; gap:var(--p-3); grid-template-columns:repeat(2,minmax(0,1fr)) }
.pb-vgl-kopf{
  display:flex; flex-direction:column; align-items:center; gap:5px; text-align:center;
  padding:12px; border-radius:var(--p-r-m); background:var(--pb-karte-tief); border:1px solid var(--p-rand);
}
/* Leerzustaende im Builder etwas flacher als im uebrigen Hub: auf dem
   Reiter "Builds" stehen drei davon untereinander (meine, Verein,
   Vergleich) - mit je 56 px Polster oben und unten ist das eine
   Bildschirmhoehe Nichts. Der Vergleich kommt mit noch weniger aus, er
   hat nur einen Satz. */
.pb-seite .p-leer{ padding:var(--p-7) var(--p-6) }
.pb-vgl-platte .p-leer{ padding:var(--p-6) var(--p-5); gap:6px }
.pb-vgl-platte .p-leer b{ font-size:1.05rem }

/* Welche Spalte ist welche? Am Handy steht der Kopf weit ueber den Zeilen -
   ohne diese Marke raet man beim Scrollen. */
.pb-vgl-seite{
  font-family:var(--eng); font-weight:600; font-size:var(--p-schrift-min);
  letter-spacing:.18em; text-transform:uppercase; color:var(--silber-matt);
}
.pb-vgl-kopf .pb-icon{ color:var(--rot) }
.pb-vgl-kopf b{ max-width:100%; font-family:var(--anzeige); font-weight:800; font-size:.98rem; color:var(--weiss) }
.pb-vgl-kopf small{ max-width:100%; font-size:.72rem; color:var(--silber-matt) }
/* Die Tafel bleibt in der Plattenmitte. Bei 1366 px lagen die beiden Zahlen
   sonst rund 1300 px auseinander - zum Vergleichen musste der Blick ueber
   die ganze Bildschirmbreite springen, Zeile fuer Zeile, 25-mal. */
.pb-vgl-zeilen{ display:flex; flex-direction:column; max-width:760px; margin-inline:auto; width:100% }
.pb-vgl-zeile{
  display:grid; gap:10px; align-items:center; grid-template-columns:64px minmax(0,1fr) 64px;
  padding:7px 10px; border-bottom:1px solid var(--p-rand); font-size:.84rem; color:var(--silber);
  text-align:center;
}
.pb-vgl-zeile:last-child{ border-bottom:0 }
.pb-vgl-zeile:nth-child(even){ background:rgba(255,255,255,.018) }
.pb-vgl-zeile b{ font-family:var(--zahl); font-weight:600; font-size:.95rem; color:var(--weiss) }
.pb-vgl-zeile b.gut{ color:var(--pb-gut) }
.pb-vgl-zeile b.schlecht{ color:var(--pb-schlecht) }

/* ------------------------------------------------------------- 7 Fenster */
.pb-bild-kasten{
  display:flex; justify-content:center;
  border-radius:var(--p-r-m); overflow:hidden; background:var(--nacht); border:1px solid var(--p-rand-hell);
}
.pb-bild-kasten .p-skelett.block{ height:340px }

/* Zuruecksetzen: jeder Absatz traegt seine eigene Ueberschrift und steht in
   derselben Reihenfolge wie die Knoepfe darunter. Vorher war nichts
   verbunden - wer schnell las, erwischte die falsche Variante, und die
   ist nicht rueckgaengig zu machen. */
.pb-reset-wahl{ margin:0 0 var(--p-2) }
.pb-reset-wahl > b{
  display:block; margin-bottom:3px;
  font-family:var(--eng); font-weight:600; font-size:.82rem; letter-spacing:.08em;
  text-transform:uppercase; color:var(--weiss);
}
.pb-reset-wahl > p{ margin:0; font-size:.86rem; line-height:1.55; color:var(--silber) }

/* Fehlerbild: die technische Meldung des Servers gehoert klein unter den
   Satz, nicht in den Versaltitel. Das Warnzeichen steht in Gold - Hausgruen
   ist im Hub die Erfolgsfarbe. */
.pb-fehlerbild > .p-icon{
  color:var(--p-gold-hell);
  background:rgba(201,162,39,.10); border-color:rgba(201,162,39,.34);
}
.pb-fehler-roh{
  display:block; max-width:52ch; margin:var(--p-1) auto 0;
  font-family:var(--zahl); font-size:var(--p-schrift-min); line-height:1.5; color:var(--silber-matt);
}

/* Die Sprachumschaltung sitzt im Seitenband des Rahmens - dort braucht sie
   keinen eigenen Rand nach unten. */
.pb-sprache > button{ min-width:44px }

/* ------------------------------------------------------------- Ladezustand
   Das Geruest deutet die spaetere Form an: Aufmacher, klebende Leiste, vier
   Reiter. Bei 150 KB Nutzlast und langsamem Handy-Netz sieht man es
   spuerbar lange - zwei anonyme Platten (der Hub-Standard) haben mit dem,
   was danach kommt, nichts zu tun. */
.pb-geruest{ display:block }
.pb-geruest .p-skelett{ display:block; margin-bottom:var(--p-3) }
.pb-geruest .p-skelett.kurz{ width:180px }
.pb-geruest-kleb{ display:flex; gap:var(--p-5); align-items:center; position:static }
.pb-geruest-kleb .p-skelett{ flex:1 1 0 }
.pb-geruest-reiter{ gap:var(--p-4); padding:12px 4px }
.pb-geruest-reiter .p-skelett{ width:96px; height:18px }

/* ---------------------------------------------------------------- 8 Handy */
@media (max-width:980px){
  .pb-zwei{ grid-template-columns:minmax(0,1fr) }
  .pb-kopf-titel{ font-size:2rem }
  .pb-kleb{ grid-template-columns:auto minmax(0,1fr); padding:8px var(--p-4) }
  .pb-kleb-typ{ grid-column:1 / -1; border-top:1px solid var(--p-rand); padding-top:6px }
}

@media (max-width:760px){
  .pb-kopf{ gap:var(--p-4) }
  .pb-kopf-haupt{ flex:1 1 100%; gap:var(--p-3) }
  .pb-kopf-zeichen{ width:60px; height:60px }
  .pb-kopf-zeichen .pb-icon{ width:36px; height:36px }
  .pb-kopf-titel{ font-size:1.7rem }
  .pb-kopf-werkzeug{ margin-left:0; width:100% }
  /* Die Werkzeugknoepfe teilen sich die Zeile, statt zu einer Spalte aus
     Halbknoepfen zu zerfallen. */
  .pb-kopf-werkzeug .p-knopfgruppe{ flex:1 1 100%; display:flex }
  .pb-kopf-werkzeug .p-knopfgruppe .p-knopf{ flex:1 1 0; min-height:40px }
  .pb-kopf-werkzeug > .p-knopf.haupt{ flex:1 1 100%; min-height:44px }
  /* "Laden" teilt sich die Zeile mit den Marken, damit die Dreiergruppe
     darunter ihre 40 px Tippflaeche behaelt. */
  .pb-kopf-werkzeug > .pb-laden{ flex:0 1 auto; min-height:40px }
  .pb-kleb{ border-radius:var(--p-r-m) }
  .pb-kleb-gross{ font-size:1.4rem }
  .pb-reiter > button{ padding:0 12px }
  .pb-attr-liste{ padding:var(--p-2) }
  .pb-attr{ padding:8px }
  .pb-attr-preis{ min-width:48px; font-size:.72rem }
  /* Die Gruppen-UEBERSCHRIFT darf am Handy nicht abschneiden
     („Schießen / …“). Schnitt und Anzahl rutschen in die zweite Zeile,
     der Name bekommt die erste ganz fuer sich. */
  .pb-gruppe-kopf{
    padding:12px var(--p-4); gap:10px;
    grid-template-columns:auto minmax(0,1fr) auto; row-gap:4px;
  }
  .pb-gruppe-kopf > b{ white-space:normal; overflow:visible }
  .pb-gruppe-zeichen{ grid-column:1; grid-row:1 / span 2 }
  .pb-gruppe-kopf > b{ grid-column:2; grid-row:1 }
  .pb-gruppe-kopf > .p-icon{ grid-column:3; grid-row:1 }
  .pb-gruppe-schnitt{ grid-column:2; grid-row:2; justify-self:start }
  .pb-gruppe-kopf > small{ grid-column:3; grid-row:2; justify-self:end; white-space:nowrap }
  /* Am Handy stehen die vier Slots untereinander. Mit 150 px Mindesthoehe
     kosteten drei LEERE Karten fast zwei Bildschirme, bevor der Katalog
     kam - gefuellte Karten brauchen die Hoehe, leere nicht. */
  .pb-slots{ grid-template-columns:repeat(2,minmax(0,1fr)) }
  .pb-slot{ min-height:132px; padding:14px 12px }
  .pb-slot.leer,.pb-slot.zu{ min-height:96px; justify-content:center }
  .pb-slot.plus{ grid-column:1 / -1 }
  .pb-build{ grid-template-columns:auto minmax(0,1fr) }
  .pb-build-knoepfe{ grid-column:1 / -1; justify-content:flex-start }
  .pb-build-knoepfe .p-knopf{ min-height:40px }
  .pb-amp{ grid-template-columns:auto minmax(0,1fr); }
  .pb-amp-stufe{ grid-column:2 }
  .pb-vgl-zeile{ grid-template-columns:52px minmax(0,1fr) 52px; gap:6px; font-size:.8rem }
  .pb-mastery .p-segment > button{ min-height:40px; min-width:44px }
  /* Vier Stufenknoepfe neben dem Namen waeren je 36 px breit - zu klein
     zum Tippen. Deshalb bekommen sie am Handy eine eigene Zeile. */
  /* Die UEBERSCHRIFT darf nie gekuerzt werden. Bei 390 px stand dort
     "Meisterun…" und "Vereinsanla…", weil der Zaehler-Chip daneben die
     Zeile auffrass. Jetzt rutscht der CHIP in eine zweite Zeile - die
     Ueberschrift behaelt ihren Platz. */
  .pb-klapp-kopf{
    display:grid; grid-template-columns:auto minmax(0,1fr) auto; row-gap:6px; align-items:center;
  }
  .pb-klapp-kopf > b{ white-space:normal; overflow:visible }
  .pb-klapp-kopf > .p-icon:last-child{ margin-left:0; justify-self:end }
  .pb-klapp-kopf > .p-chip{ grid-column:1 / -1; grid-row:2; justify-self:start }
  /* "Nachmessen und im Admin-Bereich eintragen": padding:0 hob die
     Rahmen-Regel auf, die .p-etikett-weiter unter 760 px eine 40-px-
     Tippflaeche gibt (DESIGN §6). Gemessen waren 299 x 20 px. */
  .pb-attr-kopfzeile button.p-etikett-weiter{
    min-height:40px; display:inline-flex; align-items:center;
  }
}

@media (max-width:420px){
  .pb-kopf-titel{ font-size:1.5rem }
  .pb-attr-name small{ display:none }   /* der zweite Name sprengt 360 px */
  .pb-arch-raster{ grid-template-columns:minmax(0,1fr) }
  .pb-stern{ width:40px; height:40px }
  .pb-stern .p-icon{ width:21px; height:21px }
  .pb-stern-knoepfe{ gap:2px }
}

/* ------------------------------------- 9 Abzeichen im Kader und im Profil
   Diese Klassen leben in FREMDEM Markup (kader.js, profil.js) - gebaut wird
   das HTML aber in js/probuilder.js (PRO_BUILDER.abzeichen). Deshalb steht
   das Aussehen hier und nicht in portal/kader.css: wer das Abzeichen
   aendert, findet Aufbau und Aussehen an derselben Stelle. Beide Vorsaetze
   (.pb-abz, .pr-build) kommen sonst nirgends im Hub vor.
   Die Positionsfarben sind dieselben wie bei .p-pos (portal.css). */
.pb-abz{
  --pb-pos: var(--silber-matt);
  flex:none; display:inline-flex; align-items:center; gap:5px;
  min-height:24px; padding:2px 7px 2px 5px; margin:0;
  border-radius:var(--p-r-xs);
  border:1px solid color-mix(in srgb, var(--pb-pos) 42%, transparent);
  background:color-mix(in srgb, var(--pb-pos) 13%, transparent);
  color:var(--weiss); font-family:var(--zahl); font-size:.64rem; line-height:1.25;
  cursor:pointer;
  transition:transform var(--p-t-schnell), border-color var(--p-t), background var(--p-t);
}
.pb-abz.tw{ --pb-pos: var(--gold) }
.pb-abz.def{ --pb-pos: var(--stahl) }
.pb-abz.mf{ --pb-pos: var(--zusage) }
.pb-abz.st{ --pb-pos: var(--absage) }
.pb-abz .pb-icon{ width:13px; height:13px; color:color-mix(in srgb, var(--pb-pos) 78%, var(--weiss)) }
.pb-abz-text{ display:flex; align-items:baseline; gap:5px; min-width:0 }
.pb-abz-text b{ font-weight:700; letter-spacing:.01em }
.pb-abz:hover{ border-color:color-mix(in srgb, var(--pb-pos) 70%, transparent);
  background:color-mix(in srgb, var(--pb-pos) 22%, transparent); transform:translateY(-1px) }
.pb-abz:active{ transform:translateY(0) }
.pb-abz:focus-visible{ outline:2px solid var(--rot); outline-offset:2px }
/* Nicht geteilt = Trainerblick. Das Schloss sagt es, die blasse Flaeche
   unterstreicht es - sonst haelt ein Manager einen Arbeitsstand fuer den
   fertigen Build eines Mitspielers. */
.pb-abz.stumm{ background:transparent; border-style:dashed }
.pb-abz-still{ display:inline-flex; color:var(--p-gold-hell) }
.pb-abz-still .p-icon{ width:11px; height:11px }

/* Die grosse Fassung im Spielerprofil */
.pb-abz.gross{ min-height:34px; padding:4px 12px 4px 9px; gap:8px; font-size:.72rem }
.pb-abz.gross .pb-icon{ width:20px; height:20px }
.pb-abz.gross .pb-abz-text{ flex-direction:column; align-items:flex-start; gap:1px }
.pb-abz.gross .pb-abz-text b{ font-family:var(--eng); font-weight:600; font-size:.86rem;
  letter-spacing:.06em; text-transform:uppercase }
.pb-abz.gross .pb-abz-text small{ font-size:var(--p-schrift-min); letter-spacing:.06em; color:var(--silber-matt) }

/* Die Zeile im Spielerprofil, in der das Abzeichen steht */
.pr-build{ display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin-top:10px }
.pr-build-marke{
  display:inline-flex; align-items:center; gap:5px;
  font-family:var(--eng); font-weight:600; font-size:var(--p-schrift-min); letter-spacing:.14em;
  text-transform:uppercase; color:var(--silber-matt);
}
.pr-build-name{ max-width:22ch; font-size:.76rem; color:var(--silber) }
.pr-build.leer .p-knopf{ min-height:32px }

@media (max-width:760px){
  /* Tippziel am Handy: 40 px, auch in der dichten Kaderzeile. */
  .pb-abz{ min-height:40px; padding:2px 10px 2px 8px; font-size:.7rem }
  .pb-abz .pb-icon{ width:15px; height:15px }
  .pb-abz.gross{ min-height:44px }
  .pr-build.leer .p-knopf{ min-height:40px }
}

/* ------------------------------- 10 Admin: "Pro Builder · Daten"
   Sitzt im Medien-Bereich unter "Werkzeuge der Leitung" (js/bereiche.js).
   Der Vorsatz .pbv- (Pro Builder / Verwaltung) kommt sonst nirgends vor;
   Rahmen, Kopf und Aufklapper sind die vorhandenen .md-w-* des Bereichs -
   hier steht nur, was darin liegt. */
.pbv-leib{ display:flex; flex-direction:column; gap:var(--p-5) }
.pbv-laedt{ display:flex; flex-direction:column; gap:var(--p-3) }

/* Kopf: Datenstand */
.pbv-stand{
  display:grid; gap:var(--p-3) var(--p-4); align-items:end;
  grid-template-columns:minmax(0,1fr) auto;
  padding:var(--p-4); border-radius:var(--p-r-m);
  border:1px solid var(--p-rand); background:var(--p-flaeche-tief);
}
.pbv-stand-feld{ margin:0 }
.pbv-fakten{
  grid-column:1 / -1; display:flex; flex-wrap:wrap; gap:var(--p-2) var(--p-6);
  margin:0; padding-top:var(--p-3); border-top:1px solid var(--p-rand);
}
.pbv-fakten > div{ display:flex; flex-direction:column; gap:2px; min-width:0 }
.pbv-fakten dt{
  font-family:var(--eng); font-weight:600; font-size:var(--p-schrift-min);
  letter-spacing:.14em; text-transform:uppercase; color:var(--silber-matt);
}
.pbv-fakten dd{ margin:0; font-size:.8rem; color:var(--silber) }

/* Unterreiter */
.pbv-reiter{ margin:0 }
.pbv-blatt{ display:flex; flex-direction:column; gap:var(--p-3); padding-top:var(--p-2) }
.pbv-untertitel{ margin:var(--p-4) 0 0 }

/* Eine offene Kostenleiter */
.pbv-liste{ display:flex; flex-direction:column; gap:var(--p-2) }
.pbv-leiter{
  display:grid; align-items:center; gap:var(--p-3);
  grid-template-columns:auto minmax(0,1fr) auto auto;
  padding:10px var(--p-4); border-radius:var(--p-r-m);
  border:1px solid var(--p-rand); background:var(--p-flaeche);
  transition:border-color var(--p-t), background var(--p-t);
}
.pbv-leiter:hover{ border-color:var(--p-rand-stark); background:var(--karbon-hoch) }
.pbv-nr{
  width:28px; height:28px; flex:none; display:grid; place-items:center;
  border-radius:var(--p-r-s); background:rgba(201,162,39,.16);
  font-family:var(--anzeige); font-weight:900; font-size:.9rem; color:var(--p-gold-hell);
}
.pbv-leiter-text{ min-width:0; display:flex; flex-direction:column; gap:2px }
.pbv-leiter-text b{ font-size:.92rem; color:var(--weiss) }
.pbv-leiter-text small{ font-family:var(--zahl); font-size:.7rem; color:var(--silber-matt) }
.pbv-zahl{ flex:none; text-align:right; line-height:1.1 }
.pbv-zahl b{ display:block; font-family:var(--anzeige); font-weight:900; font-size:1.2rem; color:var(--weiss) }
.pbv-zahl small{
  font-family:var(--eng); font-size:var(--p-schrift-min); letter-spacing:.12em;
  text-transform:uppercase; color:var(--silber-matt);
}
.pbv-fertig{
  display:flex; align-items:center; gap:var(--p-2); margin:0;
  padding:12px var(--p-4); border-radius:var(--p-r-m);
  border:1px solid rgba(51,192,106,.35); background:rgba(51,192,106,.10);
  font-size:.86rem; color:var(--zusage);
}
.pbv-fertig b{ color:var(--weiss) }

/* Die Tafel der bekannten Leitern */
.pbv-tafel tbody tr{ cursor:pointer }
.pbv-tafel tbody tr:focus-visible{ outline:2px solid var(--rot); outline-offset:-2px }
.pbv-tafel td{ font-family:var(--zahl); text-align:right }
.pbv-tafel td.name,.pbv-tafel td.links{ text-align:left }
/* Ein Band ohne gemessenen Preis - hier rechnet der Builder bewusst nicht. */
.pbv-offen{ color:var(--p-gold-hell); background:rgba(201,162,39,.08) }

/* Deutsche Namen */
.pbv-namen{
  display:grid; gap:var(--p-2);
  grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
}
.pbv-name{ margin:0; gap:3px }
.pbv-name-en{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:6px;
  font-family:var(--eng); font-weight:600; font-size:.74rem; letter-spacing:.06em;
  color:var(--silber);
}
.pbv-name-en small{
  font-family:var(--text); font-weight:400; font-size:var(--p-schrift-min);
  letter-spacing:0; color:var(--silber-matt);
}
/* Noch offen = die eigentliche Arbeit. Gold wie ueberall im Builder, wo
   eine Zahl oder ein Name fehlt. */
.pbv-name.offen .p-eingabe{ border-color:rgba(201,162,39,.45); background:rgba(201,162,39,.06) }

/* Grundwerte */
.pbv-grund{
  display:grid; gap:var(--p-3);
  grid-template-columns:repeat(auto-fill,minmax(250px,1fr));
}
.pbv-grundfeld{ margin:0 }
.pbv-grundfeld .p-eingabe{ font-family:var(--zahl) }

.pbv-fuss{
  display:flex; flex-wrap:wrap; align-items:center; gap:var(--p-3);
  margin-top:var(--p-2); padding-top:var(--p-3); border-top:1px solid var(--p-rand);
}

/* Der Leiter-Dialog */
.pbv-dialog-hilfe{ margin:0 0 var(--p-4); font-size:.86rem; line-height:1.6; color:var(--silber) }
.pbv-dialog-hilfe b{ color:var(--weiss) }
.pbv-baender{ display:grid; gap:var(--p-2); grid-template-columns:repeat(auto-fill,minmax(88px,1fr)) }
.pbv-band{ display:flex; flex-direction:column; gap:4px; min-width:0 }
.pbv-band > span{
  font-family:var(--eng); font-weight:600; font-size:var(--p-schrift-min);
  letter-spacing:.1em; text-transform:uppercase; color:var(--silber-matt); text-align:center;
}
.pbv-band .p-eingabe{ text-align:center; font-family:var(--zahl); font-size:1rem; min-height:44px }
/* Band, das in dieser Gruppe kein Attribut erreicht: bleibt "?" */
.pbv-band.aus > span{ color:rgba(214,232,220,.32) }
.pbv-band.aus .p-eingabe{ background:var(--p-flaeche-tief); color:var(--silber-matt) }

@media (max-width:760px){
  .pbv-stand{ grid-template-columns:minmax(0,1fr) }
  .pbv-stand .t-knopf{ width:100%; min-height:44px }
  .pbv-leiter{ grid-template-columns:auto minmax(0,1fr) auto }
  .pbv-leiter .t-knopf{ grid-column:1 / -1; min-height:44px; justify-content:center }
  .pbv-baender{ grid-template-columns:repeat(3,minmax(0,1fr)) }
  .pbv-namen,.pbv-grund{ grid-template-columns:minmax(0,1fr) }
  .pbv-fuss .t-knopf{ width:100%; min-height:44px; justify-content:center }
}

/* AP-Kurve: die Zeilen, die beim Anheben der Level-Obergrenze fehlen */
.pbv-kurve{ display:grid; gap:var(--p-2); grid-template-columns:repeat(auto-fill,minmax(96px,1fr)) }
.pbv-warnung{
  display:flex; align-items:flex-start; gap:var(--p-2); margin:0 0 var(--p-3);
  padding:10px var(--p-3); border-radius:var(--p-r-m);
  border:1px solid rgba(201,162,39,.38); background:rgba(201,162,39,.08);
  font-size:.84rem; line-height:1.5; color:var(--p-gold-hell);
}
.pbv-warnung b{ color:var(--weiss) }
.pbv-warnung .p-icon{ flex:none; margin-top:2px }

@media (max-width:760px){
  .pbv-kurve{ grid-template-columns:repeat(3,minmax(0,1fr)) }
  /* Die Zeilen der Leiter-Tafel sind anklickbar (sie oeffnen die Leiter) -
     mit der dichten Tabellenhoehe blieben sie bei 39 px und damit unter dem
     Tippziel von 40 px. */
  /* .p-tafel.dicht td setzt 7 px und gewinnt ueber die Gewichtung - deshalb
     hier beide Klassen, nicht nur die eigene. */
  .pbv-tafel.dicht tbody td{ padding-top:11px; padding-bottom:11px }
}