/* ==========================================================================
   INVENTAR – Theater AVON
   Farben und Schriften wie TOWER, CREW und AIRPORT.
   ========================================================================== */

:root, :root[data-mode="nacht"] {
  --bg:#0B0D10; --panel:#12151A; --panel-2:#171B21; --bar:#0E1115;
  --line:#1F2227; --line-2:#272A2E;
  --ink:#FFFFFF; --mute:#7B8493; --faint:#4A525E;
  --amber:#F5B13C; --amber-ink:#F5B13C; --amber-bg:rgba(245,177,60,.13);
  --green:#4DD44D; --green-ink:#4DD44D; --green-bg:rgba(77,212,77,.13);
  --red:#EE6B4D; --red-ink:#EE6B4D; --red-bg:rgba(238,107,77,.14);
  --blue:#5AA9E6; --blue-bg:rgba(90,169,230,.13);
  --violet:#B48BE0; --violet-bg:rgba(180,139,224,.14);

  --sky-1:#0E131B; --sky-2:#161A20;
  --strip:#1A1C1F; --strip-2:#24272C;
  --screen:rgba(90,169,230,.30); --screen-2:rgba(245,177,60,.28);
  --mullion:#0A0C0F;
  --star:rgba(255,255,255,.5); --glow:rgba(245,177,60,.16);

  --glass-panel:rgba(16,20,26,.80); --glass-edge:rgba(255,255,255,.07);
  --flap-1:#24252B; --flap-2:#0F0F12;
  --flap-ok:#FFFFFF; --flap-open:#F5B13C;
  --shadow:0 1px 2px rgba(0,0,0,.5);
}

:root[data-mode="tag"] {
  --bg:#F4F5F7; --panel:#FFFFFF; --panel-2:#F7F8FA; --bar:#FFFFFF;
  --line:#E1E1E2; --line-2:#EEEFEF;
  --ink:#14171C; --mute:#6B7382; --faint:#9AA1AC;
  --amber:#F5B13C; --amber-ink:#8A5510; --amber-bg:#F5ECDF;
  --green:#0A7A0A; --green-ink:#0A7A0A; --green-bg:#E1F4E1;
  --red:#C24120; --red-ink:#C24120; --red-bg:#FCEBE4;
  --blue:#2C6FA6; --blue-bg:#E4EEF7;
  --violet:#6B4A9E; --violet-bg:#EFE8F8;

  --sky-1:#D7E1EE; --sky-2:#F1F3F6;
  --strip:#B4BECC; --strip-2:#7E8B9C;
  --screen:rgba(44,111,166,.22); --screen-2:rgba(176,108,20,.22);
  --mullion:#98A5B5;
  --star:rgba(120,140,170,.25); --glow:rgba(255,255,255,.55);

  --glass-panel:rgba(255,255,255,.86); --glass-edge:rgba(20,23,28,.09);
  --flap-1:#FFFFFF; --flap-2:#F1F3F6;
  --flap-ok:#14171C; --flap-open:#8A5510;
  --shadow:0 1px 2px rgba(20,23,28,.09);
}

* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0;
  background: var(--bg); color: var(--ink);
  font-family: 'Inter', -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
  font-size: 15px; line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  transition: background .35s ease, color .35s ease;
}
a { color: var(--amber-ink); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
.mono { font-family: 'IBM Plex Mono', ui-monospace, Consolas, monospace; }

/* ------------------------------------------------------------ Kopfleiste */

.topbar {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: 18px;
  padding: 11px 26px;
  background: var(--bar); border-bottom: 1px solid var(--line);
}
.wordmark {
  font-family: 'IBM Plex Mono', monospace; font-weight: 500;
  font-size: 15px; letter-spacing: .34em; color: var(--amber-ink); white-space: nowrap;
}
.wordmark b {
  font-weight: 400; font-size: 9px; letter-spacing: .28em;
  color: var(--faint); margin-left: 10px;
}
.topbar .now {
  font-family: 'IBM Plex Mono', monospace; font-size: 11px;
  letter-spacing: .16em; color: var(--mute); white-space: nowrap;
}
.topbar .gap { flex: 1 1 auto; }
.nav { display: flex; gap: 7px; flex-wrap: wrap; }

.nav a, .nav button, .btn {
  appearance: none; display: inline-block;
  background: transparent; border: 1px solid var(--line); color: var(--mute);
  font-family: 'IBM Plex Mono', monospace; font-size: 10px;
  letter-spacing: .17em; text-transform: uppercase;
  padding: 8px 13px; cursor: pointer; white-space: nowrap;
  transition: color .15s, border-color .15s, background .15s;
}
.nav a:hover, .nav button:hover, .btn:hover {
  color: var(--ink); border-color: var(--faint); text-decoration: none;
}
.nav a.on, .nav button.on, .btn.on {
  background: var(--amber); border-color: var(--amber); color: #14171C;
}
.btn.danger { color: var(--red-ink); border-color: var(--red-bg); }
.btn.danger:hover { border-color: var(--red); }
.btn.tiny { font-size: 9px; padding: 5px 9px; letter-spacing: .13em; }

/* ================================================================= TAFEL */

.tafel {
  position: relative;
  height: calc(100vh - 49px);
  min-height: 540px;
  overflow: hidden;
  background: linear-gradient(180deg, var(--sky-1) 0%, var(--sky-2) 70%);
}

.sky { position: absolute; inset: 0; overflow: hidden; }
.sky i {
  position: absolute; width: 2px; height: 2px;
  background: var(--star); border-radius: 50%;
  animation: twinkle 4s ease-in-out infinite;
}
@keyframes twinkle { 0%,100% { opacity: .25 } 50% { opacity: 1 } }
.plane.two {
  top: 8%; background: var(--green); box-shadow: 0 0 7px 2px var(--green);
  animation-duration: 84s; animation-delay: 26s;
}
@keyframes crossing {
  0% { transform: translate(0,0); opacity: 0 }
  7% { opacity: .8 } 93% { opacity: .8 }
  100% { transform: translate(112vw,-5vh); opacity: 0 }
}
.mullions i.h {
  left: 0; right: 0; top: auto; bottom: 46%;
  width: auto; height: 7px; margin: 0;
}
@keyframes sweep { from { transform: rotate(0deg) } to { transform: rotate(360deg) } }
.blip.b { animation-delay: 1.9s; }
.blip.c { animation-delay: 3.6s; }
@keyframes blip { 0%,100% { opacity: .15 } 8% { opacity: 1 } }
@keyframes rwbeat { 0%,100% { opacity: .35 } 50% { opacity: .95 } }

/* Anzeigetafel */

.counter { position: absolute; left: 0; right: 0; top: 11%; z-index: 3; padding: 0 26px; }

.board {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(16px, 2.6vw, 34px);
  max-width: 1180px; margin: 0 auto;
}

/* Zwei Tafeln mit eigenem Hintergrund, damit sie vor der Szene stehen */
.board .col {
  background: var(--glass-panel);
  border: 1px solid var(--glass-edge);
  border-radius: 12px;
  padding: 20px 24px 12px;
  box-shadow: 0 4px 24px rgba(0,0,0,.13);
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
}
.colhead {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding-bottom: 12px; border-bottom: 2px solid var(--line-2);
}
.colhead .cap {
  font-family: 'IBM Plex Mono', monospace;
  font-size: clamp(10px, 1.1vw, 13px);
  letter-spacing: .34em; text-transform: uppercase;
  color: var(--mute); white-space: nowrap;
}
.digits { display: flex; gap: 6px; perspective: 900px; position: relative; }
.digits.late .digit { color: var(--red-ink); }
.digits.mine .digit { color: var(--flap-ok); }

.digit {
  position: relative;
  width: clamp(40px, 4.2vw, 70px);
  height: clamp(60px, 6.2vw, 104px);
  border-radius: 6px;
  background: linear-gradient(180deg, var(--flap-1) 0 50%, var(--flap-2) 50% 100%);
  box-shadow: 0 5px 16px rgba(0,0,0,.2);
  font-weight: 800;
  font-size: clamp(44px, 4.6vw, 78px);
  line-height: clamp(60px, 6.2vw, 104px);
  color: var(--flap-ok);
  overflow: hidden; text-align: center;
  font-variant-numeric: tabular-nums;
}
.digit::after {
  content: ''; position: absolute; left: 0; right: 0; top: 50%;
  height: 2px; background: var(--bg); opacity: .85;
}
.digit .v { position: relative; z-index: 1; display: block; }
@keyframes flipin {
  0% { transform: rotateX(-88deg); opacity: .1 }
  62% { transform: rotateX(9deg); opacity: 1 }
  100% { transform: rotateX(0); opacity: 1 }
}
.digit.flip { animation: flipin .42s cubic-bezier(.32,.9,.36,1) both; transform-origin: 50% 0; }

.colsub {
  display: flex; justify-content: space-between;
  font-family: 'IBM Plex Mono', monospace; font-size: 9px;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--faint); padding: 12px 2px 8px;
}
.brow {
  display: grid; grid-template-columns: 128px 1fr 118px;
  gap: 12px; align-items: start;
  padding: 9px 2px; border-bottom: 1px solid var(--line);
  cursor: pointer;
}
.brow:last-child { border-bottom: 0; }
.brow:hover .n { color: var(--amber-ink); }
.brow .d { font-family: 'IBM Plex Mono', monospace; font-size: 12px; color: var(--mute); white-space: nowrap; }
.brow .n {
  font-size: clamp(14px, 1.3vw, 17px); font-weight: 500;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  min-width: 0;
}
/* Zusatz klein unter dem Namen — Stückzahl, Nummer, Zweck */
.brow .n small {
  display: block;
  font-size: 12px; font-weight: 400; color: var(--mute);
  letter-spacing: 0; margin-top: 3px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.brow .v {
  font-family: 'IBM Plex Mono', monospace; font-size: 12.5px;
  text-align: right; color: var(--mute); white-space: nowrap;
}
.brow.late .d, .brow.late .v { color: var(--red-ink); }
.brow.empty-row {
  grid-template-columns: 1fr; color: var(--faint); cursor: default;
  font-family: 'IBM Plex Mono', monospace; font-size: 12px; padding: 14px 2px;
}
.boardnote {
  position: relative; z-index: 3;
  max-width: 1180px; margin: 26px auto 0;
  font-family: 'IBM Plex Mono', monospace; font-size: 11px;
  letter-spacing: .13em; color: var(--mute); text-align: center;
}
.tafel-foot .row { display: flex; align-items: flex-end; }

/* ================================================================= LISTE */

.page { max-width: 1240px; margin: 0 auto; padding: 26px 26px 90px; }
.page > h1 { font-size: 27px; font-weight: 600; letter-spacing: -.01em; margin: 0 0 3px; }
.page > .lead { color: var(--mute); font-size: 14px; margin: 0 0 22px; }

.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin-bottom: 20px; }
.kpi {
  background: var(--panel); border: 1px solid var(--line); border-radius: 7px;
  box-shadow: var(--shadow); padding: 14px 16px 15px;
}
.kpi .k {
  font-family: 'IBM Plex Mono', monospace; font-size: 9px;
  letter-spacing: .17em; text-transform: uppercase; color: var(--mute); margin-bottom: 9px;
}
.kpi .v { font-size: 27px; font-weight: 600; line-height: 1.1; }
.kpi .n { font-size: 12px; color: var(--mute); margin-top: 3px; }
.kpi .n.bad { color: var(--red-ink); }
.kpi .n.good { color: var(--green-ink); }

.toolbar { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-bottom: 16px; }
.toolbar input[type="search"], .toolbar select {
  background: var(--panel); border: 1px solid var(--line); border-radius: 5px;
  color: var(--ink); font-family: inherit; font-size: 14px; padding: 8px 12px; min-width: 200px;
}
.toolbar input::placeholder { color: var(--faint); }
.switch { display: flex; gap: 0; }
.switch .btn { border-radius: 0; margin-left: -1px; }
.switch .btn:first-child { border-radius: 5px 0 0 5px; margin-left: 0; }
.switch .btn:last-child { border-radius: 0 5px 5px 0; }

/* Bestandsliste */

.tasks { background: var(--panel); border: 1px solid var(--line); border-radius: 7px; box-shadow: var(--shadow); }

.task {
  display: grid;
  grid-template-columns: 30px 1fr 168px 128px 104px;
  gap: 14px; align-items: center;
  padding: 12px 18px;
  border-bottom: 1px solid var(--line-2);
  border-left: 3px solid transparent;
  cursor: pointer;
  transition: background .15s;
}

/* Feine Markierung am linken Rand, je nach Zustand */
.task.run  { border-left-color: var(--blue);  background: var(--blue-bg); }
.task.late { border-left-color: var(--red);   background: var(--red-bg); }
.task.hot  { border-left-color: var(--amber); }
.task.done { opacity: .72; }

.task.run:hover, .task.late:hover, .task.hot:hover {
  box-shadow: inset 0 0 0 999px rgba(128,128,128,.06);
}
.task:last-of-type { border-bottom: 0; }
.task:hover { background: var(--panel-2); }
.task.head {
  font-family: 'IBM Plex Mono', monospace; font-size: 9px;
  letter-spacing: .17em; text-transform: uppercase; color: var(--mute);
  cursor: default; padding: 11px 18px;
  border-left-color: transparent;
}
.task.head:hover { background: none; }
.task.done .ttl { color: var(--mute); text-decoration: line-through; }
.task.done .ttl small,
.task.done .ttl .cat { text-decoration: none; }

.tick {
  width: 20px; height: 20px; border-radius: 5px;
  border: 1.5px solid var(--faint); background: transparent;
  cursor: pointer; position: relative; padding: 0;
  transition: border-color .15s, background .15s;
}
.tick:hover { border-color: var(--green); }
.tick.on { background: var(--green); border-color: var(--green); }
.tick.on::after {
  content: ''; position: absolute; left: 6px; top: 2px;
  width: 5px; height: 10px; border: solid #fff;
  border-width: 0 2px 2px 0; transform: rotate(42deg);
}
:root[data-mode="tag"] .tick.on::after { border-color: #fff; }

.ttl { font-size: 15px; font-weight: 500; }
.cat {
  display: inline-block; margin-left: 8px;
  font-family: 'IBM Plex Mono', monospace; font-size: 9px;
  letter-spacing: .12em; text-transform: uppercase;
  border-radius: 3px; padding: 3px 8px; vertical-align: 1px;
  background: var(--line-2); color: var(--mute);
}
.cat[data-c="blau"]    { background: var(--blue-bg);   color: var(--blue); }
.cat[data-c="gruen"]   { background: var(--green-bg);  color: var(--green-ink); }
.cat[data-c="amber"]   { background: var(--amber-bg);  color: var(--amber-ink); }
.cat[data-c="rot"]     { background: var(--red-bg);    color: var(--red-ink); }
.cat[data-c="violett"] { background: var(--violet-bg); color: var(--violet); }
.uform .cat { margin-left: 0; }
.ttl .hot {
  display: inline-block; margin-left: 8px;
  font-family: 'IBM Plex Mono', monospace; font-size: 9px;
  letter-spacing: .12em; text-transform: uppercase;
  background: var(--red-bg); color: var(--red-ink); border-radius: 3px; padding: 3px 7px;
  vertical-align: 1px;
}
.ttl small { display: block; font-size: 12px; font-weight: 400; color: var(--mute); margin-top: 2px; }
.who .wn { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.who.me .wn { color: var(--ink); font-weight: 500; }
.task:hover .mailbtn { color: var(--mute); }

.formfoot .btn svg { vertical-align: -2px; }
.when.late b, .when.late { color: var(--red-ink); }

.pill {
  justify-self: start;
  font-family: 'IBM Plex Mono', monospace; font-size: 9px;
  letter-spacing: .13em; text-transform: uppercase;
  padding: 4px 9px; border-radius: 3px;
  background: var(--line-2); color: var(--mute); white-space: nowrap;
}
.pill.ok { background: var(--green-bg); color: var(--green-ink); }
.pill.run { background: var(--blue-bg); color: var(--blue); }
.pill.warn { background: var(--amber-bg); color: var(--amber-ink); }
.pill.crit { background: var(--red-bg); color: var(--red-ink); }
.detail.run  { border-left-color: var(--blue); }
.detail.late { border-left-color: var(--red); }
.detail.hot  { border-left-color: var(--amber); }
.detail .info { white-space: pre-wrap; font-size: 14.5px; }
.detail .meta { font-size: 12.5px; color: var(--mute); }
.note {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 6px; padding: 10px 13px; font-size: 14px; white-space: pre-wrap;
}
.note .by {
  display: block; font-family: 'IBM Plex Mono', monospace;
  font-size: 9px; letter-spacing: .13em; text-transform: uppercase;
  color: var(--faint); margin-bottom: 5px;
}

/* Formular */

.form {
  background: var(--panel); border: 1px solid var(--line); border-radius: 7px;
  box-shadow: var(--shadow); padding: 20px; margin-bottom: 16px;
}
.form h3 { margin: 0 0 16px; font-size: 17px; font-weight: 600; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; }
.grid .wide { grid-column: 1 / -1; }
.field label {
  display: block; font-family: 'IBM Plex Mono', monospace;
  font-size: 9px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--mute); margin-bottom: 5px;
}
.field input, .field select, .field textarea {
  width: 100%; background: var(--bg); border: 1px solid var(--line); border-radius: 5px;
  color: var(--ink); font-family: inherit; font-size: 14px; padding: 9px 12px;
}
/* Alle einzeiligen Felder gleich hoch — Safari gibt Datumsfeldern sonst
   ihre eigene Höhe. Die Auswahlpfeile der Dropdowns bleiben unangetastet. */
.field input, .field select { height: 40px; line-height: normal; }
.field textarea { height: auto; min-height: 92px; resize: vertical; }
.formfoot { display: flex; gap: 8px; margin-top: 16px; flex-wrap: wrap; align-items: center; }

.empty { padding: 52px 12px; text-align: center; color: var(--mute); }
.empty b { display: block; font-size: 17px; font-weight: 600; color: var(--ink); margin-bottom: 5px; }

.notice {
  border: 1px solid var(--amber); border-left-width: 3px; border-radius: 5px;
  background: var(--amber-bg); color: var(--ink);
  padding: 11px 15px; margin-bottom: 16px; font-size: 14px;
}
.notice.bad { border-color: var(--red); background: var(--red-bg); }
.notice code { font-family: 'IBM Plex Mono', monospace; font-size: 13px; }

.foot {
  margin-top: 30px; padding-top: 16px; border-top: 1px solid var(--line);
  font-family: 'IBM Plex Mono', monospace; font-size: 10px;
  letter-spacing: .13em; text-transform: uppercase; color: var(--faint);
  display: flex; gap: 18px; flex-wrap: wrap;
}
.gatehouse .wordmark { font-size: 17px; display: block; margin-bottom: 3px; }
.gatehouse .err { color: var(--red-ink); font-size: 13px; margin-bottom: 13px; }
.gatehouse .hint { font-size: 12px; color: var(--faint); margin: 14px 0 0; line-height: 1.55; }

/* -------------------------------------------------- Verwaltung und Konto */

.card {
  background: var(--panel); border: 1px solid var(--line); border-radius: 7px;
  box-shadow: var(--shadow); padding: 18px 20px; margin-bottom: 16px;
}
.card > h2 { font-size: 16px; font-weight: 600; margin: 0 0 2px; }
.card > .sub { color: var(--mute); font-size: 13px; margin: 0 0 16px; }
.subnav { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 18px; }

.urow {
  display: grid; grid-template-columns: minmax(0,1.2fr) minmax(0,1fr) minmax(0,1.2fr) 150px minmax(0,2.1fr);
  gap: 14px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--line-2);
}
.urow:last-child { border-bottom: 0; }
.urow.uhead {
  font-family: 'IBM Plex Mono', monospace; font-size: 9px;
  letter-spacing: .17em; text-transform: uppercase; color: var(--mute); padding: 10px 0;
}
.urow.locked { opacity: .5; }
.urow .un { font-size: 15px; font-weight: 600; }
.urow .un em { font-style: normal; font-family: 'IBM Plex Mono', monospace; font-size: 10px; color: var(--mute); }
.urow .ul, .urow .um { font-family: 'IBM Plex Mono', monospace; font-size: 12px; color: var(--mute);
  overflow: hidden; text-overflow: ellipsis; }
.urow .ua { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.urow select, .uform input, .uform select {
  background: var(--bg); border: 1px solid var(--line); border-radius: 5px;
  color: var(--ink); font-family: inherit; font-size: 13px; padding: 7px 9px;
}
.inline { display: inline; margin: 0; }
.pwbox { grid-column: 1 / -1; display: flex; gap: 8px; padding-top: 8px; }
.pwbox[hidden] { display: none; }
.pwbox input {
  flex: 1; background: var(--bg); border: 1px solid var(--amber); border-radius: 5px;
  color: var(--ink); font-family: 'IBM Plex Mono', monospace; font-size: 13px; padding: 8px 11px;
}
.uform { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-start; }
.uform label {
  display: block; font-family: 'IBM Plex Mono', monospace;
  font-size: 9px; letter-spacing: .16em; text-transform: uppercase; color: var(--mute); margin-bottom: 5px;
}
.uform input, .uform select { min-width: 172px; padding: 9px 11px; font-size: 14px; }
.ahint { font-size: 13px; color: var(--mute); max-width: 66ch; line-height: 1.6; }

/* ------------------------------------------------------------------ Klein */

@media (max-width: 1000px) {
  .task {
    grid-template-columns: 30px 1fr;
    grid-template-areas: 'tick ttl' 'tick meta' 'tick pill';
    row-gap: 6px;
  }
  .task .tick { grid-area: tick; align-self: start; margin-top: 3px; }
  .task .ttl  { grid-area: ttl; }
  .task .who  { grid-area: meta; }
  .task .when { grid-area: meta; justify-self: end; }
  .task .pill { grid-area: pill; }
  .task.head { display: none; }
  .urow { grid-template-columns: 1fr 1fr; }
  .urow.uhead { display: none; }
  .urow .ua { grid-column: 1 / -1; justify-content: flex-start; }
  .uform > div { flex: 1 1 100%; }
  .uform input, .uform select { width: 100%; }}

@media (max-width: 760px) {
  .topbar { padding: 9px 14px; gap: 10px; }
  .topbar .now { display: none; }
  .nav { gap: 5px; }
  .nav a, .nav button { padding: 6px 9px; font-size: 9px; letter-spacing: .12em; }
  .page { padding: 20px 16px 70px; }
  .toolbar input[type="search"] { min-width: 0; width: 100%; }
  /* Kopfleiste: Wortmarke oben, Knöpfe darunter */
  .topbar {
    flex-direction: column; align-items: stretch; gap: 9px;
    padding: 10px 14px 12px;
  }
  .topbar .gap { display: none; }
  .nav { justify-content: flex-start; }

  /* Die Tafel darf mitwachsen statt abgeschnitten zu werden */
  .tafel {
    height: auto;
    min-height: calc(100vh - 150px);
    padding: 18px 0 0;
    display: flex; flex-direction: column;
  }
  .counter { position: static; padding: 0 14px; }

  .board { grid-template-columns: 1fr; gap: 12px; }
  .board .col { border-radius: 10px; padding: 13px 15px 8px; box-shadow: 0 2px 14px rgba(0,0,0,.10); }
  .colhead { padding-bottom: 9px; }
  .colhead .cap { font-size: 10px; letter-spacing: .22em; }
  .digit { width: 34px; height: 50px; font-size: 36px; line-height: 50px; border-radius: 5px; }
  .digits { gap: 4px; }
  .colsub { padding: 9px 0 4px; font-size: 8.5px; letter-spacing: .13em; }
  .brow { grid-template-columns: 92px 1fr auto; gap: 9px; padding: 7px 0; }
  .brow .d { font-size: 10px; }
  .brow .n { font-size: 13.5px; }
  .brow .v { font-size: 10.5px; }
  .brow.empty-row { font-size: 11px; padding: 9px 0; }
  .rows .brow:nth-child(n+4) { display: none; }
  .boardnote { font-size: 9.5px; margin-top: 14px; letter-spacing: .08em; }}

@media (prefers-reduced-motion: reduce) {
  .digit.flip, .sky i, .plane, .sweep, .blip, .rwlight { animation: none !important; }}

/* -------------------------------------------------- Bestätigungsdialog */

.ask {
  position: fixed; inset: 0; z-index: 90;
  display: grid; place-items: center;
  padding: 20px;
  background: rgba(6, 8, 11, .58);
  animation: askin .16s ease-out;
}
:root[data-mode="tag"] .ask { background: rgba(20, 23, 28, .34); }
.ask.hidden { display: none; }
@keyframes askin { from { opacity: 0 } to { opacity: 1 } }

.ask-card {
  width: 100%; max-width: 430px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 9px;
  box-shadow: 0 18px 50px rgba(0,0,0,.35);
  padding: 26px 26px 22px;
  animation: askup .2s cubic-bezier(.3,.9,.4,1);
}
@keyframes askup { from { transform: translateY(10px); opacity: 0 } to { transform: none; opacity: 1 } }

.ask-card h3 { margin: 0 0 8px; font-size: 19px; font-weight: 600; }
.ask-card p { margin: 0; font-size: 14.5px; color: var(--mute); line-height: 1.55; }
.ask-foot { display: flex; gap: 8px; justify-content: flex-end; margin-top: 22px; flex-wrap: wrap; }
.ask-foot .btn { padding: 10px 16px; }

/* Der Haken bekommt etwas mehr Gewicht, damit klar ist, dass man ihn klickt */
.task .tick { box-shadow: 0 0 0 0 rgba(0,0,0,0); }
.task:hover .tick:not(.on) { border-color: var(--green); background: var(--green-bg); }

.listhint {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  letter-spacing: .06em;
  color: var(--faint);
  margin: 0 2px 9px;
  line-height: 1.7;
}
@media (max-width: 760px) { .listhint { font-size: 10px; }}
.tasks.later { opacity: .88; }
.tasks.later .task { padding-top: 10px; padding-bottom: 10px; }

/* Ankreuzfeld im Formular */
.field label.check {
  display: flex; align-items: center; gap: 9px;
  font-family: 'Inter', sans-serif; font-size: 14px;
  letter-spacing: 0; text-transform: none; color: var(--ink);
  margin-bottom: 0; cursor: pointer;
}
.field label.check input {
  flex: 0 0 auto; width: 18px; height: 18px; padding: 0;
  accent-color: var(--amber);
}
.fieldnote {
  display: block; margin-top: 6px;
  font-size: 12px; color: var(--faint); line-height: 1.5;
}
.datefield .btn {
  flex: 0 0 auto; white-space: nowrap;
  height: 40px; display: inline-flex; align-items: center;
  padding: 0 12px;
}

/* ------------------------------------------------- Einheitliche Höhen */

/* Alles, was in einer Zeile nebeneinander steht, ist gleich hoch */
.toolbar input[type="search"],
.toolbar select,
.toolbar .btn,
.subnav .btn,
.uform input,
.uform select,
.uform button,
.pwbox input,
.pwbox .btn {
  height: 40px;
}
.toolbar .btn,
.subnav .btn,
.uform button,
.pwbox .btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0 15px;
}
.switch .btn { padding: 0 15px; }
/* In einer Benutzerzeile sind Auswahl und Knöpfe untereinander gleich hoch */
.urow select, .urow .btn, .urow .btn.tiny {
  height: 34px; display: inline-flex; align-items: center; justify-content: center;
  padding: 0 11px;
}
.toolbar .btn.tiny { height: 32px; padding: 0 10px; }

/* ------------------------------------------------------- Demo-Einführung */

.notice.demo { border-color: var(--blue); background: var(--blue-bg); }

/* --------------------------------------- Flucht in den Formularzeilen */

/* Jedes Feld ist eine Spalte: Beschriftung, Eingabe, Hinweis.
   Die Beschriftung hat eine feste Höhe, damit alle Eingaben auf
   derselben Linie beginnen — auch wenn darunter ein Hinweis steht. */
.uform > div {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.uform > div > label:first-child {
  min-height: 14px;
  line-height: 14px;
  margin-bottom: 6px;
}
.uform .fieldnote,
.uform > div > .ahint {
  margin-top: 6px;
  margin-bottom: 0;
}
.uform > div > .btn,
.uform > div > button {
  align-self: stretch;
}

/* =========================================================== INVENTAR */

/* Frachthalle hinter der Tafel */
.halle {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 42%; min-height: 230px; max-height: 380px;
  pointer-events: none;
  z-index: 1;
}
.halle svg { display: block; width: 100%; height: 100%; }
.h-box.warm { fill: var(--screen-2); stroke: none; opacity: .55; }

.lampe { opacity: .75; }
:root[data-mode="nacht"] .lampe { filter: drop-shadow(0 0 12px var(--glow)); }
.blink { animation: blink 1.8s ease-in-out infinite; }
@keyframes blink { 0%,100% { opacity: .25 } 50% { opacity: 1 } }
@keyframes fahren {
  0%   { transform: translateX(1520px) }
  100% { transform: translateX(-160px) }
}
@media (prefers-reduced-motion: reduce) {
  .stapler, .blink { animation: none !important; }}

/* Zeilen im Bestand */
.task {
  grid-template-columns: 104px 1fr 200px 116px 118px;
}
.task .nr {
  font-family: 'IBM Plex Mono', monospace; font-size: 13px;
  color: var(--mute); white-space: nowrap;
}
.task .nr small {
  display: block; font-size: 11px; color: var(--faint); margin-top: 2px;
}
.task .zust { justify-self: start; }
.task .tun { justify-self: end; }
.task.done { opacity: 1; }

/* Verlauf im Detail */
.verlauf { display: grid; gap: 4px; }
.dfeld .f {
  font-family: 'IBM Plex Mono', monospace; font-size: 9px;
  letter-spacing: .13em; text-transform: uppercase; color: var(--faint);
}
.dp {
  display: inline-flex; align-items: baseline; gap: 6px;
  font-size: 13px;
  background: var(--panel-2); border-radius: 4px; padding: 4px 9px;
}
.dp i {
  font-style: normal;
  font-family: 'IBM Plex Mono', monospace; font-size: 8.5px;
  letter-spacing: .13em; text-transform: uppercase; color: var(--faint);
}
.dp.warn { background: var(--red-bg); color: var(--red-ink); }
.dp.warn i { color: var(--red-ink); opacity: .75; }

@media (max-width: 700px) {
  .dfeld .pf { display: none; }}
.dfeld .a { color: var(--mute); text-decoration: line-through; }
.dfeld .pf { color: var(--faint); }
.dfeld .b { color: var(--ink); font-weight: 500; }

@media (max-width: 1000px) {
  .task {
    grid-template-columns: 1fr auto;
    grid-template-areas: 'nr tun' 'ttl ttl' 'who zust';
    row-gap: 7px;
  }
  .task .nr { grid-area: nr; }
  .task .ttl { grid-area: ttl; }
  .task .who { grid-area: who; }
  .task .zust { grid-area: zust; justify-self: end; }
  .task .tun { grid-area: tun; }
  .dfeld .f { min-width: 0; }}

@media (max-width: 760px) {
  .halle { height: 38%; min-height: 200px; opacity: .3; }}

.brow[data-kat], .brow[data-goto] { cursor: pointer; }
.brow[data-kat]:hover .n, .brow[data-goto]:hover .n { color: var(--amber-ink); }
.ware.out    { border-top-color: var(--blue); }
.ware.late   { border-top-color: var(--red); }

.kein {
  display: grid; place-items: center; gap: 7px;
  color: var(--faint);
}
.kein svg { width: 42px; height: 42px; opacity: .55; }
.kein em {
  font-style: normal; font-family: 'IBM Plex Mono', monospace;
  font-size: 9px; letter-spacing: .16em; text-transform: uppercase;
}
.kein[data-c="blau"]    { color: var(--blue); }
.kein[data-c="gruen"]   { color: var(--green-ink); }
.kein[data-c="amber"]   { color: var(--amber-ink); }
.kein[data-c="rot"]     { color: var(--red-ink); }
.kein[data-c="violett"] { color: var(--violet); }

.badge, .anz {
  position: absolute; top: 9px;
  font-family: 'IBM Plex Mono', monospace; font-size: 9px;
  letter-spacing: .13em; text-transform: uppercase;
  padding: 4px 8px; border-radius: 3px;
}
.badge.out    { background: var(--blue);  color: #fff; }
.anz {
  right: 9px; background: rgba(10,12,15,.72); color: #fff;
  font-variant-numeric: tabular-nums;
}
:root[data-mode="tag"] .anz { background: rgba(20,23,28,.66); }
.bei {
  font-size: 12px; color: var(--blue); margin-top: 9px;
  padding-top: 9px; border-top: 1px solid var(--line-2);
}
.ware.late .bei { color: var(--red-ink); }

/* Kleines Bild in der kompakten Liste */
.task .ttl { display: flex; align-items: center; gap: 12px; min-width: 0; }
.mini-pic .kein svg { width: 18px; height: 18px; }
.mini-pic .kein em { display: none; }
.task .ttl .tx { min-width: 0; }

/* ==================================================== Datenblatt als Blatt */

.sheet {
  position: fixed; inset: 0; z-index: 80;
  overflow: auto;
  padding: 40px 20px;
  background: rgba(6, 8, 11, .62);
  animation: askin .16s ease-out;
}
:root[data-mode="tag"] .sheet { background: rgba(20, 23, 28, .38); }
.sheet-pic .kein svg { width: 64px; height: 64px; }
.pic-tun .btn { background: var(--panel); }
.sheet-form .form { border: 0; box-shadow: none; padding: 20px 0; margin: 0; }

@media (max-width: 820px) {
  .sheet { padding: 0; }}
.katliste .cat { margin-left: 0; }
.katwahl > .btn { justify-self: start; }

.cat.mehr { background: var(--line-2); color: var(--mute); cursor: help; }
.wnr .cat { margin-left: 6px; }

/* ====================================== Kleines Fenster für Aus-/Eintragen */

.pop {
  position: fixed; inset: 0; z-index: 95;
  display: grid; place-items: center;
  padding: 24px;
  background: rgba(6, 8, 11, .64);
  animation: askin .14s ease-out;
}
:root[data-mode="tag"] .pop { background: rgba(20, 23, 28, .4); }

.pop-card {
  width: 100%; max-width: 460px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 20px 50px rgba(0,0,0,.42);
  animation: askup .2s cubic-bezier(.3,.9,.4,1);
  max-height: calc(100vh - 48px);
  display: flex; flex-direction: column;
}

.pop-head {
  padding: 18px 22px 14px;
  border-bottom: 1px solid var(--line);
}
.pop-kopf {
  display: block;
  font-family: 'IBM Plex Mono', monospace; font-size: 9px;
  letter-spacing: .18em; text-transform: uppercase; color: var(--amber-ink);
  margin-bottom: 5px;
}
.pop-head h3 { margin: 0 0 4px; font-size: 18px; font-weight: 600; line-height: 1.3; }
.pop-nr {
  font-family: 'IBM Plex Mono', monospace; font-size: 11.5px; color: var(--mute);
}

/* align-content: start, sonst zieht das Raster die Felder auf die ganze
   Hoehe des Fensters auseinander — auf dem Handy klaffen sonst Luecken. */
.pop-body {
  padding: 18px 22px; overflow: auto;
  display: grid; gap: 15px; align-content: start;
}
.pop-body .field { margin: 0; }
.pop-body .field label {
  display: block;
  font-family: 'IBM Plex Mono', monospace; font-size: 9px;
  letter-spacing: .16em; text-transform: uppercase; color: var(--mute);
  margin-bottom: 6px;
}
.pop-body input, .pop-body select { width: 100%; }

.pop-foot {
  display: flex; gap: 8px; justify-content: flex-end;
  padding: 14px 22px 18px;
  border-top: 1px solid var(--line);
}

@media (max-width: 520px) {
  .pop { padding: 0; place-items: stretch; }
  .pop-card {
    max-width: none; border-radius: 0; max-height: none; min-height: 100%;
    border: 0;
  }
  .pop-body { flex: 1; }
  .pop-foot {
    position: sticky; bottom: 0; background: var(--panel);
    padding-bottom: max(18px, env(safe-area-inset-bottom));
  }
  .pop-foot .btn { flex: 1; }}
.facts div.weit { grid-column: 1 / -1; }

/* ================================================== Startseite: drei Wege */

.tafel.start .counter { top: 11%; }

.willkommen { max-width: 1180px; margin: 0 auto 22px; }
.willkommen .cap {
  display: block;
  font-family: 'IBM Plex Mono', monospace; font-size: 10px;
  letter-spacing: .22em; text-transform: uppercase; color: var(--mute);
  margin-bottom: 9px;
}
.willkommen h1 {
  margin: 0; font-size: clamp(26px, 3.4vw, 40px); font-weight: 800;
  letter-spacing: -.02em; line-height: 1.08;
}

.tafel.start .boardnote { margin-top: 26px; }

@media (max-width: 760px) {
  .tafel.start .counter { top: auto; }
  .willkommen h1 { font-size: 25px; }}

/* ==================================================== STANDBY: Gate-Szene */

.halle.gate svg { display: block; width: 100%; height: 100%; }
.g-wall      { fill: var(--sky-2); }
.g-mullion   { fill: var(--mullion); }
.g-board     { fill: var(--strip); stroke: var(--strip-2); stroke-width: 1.5; }
.g-line      { fill: var(--mullion); opacity: .85; }
.g-amber     { fill: var(--amber); }
.g-desk      { fill: var(--strip); }
.g-desk-top  { fill: var(--strip-2); }
.g-screen    { fill: var(--mullion); opacity: .7; }
.g-floor     { fill: var(--sky-2); }
.g-floorline { stroke: var(--mullion); stroke-width: 3; fill: none; opacity: .45; }
.g-bank      { fill: var(--strip-2); }
.g-person    { fill: var(--strip-2); }
.g-person.warm { fill: var(--screen-2); opacity: .85; }
.g-outside   { fill: var(--strip); opacity: .55; }

/* ======================================== Öffentliche Seite: Anmeldung */

body.oeffentlich .topbar .sub {
  font-family: 'IBM Plex Mono', monospace; font-size: 10px;
  letter-spacing: .2em; text-transform: uppercase; color: var(--mute);
  margin-left: 14px;
}

.sbybox {
  max-width: 620px; margin: 0 auto;
  background: var(--glass-panel);
  border: 1px solid var(--glass-edge);
  border-radius: 12px;
  padding: 26px 28px 28px;
  box-shadow: 0 6px 30px rgba(0,0,0,.14);
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
}
.sbybox .lead { margin: 0 0 20px; font-size: 15px; line-height: 1.65; color: var(--ink-2); }

.willkommen h1 { line-height: 1.12; }

.sbyform { display: grid; gap: 17px; }
.sbyform .feld { display: grid; gap: 6px; border: 0; padding: 0; margin: 0; }
/* Nur die Feldbeschriftungen klein und gesperrt — nicht der Fliesstext
   der Einwilligung, der soll normal lesbar bleiben. */
.sbyform > .feld > label, .sbyform legend {
  font-family: 'IBM Plex Mono', monospace; font-size: 9px;
  letter-spacing: .17em; text-transform: uppercase; color: var(--mute);
  padding: 0;
}
.sbyform .opt { letter-spacing: .1em; opacity: .7; }
.sbyform input[type="text"], .sbyform input[type="email"] { width: 100%; }

.showwahl { display: grid; gap: 5px; margin-top: 3px; }
.showwahl label {
  display: flex; align-items: flex-start; gap: 11px;
  font-family: 'Inter', sans-serif; letter-spacing: 0; text-transform: none;
  padding: 10px 12px; border-radius: 7px; cursor: pointer;
  border: 1px solid var(--line-2);
  transition: border-color .12s, background .12s;
}
.showwahl label:hover { background: var(--panel-2); border-color: var(--faint); }
/* flex: 0 0 auto, sonst drueckt der Flexsatz das Kaestchen auf wenige Pixel
   zusammen. 18px, damit ein Finger es trifft. */
.showwahl input {
  flex: 0 0 auto; width: 18px; height: 18px; min-width: 0;
  margin: 1px 0 0; accent-color: var(--amber);
}
.showwahl b { display: block; font-size: 14.5px; font-weight: 600; color: var(--ink); }
.showwahl em {
  display: block; font-style: normal; font-size: 13px; color: var(--mute); margin-top: 2px;
}
.sbyform .hinweis { font-size: 12.5px; color: var(--faint); margin-top: 4px; }

.einwilligung {
  display: flex; gap: 11px; align-items: flex-start;
  font-family: 'Inter', sans-serif;
  font-size: 13px; line-height: 1.6; color: var(--mute);
  letter-spacing: 0; text-transform: none;
}
.einwilligung input {
  flex: 0 0 auto; width: 18px; height: 18px; min-width: 0;
  margin: 1px 0 0; accent-color: var(--amber);
}

.btn.gross { padding: 0 22px; height: 46px; font-size: 11px; }
.notice.gross { font-size: 15px; line-height: 1.6; }
.nachher { font-size: 13.5px; color: var(--mute); margin: 14px 0 0; }

/* Honigtopf — für Menschen unsichtbar, für Maschinen verlockend */
.falle { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.pubfoot {
  display: flex; gap: 18px; flex-wrap: wrap; align-items: center;
  padding: 18px 26px; border-top: 1px solid var(--line);
  font-family: 'IBM Plex Mono', monospace; font-size: 10px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--faint);
}
.pubfoot a { color: var(--amber-ink); text-decoration: none; }
.pubfoot a:hover { text-decoration: underline; }

/* Schmale Seiten: bestätigen, abmelden */
body.schmal main.mittig {
  max-width: 620px; margin: 0 auto; padding: 48px 20px;
}
.karte {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 11px; padding: 30px 32px; box-shadow: var(--shadow);
}
.karte h1 { margin: 0 0 12px; font-size: 25px; font-weight: 700; letter-spacing: -.01em; }
.karte h2 {
  font-family: 'IBM Plex Mono', monospace; font-size: 9px;
  letter-spacing: .17em; text-transform: uppercase; color: var(--mute);
  margin: 26px 0 10px;
}
.karte p { font-size: 14.5px; line-height: 1.65; color: var(--ink-2); margin: 0 0 14px; }
.karte .klein { font-size: 13px; color: var(--mute); }

.meineliste { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.meineliste li {
  display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
  padding: 11px 13px; border-radius: 7px; background: var(--panel-2);
}
.meineliste b { display: block; font-size: 14.5px; }
.meineliste em {
  display: block; font-style: normal; font-size: 13px; color: var(--mute); margin-top: 2px;
}
.meineliste a { font-size: 12.5px; color: var(--red-ink); white-space: nowrap; }

.einezeile {
  padding: 13px 15px; border-radius: 7px; background: var(--panel-2); margin-bottom: 18px;
}
.einezeile b { display: block; font-size: 15px; }
.einezeile em { display: block; font-style: normal; font-size: 13.5px; color: var(--mute); margin-top: 3px; }
.knopfreihe { display: flex; gap: 9px; flex-wrap: wrap; }

/* ===================================================== Verwaltung: Listen */

.task.head span, .task > div { min-width: 0; }
.task { grid-template-columns: minmax(0,1.1fr) minmax(0,1.3fr) minmax(0,1.5fr) 128px 104px; }
.task .nm { font-size: 15px; font-weight: 500; }
.task .nm small { display: block; font-size: 11.5px; color: var(--faint); margin-top: 2px; }
.task .ml {
  font-family: 'IBM Plex Mono', monospace; font-size: 12.5px; color: var(--mute);
  overflow: hidden; text-overflow: ellipsis;
}
.task .sh { display: flex; flex-wrap: wrap; gap: 4px; }
.task .sh .cat { margin: 0; }
.task .sh .leer { color: var(--faint); }
.task .tun { justify-self: end; }

.task.show { grid-template-columns: 150px minmax(0,1.4fr) 120px 92px 192px; }
.task.show .wann { font-family: 'IBM Plex Mono', monospace; font-size: 13px; }
.task.show .wann small { display: block; font-size: 11px; color: var(--faint); margin-top: 3px; }
.task.show .prod { font-size: 15px; font-weight: 500; }
.task.show .prod small { display: block; font-size: 12.5px; font-weight: 400; color: var(--mute); margin-top: 2px; }
.task.show .lnk a { font-size: 13px; }
.task.show .lnk .fehlt { font-size: 12.5px; color: var(--red-ink); }
.task.show .wz {
  font-size: 19px; font-weight: 600; text-align: right;
  font-variant-numeric: tabular-nums;
}
.task.show.vorbei { opacity: .5; }

.task.fr { grid-template-columns: 170px minmax(0,1fr) 300px; }
.task.fr .erg { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.task.fr .zitat { font-style: italic; }

.notice.warnung { border-color: var(--amber); background: var(--amber-bg); }
.notice.warnung a { color: var(--amber-ink); }

/* ------------------------------------------- Fenster: Freigabe und Versand */

.hinweiskasten {
  font-size: 13.5px; line-height: 1.6; color: var(--ink-2);
  padding: 13px 15px; border-radius: 7px; background: var(--amber-bg);
  border-left: 3px solid var(--amber);
}

.fortschritt {
  height: 9px; border-radius: 5px; background: var(--line); overflow: hidden;
  margin-bottom: 16px;
}
.fortschritt i {
  display: block; height: 100%; background: var(--green);
  border-radius: 5px; transition: width .3s ease-out;
}
.fzahlen { display: flex; gap: 22px; margin-bottom: 16px; }
.fzahlen span {
  font-family: 'IBM Plex Mono', monospace; font-size: 9px;
  letter-spacing: .15em; text-transform: uppercase; color: var(--mute);
  display: grid; gap: 3px;
}
.fzahlen b {
  font-family: 'Inter', sans-serif; font-size: 25px; font-weight: 600;
  letter-spacing: 0; text-transform: none; color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.fzahlen .schlecht b { color: var(--red-ink); }
.fhinweis { font-size: 13.5px; line-height: 1.6; color: var(--mute); margin: 0; }
.fehlerbox {
  margin-top: 14px; padding: 11px 13px; border-radius: 6px;
  background: var(--red-bg); color: var(--red-ink);
  font-family: 'IBM Plex Mono', monospace; font-size: 11.5px; line-height: 1.6;
  word-break: break-word;
}

@media (max-width: 1000px) {
  .task {
    grid-template-columns: 1fr auto;
    grid-template-areas: 'nm tun' 'ml ml' 'sh sh' 'st st';
    row-gap: 7px;
  }
  .task .nm { grid-area: nm; } .task .ml { grid-area: ml; }
  .task .sh { grid-area: sh; } .task .st { grid-area: st; }
  .task .tun { grid-area: tun; }

  .task.show {
    grid-template-columns: 1fr auto;
    grid-template-areas: 'wann wz' 'prod prod' 'lnk lnk' 'tun tun';
  }
  .task.show .wann { grid-area: wann; } .task.show .prod { grid-area: prod; }
  .task.show .lnk { grid-area: lnk; } .task.show .wz { grid-area: wz; }
  .task.show .tun { grid-area: tun; justify-self: start; }

  .task.fr { grid-template-columns: 1fr; }
  .task.fr .erg { justify-content: flex-start; }}

@media (max-width: 760px) {
  .sbybox { padding: 20px 18px 22px; border-radius: 10px; }
  .karte { padding: 22px 18px; }
  .halle.gate { opacity: .32; }
  .meineliste li { flex-direction: column; gap: 7px; }}


/* Welcher Link bei einer Freigabe verschickt wurde */
.task.fr .wohin {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-top: 4px;
}
.task.fr .wohin a {
  font-family: 'IBM Plex Mono', monospace; font-size: 11px;
  color: var(--mute); text-decoration: none;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.task.fr .wohin a:hover { color: var(--amber-ink); text-decoration: underline; }
.task.fr .wohin .eig {
  font-family: 'IBM Plex Mono', monospace; font-size: 8.5px;
  letter-spacing: .13em; text-transform: uppercase;
  color: var(--amber-ink); background: var(--amber-bg);
  padding: 2px 6px; border-radius: 3px; flex: 0 0 auto;
}

/* Anzahl der Plätze beim Freigeben */
.anzahlfeld { display: flex; align-items: center; gap: 8px; }
.anzahlfeld input[type="number"] {
  width: 84px; flex: 0 0 auto; text-align: center;
  font-family: 'IBM Plex Mono', monospace; font-size: 17px;
  font-variant-numeric: tabular-nums;
}
.anzahlfeld .btn {
  flex: 0 0 auto; width: 38px; height: 38px; padding: 0;
  font-size: 17px; line-height: 1;
}
.anzsuffix {
  font-family: 'IBM Plex Mono', monospace; font-size: 11px;
  letter-spacing: .13em; text-transform: uppercase; color: var(--mute);
}

/* Einstiegshilfe, solange keine Vorstellung erfasst ist */
.erstschritt {
  max-width: 1180px; margin: 20px auto 0;
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 16px 20px;
  background: var(--glass-panel);
  border: 1px solid var(--amber);
  border-left-width: 3px;
  border-radius: 9px;
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
}
.erstschritt b { font-size: 15.5px; font-weight: 600; flex: 0 0 auto; }
.erstschritt span { font-size: 13.5px; color: var(--mute); flex: 1 1 320px; line-height: 1.55; }
.erstschritt .btn { flex: 0 0 auto; }

@media (max-width: 700px) {
  .erstschritt { flex-direction: column; align-items: stretch; gap: 11px; }
  .erstschritt .btn { width: 100%; }
}

.fieldnote a { color: var(--amber-ink); text-decoration: underline; text-underline-offset: 2px; }

/* Hinweis auf die Reihenfolge, wenn noch kein Link hinterlegt ist */
.reihenfolge {
  padding: 13px 15px;
  background: var(--amber-bg);
  border-left: 3px solid var(--amber);
  border-radius: 6px;
  font-size: 13.5px; line-height: 1.6;
}
.reihenfolge b { display: block; margin-bottom: 4px; color: var(--ink); }
.reihenfolge span { color: var(--ink-2, var(--mute)); }

/* «Link merken» unter dem Feld */
label.merken {
  display: flex; align-items: flex-start; gap: 10px;
  font-family: 'Inter', sans-serif; font-size: 13px;
  letter-spacing: 0; text-transform: none; color: var(--mute);
  cursor: pointer; margin: 0; line-height: 1.5;
}
label.merken input {
  width: auto; height: auto; min-width: 0; margin-top: 2px;
  accent-color: var(--amber); flex: 0 0 auto;
}

/* Eigene Plus/Minus-Knöpfe reichen — die des Browsers sind daneben zu viel */
.anzahlfeld input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
.anzahlfeld input[type="number"]::-webkit-outer-spin-button,
.anzahlfeld input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none; margin: 0;
}

/* Termine einlesen */
.importliste {
  margin: 4px 0 0;
  border: 1px solid var(--line); border-radius: 7px; overflow: hidden;
}
.importliste .ihead {
  padding: 9px 13px; background: var(--panel-2);
  font-family: 'IBM Plex Mono', monospace; font-size: 10px;
  letter-spacing: .13em; text-transform: uppercase; color: var(--mute);
}
.irow {
  display: grid; grid-template-columns: minmax(0,200px) minmax(0,1fr) 72px;
  gap: 12px; align-items: baseline;
  padding: 8px 13px; border-top: 1px solid var(--line-2); font-size: 13.5px;
}
.irow.schon { opacity: .5; }
.irow .is {
  font-family: 'IBM Plex Mono', monospace; font-size: 11px; color: var(--mute);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.irow .iz {
  justify-self: end;
  font-family: 'IBM Plex Mono', monospace; font-size: 9px;
  letter-spacing: .13em; text-transform: uppercase;
  color: var(--amber-ink);
}
.irow.schon .iz { color: var(--faint); }

.lnk .auto {
  display: block; margin-top: 2px;
  font-family: 'IBM Plex Mono', monospace; font-size: 9px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--faint);
}

@media (max-width: 700px) {
  .irow { grid-template-columns: 1fr auto; gap: 4px 10px; }
  .irow .is { grid-column: 1 / -1; }
}