/* =====================================================================================
   Etappe 7/7b: Postfach (js/postfach.js), Admin-Bereich-Seiten (js/adminbereich.js) und Creator-Programm
   (js/creator.js, als Reiter im Shop). Farben/Schriften aus thema.css (Eisen/Gold), Bausteine wie shop.css.
   Ebenen: Postfach 86 (unter Shop 88, über Freunde & Clan), Admin-Bereich 91 (menue.css). Kein horizontales
   Scrollen – Raster und Zeilen brechen bis 390 px Breite um.
   ===================================================================================== */

/* ---------------------------------------------------------------- gemeinsame Formular-Bausteine */
.ad-feld { display: flex; flex-direction: column; gap: 4px; min-width: 0; font-size: 13px; color: var(--grau); }
.ad-feld > span { font: 700 12px var(--schrift-titel); letter-spacing: 1.5px; text-transform: uppercase; }
.ad-feld input, .ad-feld select, .ad-feld textarea, .ad-eingabe {
  width: 100%; min-width: 0; padding: 7px 10px; border: 1px solid var(--eisen-rand); border-radius: 0; background: rgba(0, 0, 0, .45);
  color: var(--text); font: 15px var(--schrift); box-shadow: none; }
.ad-feld textarea { resize: vertical; min-height: 92px; line-height: 1.4; }
.ad-feld input:focus, .ad-feld select:focus, .ad-feld textarea:focus, .ad-eingabe:focus { outline: none; border-color: var(--gold-dunkel); box-shadow: 0 0 0 1px var(--gold-dunkel); }
.ad-feld select option { background: #141118; color: var(--text); }
.ad-raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); gap: 8px 10px; }
.ad-raster.breit { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.ad-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; min-width: 0; }
.ad-zeile > .knopf, .ad-knoepfe > .knopf { margin: 0; }
.ad-zeile > input, .ad-zeile > .ad-eingabe { flex: 1 1 160px; }
.ad-knoepfe { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.ad-wahl { display: flex; flex-wrap: wrap; gap: 4px; }
.ad-wahl button { flex: 0 1 auto; padding: 6px 11px; border: 1px solid var(--eisen-rand); background: rgba(0, 0, 0, .3); color: var(--grau);
  font: 700 13px var(--schrift-titel); letter-spacing: 1px; text-transform: uppercase; cursor: var(--zeiger-klick); }
.ad-wahl button.an { color: var(--gold); border-color: var(--gold-dunkel); background: rgba(246, 197, 90, .1); }
.ad-wahl button small { margin-left: 5px; color: var(--grau); font: 600 11px var(--schrift); }
.ad-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.ad-chip { display: inline-flex; align-items: center; gap: 5px; max-width: 100%; padding: 2px 9px; border: 1px solid var(--eisen-rand); border-radius: 999px;
  background: rgba(0, 0, 0, .4); color: var(--gold-hell); font: 700 13px var(--schrift); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ad-chip.dia { color: #bdf1ff; }
.ad-chip.pass { color: var(--pf, var(--gold)); border-color: color-mix(in srgb, var(--pf, #3d3428) 45%, transparent); }
.ad-chip button { padding: 0 0 0 2px; border: 0; background: none; color: var(--grau); font: 700 14px var(--schrift); cursor: var(--zeiger-klick); }
.ad-chip .shop-ic, .ad-chip .muenze { width: 14px; height: 14px; }
.ad-marke { display: inline-block; padding: 0 7px; border-radius: 999px; background: rgba(255, 255, 255, .07); color: var(--grau);
  font: 700 11px var(--schrift); letter-spacing: .5px; text-transform: uppercase; vertical-align: 1px; white-space: nowrap; }
.ad-marke.rot { background: rgba(226, 56, 44, .18); color: #ff9a8f; }
.ad-marke.gruen { background: rgba(110, 200, 120, .16); color: #9fe0a8; }
.ad-marke.gold { background: rgba(246, 197, 90, .16); color: var(--gold); }
.ad-marke.blau { background: rgba(120, 200, 255, .14); color: #bde6ff; }
.ad-werte { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr)); gap: 6px; }
.ad-werte > div { display: flex; flex-direction: column; gap: 1px; min-width: 0; padding: 8px 10px; border: 1px solid var(--eisen-rand); background: rgba(0, 0, 0, .35); }
.ad-werte small { color: var(--grau); font-size: 11.5px; }
.ad-werte b { color: var(--gold-hell); font: 800 17px var(--schrift-titel); letter-spacing: .5px; overflow-wrap: anywhere; }
.ad-werte em { color: var(--grau); font-size: 12px; font-style: normal; overflow-wrap: anywhere; }
.ad-text { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.45; color: var(--text); font-size: 14.5px; }
.ad-kontext { margin: 0; font-size: 13px; color: var(--grau); }
.ad-kontext summary { cursor: var(--zeiger-klick); color: var(--gold); }
.ad-kontext ol { margin: 6px 0 0; padding-left: 20px; display: flex; flex-direction: column; gap: 2px; }
.ad-kontext li { overflow-wrap: anywhere; }
.ad-link { color: var(--gold); overflow-wrap: anywhere; }
.ad-link:hover { color: var(--gold-hell); }
a.ad-link { text-decoration: underline; text-underline-offset: 2px; }
button.ad-link { padding: 0; border: 0; background: none; font: inherit; font-weight: 700; cursor: var(--zeiger-klick); text-align: left; }

/* ---------------------------------------------------------------- Postfach: Hauptmenü-Knopf + Fenster */
.hm-knoepfe .pf-hm-knopf { display: flex; align-items: center; gap: 10px; }
.hm-knoepfe .pf-hm-knopf[hidden] { display: none; }
.pf-hm-knopf .pf-ic { width: 22px; height: 22px; }
.pf-hm-knopf span { flex: 1; }
.pf-ic { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vertical-align: middle; }
#postfach-fenster { z-index: 86; padding: 12px; }
.lobby-karte.pf-tafel { width: min(940px, calc(100vw - 24px)); height: min(640px, calc(100dvh - 24px)); display: flex; flex-direction: column; gap: 10px; padding: 18px 20px 16px; overflow: hidden; }
.pf-kopf { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; }
.pf-kopf h2 { display: flex; align-items: center; gap: 10px; margin: 0; flex: 1; min-width: 0; font: 800 28px var(--schrift-titel); letter-spacing: 4px; color: var(--gold); }
.pf-kopf h2 .pf-ic { width: 26px; height: 26px; stroke: var(--gold); }
.pf-kopf .knopf { margin: 0; }
.pf-koerper { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 330px) minmax(0, 1fr); gap: 12px; }
.pf-liste { min-height: 0; overflow-x: hidden; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; padding-right: 4px; }
.pf-eintrag { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; align-items: center; gap: 2px 8px; width: 100%; padding: 8px 10px; border: 1px solid transparent;
  border-left: 2px solid var(--eisen-rand); background: rgba(0, 0, 0, .3); color: var(--text); font: inherit; text-align: left; cursor: var(--zeiger-klick); }
.pf-eintrag:hover { border-color: rgba(246, 197, 90, .25); }
.pf-eintrag.an { border-color: var(--gold-dunkel); border-left-color: var(--gold); background: rgba(246, 197, 90, .08); }
.pf-eintrag i { width: 8px; height: 8px; border-radius: 50%; background: transparent; }
.pf-eintrag.neu i { background: var(--gold); box-shadow: 0 0 6px rgba(246, 197, 90, .8); }
.pf-eintrag b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
.pf-eintrag.neu b { color: var(--gold-hell); }
.pf-eintrag small { grid-column: 2 / 4; color: var(--grau); font-size: 12px; }
.pf-eintrag .pf-ic { width: 16px; height: 16px; color: var(--gold); }
.pf-eintrag.abgeholt .pf-ic, .pf-eintrag.abgelaufen .pf-ic { color: var(--grau); opacity: .6; }
.pf-detail { min-height: 0; overflow-x: hidden; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; border: 1px solid var(--eisen-rand);
  background: linear-gradient(180deg, rgba(255, 255, 255, .03), rgba(0, 0, 0, .35)); }
.pf-detail h3 { margin: 0; font: 800 22px var(--schrift-titel); letter-spacing: 1.5px; color: var(--gold-hell); overflow-wrap: anywhere; }
.pf-detail .pf-von { margin: -6px 0 0; color: var(--grau); font-size: 12.5px; }
.pf-anhang { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; border: 1px solid var(--gold-dunkel); background: rgba(246, 197, 90, .05); }
.pf-anhang h4 { display: flex; align-items: center; gap: 6px; margin: 0; font: 700 14px var(--schrift-titel); letter-spacing: 2px; color: var(--gold); text-transform: uppercase; }
.pf-anhang.grau { border-color: var(--eisen-rand); background: rgba(0, 0, 0, .25); }
.pf-anhang .knopf { align-self: flex-start; margin: 0; }
.pf-detail .ad-knoepfe { margin-top: auto; }
.pf-zurueck { display: none; }
.pf-leer { margin: auto; color: var(--grau); text-align: center; }

/* ---------------------------------------------------------------- Admin-Bereich: breite Tafel + Seiten */
.adminbereich-tafel.breit { width: min(1060px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); }
.adminbereich-tafel.breit .ab-bereiche { grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr)); }
.adminbereich-tafel.breit .ab-bereich { padding: 8px 10px; }
.adminbereich-tafel.breit .ab-bereich small { display: none; }
.ab-bereich.an { border-color: var(--gold) !important; background: rgba(246, 197, 90, .12) !important; }
.adminbereich-tafel.breit .ab-inhalt { max-height: none; flex: 1; min-height: 0; }
.ad-seite { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.ad-seite h3.abschnitt { margin: 4px 0 0; }
.ad-karte { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 12px; border: 1px solid var(--eisen-rand); border-radius: 6px; background: rgba(0, 0, 0, .3); }
.ad-karte.rot { border-color: rgba(226, 56, 44, .5); }
.ad-karte h4 { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 0; font: 800 17px var(--schrift-titel); letter-spacing: 1.5px; color: var(--gold); text-transform: uppercase; }
.ad-kopfzeile { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px; }
.ad-kopfzeile h4 { flex: 1 1 auto; }
.ad-treffer { display: flex; flex-direction: column; gap: 4px; }
.ad-treffer button { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; width: 100%; padding: 7px 10px; border: 1px solid transparent;
  border-left: 2px solid var(--eisen-rand); background: rgba(0, 0, 0, .3); color: var(--text); font: inherit; text-align: left; cursor: var(--zeiger-klick); }
.ad-treffer button:hover, .ad-treffer button.an { border-color: var(--gold-dunkel); border-left-color: var(--gold); }
.ad-treffer b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ad-treffer small { color: var(--grau); font-size: 12px; overflow-wrap: anywhere; }
.ad-treffer .ad-chips { justify-content: flex-end; }
.ad-zweispaltig { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 12px; align-items: start; }
.ad-meldung { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border-left: 3px solid var(--blut); background: rgba(0, 0, 0, .32); }
.ad-meldung.erledigt { border-left-color: #6ec878; opacity: .85; }
.ad-meldung > div:first-child { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.ad-meldung b { color: var(--gold-hell); }
.ad-meldung small { color: var(--grau); font-size: 12px; }
.ad-quote { position: relative; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.ad-quote i { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, var(--gold-dunkel), var(--gold)); }

/* ---------------------------------------------------------------- Creator (Reiter im Shop) */
.cr-code { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 12px 14px; border: 1px solid var(--gold-dunkel); border-left: 4px solid var(--gold);
  background: rgba(246, 197, 90, .06); }
.cr-code b { font: 800 30px var(--schrift-titel); letter-spacing: 5px; color: var(--gold); overflow-wrap: anywhere; }
.cr-code small { flex: 1 1 180px; color: var(--grau); font-size: 12.5px; }
.cr-code .knopf { margin: 0; }
.cr-status { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; border-left: 3px solid var(--gold-dunkel); background: rgba(0, 0, 0, .3); }
.cr-status.abgelehnt { border-left-color: var(--blut); }
.cr-status.angenommen { border-left-color: #6ec878; }
.cr-stripe { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.cr-stripe ul { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 4px 12px; flex: 1 1 220px; font-size: 13px; }
.cr-stripe li { display: inline-flex; align-items: center; gap: 5px; color: var(--grau); }
.cr-stripe li.ja { color: #9fe0a8; }
.cr-stripe li .pf-ic { width: 15px; height: 15px; }
.cr-stripe .knopf { margin: 0; }
.shop-kasse-box .cr-kasse { display: flex; flex-direction: column; gap: 4px; }

/* ---------------------------------------------------------------- Handy / schmale Fenster */
@media (max-width: 760px) {
  .pf-koerper { grid-template-columns: minmax(0, 1fr); }
  .pf-koerper.detail .pf-liste { display: none; }
  .pf-koerper:not(.detail) .pf-detail { display: none; }
  .pf-zurueck { display: inline-flex; align-self: flex-start; }
  .ad-zweispaltig { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 520px) {
  #postfach-fenster { padding: 6px; }
  .lobby-karte.pf-tafel { width: calc(100vw - 12px); height: calc(100dvh - 12px); padding: 12px; }
  .pf-kopf h2 { font-size: 22px; letter-spacing: 3px; }
  .pf-detail { padding: 10px 12px; }
  .adminbereich-tafel.breit { width: calc(100vw - 12px); max-height: calc(100dvh - 12px); padding: 12px; }
  .cr-code b { font-size: 24px; letter-spacing: 3px; }
}
.ad-seite > .ad-kopfzeile h4 { display: flex; align-items: center; gap: 8px; margin: 0; font: 800 17px var(--schrift-titel); letter-spacing: 1.5px; color: var(--gold); text-transform: uppercase; }
.shop-reiter button[hidden] { display: none; }

/* Abos & Preise: kompakte Tabellen mit Zahlenfeldern */
.ad-tabelle-rahmen { max-width: 100%; overflow-x: auto; }
.ad-tabelle { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.ad-tabelle th { padding: 4px 8px; text-align: left; color: var(--grau); font: 700 11.5px var(--schrift-titel); letter-spacing: 1.2px; text-transform: uppercase; border-bottom: 1px solid var(--eisen-rand); }
.ad-tabelle td { padding: 4px 8px; border-bottom: 1px solid rgba(255, 255, 255, .05); vertical-align: middle; }
.ad-tabelle td small { color: var(--grau); }
.ad-zahl { width: 100%; min-width: 70px; max-width: 130px; padding: 4px 6px; text-align: right; font-variant-numeric: tabular-nums; }
.ad-zahl[data-geaendert] { border-color: var(--gold-dunkel); color: var(--gold); }
.ad-klassenstufe .ad-zahl { max-width: none; }