: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-color: var(--grube);
  background-image:
    linear-gradient(to right, #322B4E 0 11px, transparent 11px),
    linear-gradient(to bottom, #322B4E 0 11px, transparent 11px),
    radial-gradient(circle at 1px 1px, #2A2440 1px, transparent 1.6px);
  background-size: 130px 130px, 130px 130px, 26px 26px;
  background-position: -1px -1px, -1px -1px, 0 0;
}
main { max-width: 29rem; margin: 0 auto; }
main.weit { max-width: 48rem; }

.marke { margin-bottom: 2rem; }
.wortmarke {
  display: flex; align-items: center; gap: .6rem; margin-bottom: .9rem;
  font-size: 1.15rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--schrift);
}
.wortmarke .logo { width: 34px; height: 34px; flex: none; color: var(--i); }
.wortmarke { flex-wrap: wrap; }
.wortmarke .steine { display: flex; gap: 3px; flex-basis: 100%; margin-top: .55rem; }
.wortmarke .steine i {
  width: 11px; height: 11px; display: block; border: 2px solid var(--kante);
}
.wortmarke .steine i:nth-child(1) { background: var(--i); }
.wortmarke .steine i:nth-child(2) { background: var(--o); }
.wortmarke .steine i:nth-child(3) { background: var(--t); }
.wortmarke .steine i:nth-child(4) { background: var(--s); }
.wortmarke .steine i:nth-child(5) { background: var(--z); }
.wortmarke .steine i:nth-child(6) { background: var(--l); }
.haus { display: block; width: 168px; height: 84px; margin-bottom: .9rem; }
.haus .wand { fill: var(--platte); stroke: var(--gitter); stroke-width: 2; }
.haus .boden { fill: none; stroke: var(--gitter); stroke-width: 2; }
.haus .tuer { fill: #2A2544; }
.haus .tuer.hell { fill: var(--o); }
.haus .tuer.ziel { fill: var(--z); }
.haus .schacht { fill: #171430; stroke: var(--gitter); stroke-width: 2; }
.haus .kabine { fill: var(--i); animation: fahren 1.5s cubic-bezier(.4, 0, .2, 1) .3s both; }
@keyframes fahren { from { transform: translateY(-22px); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) { .haus .kabine { 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: .55rem 1rem;
  font: inherit; font-weight: 600; letter-spacing: .04em;
  color: var(--kante); background: var(--i);
  border: 1px solid rgba(0, 0, 0, .35); border-radius: 4px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .45);
  cursor: pointer;
  transition: filter .12s ease, transform .06s ease, box-shadow .12s ease;
}
button:hover { filter: brightness(1.08); }
button:active { transform: translateY(1px); filter: brightness(.9); box-shadow: 0 0 0 rgba(0, 0, 0, 0); }
button:focus-visible { outline: 2px solid var(--o); outline-offset: 2px; }
button.leise {
  background: transparent; color: var(--schrift);
  border-color: var(--gitter); box-shadow: none;
}
button.leise:hover { background: #221E3B; filter: none; }
button[disabled] { background: var(--gitter); color: var(--leise); box-shadow: none; cursor: not-allowed; }
button[disabled]:hover { filter: none; }
button[disabled]:active { transform: none; }

.aus-knopf {
  width: 100%; font: inherit; padding: .62rem .7rem; text-align: left;
  color: var(--schrift); background: var(--grube);
  border: 3px solid var(--gitter); border-radius: 0;
  margin-top: 0; box-shadow: none; letter-spacing: 0; font-weight: 400;
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  cursor: pointer;
}
.aus-knopf:hover { filter: none; }
.aus-knopf:active { transform: none; }
.aus-knopf:focus { outline: none; border-color: var(--i); }
.aus-knopf svg { width: 15px; height: 15px; flex: none; color: var(--leise); }
.aus-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aus-sym { display: inline-flex; align-items: center; flex: none; }
.aus-sym svg { width: 20px; height: 20px; }
.aus-knopf .aus-sym { margin-right: .5rem; }

.aus-panel {
  position: fixed; z-index: 1200;
  background: var(--platte); border: 3px solid var(--kante);
  box-shadow: 6px 6px 0 var(--kante); padding: 4px;
  display: flex; flex-direction: column; min-height: 0;
}
.aus-liste { overflow-y: auto; overscroll-behavior: contain; min-height: 0; }
.aus-sieb {
  width: 100%; margin: 0 0 4px; padding: .45rem .5rem; font: inherit;
  color: var(--schrift); background: var(--grube);
  border: 2px solid var(--gitter); border-radius: 0; flex: none;
}
.aus-sieb:focus { outline: none; border-color: var(--i); }
.aus-opt {
  display: block; width: 100%; text-align: left; font: inherit;
  padding: .5rem .55rem; margin: 0; border: 0; border-radius: 0;
  background: none; color: var(--schrift); box-shadow: none;
  letter-spacing: 0; font-weight: 400; cursor: pointer;
}
.aus-opt:hover, .aus-opt.hell { background: var(--gitter); filter: none; }
.aus-opt:active { transform: none; }
.aus-opt.an { color: var(--i); }
.aus-opt.mit-sym { display: flex; align-items: center; gap: .6rem; }
.aus-opt[hidden] { display: 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); }

.leaflet-tooltip.hnr {
  background: none; border: 0; box-shadow: none; padding: 0;
  color: var(--schrift); font: 600 11px/1 ui-monospace, "SF Mono", Menlo, monospace;
  text-shadow: 0 0 3px var(--grube), 0 0 3px var(--grube), 0 0 2px var(--grube);
  white-space: nowrap;
}
.leaflet-tooltip.hnr::before { display: none; }

.kopf { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.kopf button { margin-top: 0; }
.verborgen { display: none !important; }
.haus-schnitt { display: block; width: 100%; height: auto; }
.haus-schnitt .wand { fill: var(--platte); stroke: var(--kante); stroke-width: 3; }
.haus-schnitt .boden { fill: none; stroke: var(--gitter); stroke-width: 2; }
.haus-schnitt .schacht { fill: var(--grube); stroke: var(--gitter); stroke-width: 2; }
.haus-schnitt .ebene {
  fill: var(--leise); font: 400 9px ui-monospace, Menlo, monospace;
  text-anchor: middle; letter-spacing: .08em;
}
.haus-schnitt .nr {
  fill: var(--leise); font: 400 9px ui-monospace, Menlo, monospace; text-anchor: middle;
}
.haus-schnitt .tuer { cursor: pointer; }
.haus-schnitt .tuer .blatt {
  fill: var(--gitter); stroke: var(--kante); stroke-width: 2;
  transition: fill .12s ease;
}
.haus-schnitt .tuer .knauf { fill: var(--leise); }
.haus-schnitt .tuer:hover .blatt { stroke: var(--schrift); }
.haus-schnitt .tuer:focus { outline: none; }
.haus-schnitt .tuer:focus .blatt { stroke: var(--i); stroke-width: 3; }
.haus-schnitt .marke .mk {
  fill: none; stroke: var(--kante); stroke-width: 2.2;
  stroke-linecap: round; stroke-linejoin: round;
}
.haus-schnitt .marke .mkf { fill: var(--kante); }

.haus-schnitt .z-offen .blatt { fill: var(--gitter); }
.haus-schnitt .z-mitgemacht .blatt { fill: var(--s); }
.haus-schnitt .z-nicht_da .blatt { fill: var(--o); }
.haus-schnitt .z-absage .blatt { fill: var(--z); }
.haus-schnitt .z-wiederkommen .blatt { fill: var(--j); }
.haus-schnitt .z-bereits_foerderer .blatt { fill: var(--t); }
.haus-schnitt .z-notiz .blatt { fill: var(--leise); }
.haus-schnitt .z-sperre .blatt { fill: #0B0918; stroke: var(--z); }
.haus-schnitt .z-sperre { cursor: not-allowed; }

.haus-schnitt .pfeil { cursor: pointer; }
.haus-schnitt .pfeil .feld { fill: var(--grube); stroke: var(--gitter); stroke-width: 1.5; }
.haus-schnitt .pfeil path {
  fill: none; stroke: var(--leise); stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}
.haus-schnitt .pfeil:hover .feld { stroke: var(--i); }
.haus-schnitt .pfeil:hover path { stroke: var(--schrift); }

.hausblatt { position: fixed; inset: 0; z-index: 1300; display: flex;
  align-items: flex-end; justify-content: center; background: rgba(6, 5, 14, .72); }
.hausblatt > .blatt-innen {
  background: var(--platte); border: 3px solid var(--kante);
  box-shadow: 0 -6px 0 var(--kante); width: min(34rem, 100%);
  max-height: 92vh; overflow-y: auto; padding: 1.1rem;
}
@media (min-width: 40rem) {
  .hausblatt { align-items: center; }
  .hausblatt > .blatt-innen { box-shadow: 8px 8px 0 var(--kante); }
}
.blatt-kopf { display: flex; justify-content: space-between; gap: 1rem; align-items: flex-start; }
.blatt-kopf h2 { margin: 0; font-size: 1rem; letter-spacing: .04em; }
.blatt-kopf button { margin-top: 0; }
.blatt-bau { display: flex; gap: .5rem; align-items: flex-end; flex-wrap: wrap; margin: 1rem 0; }
.blatt-bau label { margin: 0 0 .2rem; }
.blatt-bau input { width: 4.5rem; }
.blatt-bau button { margin-top: 0; }
.eg-mitgemacht { background: var(--s); }
.eg-nicht_da { background: var(--o); }
.eg-absage { background: var(--z); color: var(--schrift); }
.eg-wiederkommen { background: var(--j); color: var(--schrift); }
.eg-bereits_foerderer { background: var(--t); color: var(--schrift); }
.eg-notiz { background: var(--leise); }

.haus-schnitt .weg, .haus-schnitt .plus { cursor: pointer; }
.haus-schnitt .weg .feld { fill: var(--z); stroke: var(--kante); stroke-width: 1.5; }
.haus-schnitt .weg.starr .feld { fill: var(--gitter); }
.haus-schnitt .weg path {
  fill: none; stroke: var(--schrift); stroke-width: 2; stroke-linecap: round;
}
.haus-schnitt .weg.starr path { stroke: var(--leise); }
.haus-schnitt .weg:hover .feld { stroke: var(--schrift); }
.haus-schnitt .plus .feld { fill: var(--grube); stroke: var(--i); stroke-width: 2; }
.haus-schnitt .plus path {
  fill: none; stroke: var(--i); stroke-width: 2.2; stroke-linecap: round;
}
.haus-schnitt .plus:hover .feld { fill: var(--i); }
.haus-schnitt .plus:hover path { stroke: var(--grube); }

.haus-schnitt { max-height: 56vh; }
.tuermenu {
  position: fixed; z-index: 1400; width: 13.5rem;
  background: var(--platte); border: 3px solid var(--kante);
  box-shadow: 6px 6px 0 var(--kante); padding: .45rem;
  display: grid; gap: .3rem; align-content: start;
  overflow-y: auto; overscroll-behavior: contain;
}
.tm-kopf {
  font-size: .8rem; padding: .15rem .25rem .35rem;
  border-bottom: 2px solid var(--gitter); letter-spacing: .03em;
}
.tm-kopf .leise { color: var(--leise); }
.tuermenu button {
  margin-top: 0; width: 100%; text-align: left;
  font-size: .82rem; padding: .4rem .55rem; letter-spacing: .02em;
}

.blatt-werkzeuge { display: flex; gap: .35rem; flex: none; }
button.sym {
  margin-top: 0; width: 38px; height: 38px; padding: 0;
  display: grid; place-items: center;
  background: transparent; color: var(--leise);
  border: 2px solid var(--gitter); box-shadow: none;
}
button.sym svg { width: 19px; height: 19px; fill: none; stroke: currentColor;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
button.sym:hover { color: var(--schrift); border-color: var(--leise); filter: none; }
button.sym.an { color: var(--grube); background: var(--i); border-color: var(--i); }

.raeder { display: flex; gap: .6rem; margin: 1.2rem 0; }
.raeder.eng { margin: .4rem 0 .2rem; }
.rad-titel {
  display: block; margin: 0 0 .3rem; font-size: .74rem; color: var(--leise);
  letter-spacing: .04em;
}
.rad {
  position: relative; height: 102px; flex: 1 1 0; min-width: 0;
  border: 2px solid var(--gitter); background: var(--grube);
}
.rad:focus { outline: none; border-color: var(--i); }
.rad-lauf {
  height: 100%; overflow-y: auto; scroll-snap-type: y mandatory;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.rad-lauf::-webkit-scrollbar { display: none; }
.rad-fuell { height: 34px; }
.rad-w {
  height: 34px; line-height: 34px; text-align: center;
  scroll-snap-align: center; color: var(--leise); cursor: pointer;
  font-size: .95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rad-w.an { color: var(--schrift); font-weight: 700; }
.rad-marke {
  position: absolute; left: 0; right: 0; top: 34px; height: 34px;
  border-top: 2px solid var(--i); border-bottom: 2px solid var(--i);
  pointer-events: none;
}
.tm-reihe { display: flex; gap: .4rem; margin-top: .6rem; }
.tm-reihe button { margin-top: 0; flex: 1 1 0; text-align: center; }
.tuermenu label { margin-top: .5rem; }
.tuermenu input { font-size: .9rem; }

.tm-trenner { height: 2px; background: var(--gitter); margin: .5rem 0 .2rem; }

.eg-sym {
  width: 16px; height: 16px; flex: none; margin-right: .5rem;
  vertical-align: -3px; display: inline-block;
}
.eg-sym .mk {
  fill: none; stroke: currentColor; stroke-width: 2.2;
  stroke-linecap: round; stroke-linejoin: round;
}
.eg-sym .mkf { fill: currentColor; }
.tuermenu button { display: flex; align-items: center; }
.tm-chips { display: flex; gap: .3rem; margin-top: .5rem; flex-wrap: wrap; }
.tm-chips button {
  margin-top: 0; flex: 1 1 auto; text-align: center; font-size: .76rem;
  padding: .32rem .4rem; justify-content: center;
}
.tuermenu textarea {
  width: 100%; margin-top: .4rem; padding: .5rem; font: inherit; font-size: .88rem;
  color: var(--schrift); background: var(--grube);
  border: 2px solid var(--gitter); border-radius: 0; resize: vertical;
}
.tuermenu textarea:focus { outline: none; border-color: var(--i); }

.haus-schnitt .zettel { fill: var(--schrift); opacity: .85; }
.haus-schnitt .nr.stempel { fill: var(--leise); }
.haus-schnitt .nr.stempel.kommt { fill: var(--i); font-weight: 700; }
.tm-verlauf {
  border-bottom: 2px solid var(--gitter); padding-bottom: .45rem; margin-bottom: .2rem;
  max-height: 9rem; overflow-y: auto;
}
.vz { display: flex; align-items: flex-start; gap: .1rem; padding: .22rem .25rem; font-size: .78rem; }
.vz .eg-sym { margin-top: 1px; color: var(--leise); }
.vz-t { min-width: 0; }
.vz-t b { font-weight: 700; }
.vz-n {
  display: block; color: var(--schrift); opacity: .85; margin-top: .1rem;
  white-space: pre-wrap; word-break: break-word;
}

.haus-schnitt .griff { fill: transparent; }
.haus-schnitt .aufzug .schacht { fill: var(--grube); stroke: var(--gitter); stroke-width: 2; }
.haus-schnitt .aufzug .kabine { fill: var(--gitter); stroke: var(--leise); stroke-width: 1.5; }
.haus-schnitt .aufzug { cursor: default; }

@media (min-width: 40rem) {
  .hausblatt > .blatt-innen { width: min(42rem, 100%); padding: 1.5rem; }
  .haus-schnitt { max-height: 64vh; }
  .tuermenu { width: 16rem; }
  .tuermenu button { font-size: .9rem; padding: .5rem .6rem; }
}
@media (pointer: coarse) {
  .tuermenu button { padding: .58rem .6rem; }
  .rad { height: 120px; }
}

.leadtafel {
  position: fixed; z-index: 1350; right: 12px; top: 12px;
  width: min(20rem, calc(100vw - 24px)); max-height: 70vh; overflow-y: auto;
  background: var(--platte); border: 3px solid var(--kante);
  box-shadow: 6px 6px 0 var(--kante); padding: .7rem;
}
.lt-kopf { display: flex; justify-content: space-between; align-items: center; gap: .6rem; }
.lt-kopf button { margin-top: 0; padding: .25rem .6rem; font-size: .78rem; }
.lt-z {
  display: block; width: 100%; text-align: left; margin: .35rem 0 0;
  background: var(--grube); color: var(--schrift);
  border: 2px solid var(--gitter); box-shadow: none;
  padding: .45rem .55rem; font-size: .84rem; letter-spacing: 0;
}
.lt-z:hover { border-color: var(--i); filter: none; }
.lt-z b { display: block; font-weight: 700; }
.lt-z .leise { font-size: .76rem; }

.haus-schnitt .aufzug.ziehbar { cursor: grab; touch-action: none; }
.haus-schnitt .aufzug.ziehbar .schacht { stroke: var(--i); stroke-dasharray: 4 3; }
.haus-schnitt .aufzug.zieht { cursor: grabbing; opacity: .75; }
.haus-schnitt .aufzug.ziehbar:focus { outline: none; }
.haus-schnitt .aufzug.ziehbar:focus .schacht { stroke: var(--o); stroke-dasharray: none; }

.haus-schnitt .aufzug:not(.ziehbar) { pointer-events: none; }
.haus-schnitt .tuer { transition: transform .12s ease; }
.haus-schnitt .aufzug.zieht { transition: none; }
.tuermenu #bl-name { margin-top: .35rem; }

@media (min-width: 34rem) {
  .tuermenu { width: 18rem; }
}

.haus-schnitt .nr.innen { fill: var(--kante); }
.haus-schnitt .nr.innen.oben { opacity: .7; }
.haus-schnitt .nr.innen.unten { opacity: .82; font-weight: 700; }
.haus-schnitt .z-offen .nr.innen { fill: var(--leise); }
.haus-schnitt .z-sperre .nr.innen { fill: var(--leise); }

.tm-schild { display: grid; gap: .3rem; align-content: start; }
.tm-modi { display: grid; gap: .3rem; align-content: start; }
@media (min-width: 34rem) {
  .tuermenu { width: 18rem; }
}

.haus-schnitt .nr.innen.unten { text-anchor: end; }
.haus-schnitt .nr.innen.zweit { opacity: .82; }

.tuermenu > * { min-width: 0; }
.tuermenu .tm-verlauf,
.tuermenu .tm-kopf { overflow-wrap: anywhere; }
.vz-t { overflow-wrap: anywhere; }
.tm-modi > button { min-width: 0; }
.tm-modi > button > span,
.tm-modi > button { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.haus-schnitt .mitte .schacht { fill: var(--grube); stroke: var(--gitter); stroke-width: 2; }
.haus-schnitt .mitte .kabine { fill: var(--gitter); stroke: var(--leise); stroke-width: 1.5; }
.haus-schnitt .stiege { fill: none; stroke: var(--gitter); stroke-width: 2; }
.haus-schnitt .mitte { pointer-events: none; }

.tm-seite { display: flex; gap: .25rem; }
.seitenknopf {
  margin-top: 0; flex: 1 1 0; text-align: center; justify-content: center;
  font-size: .76rem; padding: .3rem .2rem;
  background: transparent; color: var(--leise);
  border: 2px solid var(--gitter); box-shadow: none;
}
.seitenknopf.an { background: var(--i); color: var(--kante); border-color: var(--i); }
.seitenknopf:hover { filter: none; color: var(--schrift); }
.seitenknopf.an:hover { color: var(--kante); }

.haus-schnitt .saeule .schacht { fill: var(--grube); stroke: var(--gitter); stroke-width: 2; }
.haus-schnitt .saeule .kabine { fill: var(--gitter); stroke: var(--leise); stroke-width: 1.5; }
.haus-schnitt .tritt { fill: none; stroke: var(--gitter); stroke-width: 1.6; }
.haus-schnitt .saeule:not(.ziehbar) { pointer-events: none; }
.haus-schnitt .saeule.ziehbar { cursor: grab; touch-action: none; }
.haus-schnitt .saeule.ziehbar .schacht { stroke: var(--i); stroke-dasharray: 4 3; }
.haus-schnitt .saeule.zieht { cursor: grabbing; opacity: .75; }
.haus-schnitt .saeule.ziehbar:focus { outline: none; }
.haus-schnitt .saeule.ziehbar:focus .schacht { stroke: var(--o); stroke-dasharray: none; }

.haus-schnitt .seitenmal {
  fill: var(--leise); font: 700 8px ui-monospace, Menlo, monospace;
  text-anchor: middle; opacity: .7;
}
.haus-schnitt .tuerplus { cursor: pointer; }
.haus-schnitt .tuerplus .blatt {
  fill: transparent; stroke: var(--gitter); stroke-width: 2; stroke-dasharray: 5 4;
}
.haus-schnitt .tuerplus .griff { fill: transparent; }
.haus-schnitt .tuerplus path {
  fill: none; stroke: var(--leise); stroke-width: 2.2; stroke-linecap: round;
}
.haus-schnitt .tuerplus:hover .blatt { stroke: var(--i); stroke-dasharray: none; }
.haus-schnitt .tuerplus:hover path { stroke: var(--i); }
.haus-schnitt .tuerplus:focus { outline: none; }
.haus-schnitt .tuerplus:focus .blatt { stroke: var(--i); }

.haus-schnitt .reihenschalter { cursor: pointer; }
.haus-schnitt .reihenschalter .feld {
  fill: var(--grube); stroke: var(--gitter); stroke-width: 1.6;
}
.haus-schnitt .reihenschalter path {
  fill: none; stroke: var(--leise); stroke-width: 2; stroke-linecap: round;
}
.haus-schnitt .reihenschalter.an .feld { stroke: var(--i); }
.haus-schnitt .reihenschalter.an path { stroke: var(--i); }
.haus-schnitt .reihenschalter:hover .feld { fill: var(--gitter); }

.haus-schnitt .ebeneplus { cursor: pointer; }
.haus-schnitt .ebeneplus .feld { fill: var(--grube); stroke: var(--i); stroke-width: 2; }
.haus-schnitt .ebeneplus path {
  fill: none; stroke: var(--i); stroke-width: 2.2; stroke-linecap: round;
}
.haus-schnitt .ebeneplus:hover .feld { fill: var(--i); }
.haus-schnitt .ebeneplus:hover path { stroke: var(--grube); }

.haus-schnitt .ziellinie {
  fill: var(--i); opacity: .22; stroke: var(--i); stroke-width: 2;
  pointer-events: none;
}
.haus-schnitt .ziellinie[hidden] { display: none; }

.tk-zeile { display: flex; gap: .3rem; align-items: center; }
.tk-zeile .tm-seite { flex: none; }
.tk-zeile .seitenknopf { width: 26px; padding: .3rem 0; font-weight: 700; }
.nr-knopf {
  margin-top: 0; flex: none; min-width: 3.6rem; padding: .32rem .45rem;
  font-size: .8rem; text-align: center; justify-content: center;
  background: transparent; color: var(--schrift);
  border: 2px solid var(--gitter); box-shadow: none;
}
.nr-knopf:hover { border-color: var(--i); filter: none; }
.tm-kopf #bl-name {
  display: block; width: 100%; margin: .3rem 0 0; padding: .32rem .45rem;
  font-size: .82rem; text-align: center;
  color: var(--schrift); background: transparent;
  border: 2px solid var(--gitter); border-radius: 0;
}
.tm-kopf #bl-name:focus { outline: none; border-color: var(--i); }
.tk-zeile .nr-knopf { flex: 1 1 0; }
.tk-rad { margin-top: .35rem; }
.tk-rad[hidden] { display: none; }
.tk-rad .rad { height: 102px; }

.eg-zurueckgesetzt {
  background: transparent; color: var(--leise);
  border: 2px solid var(--gitter); box-shadow: none;
}
.eg-zurueckgesetzt:hover { color: var(--schrift); border-color: var(--leise); filter: none; }
.eg-zurueckgesetzt .eg-sym { display: none; }

.skizze { display: block; width: 100%; height: auto; max-height: 46vh; margin: .8rem 0; }
.skizze .kopfzelle { cursor: pointer; }
.skizze .kopfzelle rect { fill: var(--grube); stroke: var(--gitter); stroke-width: 2; }
.skizze .kopfzelle path { fill: none; stroke: var(--leise); stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round; }
.skizze .kopfzelle.stiege rect { stroke: var(--i); }
.skizze .kopfzelle.stiege path { stroke: var(--i); }
.skizze .kopfzelle.aufzug rect { fill: var(--gitter); stroke: var(--i); }
.skizze .kopfzelle.aufzug path { stroke: var(--i); }
.skizze .kopfzelle:hover rect { stroke: var(--schrift); }
.skizze .kopfzelle:focus { outline: none; }
.skizze .kopfzelle:focus rect { stroke: var(--o); }

.skizze .zelle { cursor: pointer; }
.skizze .zelle rect {
  fill: transparent; stroke: var(--gitter); stroke-width: 2; stroke-dasharray: 4 4;
}
.skizze .zelle:hover rect { stroke: var(--leise); }
.skizze .zelle:focus { outline: none; }
.skizze .zelle:focus rect { stroke: var(--i); stroke-dasharray: none; }
.skizze .zelle.an rect { fill: var(--gitter); stroke: var(--kante); stroke-dasharray: none; }
.skizze .zelle.an .knauf { fill: var(--leise); }
.skizze .zelle.saeule rect { fill: var(--grube); stroke: none; }
.skizze .zelle.saeule { cursor: default; }
.skizze .sk-ebene {
  fill: var(--leise); font: 400 9px ui-monospace, Menlo, monospace; text-anchor: end;
}
.skizze .sk-plus { cursor: pointer; }
.skizze .sk-plus rect { fill: none; stroke: var(--gitter); stroke-width: 2; stroke-dasharray: 3 3; }
.skizze .sk-plus path { fill: none; stroke: var(--leise); stroke-width: 2; stroke-linecap: round; }
.skizze .sk-plus:hover rect { stroke: var(--i); stroke-dasharray: none; }
.skizze .sk-plus:hover path { stroke: var(--i); }
.skizze .sk-plus:focus { outline: none; }
.skizze .sk-plus:focus rect { stroke: var(--o); stroke-dasharray: none; }
.skizze .sk-haken { cursor: pointer; }
.skizze .sk-haken rect { fill: var(--grube); stroke: var(--gitter); stroke-width: 2; }
.skizze .sk-haken .hk { fill: none; stroke: var(--gitter); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.skizze .sk-haken:hover rect { stroke: var(--leise); }
.skizze .sk-haken:hover .hk { stroke: var(--leise); }
.skizze .sk-haken.an rect { fill: var(--gitter); stroke: var(--i); }
.skizze .sk-haken.an .hk { stroke: var(--i); }
.skizze .sk-haken:focus { outline: none; }
.skizze .sk-haken:focus rect { stroke: var(--o); }
.skizze .sk-weg { cursor: pointer; }
.skizze .sk-weg rect { fill: transparent; stroke: none; }
.skizze .sk-weg path { fill: none; stroke: var(--gitter); stroke-width: 2; stroke-linecap: round; }
.skizze .sk-weg:hover path { stroke: var(--z, #e0524a); }
.skizze .sk-weg:focus { outline: none; }
.skizze .sk-weg:focus path { stroke: var(--o); }
.skizze rect.treff { fill: transparent; stroke: none; }
.skizze .sk-plus:hover rect.treff,
.skizze .sk-plus:focus rect.treff,
.skizze .sk-haken:hover rect.treff,
.skizze .sk-haken:focus rect.treff,
.skizze .sk-haken.an rect.treff,
.skizze .sk-weg:hover rect.treff,
.skizze .sk-weg:focus rect.treff { fill: transparent; stroke: none; }
.skizze .sk-plus rect { stroke-dasharray: none; }
.skizze .sk-plus:hover rect { stroke: var(--i); stroke-dasharray: 4 3; }
.sk-reihe { display: flex; align-items: flex-start; gap: .7rem; }
.sk-reihe .skizze { flex: 1 1 auto; min-width: 0; margin: .8rem 0; }
.sk-tun { display: flex; flex-direction: column; gap: .6rem; padding-top: 1.2rem; }
.sk-tun .sym.gross { width: 46px; height: 46px; }
.sk-tun .sym.gross svg { width: 28px; height: 28px; }
.sk-tun .sym[disabled] { opacity: .3; cursor: default; }
.sk-tun .symtext {
  display: flex; flex-direction: column; align-items: center; gap: .3rem;
  width: 92px; padding: .5rem .3rem; line-height: 1.25;
  font-size: .72rem; text-align: center;
}
.sk-tun .symtext svg { width: 26px; height: 26px; fill: none;
  stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.sk-tun .symtext[disabled] { opacity: .35; cursor: default; }
.kopf-titel { display: flex; align-items: center; gap: .5rem; }
.kopf-titel h2 { margin: 0; }
.sym.klein { width: 30px; height: 30px; }
.sym.klein svg { width: 18px; height: 18px; }
.sym[disabled] { opacity: .35; cursor: default; }
.sk-tun.links { margin-right: .4rem; }
.sk-fuss { display: flex; justify-content: space-between; gap: .8rem; margin-top: .6rem; }
.sk-fuss .symtext {
  display: flex; flex-direction: column; align-items: center; gap: .35rem;
  min-width: 112px; padding: .55rem .7rem; line-height: 1.25;
  font-size: .72rem; text-align: center;
}
.sk-fuss .symtext[disabled] { opacity: .35; cursor: default; }
.sy-paar { display: inline-flex; align-items: center; gap: .35rem; }
.sy-paar svg { width: 26px; height: 26px; fill: none; stroke: currentColor;
  stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.sy-paar svg.sy-klein { width: 15px; height: 15px; opacity: .65; }
.sy-paar { position: relative; display: inline-block; width: 36px; height: 36px; gap: 0; }
.sy-paar svg { width: 36px; height: 36px; }
.sy-paar svg.sy-klein {
  position: absolute; top: 3px; right: 3px;
  width: 13px; height: 13px; opacity: .8; stroke-width: 2;
}
.skizze .kopfzelle.stiege, .skizze .kopfzelle.aufzug { cursor: grab; touch-action: none; }
.skizze .kopfzelle.zieht { cursor: grabbing; opacity: .7; }
.sk-fuss .symtext { position: relative; padding-top: .7rem; }
.sk-fuss .sy-paar { position: static; }
.sk-fuss .sy-paar svg.sy-klein { top: 5px; right: 5px; opacity: .7; }
[data-nachrichten].hat-neue { color: var(--i); }
[data-nachrichten] .nz { font-style: normal; font-size: .7rem; }
#nachr-blatt { position: fixed; right: .6rem; bottom: .6rem; z-index: 1300;
  width: min(22rem, calc(100vw - 1.2rem)); max-height: 60vh; display: flex;
  flex-direction: column; background: rgba(20,18,31,.97);
  border: 1px solid var(--i); border-radius: 4px;
  box-shadow: 0 8px 28px rgba(0,0,0,.7); font-size: .82rem; }
#nachr-blatt[hidden] { display: none; }
.nb-kopf { display: flex; align-items: center; gap: .5rem; padding: .4rem .6rem;
  border-bottom: 1px solid var(--gitter); }
.nb-kopf b { flex: 1 1 auto; }
.nb-kopf button { padding: 0 .4rem; }
.nb-liste { overflow: auto; padding: .3rem; }
.nb-partner { display: flex; align-items: center; gap: .5rem; width: 100%;
  text-align: left; padding: .4rem .5rem; margin-bottom: .2rem; }
.nb-partner .leise { margin-left: auto; font-size: .7rem; }
.nb-neu { font-style: normal; background: var(--i); color: var(--grube);
  border-radius: 8px; padding: 0 .35rem; font-size: .7rem; }
.nb-verlauf { overflow: auto; padding: .5rem .6rem; display: flex;
  flex-direction: column; gap: .35rem; }
.nb-z { max-width: 85%; padding: .35rem .5rem; border-radius: 4px;
  background: var(--gitter); align-self: flex-start; word-break: break-word; }
.nb-z.eigen { align-self: flex-end; background: var(--i); color: var(--grube); }
.nb-zeit { display: block; font-size: .62rem; opacity: .7; margin-top: .15rem; }
.nb-fuss { display: flex; gap: .4rem; padding: .5rem .6rem;
  border-top: 1px solid var(--gitter); }
.nb-fuss input { flex: 1 1 auto; min-width: 0; padding: .3rem .45rem; }
[data-nachrichten] { font-size: 1.1rem; line-height: 1; padding: .3rem .6rem; }
[data-nachrichten] .nz { font-size: .68rem; vertical-align: super; }
[data-nachrichten] { display: inline-flex; align-items: center; gap: .3rem;
  padding: .35rem .6rem; }
[data-nachrichten] svg { width: 22px; height: 17px; fill: none;
  stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; }
[data-nachrichten].hat-neue svg { stroke: var(--i); }
[data-nachrichten] .nz { font-style: normal; font-size: .7rem;
  min-width: .8rem; }
.nb-fuss button[data-ort] { padding: .25rem .4rem; font-size: .95rem; }
#nb-anhang { font-size: .68rem; max-width: 7rem; overflow: hidden;
  white-space: nowrap; text-overflow: ellipsis; }
.nb-ort { display: flex; align-items: center; gap: .3rem; margin-top: .3rem;
  padding: .2rem .4rem; font-size: .7rem; width: 100%; }
.nb-ort svg { width: 10px; height: 13px; fill: none; stroke: currentColor;
  stroke-width: 1.5; }
.nb-fuss button[data-ort] { padding: .3rem .35rem; display: inline-flex;
  align-items: center; }
.nb-fuss button[data-ort] svg { width: 16px; height: 15px; fill: none;
  stroke: currentColor; stroke-width: 1.5; stroke-linejoin: round;
  stroke-linecap: round; }
#nb-anhang { max-width: none; }
.an-marke { display: inline-flex; align-items: center; gap: .25rem;
  background: var(--gitter); border-radius: 3px; padding: .1rem .3rem;
  font-size: .66rem; white-space: nowrap; }
.an-marke button { padding: 0 .2rem; font-size: .8rem; line-height: 1; }
.nb-fuss { flex-wrap: wrap; }
.nb-fuss input { flex: 1 1 6rem; }
.blatt-werkzeuge { gap: .5rem; }
.blatt-werkzeuge .sym.speichern { margin-left: .8rem; }
.gebietwahl #gebiet { max-width: 11rem; font-size: .8rem; padding: .3rem .45rem;
  height: auto; }
.skizze .sk-weg path { stroke: #9a95b5; stroke-width: 2.4; }
.skizze .sk-weg:hover path { stroke: #ff8d80; stroke-width: 2.8; }
.gebietwahl { z-index: 1100; }
.gw-griff { cursor: grab; opacity: .5; font-size: 1rem; user-select: none; }
.gw-klein { padding: 0 .45rem; }
.gebietwahl.gw-zu > *:not(.gw-griff):not(.gw-klein) { display: none; }
.gw-zeile { position: fixed; left: .6rem; top: 3.6rem; z-index: 1090;
  background: rgba(20,18,31,.94); border: 1px solid var(--gitter);
  border-radius: 4px; padding: .3rem .6rem; font-size: .74rem;
  color: var(--leise); }
.gw-zeile:empty { display: none; }
.gw-zeile b { color: var(--schrift); }
[data-nachrichten] { align-self: center; }
.gebietwahl { cursor: grab; flex-wrap: wrap; }
.gebietwahl.zieht { cursor: grabbing; }
.gebietwahl button, .gebietwahl select, .gebietwahl input,
.gebietwahl #gebiet-huelle { cursor: auto; }
.gw-zeile { position: static; flex-basis: 100%; background: none; border: 0;
  padding: .1rem 0 0; }
.gw-griff { display: none; }
.gebietwahl { width: max-content; max-width: calc(100vw - 1.2rem);
  align-items: center; }
.gw-zeile { flex-basis: 100%; text-align: left; }
#nachr-blatt { right: auto; bottom: auto; }
.gebietwahl { row-gap: .2rem; }
.gebietwahl > * { align-self: center; }
.gebietwahl #anzahl { width: 6.5rem; flex: 0 0 6.5rem;
  display: inline-block; font-size: .74rem; line-height: 1.6;
  white-space: nowrap; overflow: hidden; }
.gebietwahl button, .gebietwahl select, .gebietwahl #gebiet-huelle > * {
  height: 1.9rem; box-sizing: border-box; display: inline-flex;
  align-items: center; }
.gebietwahl [data-nachrichten] { flex: 0 0 auto; padding: .2rem .5rem; }
.gebietwahl [data-nachrichten] svg { width: 20px; height: 15px; }
.gebietwahl #gebiet { max-width: 10rem; }
.gw-zeile:empty { display: block; }
.gw-zeile { min-height: 1.1rem; }
.wiedertafel { position: fixed; right: .6rem; top: .6rem; z-index: 1300;
  width: min(24rem, calc(100vw - 1.2rem)); max-height: 70vh; overflow: auto;
  background: rgba(20,18,31,.97); border: 1px solid var(--i);
  border-radius: 4px; box-shadow: 0 8px 28px rgba(0,0,0,.7); }
.wt-kopf { display: flex; align-items: center; padding: .5rem .7rem;
  border-bottom: 1px solid var(--gitter); position: sticky; top: 0;
  background: var(--grube); }
.wt-kopf b { flex: 1 1 auto; }
.wt-zeile { display: flex; flex-direction: column; align-items: flex-start;
  gap: .15rem; width: 100%; text-align: left; padding: .45rem .7rem;
  font-size: .8rem; }
.wt-zeile .leise { font-size: .7rem; }
.wiedertafel p { padding: .8rem; }
.tm-verlauf { max-height: 11rem; overflow: auto; margin: .4rem 0;
  border-top: 1px solid var(--gitter); border-bottom: 1px solid var(--gitter);
  padding: .3rem 0; }
.tv-z { padding: .25rem .4rem; font-size: .74rem; }
.tv-z + .tv-z { border-top: 1px solid var(--gitter); }
.tv-kopf { display: flex; gap: .5rem; align-items: baseline; }
.tv-kopf .leise { margin-left: auto; font-size: .68rem; }
.tv-notiz { display: block; margin-top: .15rem; color: var(--schrift);
  white-space: pre-wrap; word-break: break-word; }
.tv-z { position: relative; }
.tv-weg { position: absolute; right: .2rem; bottom: .2rem; padding: 0 .3rem;
  font-size: .8rem; line-height: 1.2; opacity: .5; }
.tv-weg:hover { opacity: 1; color: var(--z, #e0524a); }
.tm-verlauf { border-bottom: 0; margin-bottom: 0; }
.tm-verlauf, .tm-verlauf * { background: none; color: var(--schrift); }
.tv-z { background: rgba(255,255,255,.03); border-radius: 3px;
  margin-bottom: .2rem; }
.tv-z + .tv-z { border-top: 0; }
.tv-kopf b { color: var(--leise); font-weight: 500; }
.tv-notiz { color: var(--schrift); }
#bl-diktat.hoert { background: var(--z, #c4443a); color: #fff; }
.diktat-hinweis { font-size: .62rem; line-height: 1.3; }
.sym.anlegen { background: var(--i); color: var(--grube); }
.sym.anlegen[disabled] { background: none; color: inherit; opacity: .35; }
.mgs-streifen { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap;
  padding: .4rem .5rem; margin-bottom: .5rem; border: 1px solid var(--t);
  border-radius: 4px; }
.mgs-streifen .leise { flex-basis: 100%; font-size: .68rem; }
.mgs-marke { font-size: .7rem; padding: .15rem .5rem; border-color: var(--t); }
.mgs-marke.an { background: var(--t); color: var(--grube); }
.tm-mgs { font-size: .72rem; padding: .35rem .5rem; margin-bottom: .4rem;
  border: 1px solid var(--t); border-radius: 3px; }
.tm-mgs a { color: var(--t); display: block; margin: .2rem 0; }
.haus-schnitt .z-ehemalig .blatt { fill: var(--t); opacity: .45; }
.skizze .zelle.mgs rect { stroke: var(--t); stroke-width: 2.5;
  stroke-dasharray: none; }
.skizze .zelle.mgs.an rect { fill: rgba(162,75,209,.35); }
.skizze .zelle.mgs-ehemalig rect { stroke-dasharray: 4 3; }
.z-gesperrt { background: #a24bd1; }
.z-fremd { background: #3a3750; border: 1px solid #55516e; }
a.knopf { display: inline-flex; align-items: center; height: 1.9rem;
  padding: 0 .6rem; font-size: .8rem; text-decoration: none;
  border: 1px solid var(--gitter); border-radius: 3px; }
#vw-bereiche { position: fixed; inset: 3.5rem .6rem .6rem .6rem; overflow: auto;
  z-index: 1150; }
#vw-bereiche[hidden] { display: none; }
#vw-bereiche .vw-panel { background: rgba(20,18,31,.97);
  border: 1px solid var(--gitter); border-radius: 4px; }
#vw-frage { position: fixed; inset: 0; z-index: 1400; display: flex;
  align-items: center; justify-content: center; background: rgba(11,9,24,.6); }
.fr-kasten { width: min(26rem, calc(100vw - 2rem)); padding: .9rem 1rem 1rem;
  background: var(--grube); border: 1px solid var(--i); border-radius: 4px;
  box-shadow: 0 10px 30px rgba(0,0,0,.7); }
.fr-kopf { display: flex; align-items: center; margin-bottom: .3rem; }
.fr-kopf b { flex: 1 1 auto; }
.fr-kasten p { font-size: .74rem; margin: .3rem 0; }
.fr-summe { color: var(--i); font-size: .8rem; margin-top: .6rem; }
body.als-sicht { outline: 3px solid var(--o); outline-offset: -3px; }
body.als-sicht .vw-kopf { border-color: var(--o); }
.tafel fieldset > div { padding-top: .15rem; line-height: 1.9; }
.wz { display: flex; align-items: center; gap: .5rem; padding: .3rem 0;
  border-bottom: 1px solid var(--gitter); }
.wz:last-child { border-bottom: 0; }
.wz-name { font-size: .8rem; }
.wz-kontakt { margin-left: auto; text-align: right; font-size: .68rem; }
.wz-kontakt a { display: block; color: var(--i); text-decoration: none; }
.wz button { padding: 0 .35rem; }
.legende { position: fixed; left: .6rem; bottom: .6rem; z-index: 1100;
  width: 15rem; background: rgba(20,18,31,.94);
  border: 1px solid var(--gitter); border-radius: 4px; font-size: .74rem; }
.lg-kopf { display: flex; align-items: center; padding: .35rem .6rem;
  border-bottom: 1px solid var(--gitter); }
.lg-kopf b { flex: 1 1 auto; font-size: .72rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--leise); }
.lg-kopf button { padding: 0 .4rem; }
.lg-inhalt { padding: .3rem .4rem .5rem; }
.legende.zu .lg-inhalt { display: none; }
.lg-z { display: flex; align-items: center; gap: .45rem; width: 100%;
  text-align: left; border: 0; background: none; padding: .2rem .25rem;
  font-size: .74rem; }
.lg-z:hover { background: var(--gitter); }
.lg-z b { margin-left: auto; font-variant-numeric: tabular-nums; }
.lg-trenn { height: 1px; background: var(--gitter); margin: .3rem 0; }
.lg-hinweis { padding: .2rem .25rem; color: var(--leise); font-size: .7rem; }
.legende { background: #14121f; border-color: #3a3750;
  box-shadow: 0 6px 20px rgba(0,0,0,.6); }
.lg-kopf { background: #1c1930; }
.lg-inhalt { background: #14121f; }
.lg-z { color: var(--schrift); border-radius: 3px; }
.lg-z b { color: #fff; }
.lg-z:hover { background: #262238; }
.lg-hinweis { color: #9a95b5; }
.lg-hinweis b { color: var(--schrift); }
.legende .punkt { width: 11px; height: 11px; border: 1px solid #000; }
.vl-z { display: flex; gap: .5rem; font-size: .74rem; padding: .2rem 0;
  border-bottom: 1px solid var(--gitter); }
.vl-z:last-child { border-bottom: 0; }
.vl-z .leise { margin-left: auto; font-size: .68rem; white-space: nowrap; }
.gebietwahl { position: relative; }
.gw-groesse { position: absolute; right: 0; top: 0; bottom: 0; width: 8px;
  cursor: ew-resize; }
.gw-groesse::after { content: ""; position: absolute; right: 2px; top: 50%;
  width: 2px; height: 14px; margin-top: -7px; background: var(--gitter); }
.gebietwahl:hover .gw-groesse::after { background: var(--leise); }
.gw-groesse { display: none; }
.gw-ecke { position: absolute; right: 0; bottom: 0; width: 14px; height: 14px;
  cursor: nwse-resize; }
.gw-ecke::after { content: ""; position: absolute; right: 3px; bottom: 3px;
  width: 7px; height: 7px; border-right: 2px solid var(--gitter);
  border-bottom: 2px solid var(--gitter); }
.gebietwahl:hover .gw-ecke::after { border-color: var(--leise); }
.gebietwahl {
  width: 13.5rem; flex-direction: column; align-items: stretch; gap: .45rem;
  padding: .5rem .55rem .8rem;
  background: linear-gradient(#2a2738, #1a1826 55%, #141220);
  border: 1px solid #45415c; border-radius: 14px;
  box-shadow: 0 10px 24px rgba(0,0,0,.65), inset 0 1px 0 rgba(255,255,255,.09);
}
.fb-kopf { display: flex; align-items: center; gap: .4rem; padding: .1rem .1rem .35rem;
  border-bottom: 1px solid #3a3750; margin-bottom: .15rem; }
.fb-logo { width: 20px; height: 20px; filter: brightness(1.4); }
.fb-marke { font-size: .72rem; letter-spacing: .14em; text-transform: uppercase;
  color: #cfc9e6; }
.gebietwahl > select, .gebietwahl > button, .gebietwahl > a.knopf,
.gebietwahl #gebiet-huelle > button, .gebietwahl > span > button {
  width: 100%; box-sizing: border-box; text-align: left;
  background: linear-gradient(#33304a, #232036);
  border: 1px solid #4a4666; border-radius: 7px;
  box-shadow: 0 2px 0 #100e1a, inset 0 1px 0 rgba(255,255,255,.07);
  color: #ded9f0; height: 2rem;
}
.gebietwahl > button:active, .gebietwahl > a.knopf:active,
.gebietwahl #gebiet-huelle > button:active {
  transform: translateY(1px); box-shadow: 0 1px 0 #100e1a; }
.gebietwahl #gebiet-huelle { display: block; }
.gebietwahl #anzahl { flex: none; width: auto; text-align: center;
  font-size: .68rem; }
.gebietwahl [data-nachrichten] { justify-content: center; }
.gebietwahl .trenn { width: 100%; height: 1px; }
.gw-zeile { text-align: center; font-size: .68rem; }