/* DSA5-Portal: gemeinsame Farben, Schriften und Bausteine für Generator, Übersicht und Einladung.
   Hell: Pergament, dunkelbrauner Rahmen mit Bronzelinie, Karmesin als Akzent.
   Dunkel: warmes Anthrazit, Bronze und Gold (bewusst ohne starken Rotanteil).
   Schriften kommen aus dem Theme „DSA5 Pergament“ (theme.json), sonst Systemschriften. */
.dsa5-portal, .dsa5-gen, .dsa5-sr, .dsa5-probe, .dsa5-becher-knopf {
  --seite: #2e2218;
  --rahmen: #4a3624;
  --bronze: #8a6a3b;
  --feld-1: #f4e8c8;
  --feld-2: #e8d6a6;
  --feld-3: #cdb07a;
  --karte: rgba(255, 250, 235, .55);
  --karte-2: #efe0b8;
  --text: #2a1d12;
  --text-2: #5f4b30;
  --akzent: #8c1d18;
  --akzent-text: #f6ead0;
  --plakette: #cfcdc4;
  --plakette-aktiv: #e4e1d6;
  --plakette-text: #2a2823;
  --plakette-rand: #6d6b63;
  --ok: #2f6b3a;
  --warn: #7a4d00;
  --fehler: #a32121;
  --hinweis: #3f5068;
  --fokus: #1b4f9c;
  --kopf-text: #f1e4c4;
  --schrift: var(--wp--preset--font-family--text, Georgia, 'Palatino Linotype', 'Book Antiqua', serif);
  --schrift-titel: var(--wp--preset--font-family--titel, Georgia, 'Palatino Linotype', serif);
  --hand: var(--wp--preset--font-family--hand, 'Segoe Script', 'Bradley Hand', 'Brush Script MT', cursive);
  --radius: 6px;
  --ziel: 40px;
}
@media (prefers-color-scheme: dark) {
  .dsa5-portal, .dsa5-gen, .dsa5-sr, .dsa5-probe, .dsa5-becher-knopf {
    --seite: #0e0b0a;
    --rahmen: #3a2a1c;
    --bronze: #b58a4a;
    --feld-1: #221a15;
    --feld-2: #1d1611;
    --feld-3: #19130f;
    --karte: #2a211a;
    --karte-2: #33271e;
    --text: #eadfc6;
    --text-2: #bba98a;
    --akzent: #d9b45f;
    --akzent-text: #1a120a;
    --plakette: #b9b6ad;
    --plakette-aktiv: #dcd9ce;
    --ok: #8fcf9a;
    --warn: #e8b860;
    --fehler: #ff8a80;
    --hinweis: #a9bdd8;
    --fokus: #8fb8ff;
  }
}

/* Überschriften im DSA-Stil: römische Versalien */
.dsa5-gen h2, .dsa5-portal h2 { font-family: var(--schrift-titel); }

/* Nur für Bildschirmleser (Live-Regionen, Zähler) */
.dsa5-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Knöpfe: Klasse schlägt allgemeine Theme-Regeln wie button { color: inherit } (Leitfaden, Stolperfallen) */
.dsa5-portal .dsa5-knopf, .dsa5-portal a.dsa5-knopf, .dsa5-portal button.dsa5-knopf {
  display: inline-block; background: var(--akzent); color: var(--akzent-text); border: 1px solid var(--bronze); border-radius: var(--radius);
  padding: .45rem 1rem; font: inherit; text-decoration: none; cursor: pointer; min-height: var(--ziel); line-height: 1.5;
}
/* Varianten mit doppelter Klasse: schlägt „button.dsa5-knopf“ (sonst sähen Nebenknöpfe aus wie Hauptknöpfe) */
.dsa5-portal .dsa5-knopf.dsa5-knopf--zweit { background: transparent; color: inherit; }
.dsa5-portal .dsa5-knopf.dsa5-knopf--gefahr { background: transparent; color: var(--fehler); border-color: var(--fehler); }
.dsa5-portal :focus-visible, .dsa5-gen :focus-visible { outline: 3px solid var(--fokus); outline-offset: 2px; }

/* Text außerhalb von Karten erbt die Farbe des Themes (auf Leder hell, auf weißem Grund dunkel). */
.dsa5-portal { font-family: var(--schrift); line-height: 1.5; }
.dsa5-portal .dsa5-meldung { color: var(--text); border-left: 4px solid var(--bronze); background: var(--karte-2); padding: .4rem .7rem; border-radius: 3px; }
.dsa5-portal .dsa5-pille { display: inline-block; font-size: .78rem; padding: 0 .55rem; border-radius: 99px; border: 1px solid var(--bronze); background: var(--karte-2); color: var(--text-2); }

/* Einladung für Gäste */
.dsa5-einladung { color: var(--text); background: var(--feld-1); border: 2px solid var(--rahmen); outline: 1px solid var(--bronze); outline-offset: -5px; border-radius: var(--radius); padding: 1.2rem 1.4rem; max-width: 40rem; }
.dsa5-einladung__knoepfe { display: flex; gap: .6rem; flex-wrap: wrap; }

/* Charakterübersicht */
.dsa5-portal [hidden] { display: none !important; }
.dsa5-uebersicht__aktionen { margin: 0 0 1rem; }
.dsa5-portal .dsa5-meldung--fehler { border-left-color: var(--fehler); }

/* Filterleiste: Pergamentstreifen, Felder umbrechend */
.dsa5-filter {
  color: var(--text); background: var(--feld-1); border: 2px solid var(--rahmen); outline: 1px solid var(--bronze); outline-offset: -5px;
  border-radius: var(--radius); padding: .8rem 1rem; display: flex; flex-wrap: wrap; gap: .6rem 1.4rem; align-items: flex-end;
}
.dsa5-filter label { display: inline-flex; align-items: center; gap: .3rem; min-height: 32px; }
.dsa5-filter__feld { margin: 0; display: flex; flex-direction: column; gap: .2rem; }
.dsa5-filter__feld label { font-weight: 600; min-height: 0; }
.dsa5-filter__suche { flex: 1 1 14rem; }
.dsa5-filter input[type="search"], .dsa5-filter select, .dsa5-karte input[type="text"], .dsa5-karte textarea {
  font: inherit; color: var(--text); background: var(--karte); border: 1px solid var(--bronze); border-radius: var(--radius);
  padding: .35rem .6rem; min-height: var(--ziel); max-width: 100%; box-sizing: border-box;
}
.dsa5-filter input[type="search"] { width: 100%; }
.dsa5-filter__gruppe { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .1rem .9rem; min-width: 0; }
.dsa5-filter__gruppe legend { font-weight: 600; padding: 0; margin-bottom: .1rem; }
.dsa5-filter__zahl { color: var(--text-2); font-size: .85em; }
.dsa5-filter__knoepfe { margin: 0; display: flex; gap: .5rem; }
.dsa5-uebersicht__treffer { margin: .8rem 0 0; font-size: .95rem; }

/* Karten */
.dsa5-karten { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 16px; }
.dsa5-karte { color: var(--text); background: var(--feld-1); border: 2px solid var(--rahmen); outline: 1px solid var(--bronze); outline-offset: -5px; border-radius: var(--radius); padding: 1rem 1.1rem; display: flex; flex-direction: column; min-width: 0; }
.dsa5-karte__kopf { display: flex; gap: .8rem; align-items: flex-start; margin-bottom: .3rem; }
.dsa5-karte__bild {
  flex: none; width: 3.2rem; height: 3.2rem; border-radius: 50%; display: grid; place-items: center;
  background: var(--rahmen); color: var(--kopf-text, #f1e4c4); border: 2px solid var(--bronze);
  font-family: var(--schrift-titel); font-weight: 700; font-size: 1.05rem; letter-spacing: .04em;
}
.dsa5-karte__titel { min-width: 0; }
.dsa5-karte__name { margin: 0; font-size: 1.2rem; line-height: 1.25; color: var(--akzent); overflow-wrap: anywhere; }
.dsa5-karte p { margin: .2rem 0; }
.dsa5-karte__konzept { font-style: italic; color: var(--text-2); }
.dsa5-karte__konzept--leer { opacity: .75; }
.dsa5-karte__kern { color: var(--text-2); }
.dsa5-karte__herkunft, .dsa5-karte__zeit { color: var(--text-2); font-size: .9rem; }
.dsa5-karte__tags { list-style: none; margin: .3rem 0; padding: 0; display: flex; flex-wrap: wrap; gap: .3rem; }
.dsa5-pille--entwurf { border-style: dashed; }
.dsa5-pille--aktiv { color: var(--ok); border-color: var(--ok); }
.dsa5-pille--archiviert { color: var(--text-2); }
.dsa5-karte__abschied { margin: .4rem 0; padding: .3rem .7rem; border-left: 3px solid var(--bronze); font-family: var(--hand); font-size: 1.25rem; line-height: 1.25; color: var(--text-2); }
.dsa5-karte__abschied p { margin: 0; }
.dsa5-karte--archiviert { background: var(--feld-2); }
.dsa5-karte--archiviert .dsa5-karte__bild { filter: grayscale(.7); }
.dsa5-karte__knoepfe { display: flex; gap: .5rem; flex-wrap: wrap; align-items: flex-start; margin-top: auto; padding-top: .7rem; }
.dsa5-karte__knoepfe form { margin: 0; }
.dsa5-karte__mehr { flex: 1 1 100%; }
.dsa5-karte__mehr summary { cursor: pointer; color: var(--text-2); min-height: var(--ziel); display: flex; align-items: center; width: max-content; }
.dsa5-karte__mehr-inhalt { display: grid; gap: .8rem; padding: .6rem 0 .2rem; border-top: 1px dotted var(--bronze); margin-top: .3rem; }
.dsa5-karte__tagform, .dsa5-karte__archivform { display: grid; gap: .3rem; }
.dsa5-karte__tagform label, .dsa5-karte__archivform label { font-weight: 600; font-size: .9rem; }
.dsa5-karte__tagform .dsa5-knopf, .dsa5-karte__archivform .dsa5-knopf { justify-self: start; }
.dsa5-karte textarea { width: 100%; resize: vertical; }
.dsa5-karte input[type="text"] { width: 100%; }
.dsa5-leer { color: var(--text); background: var(--feld-1); border: 1px dashed var(--bronze); border-radius: var(--radius); padding: 1rem 1.2rem; margin-top: 1rem; }
.dsa5-leer h2 { margin-top: 0; }
.dsa5-portal .dsa5-meldung:focus { outline: 2px dashed var(--fokus); outline-offset: 2px; }

/* Proben- und Würfeldialog (modales <dialog>, hängt am body) */
.dsa5-probe {
  color: var(--text); background: var(--feld-1); border: 2px solid var(--rahmen); outline: 1px solid var(--bronze); outline-offset: -5px;
  border-radius: var(--radius); padding: 0; width: min(36rem, calc(100vw - 24px)); max-height: calc(100vh - 24px);
  font-family: var(--schrift); line-height: 1.45; box-shadow: 0 20px 40px -20px rgba(0, 0, 0, .8);
}
.dsa5-probe::backdrop { background: rgba(14, 11, 10, .6); }
.dsa5-probe :focus-visible { outline: 3px solid var(--fokus); outline-offset: 2px; }
.dsa5-probe [tabindex="-1"]:focus { outline: none; }
.dsa5-probe__inhalt { padding: 1rem 1.2rem; }
.dsa5-probe__titel { font-family: var(--schrift-titel); font-size: 1.3rem; color: var(--akzent); margin: 0 0 .2rem; }
.dsa5-probe__werte { margin: 0 0 .6rem; color: var(--text-2); }
.dsa5-probe__stufen { border: 0; padding: 0; margin: 0 0 .4rem; display: flex; flex-wrap: wrap; gap: .2rem .8rem; }
.dsa5-probe__stufen legend { font-weight: 700; padding: 0; margin-bottom: .2rem; }
.dsa5-probe label { display: inline-flex; align-items: center; gap: .3rem; min-height: 32px; }
.dsa5-probe p > label[for] { display: flex; flex-wrap: wrap; }
.dsa5-probe__zahl, .dsa5-probe select, .dsa5-belohnung__notiz {
  font: inherit; color: var(--text); background: var(--karte); border: 1px solid var(--bronze); border-radius: var(--radius);
  padding: .3rem .5rem; min-height: var(--ziel); width: 5.5rem;
}
.dsa5-probe select { width: auto; }
.dsa5-probe .dsa5-belohnung__notiz { width: 100%; }
.dsa5-belohnung .dsa5-probe__zahl { width: 9rem; }
/* Lage im Probendialog und Dialoge „Zustand oder Status“, „Wirkung eintragen“ */
.dsa5-probe__lage { margin: .6rem 0 .2rem; padding: .4rem .6rem; border-left: 4px solid var(--fehler); background: var(--karte-2); border-radius: 3px; }
.dsa5-probe__lage p { margin: .2rem 0; }
.dsa5-probe__lage select { width: auto; }
.dsa5-probe__hinweise { margin: .2rem 0; padding-left: 1.1rem; font-size: .92rem; }
.dsa5-lage-dialog { width: min(40rem, calc(100vw - 2rem)); }
.dsa5-lage__titel { font-family: var(--schrift-titel); font-size: 1rem; margin: .8rem 0 .3rem; border-bottom: 1px dotted var(--bronze); }
.dsa5-lage__liste { list-style: none; margin: 0; padding: 0; }
.dsa5-lage__liste li { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .3rem .6rem; padding: .3rem 0; border-bottom: 1px dotted var(--bronze); }
.dsa5-lage__liste li > div { min-width: 0; flex: 1 1 16rem; }
.dsa5-lage__knoepfe { display: inline-flex; gap: .3rem; flex: none; }
.dsa5-probe .dsa5-lage__knoepfe .dsa5-knopf { min-width: 3rem; padding: .3rem .6rem; }
.dsa5-probe .dsa5-knopf.dsa5-knopf--zweit[aria-pressed="true"] { background: var(--akzent); color: var(--akzent-text); }
.dsa5-lage__frei { display: flex; flex-wrap: wrap; gap: .2rem 1rem; align-items: flex-end; }
.dsa5-lage__frei p { margin: 0; }
.dsa5-lage__mods { border: 1px dashed var(--bronze); border-radius: var(--radius); padding: .4rem .6rem; margin: .6rem 0 0; }
.dsa5-lage__mods legend { font-weight: 700; padding: 0 .2rem; }
.dsa5-lage__mod { display: flex; flex-wrap: wrap; gap: .3rem .5rem; align-items: center; margin-bottom: .4rem; }
.dsa5-lage__mod select { max-width: 14rem; }
/* Dialog „Gefährte hinzufügen / bearbeiten“ */
.dsa5-gefaehrte-dialog { width: min(46rem, calc(100vw - 2rem)); }
.dsa5-gd__zeile { display: flex; flex-wrap: wrap; gap: .4rem 1rem; margin: .4rem 0; }
.dsa5-gd__zeile label { flex-direction: column; align-items: flex-start !important; flex: 1 1 12rem; font-weight: 700; }
.dsa5-gd__zeile select { width: 100%; }
.dsa5-gd__raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr)); gap: .3rem .6rem; }
.dsa5-gd__zahl { flex-direction: column; align-items: flex-start !important; font-size: .9rem; }
.dsa5-gd__zahl .dsa5-probe__zahl { width: 100%; }
.dsa5-gd__tp { width: 6rem; font: inherit; color: var(--text); background: var(--karte); border: 1px solid var(--bronze); border-radius: var(--radius); padding: .3rem .5rem; min-height: var(--ziel); }
.dsa5-probe .dsa5-lage__mod input[type="text"]:not(.dsa5-gd__tp) { font: inherit; color: var(--text); background: var(--karte); border: 1px solid var(--bronze); border-radius: var(--radius); padding: .3rem .5rem; min-height: var(--ziel); max-width: 12rem; }
.dsa5-probe textarea.dsa5-belohnung__notiz { min-height: 4rem; }
.dsa5-probe__chance { font-weight: 700; margin: .6rem 0 .2rem; }
.dsa5-probe__routine { margin: 0 0 .4rem; color: var(--ok); }
.dsa5-probe__knoepfe, .dsa5-probe__fuss { display: flex; flex-wrap: wrap; gap: .5rem; margin: .7rem 0 0; }
.dsa5-probe__fuss { justify-content: flex-end; border-top: 1px dotted var(--bronze); padding-top: .6rem; }
.dsa5-probe .dsa5-knopf, .dsa5-probe button.dsa5-knopf {
  display: inline-block; background: var(--akzent); color: var(--akzent-text); border: 1px solid var(--bronze); border-radius: var(--radius);
  padding: .45rem 1rem; font: inherit; cursor: pointer; min-height: var(--ziel);
}
.dsa5-probe .dsa5-knopf.dsa5-knopf--zweit { background: transparent; color: inherit; }
.dsa5-probe .dsa5-knopf.dsa5-knopf--gefahr { background: transparent; color: var(--fehler); border-color: var(--fehler); }
.dsa5-probe .dsa5-knopf[aria-disabled="true"] { opacity: .5; cursor: progress; }
.dsa5-probe__eigene { display: flex; flex-wrap: wrap; gap: .4rem 1rem; align-items: flex-end; margin-top: .6rem; padding: .5rem .6rem; border: 1px dashed var(--bronze); border-radius: var(--radius); }
.dsa5-probe__eigen { flex-direction: column; align-items: flex-start !important; font-size: .9rem; }
.dsa5-probe__ergebnis { margin-top: .8rem; padding: .6rem .8rem; border-left: 5px solid var(--bronze); background: var(--karte-2); border-radius: 3px; }
.dsa5-probe__ergebnis h3 { margin: 0 0 .2rem; font-family: var(--schrift-titel); font-size: 1.25rem; }
.dsa5-probe__ergebnis p { margin: .2rem 0; }
.dsa5-probe__ergebnis--gelungen { border-left-color: var(--ok); }
.dsa5-probe__ergebnis--kritisch { border-left-color: var(--ok); box-shadow: inset 0 0 0 1px var(--ok); }
.dsa5-probe__ergebnis--misslungen { border-left-color: var(--warn); }
.dsa5-probe__ergebnis--patzer { border-left-color: var(--fehler); }
.dsa5-probe__wuerfel { display: flex; gap: .4rem; }
.dsa5-probe .wuerfel { display: inline-grid; place-items: center; width: 2.2rem; height: 2.2rem; border: 2px solid var(--rahmen); border-radius: 6px; background: var(--feld-1); font-weight: 700; font-variant-numeric: tabular-nums; }
.dsa5-probe .wuerfel--ueber { border-color: var(--warn); }
.dsa5-probe .wuerfel--eins { border-color: var(--ok); }
.dsa5-probe .wuerfel--zwanzig { border-color: var(--fehler); }
.dsa5-probe__schip { margin-top: .6rem; display: flex; flex-wrap: wrap; gap: .4rem .6rem; align-items: center; }
.dsa5-probe__schip p { flex: 1 1 100%; margin: 0; }
.dsa5-probe__schipwahl { border: 0; padding: 0; margin: 0; flex: 1 1 100%; display: flex; flex-wrap: wrap; gap: .2rem .8rem; }
.dsa5-probe__schipwahl legend { padding: 0; font-weight: 700; font-size: .9rem; }
.dsa5-becher__felder { display: flex; flex-wrap: wrap; gap: .5rem 1rem; }
.dsa5-becher__felder label { flex-direction: column; align-items: flex-start; }

/* Würfelbecher-Knopf: rund, unten rechts, über der mobilen AP-Leiste des Generators */
.dsa5-becher-knopf {
  position: fixed; right: 16px; bottom: 16px; z-index: 30; width: 3.2rem; height: 3.2rem; border-radius: 50%;
  background: var(--rahmen); color: var(--kopf-text, #f1e4c4); border: 2px solid var(--bronze); font-size: 1.8rem; line-height: 1;
  cursor: pointer; box-shadow: 0 8px 18px -8px rgba(0, 0, 0, .7);
}
.dsa5-becher-knopf:focus-visible { outline: 3px solid var(--fokus); outline-offset: 3px; }
@media (max-width: 960px) { body:has(#dsa5-ap-leiste) .dsa5-becher-knopf { bottom: 72px; } }
@media print { .dsa5-becher-knopf { display: none; } }

/* Eindrücken: Knöpfe geben beim Drücken leicht nach (Maus, Finger, Leertaste). Gesperrte Knöpfe (aria-disabled)
   bleiben ruhig – sie sollen nicht aussehen, als täten sie etwas. Breite oder textartige Knöpfe (Probe-Werte, Meldungen,
   Verweise) sinken nur, statt zu schrumpfen; sonst wirkt das Schrumpfen bei voller Breite zu stark. */
:is(.dsa5-portal, .dsa5-gen, .dsa5-probe) :is(button, a.dsa5-knopf, a.knopf-link), .dsa5-becher-knopf {
  transition: transform .09s ease-out, box-shadow .12s ease-out, filter .12s ease-out;
}
:is(.dsa5-portal, .dsa5-gen, .dsa5-probe) :is(button, a.dsa5-knopf, a.knopf-link):not([aria-disabled="true"], :disabled):active {
  transform: translateY(1px) scale(.97);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, .28);
  filter: brightness(.94);
  transition-duration: .04s;
}
:is(.dsa5-portal, .dsa5-gen) button:is(.probe-knopf, .verweis, .meldung):not([aria-disabled="true"], :disabled):active {
  transform: translateY(1px);
  box-shadow: none;
}
.dsa5-becher-knopf:active { transform: translateY(2px) scale(.94); box-shadow: 0 3px 8px -4px rgba(0, 0, 0, .7); transition-duration: .04s; }

@media (prefers-reduced-motion: reduce) {
  /* Ohne Übergänge; das Eindrücken selbst bleibt als sofortige Rückmeldung (kein Gleiten, kein Wackeln) */
  .dsa5-portal *, .dsa5-gen *, .dsa5-probe *, .dsa5-becher-knopf { transition: none !important; animation: none !important; }
}