:root {
  color-scheme: dark;
  --obsidian: #0B0B0C;
  --anthrazit: #18181B;
  --graphit: #242428;
  --gold: #C9A227;
  --bordeaux: #7A1F2B;
  --text: #F3F4F6;
  --text-grau: #A1A1AA;
  --linie: #2E2E33;
  --raum: 1rem;
  --spalte: 1180px;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: "Segoe UI", system-ui, sans-serif;
  color: var(--text);
  background: var(--obsidian);
  line-height: 1.5;
}

img,
svg {
  max-width: 100%;
  height: auto;
}

a {
  color: var(--gold);
}

a:visited {
  color: var(--gold);
}

.shell {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.mast {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--raum);
  padding: var(--raum);
  background: var(--anthrazit);
  color: var(--text);
}

.marke {
  color: var(--gold);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-decoration: none;
}

.marke:visited {
  color: var(--gold);
}

.rolle {
  margin: 0;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  color: var(--text-grau);
}

.buehne {
  width: min(100% - (2 * var(--raum)), var(--spalte));
  max-width: var(--spalte);
  margin: 0 auto;
  padding: calc(var(--raum) * 1.5) 0 calc(var(--raum) * 2);
  flex: 1;
}

.einleitung {
  max-width: 38rem;
}

.einleitung h1,
.blatt h1,
.tafel h1 {
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  line-height: 1.15;
  margin: 0 0 0.75rem;
}

.leiste {
  display: flex;
  flex-wrap: wrap;
  gap: var(--raum);
  margin-top: calc(var(--raum) * 1.5);
}

.knopf,
button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  height: 44px;
  min-height: 44px;
  max-width: 100%;
  border: 0;
  border-radius: 999px;
  padding: 0 1.1rem;
  background: var(--gold);
  color: var(--obsidian);
  font: inherit;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
}

a.knopf:not(.knopf-still),
a.knopf:not(.knopf-still):link,
a.knopf:not(.knopf-still):visited,
.knopf:not(.knopf-still),
button {
  background: var(--gold);
  color: var(--obsidian);
  font-weight: 650;
  text-align: center;
}

.knopf:not(.knopf-still):hover,
button:hover {
  background: #CCA834;
  color: var(--obsidian);
}

.knopf:not(.knopf-still):focus-visible,
button:focus-visible {
  outline: 2px solid var(--gold);
}

.knopf-still {
  background: transparent;
  color: var(--gold);
  outline: 1px solid var(--linie);
}

.knopf-still:hover {
  background: var(--graphit);
  color: var(--text);
}

form:has(input[name="aktion"][value="loeschen"]) button,
form:has(input[name="aktion"][value="deaktivieren"]) button,
form:has(input[name="aktion"][value="beenden"]) button,
form:has(input[name="aktion"][value="zurueckziehen"]) button {
  background: var(--bordeaux);
  color: var(--text);
  font-weight: inherit;
}

form:has(input[name="aktion"][value="loeschen"]) button:hover,
form:has(input[name="aktion"][value="deaktivieren"]) button:hover,
form:has(input[name="aktion"][value="beenden"]) button:hover,
form:has(input[name="aktion"][value="zurueckziehen"]) button:hover {
  background: var(--graphit);
  color: var(--text);
}

form:has(input[name="aktion"][value="loeschen"]) button:focus-visible,
form:has(input[name="aktion"][value="deaktivieren"]) button:focus-visible,
form:has(input[name="aktion"][value="beenden"]) button:focus-visible,
form:has(input[name="aktion"][value="zurueckziehen"]) button:focus-visible {
  outline: revert;
}

.blatt,
.tafel {
  width: 100%;
  max-width: 34rem;
  min-width: 0;
  background: var(--anthrazit);
  border: 1px solid var(--linie);
  border-radius: 1rem;
  padding: calc(var(--raum) * 1.5);
}

.blatt:hover,
.tafel:hover {
  background: var(--graphit);
}

form {
  display: grid;
  gap: var(--raum);
  width: 100%;
  min-width: 0;
}

label {
  margin-top: 0;
  font-size: 0.92rem;
  color: var(--text);
}

input,
textarea,
select {
  width: 100%;
  max-width: 100%;
  border: 1px solid var(--linie);
  border-radius: 0.6rem;
  padding: 0.7rem 0.8rem;
  font: inherit;
  color: var(--text);
  background: var(--graphit);
}

textarea {
  min-height: calc(var(--raum) * 6);
  resize: vertical;
}

input[type="checkbox"],
input[type="radio"] {
  width: auto;
  max-width: none;
  padding: 0;
  justify-self: start;
}

::placeholder {
  color: var(--text-grau);
}

button {
  justify-self: start;
}

.hinweis {
  color: var(--text-grau);
  font-size: 0.92rem;
}

.wege {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin: 0 0 1.5rem;
  padding: 0;
  list-style: none;
}

.wege a {
  text-decoration: none;
  font-weight: 650;
  color: var(--text);
}

.wege a:visited {
  color: var(--text);
}

.wege a:hover {
  color: var(--gold);
}

.leer {
  margin: 0;
  padding: var(--raum) 0;
  color: var(--text-grau);
}

.leer-karte {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 24px;
  border: 1px solid var(--linie);
  border-radius: 1rem;
  background: var(--anthrazit);
  text-align: center;
}

.leer-karte:hover {
  background: var(--anthrazit);
}

.leer-zeichen {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid var(--gold);
  border-radius: 999px;
  background: rgba(201, 162, 39, 0.14);
  color: var(--gold);
}

.leer-zeichen svg {
  width: 1.15rem;
  height: 1.15rem;
}

.leer-karte h2,
.leer-karte p {
  margin: 0;
}

.leer-karte h2 {
  font-size: 1.15rem;
  line-height: 1.25;
}

.leer-karte p {
  max-width: 28rem;
  color: var(--text-grau);
}

.raster {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--raum);
}

.raster > .blatt,
.raster > .tafel {
  max-width: none;
  height: 100%;
}

table {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  border-collapse: collapse;
  -webkit-overflow-scrolling: touch;
}

th,
td {
  text-align: left;
  padding: 0.55rem var(--raum);
  border-bottom: 1px solid var(--linie);
  font-size: 0.92rem;
  color: var(--text);
}

.fuss {
  padding: var(--raum);
  color: var(--text-grau);
  font-size: 0.85rem;
}

@media (min-width: 600px) {
  .mast {
    flex-direction: row;
    align-items: center;
  }

  .raster {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 900px) {
  .buehne {
    padding-top: calc(var(--raum) * 2);
    padding-bottom: calc(var(--raum) * 3);
  }

  .buehne.gast-start,
  .buehne.mitglied-start,
  .buehne.admin-start {
    padding-top: 24px;
  }

  .raster {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.gast-start,
.mitglied-start,
.admin-start {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.mitglied-start .wege,
.admin-start .wege {
  margin: 0;
}

.held {
  position: relative;
  width: 100%;
  max-width: none;
  align-self: stretch;
  box-sizing: border-box;
  padding: 24px;
  border: 1px solid var(--linie);
  border-radius: 1.25rem;
  background:
    radial-gradient(120% 90% at 0% 0%, rgba(201, 162, 39, 0.18), transparent 58%),
    var(--anthrazit);
}

.held .held-zeichen {
  margin: 0 0 24px;
  color: var(--gold);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.16em;
}

.held h1 {
  margin: 0;
  font-size: clamp(2.1rem, 8vw, 3.5rem);
  font-weight: 650;
  letter-spacing: -0.03em;
  line-height: 1.05;
}

.held h1 span {
  display: block;
}

.held p {
  max-width: 36rem;
  margin: 24px 0 0;
  color: var(--text-grau);
}

.gast-start .leiste,
.mitglied-start .leiste,
.admin-start .leiste {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  width: 100%;
  max-width: none;
  margin: 0;
  gap: 16px;
}

.gast-start .leiste,
.mitglied-start .leiste {
  margin: 24px 0 0;
}

.gast-start .leiste .knopf,
.mitglied-start .leiste .knopf,
.admin-start .leiste .knopf {
  display: grid;
  align-items: center;
  justify-items: stretch;
  flex: 1 1 10rem;
  width: auto;
  min-width: min(100%, 10rem);
  max-width: 13rem;
  height: auto;
  min-height: 44px;
  padding: 0 0.75rem;
  border: 1px solid transparent;
  border-radius: 999px;
  white-space: normal;
  text-align: center;
}

.admin-start .leiste .knopf {
  max-width: none;
}

.gast-start .leiste .knopf-still,
.mitglied-start .leiste .knopf-still,
.admin-start .leiste .knopf-still {
  outline: none;
  border-color: var(--linie);
}

.gast-start .raster,
.mitglied-start .raster,
.admin-start .raster {
  gap: 24px;
}

.admin-start .karte {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.admin-start a.karte {
  color: inherit;
  text-decoration: none;
}

.admin-start a.karte:visited {
  color: inherit;
}

@media (hover: hover) and (pointer: fine) {
  .admin-start a.karte:hover {
    border-color: var(--gold);
    transform: translateY(-2px);
  }
}

.admin-start .karte h2 {
  margin: 0 0 16px;
  color: var(--text-grau);
  font-size: 0.92rem;
  font-weight: 650;
}

.admin-start .zahl {
  margin: 0;
  padding-top: 0;
  color: var(--text);
  font-size: 1.75rem;
  font-weight: 650;
  line-height: 1.1;
}

.admin-start .heute {
  width: 100%;
  box-sizing: border-box;
  padding: 24px;
  border: 1px solid var(--linie);
  border-radius: 1.25rem;
  background:
    radial-gradient(120% 90% at 0% 0%, rgba(201, 162, 39, 0.18), transparent 58%),
    var(--anthrazit);
}

.admin-start .heute h2 {
  margin: 0 0 16px;
  color: var(--gold);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.16em;
}

.admin-start .heute ul {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.admin-start .heute li {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.admin-start .heute-siegel {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border: 1px solid var(--gold);
  border-radius: 999px;
  background: rgba(201, 162, 39, 0.14);
  color: var(--gold);
}

.admin-start .heute-siegel svg {
  width: 0.85rem;
  height: 0.85rem;
}

.admin-start .heute-titel {
  min-width: 0;
  color: var(--text);
  font-size: 0.95rem;
}

.admin-start .heute-wert {
  margin-left: auto;
  color: var(--gold);
  font-size: 1.05rem;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}

.mitglied-start a.karte {
  display: block;
  color: var(--text);
  text-decoration: none;
}

.mitglied-start a.karte:visited {
  color: var(--text);
}

.karte h2 {
  margin: 0 0 16px;
  font-size: 1.05rem;
}

.karte p {
  margin: 0;
  color: var(--text-grau);
}

.siegel {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  margin-bottom: 24px;
  border: 1px solid var(--gold);
  border-radius: 999px;
  background: rgba(201, 162, 39, 0.14);
  color: var(--gold);
}

.siegel svg {
  width: 1rem;
  height: 1rem;
}

.gast-zugang {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: min(100%, 28rem);
  margin-inline: auto;
}

.gast-zugang .zugang-karte {
  max-width: none;
  padding: 24px;
  background: var(--anthrazit);
}

.gast-zugang .zugang-karte:hover {
  background: var(--anthrazit);
}

.gast-zugang form {
  gap: 24px;
}

.gast-zugang .feld {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.gast-zugang .feld label,
.gast-zugang .zustimmung {
  color: var(--text-grau);
  font-size: 0.85rem;
}

.gast-zugang input[type="text"],
.gast-zugang input[type="password"] {
  height: 44px;
  min-height: 44px;
  padding: 0 0.8rem;
}

.gast-zugang input:focus,
.gast-zugang input:focus-visible {
  outline: 2px solid var(--gold);
  border-color: var(--gold);
}

.gast-zugang .zustimmung {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin-top: -8px;
  color: var(--text);
}

.gast-zugang form button {
  width: 100%;
}

.gast-zugang .hinweis {
  margin: 24px 0 0;
}

.gast-zugang .hinweis a,
.gast-zugang .hinweis a:visited {
  color: var(--text-grau);
  font-weight: 500;
  text-decoration: none;
}

.gast-zugang .hinweis a:hover {
  color: var(--gold);
}

.auktion-seite {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.auktion-seite .wege,
.auktion-seite .einleitung h1,
.auktion-seite .einleitung p,
.auktion-seite .zurueck,
.auktion-held h1,
.auktion-held p,
.auktion-held .held-zeichen,
.auktion-karte h2,
.auktion-werte p,
.gebot-karte p,
.auktion-block h2,
.auktion-block p,
.auktion-verlauf h2,
.auktion-verlauf h3 {
  margin: 0;
}

.auktion-seite .einleitung {
  max-width: none;
}

.auktion-raster {
  gap: 24px;
  align-items: stretch;
}

.auktion-karte,
.gebot-karte,
.auktion-seite > .blatt,
.auktion-seite > .held {
  max-width: none;
  height: 100%;
}

.auktion-karte,
.gebot-karte,
.auktion-block {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.auktion-karte {
  flex-direction: row;
  align-items: flex-start;
}

.auktion-karte:hover,
.gebot-karte:hover,
.auktion-block:hover {
  background: var(--anthrazit);
}

.auktion-karte .siegel {
  flex: 0 0 auto;
  margin-bottom: 0;
}

.auktion-koerper {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 24px;
  min-width: 0;
  height: 100%;
}

.auktion-kopf,
.auktion-werte,
.auktion-verlauf,
.auktion-formular {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
}

.auktion-kategorie,
.auktion-meta {
  color: var(--text-grau);
}

.auktion-karte .knopf {
  margin-top: auto;
}

.abzeichen {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  margin: 0;
  padding: 0.2rem 0.75rem;
  border: 1px solid var(--gold);
  border-radius: 999px;
  color: var(--gold);
  font-size: 0.78rem;
  font-weight: 650;
  letter-spacing: 0.04em;
}

.auktion-held {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
}

.auktion-held h1 {
  font-size: clamp(1.8rem, 4vw, 2.6rem);
}

.auktion-hoechst {
  color: var(--gold);
  font-size: 1.35rem;
  font-weight: 650;
}

.auktion-formular form {
  gap: 16px;
}

.gebot-karte {
  justify-content: space-between;
  min-height: 9.5rem;
}

.angebot-seite {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.angebot-seite .wege,
.angebot-seite .einleitung h1,
.angebot-seite .zurueck,
.angebot-seite .leer,
.angebot-held h1,
.angebot-held p,
.angebot-karte h2,
.angebot-karte p,
.angebot-block h2,
.angebot-block p,
.angebot-seite .meldung {
  margin: 0;
}

.angebot-seite .einleitung {
  max-width: none;
}

.angebot-raster {
  gap: 24px;
  align-items: stretch;
}

.angebot-karte,
.angebot-seite > .blatt,
.angebot-seite > .held {
  max-width: none;
  height: 100%;
}

.angebot-karte,
.angebot-block {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.angebot-karte:hover,
.angebot-block:hover {
  background: var(--anthrazit);
}

.angebot-karte .siegel {
  margin-bottom: 0;
}

.angebot-koerper {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  min-width: 0;
  height: 100%;
}

.angebot-kategorie,
.angebot-meta {
  color: var(--text-grau);
}

.angebot-preis {
  color: var(--gold);
  font-size: 1.35rem;
  font-weight: 650;
}

.angebot-karte .knopf {
  margin-top: auto;
}

.angebot-held {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
}

.angebot-held h1 {
  font-size: clamp(1.8rem, 4vw, 2.6rem);
}

.angebot-buchung form {
  gap: 24px;
}

.angebot-seite .meldung {
  padding: 24px;
  border: 1px solid var(--linie);
  border-radius: 1rem;
  background: var(--anthrazit);
}

.angebot-seite .meldung-erfolg {
  border-color: var(--gold);
  color: var(--gold);
  background: rgba(201, 162, 39, 0.12);
}

.angebot-seite .meldung-fehler {
  border-color: var(--bordeaux);
  color: var(--text);
  background: rgba(122, 31, 43, 0.35);
}

.dialog-seite {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.dialog-seite .wege,
.dialog-seite .held h1,
.dialog-seite .held p,
.dialog-seite .gespraech h2,
.dialog-seite .gespraech p,
.dialog-seite .anfrage-karte h2,
.dialog-seite .anfrage-karte p,
.dialog-seite .hinweis {
  margin: 0;
}

.dialog-seite .held {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.dialog-seite .held .held-zeichen {
  color: var(--gold);
}

.dialog-seite .raster {
  grid-template-columns: 1fr;
  gap: 16px;
}

.dialog-seite .blatt {
  max-width: none;
}

.dialog-seite .gespraech,
.dialog-seite .anfrage-karte {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  padding: 16px;
  border: 1px solid rgba(201, 162, 39, 0.35);
  background:
    radial-gradient(120% 80% at 100% 0%, rgba(201, 162, 39, 0.16), transparent 55%),
    var(--anthrazit);
}

.dialog-seite .gespraech:hover,
.dialog-seite .anfrage-karte:hover,
.dialog-seite .anfrage-formular:hover {
  background:
    radial-gradient(120% 80% at 100% 0%, rgba(201, 162, 39, 0.16), transparent 55%),
    var(--anthrazit);
}

.dialog-seite .anfrage-formular {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 16px;
  border: 1px solid rgba(201, 162, 39, 0.35);
  background: var(--anthrazit);
}

.dialog-seite .anfrage-formular form,
.dialog-seite .gespraech form,
.dialog-seite .anfrage-inhalt form {
  gap: 16px;
}

.gespraech-kopf {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  width: 100%;
}

.gespraech-meta {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

.dialog-seite .avatar {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--gold);
  border-radius: 999px;
  background: rgba(201, 162, 39, 0.14);
  color: var(--gold);
  font-weight: 700;
}

.dialog-seite .gespraech h2,
.dialog-seite .anfrage-karte h2 {
  font-size: 1.2rem;
  line-height: 1.2;
}

.letzte-liste .letzte-zeile {
  display: none;
}

.letzte-liste .letzte-zeile:last-child {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.dialog-seite .zeit,
.dialog-seite .anfrage-datum {
  color: var(--gold);
  font-size: 0.78rem;
}

.dialog-seite .ungelesen-badge {
  display: none;
  margin-left: auto;
}

.dialog-seite .gespraech:has(.ist-ungelesen) .ungelesen-badge {
  display: inline-flex;
}

.dialog-seite .anfrage-kategorie {
  color: var(--text-grau);
}

.nachrichten,
.anfrage-inhalt {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}

.dialog-seite .anfrage-inhalt {
  display: none;
}

.dialog-seite .anfrage-karte:target .anfrage-inhalt {
  display: flex;
}

.nachricht {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: min(100%, 32rem);
}

.nachricht.eigen {
  align-items: flex-end;
  margin-left: auto;
}

.nachricht.fremd {
  align-items: flex-start;
  margin-right: auto;
}

.sprechblase {
  margin: 0;
  padding: 16px;
  border: 1px solid var(--linie);
  border-radius: 1rem;
  background: var(--obsidian);
  color: var(--text);
}

.nachricht.eigen .sprechblase {
  border-radius: 1rem 1rem 0.35rem 1rem;
}

.nachricht.fremd .sprechblase {
  border-radius: 1rem 1rem 1rem 0.35rem;
}

@media (min-width: 600px) {
  .dialog-seite .raster {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 900px) {
  .dialog-seite .raster {
    grid-template-columns: 1fr;
  }
}

.konto-seite {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.konto-seite .wege {
  margin: 0;
}

.konto-seite > .blatt,
.konto-seite > .held {
  max-width: none;
}

.konto-held {
  display: flex;
  align-items: center;
  gap: 24px;
}

.konto-held h1,
.konto-held p,
.konto-karte h2,
.konto-karte p {
  margin: 0;
}

.konto-held-text {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.konto-held-text p {
  color: var(--text-grau);
}

.konto-avatar {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 4.5rem;
  height: 4.5rem;
  margin: 0;
  border: 1px solid var(--gold);
  border-radius: 999px;
  background: rgba(201, 162, 39, 0.14);
  color: var(--gold);
}

.konto-avatar span {
  display: block;
  font-size: 0;
  line-height: 1;
}

.konto-avatar span::first-letter {
  font-size: 1.5rem;
  font-weight: 700;
  text-transform: uppercase;
}

.konto-karte {
  display: flex;
  flex-direction: column;
  gap: 16px;
  background:
    radial-gradient(120% 80% at 100% 0%, rgba(201, 162, 39, 0.12), transparent 55%),
    var(--anthrazit);
}

.konto-karte:hover {
  background:
    radial-gradient(120% 80% at 100% 0%, rgba(201, 162, 39, 0.12), transparent 55%),
    var(--anthrazit);
}

.konto-karte dl {
  display: grid;
  grid-template-columns: minmax(8rem, 12rem) minmax(0, 1fr);
  gap: 12px 16px;
  margin: 0;
}

.konto-karte dt {
  color: var(--text-grau);
}

.konto-karte dd {
  margin: 0;
}

.konto-status {
  display: inline-flex;
  align-items: center;
  min-height: 1.6rem;
  padding: 0 0.7rem;
  border: 1px solid #22c55e;
  border-radius: 999px;
  background: rgba(34, 197, 94, 0.16);
  color: #4ade80;
  font-size: 0.85rem;
  font-weight: 650;
}

.konto-sicherheit {
  border-color: rgba(201, 162, 39, 0.45);
  background:
    radial-gradient(120% 90% at 0% 0%, rgba(201, 162, 39, 0.2), transparent 58%),
    var(--anthrazit);
}

.konto-sicherheit:hover {
  background:
    radial-gradient(120% 90% at 0% 0%, rgba(201, 162, 39, 0.2), transparent 58%),
    var(--anthrazit);
}

.konto-warn {
  border-color: rgba(122, 31, 43, 0.85);
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(122, 31, 43, 0.32), transparent 58%),
    var(--anthrazit);
}

.konto-warn:hover {
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(122, 31, 43, 0.32), transparent 58%),
    var(--anthrazit);
}

.konto-warn-titel {
  color: var(--text);
  font-weight: 650;
}

.code-seite {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.code-seite .wege {
  margin: 0;
}

.code-seite .schnell form {
  width: auto;
}

.code-karte {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  background:
    radial-gradient(90% 80% at 100% 0%, rgba(201, 162, 39, 0.14), transparent 55%),
    var(--anthrazit);
}

.code-karte:hover {
  background:
    radial-gradient(90% 80% at 100% 0%, rgba(201, 162, 39, 0.14), transparent 55%),
    var(--graphit);
}

.code-karte h2 {
  margin: 0;
  font-family: ui-monospace, "Cascadia Code", "Segoe UI Mono", monospace;
  font-size: 1.2rem;
  letter-spacing: 0.08em;
}

.code-meta {
  margin: 0;
  color: var(--text-grau);
}

.abzeichen-frei {
  border-color: #3F8F62;
  color: #8FDBB0;
  background: rgba(63, 143, 98, 0.16);
}

.abzeichen-verwendet {
  border-color: #5C5C66;
  color: var(--text-grau);
  background: rgba(161, 161, 170, 0.12);
}

.abzeichen-deaktiviert {
  border-color: var(--bordeaux);
  color: #E7B4BB;
  background: rgba(122, 31, 43, 0.28);
}

.code-aktionen {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  width: 100%;
  margin-top: auto;
}

.code-aktionen form {
  width: auto;
}

.audit-seite {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.audit-seite .wege {
  margin: 0;
}

.audit-liste {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.audit-karte {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 16px;
  row-gap: 6px;
  align-items: start;
  border-color: rgba(201, 162, 39, 0.45);
  background:
    radial-gradient(90% 90% at 100% 0%, rgba(201, 162, 39, 0.18), transparent 56%),
    var(--anthrazit);
}

.audit-karte:hover {
  background:
    radial-gradient(90% 90% at 100% 0%, rgba(201, 162, 39, 0.18), transparent 56%),
    var(--graphit);
}

.audit-karte .siegel {
  grid-row: 1 / span 4;
  margin: 0;
}

.audit-karte h2 {
  margin: 0;
  font-size: 1.2rem;
  letter-spacing: -0.02em;
}

.audit-karte p {
  margin: 0;
}

.audit-benutzer,
.audit-zeit {
  color: var(--text-grau);
}

.audit-details {
  color: var(--text);
  font-family: ui-monospace, "Cascadia Code", "Segoe UI Mono", monospace;
  letter-spacing: 0.03em;
  overflow-wrap: anywhere;
}

.audit-karte-warn {
  border-color: rgba(122, 31, 43, 0.85);
  background:
    radial-gradient(90% 90% at 100% 0%, rgba(122, 31, 43, 0.28), transparent 56%),
    var(--anthrazit);
}

.audit-karte-warn:hover {
  background:
    radial-gradient(90% 90% at 100% 0%, rgba(122, 31, 43, 0.28), transparent 56%),
    var(--graphit);
}

.audit-karte-warn .siegel {
  border-color: #E7B4BB;
  color: #E7B4BB;
  background: rgba(122, 31, 43, 0.28);
}

.anfragen-admin {
  gap: 24px;
}

.anfragen-admin .anfragen-kennzahlen {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  align-items: stretch;
}

.anfragen-admin .anfrage-kennzahl {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  height: 100%;
  margin: 0;
  padding: 24px;
}

.anfragen-admin .anfrage-kennzahl h2,
.anfragen-admin .anfrage-kennzahl p {
  margin: 0;
}

.anfragen-admin .anfrage-kennzahl h2 {
  color: var(--text-grau);
  font-size: 0.92rem;
  font-weight: 650;
}

.anfragen-admin .anfrage-kennzahl .zahl {
  margin-top: 16px;
  color: var(--text);
  font-size: 1.75rem;
  font-weight: 650;
  line-height: 1.1;
}

.anfragen-admin .anfrage-kennzahl .zahl-gold {
  color: var(--gold);
}

.anfragen-admin .anfrage-kennzahl .zahl + p {
  margin-top: 8px;
  color: var(--text-grau);
}

.anfragen-admin .raster {
  gap: 24px;
}

.anfragen-admin .anfrage-karte,
.anfragen-admin .leer-karte {
  padding: 24px;
}

.anfragen-admin .leer-karte .knopf-still {
  margin-top: 8px;
}

@media (min-width: 900px) {
  .anfragen-admin .anfragen-kennzahlen {
    grid-template-columns: 1fr 1fr;
  }
}

.anfragen-seite .raster {
  gap: 24px;
}

.anfragen-seite .anfrage-karte,
.anfragen-seite .anfrage-formular {
  gap: 24px;
  padding: 24px;
}

.anfragen-seite .anfrage-formular form,
.anfragen-seite .anfrage-karte form {
  gap: 24px;
}

.anfragen-seite .anfrage-text {
  margin: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.anfragen-seite .anfrage-mitglied {
  margin: 0;
  color: var(--text-grau);
}

.anfragen-seite .anfrage-antwort {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  margin: 0;
  padding: 24px;
  border: 1px solid rgba(201, 162, 39, 0.35);
  border-radius: 1rem;
  background: var(--obsidian);
}

.anfragen-seite .anfrage-antwort h3,
.anfragen-seite .anfrage-antwort p {
  margin: 0;
}

.anfragen-seite .anfrage-antwort h3 {
  color: var(--gold);
  font-size: 0.92rem;
  font-weight: 650;
  letter-spacing: 0.06em;
}

.anfragen-seite textarea {
  min-height: 8.5rem;
}

.anfragen-seite textarea[name="nachricht"] {
  min-height: 10.5rem;
}