/* Gestaltung der Hilfsseiten von DreamspaceRP.
   Farben, Radien, Schatten und Schriftstapel sind aus dem Stylesheet von
   dreamspace.at uebernommen, damit die Seiten nicht wie ein Fremdkoerper
   aussehen. Die Schrift liegt daneben und wird nicht von einem fremden
   Server geholt. */
/* Die Gestaltungsmerkmale sind aus dem Stylesheet von dreamspace.at
   uebernommen, damit diese Seite nicht wie ein Fremdkoerper aussieht.
   Die Schrift liegt daneben und wird nicht von einem fremden Server geholt. */
@font-face {
  font-family: "Chakra Petch";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("chakra-petch-400.woff2") format("woff2");
}
@font-face {
  font-family: "Chakra Petch";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("chakra-petch-600.woff2") format("woff2");
}

:root {
  --ds-bg: #1f2736;
  --ds-bg-dim: #0a0e16;
  --ds-panel: #3445668c;
  --ds-panel-hov: #3e5278b3;
  --ds-line: #ffffff0e;
  --ds-text: #e6e6e6;
  --ds-text-dim: #b4b9c3;
  --ds-accent: #e6a03c;
  --ds-accent-lit: #f5b964;
  --ds-accent-soft: #e6a03c29;
  --ds-accent-edge: #e6a03ca1;
  --ds-text-on-accent: #1c1406;
  --ds-radius-card: 10px;
  --ds-radius-mini: 6px;
  --ds-radius-pill: 999px;
  --ds-radius-bar: 4px;
  --ds-shadow-card: 0 2px 12px #0a0e1647;
  --ds-shadow-frame: 0 3px 24px #0a0e1673;
  --ds-line-body: 1.65;
  --ds-line-heading: 1.15;
  --ds-line-display: 1.05;
  --ds-content-narrow: 900px;
  --ds-font: "Chakra Petch", "Bahnschrift", "DIN Alternate", "Segoe UI", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(1200px 620px at 50% -12%, #34456640, transparent 70%),
    var(--ds-bg);
  color: var(--ds-text);
  font-family: var(--ds-font);
  font-size: 16px;
  line-height: var(--ds-line-body);
}

.site-bar {
  border-bottom: 1px solid var(--ds-line);
  background: #0a0e1659;
}
.site-bar__inner {
  max-width: var(--ds-content-narrow);
  margin: 0 auto;
  padding: 0.95rem 1.25rem;
  display: flex;
  align-items: center;
  gap: 0.7rem;
}
.site-mark {
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.site-mark__rp { color: var(--ds-accent); }
.site-bar__tag {
  margin-left: auto;
  padding: 0.2rem 0.65rem;
  border: 1px solid var(--ds-accent-edge);
  border-radius: var(--ds-radius-pill);
  background: var(--ds-accent-soft);
  color: var(--ds-accent-lit);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
}

main {
  max-width: var(--ds-content-narrow);
  margin: 0 auto;
  padding: 3rem 1.25rem 4.5rem;
}

.hero__title {
  margin: 0 0 0.9rem;
  font-size: clamp(1.9rem, 6vw, 3rem);
  font-weight: 600;
  line-height: var(--ds-line-display);
  letter-spacing: -0.015em;
}
.hero__title span { color: var(--ds-accent); }
.hero__lead {
  margin: 0 0 2.4rem;
  max-width: 44rem;
  color: var(--ds-text-dim);
  font-size: 1.08rem;
}

.card {
  margin-bottom: 1rem;
  padding: 1.35rem 1.5rem;
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-radius-card);
  background: var(--ds-panel);
  box-shadow: var(--ds-shadow-card);
}
.card__title {
  margin: 0 0 0.7rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 1.02rem;
  font-weight: 600;
  line-height: var(--ds-line-heading);
}
.card__title::before {
  content: "";
  width: 0.55rem;
  height: 0.55rem;
  flex: none;
  border-radius: 2px;
  background: var(--ds-accent);
}
.card p { margin: 0 0 0.7rem; }
.card p:last-child { margin-bottom: 0; }

.list { margin: 0; padding: 0; list-style: none; }
.list li {
  position: relative;
  margin-bottom: 0.5rem;
  padding-left: 1.15rem;
  color: var(--ds-text-dim);
}
.list li:last-child { margin-bottom: 0; }
.list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 0.4rem;
  height: 2px;
  border-radius: var(--ds-radius-bar);
  background: var(--ds-accent-edge);
}

code {
  padding: 0.12rem 0.4rem;
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-radius-mini);
  background: #0a0e1673;
  color: var(--ds-accent-lit);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.86em;
}

.site-foot {
  max-width: var(--ds-content-narrow);
  margin: 0 auto;
  padding: 1.3rem 1.25rem 2.5rem;
  border-top: 1px solid var(--ds-line);
  color: var(--ds-text-dim);
  font-size: 0.85rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.1rem;
}
.site-foot a { color: var(--ds-accent); text-decoration: none; }
.site-foot a:hover { color: var(--ds-accent-lit); text-decoration: underline; }