/* abgeleitet aus dmn_website/web/site.css @1e7b093 */

:root {
  --dark: #0b0b0d;
  --card: #14151a;
  --red: #e11d2e;
  --white: #ffffff;
  --text: #b9bcc4;
  --muted: #8f939c;
  /* markengrau aus dem lockup; auf dem dunklen grund nur als hairline lesbar, nie als text */
  --line: #3f4249;

  --ink: #101114;
  --edge: #25272d;
  /* --red kommt auf --dark nur auf 4.1:1, fuer kleinen roten text reicht das nicht */
  --red-hi: #f0414f;
  /* nur fuer den livestatus, kein zweiter akzent */
  --green: #3fb27f;

  --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", Consolas, monospace;

  --ease: cubic-bezier(.23, 1, .32, 1);
  --stick: 2.75rem;
}

@media (min-width: 48rem) {
  :root { --stick: 3.5rem; }
}

*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  background: var(--dark);
  color-scheme: dark;
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  margin: 0;
  color: var(--text);
  font: 1rem/1.65 var(--sans);
}

/* korn liegt ueber allem, sonst sehen die flaechen glatter aus als der grund */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 90;
  background: url(/static/grain-1.svg);
  opacity: .05;
  pointer-events: none;
}

::selection {
  background: rgb(225 29 46 / .32);
  color: var(--white);
}

main { flex: 1; }

.wrap {
  width: 100%;
  max-width: 72rem;
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 4vw, 2.5rem);
}

a {
  color: var(--white);
  text-decoration-line: underline;
  text-decoration-color: var(--red);
  text-decoration-thickness: 1px;
  text-underline-offset: .2em;
  transition: text-decoration-color 150ms ease-out, color 150ms ease-out;
}

a:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 3px;
  border-radius: 2px;
}

@media (hover: hover) and (pointer: fine) {
  a:hover { text-decoration-color: var(--white); }
}

.ic {
  flex: none;
  width: 1em;
  height: 1em;
}

.vh {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip {
  position: absolute;
  top: .5rem;
  left: .75rem;
  z-index: 100;
  padding: .5rem .875rem;
  border-radius: 6px;
  background: var(--white);
  color: var(--dark);
  font-weight: 600;
  text-decoration: none;
  transform: translateY(-160%);
}

.skip:focus { transform: none; }

/* header */

.top {
  position: sticky;
  /* mobil rutscht die markenzeile weg, die navigation bleibt oben stehen */
  top: -3.25rem;
  z-index: 50;
  border-bottom: 1px solid var(--edge);
  background: rgb(11 11 13 / .94);
}

.top-in {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: .625rem;
  height: 3.25rem;
  color: var(--white);
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: -.01em;
  text-decoration: none;
  transition: transform 160ms var(--ease);
}

.brand img {
  width: 1.75rem;
  height: 1.75rem;
}

.slash {
  margin: 0 .18em;
  color: var(--red-hi);
  font-weight: 500;
}

.soft {
  color: var(--text);
  font-weight: 500;
}

.nav {
  width: 100%;
  border-top: 1px solid var(--edge);
}

.nav ul {
  display: flex;
  justify-content: space-between;
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav form { display: contents; }

.nav a,
.nav button {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding-inline: .25rem;
  color: var(--text);
  font-size: .9375rem;
  text-decoration: none;
  transition: color 150ms ease-out, transform 160ms var(--ease);
}

/* abmelden ist ein formular, soll aber aussehen wie die links daneben */
.nav button {
  margin: 0;
  border: 0;
  background: none;
  font-family: inherit;
  line-height: inherit;
  cursor: pointer;
}

.nav button:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 3px;
  border-radius: 2px;
}

.nav a::after,
.nav button::after {
  content: "";
  position: absolute;
  inset-inline: .25rem;
  bottom: .5rem;
  height: 1px;
  background: var(--red);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 200ms var(--ease);
}

.nav a[aria-current]::after { transform: none; }

@media (max-width: 47.99rem) {
  .nav a,
  .nav button {
    padding-inline: 0;
    font-size: .875rem;
  }

  .nav a::after,
  .nav button::after { inset-inline: 0; }
}

@media (min-width: 48rem) {
  .top { top: 0; }

  .top-in {
    flex-wrap: nowrap;
    height: 3.5rem;
  }

  .nav {
    width: auto;
    border: 0;
  }

  /* der letzte navpunkt schliesst mit seiner textkante am container ab, nicht mit dem padding */
  .nav ul {
    gap: .125rem;
    margin-inline-end: -.75rem;
  }

  .nav a,
  .nav button {
    min-height: 2.25rem;
    padding-inline: .75rem;
    border-radius: 6px;
  }

  .nav a::after,
  .nav button::after {
    inset-inline: .75rem;
    bottom: .3rem;
  }
}

@media (hover: hover) and (pointer: fine) {
  .nav a:hover,
  .nav button:hover { color: var(--white); }

  .nav a:hover::after,
  .nav button:hover::after { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .nav a::after,
  .nav button::after {
    transform: none;
    opacity: 0;
    transition: opacity 150ms ease-out;
  }

  .nav a[aria-current]::after { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) and (hover: hover) and (pointer: fine) {
  .nav a:hover::after,
  .nav button:hover::after { opacity: 1; }
}

.lang {
  display: flex;
  align-items: center;
  /* die textkante von EN schliesst am container ab, nicht die trefferflaeche */
  margin-inline-end: -.875rem;
  color: var(--muted);
  font: 500 .8125rem/1 var(--mono);
}

.lang a {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.75rem;
  min-height: 2.75rem;
  text-decoration: none;
  transition: color 150ms ease-out, transform 160ms var(--ease);
}

.lang a[aria-current] { color: var(--white); }

.lang a[aria-current]::after {
  content: "";
  position: absolute;
  inset-inline: .875rem;
  bottom: .625rem;
  height: 1px;
  background: var(--red);
}

@media (min-width: 48rem) {
  .nav { margin-inline-start: auto; }

  .lang {
    margin-inline-start: 1rem;
    margin-inline-end: -.75rem;
  }

  .lang::before {
    content: "";
    width: 1px;
    height: 1rem;
    margin-inline-end: .25rem;
    background: var(--edge);
  }

  .lang a {
    min-width: 2.5rem;
    min-height: 2.25rem;
  }

  .lang a[aria-current]::after {
    inset-inline: .75rem;
    bottom: .3rem;
  }
}

@media (max-width: 47.99rem) {
  .lang-d { display: none; }
}

@media (min-width: 48rem) {
  .lang-m { display: none; }
}

@media (hover: hover) and (pointer: fine) {
  .lang a:hover { color: var(--white); }
}

.brand:active,
.nav a:active,
.nav button:active,
.lang a:active,
.go:active,
.foot a:active { transform: scale(.97); }

/* kopf der seiten */

.page { padding-block: 2rem 1rem; }

.crumb {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin: 0 0 1.25rem;
  color: var(--muted);
  font-size: .875rem;
}

.crumb a {
  color: var(--text);
  text-decoration-color: var(--muted);
}

.crumb span { overflow-wrap: anywhere; }

.crumb .sep { color: var(--red); }

.now h1 {
  display: flex;
  align-items: flex-start;
  gap: .875rem;
  margin: 0;
  color: var(--white);
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.03em;
  text-wrap: balance;
}

/* bei zwei zeilen soll der punkt an der ersten zeile stehen, nicht in der mitte.
   .6em ist die mitte der versalhoehe in der ersten zeile, abzueglich des halben punkts */
.now h1 .led {
  width: .625rem;
  height: .625rem;
  margin-top: calc(.6em - .3125rem);
}

.now .name {
  display: block;
  overflow-wrap: anywhere;
}

.stand {
  margin: .625rem 0 0;
  color: var(--muted);
  font: .8125rem/1.5 var(--mono);
  font-variant-numeric: tabular-nums;
}

.now .svc-s { margin-top: .75rem; }

@media (min-width: 48rem) {
  .now h1 { font-size: 2.5rem; }
}

@media (min-width: 64rem) {
  .page { padding-block: 3rem 1.5rem; }
}

/* abschnitte */

.blk {
  padding-block: 2.5rem 0;
  scroll-margin-top: var(--stick);
}

.blk h2 {
  margin: 0;
  color: var(--white);
  font-size: 1.375rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.02em;
  text-wrap: balance;
}

.sec-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: .5rem 2rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--edge);
}

.sec-head p {
  margin: 0;
  color: var(--muted);
  font-size: .875rem;
}

.sec-head .mono {
  font-family: var(--mono);
  font-size: .8125rem;
  font-variant-numeric: tabular-nums;
}

.empty {
  margin: 0;
  padding-block: 1rem;
  border-bottom: 1px solid var(--edge);
  color: var(--muted);
}

@media (min-width: 64rem) {
  .blk { padding-block: 3.5rem 0; }
  .blk h2 { font-size: 1.625rem; }
}

/* livestatus: text steht immer daneben, die farbe ist nur zusatz */

.led {
  flex: none;
  display: inline-block;
  width: .5rem;
  height: .5rem;
  border-radius: 50%;
  background: var(--muted);
}

.led[data-state="up"] { background: var(--green); }
.led[data-state="down"] { background: var(--red-hi); }

.led[data-state="paused"] {
  background: none;
  box-shadow: inset 0 0 0 1.5px var(--muted);
}

/* --line kommt auf --dark nur auf 2:1, der rahmen verschwindet dann fast; --muted wie beim knopf */
.kind,
.tag {
  flex: none;
  padding: 0 .4em;
  border: 1px solid var(--muted);
  border-radius: 4px;
  color: var(--text);
  font: 500 .75rem/1.5 var(--mono);
  letter-spacing: 0;
}

.tag.live {
  border-color: var(--red);
  color: var(--red-hi);
}

/* legende ueber der liste */

.legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .25rem 1rem;
}

.legend span {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
}

/* etwas breiter als ein segment, sonst liest sich der stummel wie ein komma */
.sw {
  width: .3125rem;
  height: .875rem;
  background: var(--line);
}

/* hoehen im verhaeltnis wie die balken: 18 zu 24, damit der zustand nicht nur an der farbe haengt */
.sw-up {
  align-self: flex-end;
  height: .65rem;
  margin-bottom: .3rem;
  background: var(--muted);
}

.sw-down { background: var(--red-hi); }

.sw-none {
  align-self: flex-end;
  height: .1875rem;
  margin-bottom: .3rem;
}

/* zielliste */

.svc {
  margin: 0;
  padding: 0;
  list-style: none;
}

.svc > li {
  display: grid;
  gap: .75rem 2rem;
  padding-block: 1rem 1.125rem;
  border-bottom: 1px solid var(--edge);
}

.svc-h {
  position: relative;
  display: grid;
  gap: .25rem;
  min-width: 0;
}

.svc-n {
  display: flex;
  align-items: baseline;
  gap: .75rem;
  margin: 0;
  color: var(--white);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.4;
}

.svc-n a {
  min-width: 0;
  text-decoration-color: transparent;
  overflow-wrap: anywhere;
}

/* die ganze kopfzeile ist trefferflaeche fuer den link, nicht nur der name */
.svc-n a::after {
  content: "";
  position: absolute;
  inset: -.5rem 0;
}

.svc-n .kind { margin-inline-start: auto; }

@media (hover: hover) and (pointer: fine) {
  .svc-n a:hover { text-decoration-color: var(--red); }
}

.svc-s {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .25rem .5rem;
  margin: 0;
  color: var(--muted);
  font-size: .875rem;
  line-height: 1.5;
}

.svc-s[data-state="up"] .st { color: var(--text); }
.svc-s[data-state="down"] .st { color: var(--red-hi); }

.svc-s .fm {
  flex-basis: 100%;
  font-family: var(--mono);
  font-size: .8125rem;
  font-variant-numeric: tabular-nums;
}

/* schmal bricht die spielerzahl ohnehin um, ein punkt am zeilenanfang saehe verloren aus */
@media (min-width: 48rem) {
  .now .svc-s .fm { flex-basis: auto; }

  .now .svc-s .fm::before {
    content: "·";
    content: "·" / "";
    margin-inline-end: .5rem;
  }
}

.now .svc-s .kind { margin-inline-start: .25rem; }

.hours {
  display: block;
  width: 100%;
  height: 1.75rem;
}

.hours rect { fill: currentColor; }

.bar-up { color: var(--muted); }
.bar-down { color: var(--red-hi); }
.bar-none { color: var(--line); }

/* 90 segmente auf 320 px: die luecke von einem viertel schritt liest sich dort als zaun.
   der strich in der fuellfarbe holt die zellen wieder zusammen und bleibt dank
   non-scaling-stroke unabhaengig davon, wie weit das svg gestreckt wird */
@media (max-width: 47.99rem) {
  .hours.dense rect {
    stroke: currentColor;
    stroke-width: .5px;
    vector-effect: non-scaling-stroke;
  }
}

@media (hover: hover) and (pointer: fine) {
  .hours rect:hover { color: var(--white); }
}

.ups {
  display: flex;
  flex-wrap: wrap;
  gap: .125rem 1rem;
  margin: 0;
  font: .75rem/1.5 var(--mono);
  font-variant-numeric: tabular-nums;
}

.ups div {
  display: flex;
  gap: .375rem;
}

.ups dt { color: var(--muted); }

.ups dd {
  margin: 0;
  color: var(--white);
}

@media (min-width: 64rem) {
  .svc > li {
    grid-template-columns: minmax(0, 16rem) minmax(0, 1fr) auto;
    align-items: center;
  }

  .hours { height: 2rem; }

  .ups {
    display: grid;
    grid-template-columns: repeat(3, 4.5rem);
    gap: 0;
    text-align: end;
  }

  .ups div {
    display: grid;
    gap: 0;
  }

  .ups dt { font-size: .6875rem; }
  .ups dd { font-size: .875rem; }
}

/* kennzahlen auf der detailseite */

.ups.wide {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  margin-top: 1.75rem;
  border-block: 1px solid var(--edge);
  text-align: start;
}

.ups.wide div {
  display: grid;
  gap: .125rem;
  padding: .75rem 1rem;
}

.ups.wide div:nth-child(odd) { padding-inline-start: 0; }
.ups.wide div:nth-child(even) { border-inline-start: 1px solid var(--edge); }
.ups.wide div:nth-child(n+3) { border-top: 1px solid var(--edge); }

.ups.wide dt {
  font: .8125rem/1.5 var(--sans);
}

.ups.wide dd { font-size: 1rem; }

@media (min-width: 48rem) {
  .ups.wide { grid-template-columns: repeat(4, minmax(0, 1fr)); }

  .ups.wide div:nth-child(n) {
    padding-inline-start: 1rem;
    border-top: 0;
    border-inline-start: 1px solid var(--edge);
  }

  .ups.wide div:first-child {
    padding-inline-start: 0;
    border-inline-start: 0;
  }
}

/* zeitraum, wie die stufen der score-skizze auf der website */

.range { margin-top: 1.5rem; }

.range ul {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  border-bottom: 1px solid var(--edge);
  list-style: none;
}

.range li + li { border-inline-start: 1px solid var(--edge); }

.range a {
  display: flex;
  align-items: center;
  min-height: 2.75rem;
  padding: .5rem 1rem;
  color: var(--muted);
  font-size: .875rem;
  text-decoration: none;
  transition: color 150ms ease-out;
}

.range a[aria-current] {
  box-shadow: inset 0 -2px var(--red);
  color: var(--white);
}

.range a:focus-visible { outline-offset: -2px; }

@media (min-width: 48rem) {
  .range ul { grid-template-columns: repeat(3, 10rem); }
}

@media (hover: hover) and (pointer: fine) {
  .range a:hover { color: var(--white); }
}

/* diagramme */

.lat { margin: 1.25rem 0 0; }

.lat svg:not(.hours) {
  display: block;
  width: 100%;
  height: 10rem;
  overflow: visible;
}

.lat path {
  fill: none;
  stroke: var(--white);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

/* --edge ist als flaechentrenner gedacht und geht im diagramm unter, die linien liegen
   wie die draehte der architektur-skizze auf --line */
.lat .grid {
  stroke: var(--line);
  vector-effect: non-scaling-stroke;
}

.lat .max { stroke-dasharray: 4 4; }

.lat .hours { height: 2rem; }

.axis {
  display: flex;
  justify-content: space-between;
  margin: .5rem 0 0;
  color: var(--muted);
  font: .75rem/1.5 var(--mono);
}

/* vorfaelle */

.inc {
  margin: 0;
  padding: 0;
  list-style: none;
}

.inc li {
  display: grid;
  gap: .125rem 2rem;
  padding-block: .875rem;
  border-bottom: 1px solid var(--edge);
}

.inc p { margin: 0; }

.inc-t {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .25rem .75rem;
  font-size: .9375rem;
  font-weight: 600;
}

.inc-t a {
  text-decoration-color: transparent;
  overflow-wrap: anywhere;
}

@media (hover: hover) and (pointer: fine) {
  .inc-t a:hover { text-decoration-color: var(--red); }
}

.inc-m {
  color: var(--muted);
  font: .8125rem/1.6 var(--mono);
  font-variant-numeric: tabular-nums;
}

.inc-m .dur::before {
  content: "·";
  content: "·" / "";
  margin-inline: .5rem;
}

@media (min-width: 48rem) {
  .inc li {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: baseline;
  }
}

/* so funktioniert's */

.how {
  display: grid;
  gap: 2rem;
  padding-top: 1.5rem;
}

.arch { margin: 0; }

.arch svg {
  display: block;
  width: 100%;
  max-width: 42.5rem;
  height: auto;
}

.arch .arch-h { display: none; }

@media (min-width: 48rem) {
  .arch .arch-h { display: block; }
  .arch .arch-v { display: none; }
}

.arch rect {
  fill: var(--card);
  stroke: var(--line);
}

.arch text {
  fill: var(--text);
  font: 13px var(--mono);
}

.arch .sub {
  fill: var(--muted);
  font-size: 12px;
}

/* schmal wird das svg verkleinert, 12px waeren dann zu klein */
.arch .arch-v text { font-size: 13px; }

.arch .wire {
  fill: none;
  stroke: var(--line);
}

.arch figcaption {
  margin-top: .75rem;
  color: var(--muted);
  font-size: .875rem;
  text-wrap: pretty;
}

.tech-list { margin: 0; }

.tech-list > div {
  display: grid;
  gap: .25rem;
  padding-block: .875rem;
  border-bottom: 1px solid var(--edge);
}

.tech-list > div:first-child { padding-top: 0; }

.tech-list dt {
  color: var(--muted);
  font-size: .875rem;
}

.tech-list dd {
  max-width: 65ch;
  margin: 0;
  color: var(--white);
  font-size: .9375rem;
  line-height: 1.6;
  text-wrap: pretty;
}

@media (min-width: 40rem) and (max-width: 63.99rem) {
  .tech-list > div {
    grid-template-columns: 10rem minmax(0, 1fr);
    align-items: baseline;
  }
}

@media (min-width: 64rem) {
  .how {
    grid-template-columns: minmax(0, 42.5rem) minmax(0, 1fr);
    gap: 3rem;
    align-items: start;
  }
}

/* hinweise */

.note {
  max-width: 42rem;
  margin: 1.25rem 0 0;
  padding: .75rem 1rem;
  border-inline-start: 2px solid var(--line);
  border-radius: 0 6px 6px 0;
  background: var(--card);
  font-size: .9375rem;
  text-wrap: pretty;
}

.note.warn {
  display: flex;
  align-items: flex-start;
  gap: .375rem;
  border-inline-start-color: var(--red);
}

.note .ic {
  margin-top: .3em;
  color: var(--red-hi);
}

/* 404 */

.lost {
  display: grid;
  align-items: center;
  padding-block: 3rem 5rem;
}

.lost-code {
  margin: 0 0 1rem;
  color: var(--edge);
  font: 700 clamp(6rem, 22vw, 15rem)/.85 var(--mono);
  letter-spacing: -.06em;
}

.lost h1 {
  margin: 0;
  color: var(--white);
  font-size: clamp(2rem, 1.2rem + 3.5vw, 3.75rem);
  line-height: 1.05;
  letter-spacing: -.035em;
  text-wrap: balance;
}

.lead {
  max-width: 36rem;
  margin: 1.75rem 0 0;
  font-size: clamp(1.0625rem, 1rem + .35vw, 1.25rem);
  line-height: 1.6;
  text-wrap: pretty;
}

.cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem 2rem;
  margin: 2.25rem 0 0;
}

.go {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  min-height: 2.75rem;
  color: var(--white);
  font-weight: 600;
  text-decoration-thickness: 2px;
  text-underline-offset: .35em;
  transition: text-decoration-color 150ms ease-out, color 150ms ease-out, transform 160ms var(--ease);
}

.go.quiet {
  color: var(--text);
  font-weight: 500;
  /* --line waere hier unter 3:1, die linie muss als einziges signal fuer den link reichen */
  text-decoration-color: var(--muted);
  text-decoration-thickness: 1px;
}

@media (hover: hover) and (pointer: fine) {
  .go.quiet:hover { color: var(--white); }
}

@media (min-width: 64rem) {
  .lost-in {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 4rem;
  }

  .lost-code { margin: 0; }
}

/* admin: panel und formular */

.sk {
  overflow: hidden;
  border: 1px solid var(--edge);
  border-radius: 14px;
  background: var(--card);
  box-shadow: 0 1px 0 rgb(255 255 255 / .03) inset, 0 40px 80px -48px rgb(2 2 6 / .95);
}

.sk-bar {
  display: flex;
  align-items: center;
  gap: .625rem;
  margin: 0;
  padding: .75rem 1.25rem;
  border-bottom: 1px solid var(--edge);
  color: var(--white);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.4;
}

.sk-bar img {
  width: 1.125rem;
  height: 1.125rem;
}

.frm { max-width: 44rem; }

.frm.login {
  max-width: 24rem;
  margin: 1rem auto 2rem;
}

.frm-in {
  display: grid;
  gap: 1.25rem;
  padding: 1.25rem;
}

.frm-2,
.frm-3 {
  display: grid;
  gap: 1.25rem;
}

@media (min-width: 40rem) {
  .frm-in { padding: 1.5rem; }
  .frm-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .frm-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

fieldset {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.grp {
  padding-top: 1rem;
  border-top: 1px solid var(--edge);
}

.grp legend {
  float: left;
  width: 100%;
  padding: 0;
  margin-bottom: .75rem;
  color: var(--muted);
  font-size: .875rem;
}

.grp legend + * { clear: both; }

.field {
  display: grid;
  align-content: start;
  gap: .375rem;
  min-width: 0;
}

.field label,
.field legend {
  padding: 0;
  color: var(--white);
  font-size: .9375rem;
  font-weight: 500;
}

.field legend { margin-bottom: .375rem; }

.field input {
  width: 100%;
  min-height: 2.75rem;
  margin: 0;
  padding: .625rem .75rem;
  border: 1px solid var(--muted);
  border-radius: 8px;
  background: var(--dark);
  color: var(--white);
  font: inherit;
  color-scheme: dark;
  transition: border-color 150ms ease-out;
}

.field input:focus-visible {
  border-color: var(--red);
  outline: 2px solid var(--red);
  outline-offset: 1px;
}

.field [aria-invalid] { border-color: var(--red-hi); }

.hint {
  margin: 0;
  color: var(--muted);
  font-size: .8125rem;
  line-height: 1.45;
}

.err {
  display: flex;
  align-items: flex-start;
  gap: .375rem;
  margin: 0;
  color: var(--red-hi);
  font-size: .875rem;
  line-height: 1.45;
}

.err .ic { margin-top: .12em; }

.opts {
  display: grid;
  border: 1px solid var(--edge);
  border-radius: 8px;
  background: var(--ink);
}

.opts label {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: .75rem;
  padding: .75rem 1rem;
  color: var(--text);
  font-size: .875rem;
  font-weight: 400;
  line-height: 1.5;
  cursor: pointer;
}

.opts label + label { border-top: 1px solid var(--edge); }

.opts b {
  display: block;
  color: var(--white);
  font: 500 .8125rem/1.6 var(--mono);
}

/* die radios stehen in einem .field und erben sonst hoehe und innenabstand der textfelder */
.opts input,
.check input {
  align-self: start;
  width: 1.125rem;
  height: 1.125rem;
  min-height: 0;
  margin: .2rem 0 0;
  padding: 0;
  accent-color: var(--red);
  color-scheme: dark;
}

.opts input:focus-visible,
.check input:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 2px;
}

.check {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: .25rem .75rem;
  font-size: .9375rem;
  line-height: 1.55;
}

.check label { color: var(--white); }
.check .hint { grid-column: 2; }

.send-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .75rem 1.25rem;
  padding-top: .25rem;
}

.send {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: 2.75rem;
  padding: .625rem 1.125rem;
  border: 0;
  border-radius: 8px;
  background: var(--red);
  color: var(--white);
  font: 600 .9375rem/1.2 var(--sans);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: transform 160ms var(--ease);
}

/* roter ring auf rotem knopf waere nicht zu sehen */
.send:focus-visible {
  outline: 2px solid var(--white);
  outline-offset: 3px;
}

.send:active { transform: scale(.97); }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  margin: 0;
  padding: .5rem .875rem;
  border: 1px solid var(--muted);
  border-radius: 8px;
  background: var(--card);
  color: var(--text);
  font: 500 .875rem/1.2 var(--sans);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: transform 160ms var(--ease), border-color 150ms ease, color 150ms ease;
}

.btn:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 3px;
  border-radius: 8px;
}

.btn:active { transform: scale(.97); }

.btn:disabled {
  border-color: var(--line);
  color: var(--muted);
  cursor: not-allowed;
  transform: none;
}

.btn.warn {
  border-color: var(--red);
  color: var(--red-hi);
}

@media (hover: hover) and (pointer: fine) {
  .field input:hover { border-color: var(--text); }
  .field input:focus-visible:hover { border-color: var(--red); }

  .btn:enabled:hover,
  a.btn:hover,
  summary.btn:hover {
    border-color: var(--text);
    color: var(--white);
  }

  .btn.warn:enabled:hover {
    border-color: var(--red-hi);
    color: var(--white);
  }
}

/* admin: liste */

.adm-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2rem;
}

.adm-head h1 {
  margin: 0;
  color: var(--white);
  font-size: 1.75rem;
  line-height: 1.15;
  letter-spacing: -.03em;
}

.acts {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}

.acts form { display: contents; }

.adm-cols { display: none; }

.adm {
  margin: 1.5rem 0 0;
  padding: 0;
  border-top: 1px solid var(--edge);
  list-style: none;
}

.adm li {
  display: grid;
  gap: .5rem;
  padding-block: 1rem;
  border-bottom: 1px solid var(--edge);
}

.adm p { margin: 0; }

.adm-n {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .25rem .625rem;
  color: var(--white);
  font-weight: 600;
  line-height: 1.4;
}

.adm-n a {
  text-decoration-color: var(--line);
  overflow-wrap: anywhere;
}

@media (hover: hover) and (pointer: fine) {
  .adm-n a:hover { text-decoration-color: var(--red); }
}

.adm-a {
  display: grid;
  gap: .125rem;
  min-width: 0;
  color: var(--muted);
  font-size: .8125rem;
  line-height: 1.5;
}

.adm-a code {
  color: var(--text);
  font: .8125rem/1.5 var(--mono);
  overflow-wrap: anywhere;
}

.adm-e {
  color: var(--red-hi);
  font-family: var(--mono);
  overflow-wrap: anywhere;
}

.adm-x {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: .375rem;
}

.adm-x form { display: contents; }

/* vier knoepfe passen mobil nicht in eine zeile, zwei gleich breite spalten statt einem einzelnen umbruch */
@media (max-width: 39.99rem) {
  .adm-x {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .adm-x .btn { width: 100%; }
}

.del summary { list-style: none; }
.del summary::-webkit-details-marker { display: none; }

.del[open] summary {
  border-color: var(--text);
  color: var(--white);
}

.del form { display: block; }
.del .btn.warn { margin-top: .375rem; }

/* sobald die knopfreihe nebeneinander steht, kommt die bestaetigung daneben statt darunter,
   sonst waechst die zeile beim aufklappen und die liste darunter springt */
@media (min-width: 40rem) {
  .del {
    display: flex;
    align-items: flex-start;
    gap: .375rem;
  }

  .del .btn.warn { margin-top: 0; }
}

.none {
  display: grid;
  justify-items: start;
  gap: 1rem;
  margin-top: 1.5rem;
  padding-block: 1.5rem;
  border-block: 1px solid var(--edge);
}

.none p { margin: 0; }

@media (min-width: 64rem) {
  .adm-cols,
  .adm li {
    display: grid;
    grid-template-columns: 9.5rem minmax(0, 1fr) minmax(0, 1.2fr) 23rem;
    column-gap: 1.5rem;
  }

  .adm-cols {
    margin-top: 1.5rem;
    padding-bottom: .5rem;
    color: var(--muted);
    font-size: .8125rem;
  }

  .adm-cols span:last-child,
  .adm-x { justify-content: flex-end; }

  .adm-cols span:last-child { text-align: end; }

  .adm { margin-top: 0; }

  .adm li { align-items: start; }

  .adm-s {
    grid-column: 1;
    grid-row: 1;
  }

  .adm-n {
    grid-column: 2;
    grid-row: 1;
  }

  .adm-a {
    grid-column: 3;
    grid-row: 1;
  }

  .adm-x {
    grid-column: 4;
    grid-row: 1;
  }

  .adm .btn {
    min-height: 2.25rem;
    padding: .375rem .75rem;
  }
}

/* footer */

.foot {
  margin-top: 4rem;
  border-top: 1px solid var(--edge);
  color: var(--muted);
  font-size: .875rem;
}

.foot-in {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .5rem 2rem;
  padding-block: 1.5rem 2.5rem;
}

.foot p { margin: 0; }

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

.foot a {
  display: inline-block;
  padding-block: .625rem;
  color: var(--text);
  text-decoration-color: transparent;
  transition: color 150ms ease-out, text-decoration-color 150ms ease-out, transform 160ms var(--ease);
}

@media (hover: hover) and (pointer: fine) {
  .foot a:hover {
    color: var(--white);
    text-decoration-color: var(--red);
  }
}