:root {
  --grube: #14121F;
  --gitter: #241F35;
  --platte: #1C1930;
  --kante: #0B0918;
  --schrift: #F2EFE6;
  --leise: #9A93B5;
  --i: #29C6D9;
  --o: #E8C63A;
  --t: #A24BD1;
  --s: #4CC46A;
  --z: #E0453F;
  --l: #E8873A;
  --j: #4B6FE0;
}
* { box-sizing: border-box; }
html { background: var(--grube); }
body {
  margin: 0;
  padding: 3rem 1rem 5rem;
  color: var(--schrift);
  font: 15px/1.6 ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
  background:
    repeating-linear-gradient(0deg, var(--gitter) 0 1px, transparent 1px 28px),
    repeating-linear-gradient(90deg, var(--gitter) 0 1px, transparent 1px 28px),
    var(--grube);
}
main { max-width: 29rem; margin: 0 auto; }
main.weit { max-width: 48rem; }

.marke { margin-bottom: 2rem; }
.steine { display: flex; gap: 4px; margin-bottom: .7rem; }
.steine i {
  width: 15px; height: 15px; display: block;
  border: 2px solid var(--kante);
  animation: fallen .5s cubic-bezier(.3, 1.4, .5, 1) both;
}
.steine i:nth-child(1) { background: var(--i); animation-delay: .00s; }
.steine i:nth-child(2) { background: var(--o); animation-delay: .07s; }
.steine i:nth-child(3) { background: var(--t); animation-delay: .14s; }
.steine i:nth-child(4) { background: var(--s); animation-delay: .21s; }
.steine i:nth-child(5) { background: var(--z); animation-delay: .28s; }
.steine i:nth-child(6) { background: var(--l); animation-delay: .35s; }
@keyframes fallen { from { transform: translateY(-34px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .steine i { animation: none; } }

h1 {
  font-size: 1.6rem; font-weight: 700; margin: 0;
  letter-spacing: .22em; text-transform: uppercase;
}
h1.klein { font-size: 1.15rem; letter-spacing: .12em; }
h2 { font-size: 1rem; margin: 2.2rem 0 .6rem; letter-spacing: .06em; }
p.leise { color: var(--leise); margin: .35rem 0 0; font-size: .9rem; }
a { color: var(--i); }

.platte {
  background: var(--platte);
  border: 3px solid var(--kante);
  box-shadow: 6px 6px 0 var(--kante);
  padding: 1.4rem;
  margin-top: 1.6rem;
}

label { display: block; margin: 1rem 0 .3rem; font-size: .82rem; color: var(--leise); }
input, select {
  width: 100%; padding: .62rem .7rem; font: inherit;
  color: var(--schrift); background: var(--grube);
  border: 3px solid var(--gitter); border-radius: 0;
}
input:focus, select:focus { outline: none; border-color: var(--i); }
input::placeholder { color: #5C567A; }

.feld { position: relative; }
.feld input { padding-right: 5.2rem; }
.werkzeuge {
  position: absolute; top: 0; right: 0; height: 100%;
  display: flex; align-items: center; gap: 2px; padding-right: 4px;
}
.werkzeuge button {
  margin: 0; padding: 0; width: 34px; height: 34px;
  display: grid; place-items: center;
  background: transparent; border: 2px solid transparent;
  color: var(--leise); cursor: pointer; box-shadow: none;
}
.werkzeuge button:hover { color: var(--schrift); }
.werkzeuge button:focus-visible { border-color: var(--i); outline: none; }
.werkzeuge button:active { transform: none; }
.werkzeuge svg { width: 20px; height: 20px; display: block; }

button {
  margin-top: 1.4rem; padding: .6rem 1.2rem;
  font: inherit; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--kante); background: var(--i);
  border: 3px solid var(--kante); border-radius: 0;
  box-shadow: 5px 5px 0 var(--kante); cursor: pointer;
}
button:active { transform: translate(5px, 5px); box-shadow: none; }
button:focus-visible { outline: 3px solid var(--o); outline-offset: 3px; }
button.leise { background: transparent; color: var(--schrift); border-color: var(--gitter); box-shadow: none; }
button.leise:active { transform: none; }
button[disabled] { background: var(--gitter); color: var(--leise); box-shadow: none; cursor: not-allowed; }
button[disabled]:active { transform: none; }

.meldung { margin-top: 1.1rem; padding: .55rem .7rem; font-size: .88rem; border-left: 5px solid var(--gitter); background: #191630; }
.meldung.fehler { border-color: var(--z); color: #FFB3B0; }
.meldung.gut { border-color: var(--s); color: #A9EDBB; }

.warnung { border-left: 5px solid var(--o); }
.warnung strong { color: var(--o); }

.code {
  font-size: 1.2rem; letter-spacing: .16em; line-height: 1.9;
  color: var(--o); word-break: break-all; margin: .4rem 0 1rem;
}

.haken { display: flex; gap: .6rem; align-items: flex-start; margin-top: 1.1rem; font-size: .88rem; }
.haken input { width: auto; margin-top: .3rem; accent-color: var(--i); }

table { width: 100%; border-collapse: collapse; margin-top: .6rem; font-size: .88rem; }
th, td { text-align: left; padding: .5rem .45rem; border-bottom: 2px solid var(--gitter); }
th { color: var(--leise); font-weight: 400; font-size: .78rem; letter-spacing: .06em; }
td.offen { color: var(--o); }
td.fertig { color: var(--s); }

.kopf { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.kopf button { margin-top: 0; }
.verborgen { display: none !important; }

@font-face{font-family:"IBM Plex Mono";src:url("/schrift/IBMPlexMono-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url("/schrift/IBMPlexMono-Medium.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
.wortmarke{display:flex;align-items:center;gap:.5rem;letter-spacing:0;text-transform:none}
.wortmarke svg{flex:none}
.wortmarke{margin-bottom:1.6rem}
.wortmarke + .steine{margin-top:-1.2rem}
.steine{margin-top:8px;margin-bottom:1.4rem}
.wortmarke span{font-family:"IBM Plex Mono",monospace;font-weight:500;letter-spacing:-.03em}