/* Wyssrüti Helferplan — Branding wie die Drehbuch-App (wyssrueti-festival.ch) */
@font-face {
  font-family: "Bebas Neue";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/bebas-neue-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Bebas Neue";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/bebas-neue-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113;
}
:root {
  --green: #009640;
  --green-deep: #00662c;
  --green-ink: #0b3d22;
  --gold: #f3b400;
  --gold-ink: #3d2e00;
  --red: #cf2e2e;
  --paper: #f4f6f3;
  --card: #ffffff;
  --ink: #14231a;
  --ink-soft: #5b6e61;
  --line: #dde3dc;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  line-height: 1.45;
  -webkit-tap-highlight-color: transparent;
}
.display {
  font-family: "Bebas Neue", "Arial Narrow", "Segoe UI", sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.035em;
  font-weight: 400;
}
button { font: inherit; cursor: pointer; }
a { color: var(--green-deep); }
.flash { background: var(--red); color: #fff; padding: 8px 16px; }
.flash.success { background: var(--green); }
.flash.info { background: var(--gold); color: var(--gold-ink); }
.flash p { margin: 4px 0; max-width: 640px; margin-inline: auto; }
.empty { color: var(--ink-soft); padding: 24px 16px; text-align: center; }
.label-soft { font-weight: 500; color: var(--ink-soft); }
.start-hint { color: var(--ink-soft); font-size: 0.9rem; }

/* ===== Header ===== */
.app-head {
  background: var(--green);
  color: #fff;
  padding: max(10px, env(safe-area-inset-top)) 14px;
  position: sticky; top: 0; z-index: 10;
}
.brandrow { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; max-width: 900px; margin: 0 auto; }
.brand { color: var(--gold); font-size: 1.35rem; text-decoration: none; }
.headbtns { display: flex; gap: 14px; align-items: center; }
.headbtns form { margin: 0; display: flex; }
.headlink { color: #fff; font-weight: 700; font-size: 0.85rem; text-decoration: none; opacity: 0.92; }
.headlink-btn { border: none; background: none; padding: 0; }
.headlink:hover { opacity: 1; }

/* ===== Login-Karten ===== */
.login-page {
  background: var(--green); min-height: 100vh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px; padding: 24px 0;
}
.login-logo { width: min(220px, 55vw); height: auto; display: block; margin-bottom: 4px; }
.login-page .flash {
  width: min(92vw, 380px); border-radius: 12px; text-align: center;
  padding: 12px 16px; font-weight: 600;
}
.login-card {
  background: var(--card); border-radius: 18px; padding: 32px 28px;
  width: min(92vw, 400px); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
}
.login-card h1 { color: var(--green); margin: 0 0 4px; font-size: 1.9rem; text-align: center; }
.login-hint { color: var(--ink-soft); font-size: 0.9rem; margin: 0 0 18px; }
.login-alt { margin: 18px 0 0; font-size: 0.9rem; color: var(--ink-soft); text-align: center; }
.login-card label, .form-page label { display: block; font-weight: 700; font-size: 0.82rem; margin: 12px 0 4px; }
.login-card input, .login-card select, .login-card textarea,
.form-page input, .form-page select, .form-page textarea,
.inline-form input, .inline-form select,
dialog input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), dialog select, dialog textarea {
  width: 100%; padding: 11px 12px; border: 2px solid var(--line); border-radius: 10px;
  font: inherit; background: #fff; color: var(--ink); resize: vertical;
}
.login-card button[type="submit"], .form-actions button[type="submit"],
.neu-knopf-zeile button,
.inline-form button:not(.small) {
  background: var(--gold); color: var(--gold-ink); border: none;
  padding: 12px 22px; border-radius: 10px; font-weight: 800; margin-top: 16px;
}
.login-card button[type="submit"] { width: 100%; }
.code-input { text-align: center; font-size: 1.5rem; letter-spacing: 0.35em; font-variant-numeric: tabular-nums; }
.mini-form { text-align: center; margin-top: 10px; }
.linkbtn { border: none; background: none; color: var(--green-deep); font-weight: 700; font-size: 0.9rem; text-decoration: underline; padding: 6px; }
.login-card input.feld-fehler { border-color: var(--red); background: #fdf3f2; }
.feld-fehler-text { margin: 5px 0 0; color: var(--red); font-size: 0.8rem; font-weight: 700; }
.dev-hinweis {
  background: #fff6dd; border-left: 4px solid var(--gold); border-radius: 0 8px 8px 0;
  padding: 8px 12px; font-size: 0.88rem;
}
.fehler-hinweis {
  background: #fdecea; border-left: 4px solid var(--red); border-radius: 0 8px 8px 0;
  padding: 8px 12px; font-size: 0.88rem;
}
.totp-secret {
  background: var(--paper); border: 2px dashed var(--line); border-radius: 10px;
  padding: 10px 12px; text-align: center; font-family: ui-monospace, Consolas, monospace;
  font-size: 1.05rem; letter-spacing: 0.08em; word-break: break-all;
}
.mono { font-family: ui-monospace, Consolas, monospace; font-size: 0.72rem; word-break: break-all; }

/* ===== Hauptbereich ===== */
main { max-width: 680px; margin: 0 auto; padding-bottom: 60px; }
.block-head { display: flex; align-items: baseline; gap: 12px; padding: 16px 16px 0; flex-wrap: wrap; }
.block-head h1 { margin: 0; font-size: 1.7rem; color: var(--green-ink); }
.tag-datum { color: var(--ink-soft); font-size: 0.88rem; font-weight: 600; }
.notice {
  margin: 10px 16px 0; padding: 10px 14px;
  background: #fff6dd; border-left: 4px solid var(--gold);
  border-radius: 0 10px 10px 0; font-size: 0.9rem;
  display: flex; align-items: flex-start; gap: 10px;
}
.notice-text { flex: 1; white-space: pre-line; }
.notice.absage { background: #fdecea; border-left-color: var(--red); align-items: center; }
.notice.absage form { margin: 0; }
.absage-ok {
  border: 1.5px solid var(--red); background: none; color: var(--red);
  border-radius: 8px; padding: 6px 13px; font-size: 0.8rem; font-weight: 700; white-space: nowrap;
}
.absage-ok:hover { background: var(--red); color: #fff; }
.plan-wrap { position: relative; margin-top: 12px; }
.plan-wrap img { width: 100%; height: auto; display: block; border-radius: 8px; }
.plan-punkt {
  position: absolute; left: 89.5%; top: 45.2%;
  width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%;
  background: var(--red); box-shadow: 0 0 0 2.5px #fff;
}
.plan-punkt::after {
  content: ""; position: absolute; inset: -5px; border-radius: 50%;
  border: 3px solid var(--red); animation: plan-puls 1.6s ease-out infinite;
}
@keyframes plan-puls {
  0% { transform: scale(0.55); opacity: 1; }
  100% { transform: scale(2.6); opacity: 0; }
}
.plan-hinweis {
  margin: 10px 2px 0; font-size: 0.88rem; font-weight: 600; color: var(--ink);
  display: flex; align-items: center; gap: 9px;
}
.plan-punkt-mini {
  width: 11px; height: 11px; border-radius: 50%; flex-shrink: 0;
  background: var(--red); box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--line);
}
@media (max-width: 640px) {
  .plan-punkt { width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px; }
}
.austritt-hinweis { margin: 10px 0 4px; }
.austritt-hinweis small { color: var(--ink-soft); }
.austritt-dialog p { margin: 8px 0 0; font-size: 0.92rem; line-height: 1.55; color: var(--ink); }
.dialog-knoepfe { display: flex; gap: 10px; justify-content: flex-end; margin-top: 20px; }
.dialog-knoepfe .danger { margin: 0; }

/* Helferessen */
.essen-dialog p { margin: 8px 0 0; font-size: 0.92rem; line-height: 1.55; color: var(--ink); }
.essen-datum {
  font-weight: 800; color: var(--green-deep); font-size: 1.05rem !important;
  margin-top: 6px !important;
}
.essen-frage { font-weight: 700; margin-top: 16px !important; }
.menu-wahl { display: flex; gap: 10px; margin-top: 10px; }
.menu-wahl label {
  flex: 1; border: 2px solid var(--line); border-radius: 12px; padding: 13px;
  text-align: center; font-weight: 800; cursor: pointer; color: var(--ink-soft);
}
.menu-wahl input { display: none; }
.menu-wahl label.gewaehlt { border-color: var(--green); background: #e9f5ed; color: var(--green-deep); }
.essen-ja {
  background: var(--green); color: #fff; border: none; border-radius: 10px;
  padding: 10px 22px; font-weight: 800;
}
.essen-ja:disabled { opacity: 0.4; cursor: not-allowed; }
.tel-form { margin: 0; display: flex; gap: 6px; align-items: center; }
.form-page .tel-input {
  width: 140px; margin: 0; padding: 5px 8px; font-size: 0.85rem;
  border: 1.5px solid transparent; border-radius: 8px; background: none;
  font-variant-numeric: tabular-nums;
}
.form-page .tel-input:hover { border-color: var(--line); background: #fff; }
.form-page .tel-input:focus { border-color: var(--green); background: #fff; outline: none; }
.tel-form .tel-ok { display: none; }
.tel-form:focus-within .tel-ok { display: inline-block; }
.funfact {
  margin: 28px 0 0; padding: 12px 16px; font-size: 0.92rem;
  background: #eaf6ee; border-left: 4px solid var(--green); border-radius: 0 12px 12px 0;
}
.funfact p { margin: 0; }
.funfact b { color: var(--green-deep); }
.funfact-tab { width: 100%; border-collapse: collapse; margin-top: 10px; font-size: 0.85rem; }
.funfact-tab th {
  text-align: left; padding: 2px 14px 4px 0; border-bottom: 1px solid #cde5d6;
  font-size: 0.66rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--ink-soft);
}
.funfact-tab td { padding: 5.5px 14px 5.5px 0; border-bottom: 1px dashed #cde5d6; }
.funfact-tab tr:last-child td { border-bottom: none; }
.funfact-tab small { color: #6b3fc9; font-weight: 700; }
.aktiv-zeile { display: flex; align-items: center; gap: 14px; margin-top: 14px; }
.aktiv-zeile form { margin: 0; }
.sms-zeile { display: flex; align-items: center; gap: 14px; margin-top: 8px; }
.sms-zeile button { margin: 0; }
.sms-zaehler { color: var(--ink-soft); }
.badge.rot { background: #fdecea; color: var(--red); }
.start-hint .gruen { color: var(--green-deep); }
.start-hint .rot { color: var(--red); }
.essen-bilanz { margin: 12px 0 4px; font-size: 1.05rem; color: var(--ink-soft); }
.essen-bilanz b { font-size: 1.35rem; font-variant-numeric: tabular-nums; color: var(--ink); }
.essen-bilanz b.gruen { color: var(--green-deep); }
.essen-bilanz b.rot { color: var(--red); }

/* Meine Schichten */
.meine { margin: 14px 16px 0; background: var(--card); border: 1px solid var(--line); border-left: 4px solid var(--gold); border-radius: 12px; padding: 12px 16px; }
.psec-h { margin: 0 0 6px; font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-soft); }
.meine-liste { margin: 0; padding: 0; list-style: none; font-size: 0.88rem; }
.meine-liste li { padding: 4px 0; border-bottom: 1px dashed var(--line); }
.meine-liste li:last-child { border-bottom: none; }
.meine-liste b { color: var(--green-deep); }

/* ===== Helfer-Plan (Mockup-Layout) ===== */
.plan-main { max-width: 980px; }
.tagwahl { padding: 14px 16px 0; }
.tagwahl form { margin: 0; display: flex; gap: 8px; align-items: center; }
.tag-select {
  width: 100%; max-width: 340px;
  border: 2px solid var(--green); border-radius: 12px; padding: 10px 38px 10px 14px;
  font: inherit; font-size: 0.92rem; font-weight: 800; letter-spacing: 0.02em;
  color: var(--green-deep); background: var(--card); cursor: pointer;
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300662c' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 14px;
}
.htitel { padding: 14px 16px 0; }
.htitel h1 { margin: 0; font-size: 1.65rem; color: var(--green-ink); }
.deintag {
  margin: 14px 16px 0; background: #eaf6ee; border-radius: 14px; padding: 14px 16px;
  border: 1px solid #cde5d6; border-left: 4px solid var(--green);
  box-shadow: 0 1px 3px rgba(20, 35, 26, 0.06);
}
.deintag .zeitstrahl { background: #fff; }
.deintag .dabei-liste li, .deintag-tab .badge.ok { background: #dcefe2; }
.deintag-kopf { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.deintag-kopf h2 { margin: 0 0 10px; font-size: 1.02rem; font-weight: 600; color: var(--ink); }
.deintag-kopf span {
  font-size: 0.68rem; font-weight: 800; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--green-deep);
}
.zeitstrahl {
  position: relative; height: 26px; border-radius: 8px;
  background: var(--paper); border: 1px solid var(--line); overflow: hidden;
}
.seg {
  position: absolute; top: 0; bottom: 0;
  display: flex; align-items: center; padding: 0 8px;
  background: var(--green); color: #fff;
  font-size: 0.74rem; font-weight: 600; white-space: nowrap; overflow: hidden;
}
.seg.seg-offen {
  background: repeating-linear-gradient(45deg, var(--gold) 0 6px, #e0a800 6px 12px);
  color: var(--gold-ink);
}
.zeitticks { position: relative; height: 16px; margin-top: 4px; }
.tick {
  position: absolute; transform: translateX(-50%);
  font-size: 0.72rem; font-weight: 500; color: var(--green-deep); font-variant-numeric: tabular-nums;
}
.tick.sl-0 { transform: none; }
.tick.sl-100 { transform: translateX(-100%); }
.deintag-tab { width: 100%; border-collapse: collapse; margin-top: 12px; font-size: 0.85rem; }
.deintag-tab th {
  text-align: left; padding: 4px 14px 5px 0; border-bottom: 1px solid var(--line);
  font-size: 0.66rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--ink-soft);
}
.deintag-tab td { padding: 7px 14px 7px 0; border-bottom: 1px dashed var(--line); }
.deintag-tab tr:last-child td { border-bottom: none; }
.deintag-tab .nowrap { white-space: nowrap; }
.deintag-tab small { color: #6b3fc9; font-weight: 800; }
.rkopf2 { border-bottom: 1px solid var(--line); margin: -2px -16px 0; padding: 2px 16px 12px; }
.rkopf2 h2 { margin: 0; font-size: 1.08rem; color: var(--ink); }
.rsub { margin: 2px 0 0; font-size: 0.82rem; color: var(--ink-soft); font-weight: 600; }
.hrow {
  display: grid; grid-template-columns: minmax(160px, auto) minmax(0, 1fr) auto;
  gap: 12px 22px; align-items: start;
  border-top: 1px solid var(--line); margin: 0 -16px; padding: 13px 16px 13px 13px;
  border-left: 3px solid transparent;
}
.hmitte { min-width: 0; }
.hmitte .dabei-liste { margin-top: 0; }
.rcard > .hrow:first-child, .rkopf2 + .hrow { border-top: none; }
.hrow.h-fix { border-left-color: var(--green); }
.hrow.h-offen { border-left-color: var(--gold); }
.hzeit {
  font-family: ui-monospace, Consolas, monospace;
  font-size: 0.98rem; font-weight: 800; color: var(--ink); letter-spacing: -0.01em;
}
.hkap { margin-top: 8px; }
.hkap-text {
  margin: 3px 0 0; font-family: ui-monospace, Consolas, monospace;
  font-size: 0.76rem; color: var(--ink-soft);
}
.dabei-liste {
  margin: 9px 0 0; padding: 0; list-style: none;
  display: grid; grid-auto-flow: column; grid-template-rows: repeat(3, auto);
  gap: 3px 12px; justify-content: start;
  max-width: 100%; overflow-x: auto;
}
.dabei-liste li {
  display: flex; align-items: center; gap: 6px;
  background: #e9f5ed; border-radius: 7px; padding: 2px 10px 2px 8px;
  font-size: 0.74rem; font-weight: 700; color: var(--green-deep); white-space: nowrap;
}
.dabei-liste li.wartend { background: #fff6dd; color: #8a6d00; }
.dl-status { font-weight: 800; }
.mein-status { margin: 8px 0 0; font-size: 0.85rem; font-weight: 800; }
.mein-status.fix { color: var(--green-deep); }
.mein-status.offen { color: #8a6d00; }
.hbtn { text-align: right; max-width: 190px; }
.hbtn form { margin: 0; }
.btn-eintragen.gesperrt { opacity: 0.45; cursor: not-allowed; width: auto; padding: 10px 18px; }
.konflikt-hinweis { margin: 6px 0 0; font-size: 0.75rem; font-weight: 700; color: var(--red); line-height: 1.35; }
@media (max-width: 640px) {
  .hrow { grid-template-columns: 1fr auto; gap: 8px 12px; }
  .hinfo { grid-column: 1; grid-row: 1; }
  .hbtn { grid-column: 2; grid-row: 1; text-align: right; max-width: 150px; }
  .hmitte { grid-column: 1 / -1; grid-row: 2; }
  .hmitte .dabei-liste { margin-top: 2px; }
  /* Handy: Namen füllen die Breite und brechen um, statt rechts abgeschnitten zu werden */
  .dabei-liste {
    grid-auto-flow: row; grid-template-rows: none;
    grid-template-columns: repeat(auto-fill, minmax(108px, 1fr));
    overflow: visible;
  }
  .dabei-liste li { white-space: normal; }
}

/* ===== Ruhige Helferansicht: Karten + Zeilen ===== */
.leiste { display: flex; justify-content: flex-end; margin: -4px 2px 0; }
.leiste button {
  background: none; border: 0; font: inherit; font-size: 0.78rem; color: var(--ink-soft);
  text-decoration: underline; text-underline-offset: 2px; cursor: pointer; padding: 4px;
}
.leiste button:hover { color: var(--ink); }
details.karte {
  background: var(--card); border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 1px 3px rgba(20, 35, 26, 0.05);
}
.khead {
  display: flex; align-items: center; gap: 10px; padding: 13px 14px 13px 16px;
  cursor: pointer; list-style: none; border-radius: 12px;
}
.khead::-webkit-details-marker { display: none; }
.khead:hover { background: #f8f9f7; }
.khead b { font-size: 0.95rem; flex: 1; letter-spacing: -0.01em; color: var(--ink); }
.ksum { font-size: 0.78rem; color: var(--ink-soft); white-space: nowrap; }
.ksum em { font-style: normal; color: var(--green-deep); font-weight: 700; }
.pfeil { width: 16px; text-align: center; color: var(--ink-soft); font-size: 0.7rem; transition: transform 0.15s; }
details.karte:not([open]) .pfeil { transform: rotate(-90deg); }
.karte-info { margin: 0; padding: 0 16px 10px; font-size: 0.78rem; color: var(--ink-soft); }
.info-inhalt { padding: 2px 18px 14px; border-top: 1px solid var(--line); }
.info-inhalt h3 {
  margin: 14px 0 4px; font-size: 0.74rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.09em; color: var(--green-deep);
}
.info-inhalt p { margin: 10px 0 4px; font-size: 0.88rem; }
.info-inhalt ul { margin: 6px 0 0; padding-left: 20px; }
.info-inhalt li { font-size: 0.88rem; line-height: 1.55; padding: 2.5px 0; }

/* Infoblätter bearbeiten (Admin) */
.info-edit { margin-top: 12px; }
.info-form { padding: 6px 16px 0; border-top: 1px solid var(--line); }
.info-form textarea { font-family: ui-monospace, Consolas, monospace; font-size: 0.84rem; line-height: 1.5; }
.check-zeile { display: flex; align-items: center; gap: 8px; font-size: 0.85rem; font-weight: 600; margin: 6px 0; }
.check-zeile input { width: auto; margin: 0; }
.ressort-wahl {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 0 14px;
  margin-top: 8px; padding: 8px 12px; background: var(--paper); border-radius: 10px;
}
.info-aktionen { margin: 12px 0 14px; }
.info-loeschen { margin: 0; padding: 0 16px 14px; text-align: right; }
.hzeile {
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 14px;
  padding: 13px 16px; border-top: 1px solid var(--line);
}
.hzeile.alt { background: #f6f8f5; }
.hzeile:last-child { border-radius: 0 0 11px 11px; }
.hzeile:hover { background: #eef1ec; }
.ztitel2 { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; }
.zeit2 { font-size: 0.95rem; font-weight: 700; letter-spacing: -0.01em; color: var(--ink); }
.zeit2.aus { color: var(--ink-soft); font-weight: 500; }
.kap2 { font-size: 0.78rem; color: var(--ink-soft); }
.mark { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.01em; }
.mark.m-wartet { color: #8a6d00; }
.mark.m-ok { color: var(--green-deep); }
.mark.m-ersatz { color: #6b3fc9; letter-spacing: 0.1em; font-size: 0.64rem; text-transform: uppercase; }
.meta2 { margin: 4px 0 0; font-size: 0.78rem; color: var(--ink-soft); line-height: 1.5; }
.namen2 { margin: 5px 0 0; font-size: 0.78rem; color: var(--ink-soft); line-height: 1.55; }
.tun { justify-self: end; }
.tun form { margin: 0; }
.btn2 {
  width: 104px; height: 40px; border-radius: 8px;
  border: 1.5px solid var(--green-deep); background: var(--card);
  color: var(--green-deep); font-size: 0.85rem; font-weight: 700; cursor: pointer;
}
.btn2:hover:not(:disabled) { background: var(--green-deep); color: #fff; }
.btn2.weg { border-color: var(--line); color: var(--ink-soft); font-weight: 500; }
.btn2.weg:hover { background: var(--card); color: var(--ink); border-color: var(--ink); }
.btn2:disabled { border-color: var(--line); color: #a9aeb3; background: var(--card); cursor: not-allowed; }
@media (max-width: 480px) {
  .hzeile { padding: 12px 13px 12px 15px; gap: 10px; }
  .btn2 { width: 96px; height: 44px; font-size: 0.8rem; }
}

/* Karten (Aufbau/Abbau) */
.tasklist { padding: 14px 16px 8px; display: flex; flex-direction: column; gap: 12px; }
.tcard {
  background: var(--card); border-radius: 14px; padding: 14px 16px;
  border: 1px solid color-mix(in srgb, var(--line) 55%, transparent);
  border-left: 4px solid var(--line);
  box-shadow: 0 1px 3px rgba(20, 35, 26, 0.06);
}
.tcard.meins { border-left-color: var(--gold); }
.trow { display: flex; align-items: center; gap: 12px; }
.zeit { font-weight: 800; font-size: 1.02rem; color: var(--green-ink); font-variant-numeric: tabular-nums; }
.hstat {
  margin-left: auto; background: #e2f2e7; color: var(--green-deep);
  border-radius: 9px; padding: 5px 12px;
  font-size: 0.8rem; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.hstat.ok { background: #fff3cf; color: #8a6d00; }
.schicht-notiz { margin: 6px 0 0; font-size: 0.84rem; color: var(--ink-soft); }
.treffen { margin: 4px 0 0; font-size: 0.78rem; font-weight: 700; color: var(--green-deep); }
.card-names { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 9px; }
.cname {
  background: #e2f2e7; color: var(--green-deep);
  border-radius: 999px; padding: 3px 10px; font-size: 0.72rem; font-weight: 700; white-space: nowrap;
}
.taktionen { margin-top: 11px; display: flex; align-items: center; }
.taktionen form { margin: 0; width: 100%; }
.btn-eintragen {
  width: 100%; border: none; border-radius: 10px; padding: 12px;
  background: var(--gold); color: var(--gold-ink); font-weight: 800; font-size: 0.95rem;
}
.btn-eintragen:active { filter: brightness(0.93); }
.btn-eintragen.klein { width: auto; padding: 7px 14px; font-size: 0.8rem; border-radius: 8px; }
.btn-austragen {
  width: 100%; border: 2px solid var(--line); background: none; border-radius: 10px;
  padding: 10px; color: var(--ink-soft); font-weight: 700; font-size: 0.9rem;
}
.btn-austragen.klein { width: auto; padding: 6px 12px; font-size: 0.78rem; border-radius: 8px; }
.voll { color: var(--ink-soft); font-weight: 800; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.06em; }
.frist-hinweis { font-size: 0.78rem; color: var(--ink-soft); font-style: italic; }
.ganztag-wrap { padding: 2px 16px 8px; }
.ganztag-wrap form { margin: 0; }
.ganztag {
  width: 100%; padding: 13px; border-radius: 12px;
  border: 2px dashed var(--green); background: #eef7f1;
  color: var(--green-deep); font-weight: 700; font-size: 0.95rem;
}
.ganztag:active { background: #d2e9da; }

/* Ressort-Karten (Festivaltag) */
.rcard {
  background: var(--card); border-radius: 14px; padding: 14px 16px;
  border: 1px solid color-mix(in srgb, var(--line) 55%, transparent);
  box-shadow: 0 1px 3px rgba(20, 35, 26, 0.06);
}
.rkopf { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.rkopf h2 { margin: 0; font-size: 1.15rem; color: var(--green-ink); }
.rchef { font-size: 0.78rem; font-weight: 700; color: var(--ink-soft); }
.rhinweis { margin: 4px 0 0; font-size: 0.82rem; color: #8a6d00; background: #fff6dd; border-radius: 7px; padding: 5px 10px; display: inline-block; }
.srow { border-top: 1px solid var(--line); margin-top: 10px; padding-top: 10px; }
.srow.meins { border-left: 3px solid var(--gold); padding-left: 10px; margin-left: -13px; }
.srow.ersatz .zeit { color: #6b3fc9; }
.srow-top { display: flex; align-items: center; gap: 10px; }
.srow-top .hstat { margin-left: auto; }
.srow-top form { margin: 0; }

/* ===== Onboarding ===== */
.onboard h1 { margin-bottom: 2px; }
.schritt {
  display: flex; gap: 14px; align-items: flex-start;
  background: var(--card); border: 1px solid var(--line); border-radius: 14px;
  padding: 16px; margin-top: 12px;
  box-shadow: 0 1px 3px rgba(20, 35, 26, 0.05);
}
.schritt-nr {
  flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%;
  background: var(--green); color: #fff; font-weight: 800; font-size: 0.95rem;
  display: flex; align-items: center; justify-content: center;
}
.schritt h2 { margin: 2px 0 4px; font-size: 1.02rem; color: var(--green-ink); }
.schritt p { margin: 0; font-size: 0.9rem; color: var(--ink-soft); line-height: 1.55; }
.ob-los {
  display: block; width: 100%; text-align: center;
  background: var(--gold); color: var(--gold-ink);
  padding: 14px 26px; border-radius: 12px; font-weight: 800; font-size: 1rem;
  text-decoration: none;
  animation: ob-los-puls 2.2s ease-in-out infinite;
}
.ob-los:active { filter: brightness(0.94); }
@keyframes ob-los-puls {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(0, 0, 0, 0); }
  50% { transform: scale(1.015); box-shadow: 0 4px 14px rgba(20, 35, 26, 0.18); }
}
@media (prefers-reduced-motion: reduce) {
  .ob-los { animation: none; }
}
.hilfe-link { text-align: center; margin: 18px 0 0; font-size: 0.82rem; }
.hilfe-link a { color: var(--ink-soft); }

/* ===== Formulare, Profil, Admin ===== */
.form-page { max-width: 640px; margin: 0 auto; padding: 16px 16px 60px; }
.form-page.breit { max-width: 900px; }
.form-page h1, .form-page h2 { color: var(--green-ink); }
.form-page h1 { font-size: 1.7rem; }
.form-page section { margin-top: 34px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.form-actions { display: flex; gap: 12px; align-items: center; margin-top: 20px; }
.inline-form { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 10px 0 0; }
.inline-form input, .inline-form select { width: auto; flex: 1; min-width: 130px; }
.inline-form button { margin-top: 0; white-space: nowrap; }
.danger { background: var(--red); color: #fff; border: none; padding: 12px 22px; border-radius: 10px; font-weight: 800; }
.danger:disabled { opacity: 0.4; cursor: not-allowed; }
.danger-zone {
  margin-top: 30px; padding: 4px 18px 16px;
  border: 1.5px solid var(--red); border-radius: 14px; background: #fdf3f3;
}
.danger-zone h2 { color: var(--red); }
.backup-box {
  margin-top: 30px; padding: 4px 18px 18px;
  border: 1.5px solid var(--green); border-radius: 14px; background: #f0f7f2;
}
.backup-box h2 { color: var(--green-deep); }
.backup-box h3 { margin: 20px 0 6px; font-size: 0.98rem; }
.backup-box h2 + h3 { margin-top: 6px; }
.danger.small, button.small { padding: 7px 13px; font-size: 0.8rem; border-radius: 8px; margin: 0; }
button.small:not(.danger) { background: var(--green); color: #fff; border: none; font-weight: 700; }
button.small.hell {
  background: var(--card); color: var(--green-deep);
  border: 1.5px solid var(--green-deep); font-weight: 700;
}
button.small.hell:hover { background: var(--green-deep); color: #fff; }
.admin-table { width: 100%; border-collapse: collapse; margin-top: 12px; font-size: 0.85rem; background: var(--card); border-radius: 10px; overflow: hidden; }
.admin-table th, .admin-table td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
.admin-table th { background: #e7eae6; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-soft); }
.admin-table form { margin: 0; }
.admin-table tr.inaktiv { opacity: 0.5; }
.sysinfo {
  margin: 12px 0 0; padding: 4px 14px; list-style: none; max-width: 340px;
  background: var(--card); border: 1px solid var(--line); border-radius: 12px;
}
.sysinfo li {
  display: flex; justify-content: space-between; gap: 16px;
  padding: 7px 2px; border-bottom: 1px dashed var(--line); font-size: 0.88rem;
}
.sysinfo li:last-child { border-bottom: none; }
.sysinfo span { color: var(--ink-soft); }
.sysinfo b { color: var(--green-deep); font-variant-numeric: tabular-nums; }
.sysinfo b.rot { color: var(--red); }
.btn-download {
  display: inline-block; padding: 11px 18px; border-radius: 10px;
  background: var(--green); color: #fff; font-weight: 800; font-size: 0.88rem; text-decoration: none;
}
.exportrow { display: flex; gap: 10px; flex-wrap: wrap; }
.restore-form { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-top: 10px; }
.restore-form input[type="file"] {
  flex: 1; min-width: 220px; padding: 9px; border: 2px dashed var(--line);
  border-radius: 10px; font-size: 0.85rem; background: var(--card);
}
.restore-form .danger { margin-top: 0; }
.tage-vorschau { margin: 12px 0 0; padding: 0; list-style: none; font-size: 0.86rem; }
.tage-vorschau li { padding: 5px 0; border-bottom: 1px dashed var(--line); color: var(--ink-soft); }
.tage-vorschau li:last-child { border-bottom: none; }
.tage-vorschau b { color: var(--green-deep); }
.inline-label { font-weight: 700; font-size: 0.82rem; margin: 0; }
.listenkopf {
  display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  margin-bottom: 22px;  /* Luft zwischen Titelzeile und der ersten Karte / Tabelle */
}
.listenkopf h1 { margin: 0; }
.listenkopf-aktionen { display: flex; gap: 10px; flex-wrap: wrap; }
.btn-download.hell {
  background: var(--card); color: var(--green-deep);
  border: 1.5px solid var(--green-deep); padding: 9.5px 16.5px;
}
.btn-download.hell:hover { background: var(--green-deep); color: #fff; }
.btn-cancel {
  display: inline-block; padding: 12px 22px; border-radius: 10px;
  border: 2px solid var(--line); color: var(--ink-soft);
  font-weight: 800; text-decoration: none; margin-top: 16px;
}
.tag-pill {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--card); border: 1.5px solid var(--line); border-radius: 999px;
  padding: 3px 4px 3px 11px; font-size: 0.8rem; font-weight: 600; margin: 2px 2px 2px 0;
}
.tag-pill button {
  width: 20px; height: 20px; border-radius: 50%; border: none;
  background: #eef1ee; color: var(--ink-soft); font-size: 0.8rem; line-height: 1; padding: 0;
}
.tag-pill button:hover { background: var(--red); color: #fff; }
.pill-form { display: inline; }
.bedarf-form { display: flex; gap: 5px; align-items: center; }
.bedarf-input {
  width: 42px; padding: 3px 2px; border: 1.5px solid var(--line); border-radius: 7px;
  font: inherit; font-size: 0.85rem; font-weight: 700; text-align: center;
  font-variant-numeric: tabular-nums;
}
.bedarf-input:focus { border-color: var(--green); outline: none; }

/* Bestätigungs-Status */
.badge {
  display: inline-block; border-radius: 999px; padding: 2px 10px;
  font-size: 0.7rem; font-weight: 800; letter-spacing: 0.03em; white-space: nowrap;
}
.badge.ok { background: #e2f2e7; color: var(--green-deep); }
.badge.offen { background: #fff3cf; color: #8a6d00; }
.tag-pill.st-ok { border-color: var(--green); background: #eef7f1; }
.tag-pill.st-offen { border-color: var(--gold); background: #fff6dd; }
.tag-pill.beispiel { pointer-events: none; }
.pill-ja {
  width: 20px; height: 20px; border-radius: 50%; border: none;
  background: var(--green); color: #fff; font-size: 0.75rem; line-height: 1; padding: 0;
}
.pill-ja:hover { background: var(--green-deep); }
.planbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-top: 6px; }
.legende { font-size: 0.78rem; color: var(--ink-soft); }
.plan-tabelle tr.gruppe-start td { border-top: 2px solid #c3cfc5; }
.plan-tabelle .nowrap { white-space: nowrap; }
.zaehler { font-weight: 800; font-variant-numeric: tabular-nums; color: var(--ink-soft); }
.zaehler.gut { color: var(--green-deep); }
.zaehler.halb { color: #8a6d00; }
.ersatz-tag { display: inline-block; margin-left: 4px; color: #6b3fc9; font-weight: 800; font-size: 0.68rem; text-transform: uppercase; }
.zuteil-form select { min-width: 120px; }

/* Admin-Board */
.uebersicht-kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.uebersicht-kopf h2 { margin: 0; }
.uebersicht-kopf .sum { font-size: 0.8rem; color: var(--ink-soft); }
.uebersicht-kopf .sum b { color: var(--ink); }
.uebersicht-kopf .sum b.rot { color: var(--red); }
.uebertab th { text-align: center; }
.uebertab td.num, .uebertab th.num { text-align: center; }
.uebertab th.links, .uebertab td.links { text-align: left; }
.uebertab td { height: 40px; }
.uebertab tbody tr[data-href] { cursor: pointer; }
.uebertab tbody tr[data-href]:hover td { background: #f0f3f0; }
.uebertab tbody tr:focus-visible { outline: 2px solid var(--green-deep); outline-offset: -2px; }
.uebertab tr.gruppe td { border-top: 2px solid #c3cfc5; }
.uebertab .dezent { color: var(--ink-soft); font-weight: 500; }
.bar-zelle { min-width: 150px; padding: 0 14px; }
.fbar {
  display: block; height: 15px; border-radius: 8px;
  background: #e9ebe7; position: relative; overflow: hidden;
}
.fbar i { position: absolute; top: 0; bottom: 0; left: 0; }
.fbar .f-ein { background: repeating-linear-gradient(135deg, #ffe9b0 0 3px, var(--gold) 3px 6px); }
.fbar .f-fix { background: var(--green); }
.total-zeile td { font-weight: 700; background: #f0f3f0; border-top: 2px solid #c3cfc5; height: 36px; }
.legende2 {
  margin-top: 10px; display: flex; gap: 16px; flex-wrap: wrap; align-items: center;
  font-size: 0.74rem; color: var(--ink-soft);
}
.legende2 i { display: inline-block; width: 22px; height: 8px; border-radius: 4px; margin-right: 6px; }
.legende2 .lg-fix { background: var(--green); }
.legende2 .lg-wart { background: repeating-linear-gradient(135deg, #ffe9b0 0 3px, var(--gold) 3px 6px); }
.board-tabelle .num { text-align: right; font-variant-numeric: tabular-nums; }
.board-tabelle td.num { font-weight: 700; }
.board-tabelle .gruen { color: var(--green-deep); }
.board-tabelle .rot { color: var(--red); }
.badge.grau { background: #e7eae6; color: var(--ink-soft); }
.zeilenlink { font-size: 0.82rem; font-weight: 700; white-space: nowrap; text-decoration: none; }
.zeilenlink:hover { text-decoration: underline; }
/* Zelle bleibt eine Tabellenzelle (kein Flex auf dem td — sonst laufen die Zeilenlinien nicht durch) */
.aktionen-zelle { white-space: nowrap; vertical-align: middle; }
.aktionen-zelle form { margin: 0 6px 0 0; display: inline-flex; vertical-align: middle; }
.aktionen-zelle form:last-child { margin-right: 0; }

/* ===== Zuteilung (Admin-Plan im Helfer-Look) ===== */
.zkopf { display: flex; align-items: baseline; gap: 10px 18px; flex-wrap: wrap; }
.zmeta {
  margin-left: auto; display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  font-size: 0.78rem; color: var(--ink-soft);
}
.zmeta b { font-variant-numeric: tabular-nums; }
.zmeta b.gruen { color: var(--green-deep); }
.zmeta b.gelb { color: #8a6d00; }
.zmeta b.rot { color: var(--red); }
.filterpill {
  display: inline-block; border: 1.5px solid var(--line); background: var(--card);
  color: var(--ink-soft); border-radius: 999px; padding: 7px 15px;
  font: inherit; font-size: 0.8rem; font-weight: 700; text-decoration: none; cursor: pointer;
  white-space: nowrap;
}
.filterpill:hover { border-color: var(--green); color: var(--green-deep); }
.filterpill.aktiv { background: var(--green); border-color: var(--green); color: #fff; }

.chef-edit { position: relative; display: inline-block; }
.chef-edit summary { list-style: none; cursor: pointer; }
.chef-edit summary::-webkit-details-marker { display: none; }
.chef-edit .stift { opacity: 0.45; font-size: 0.75rem; }
.chef-edit summary:hover { color: var(--green-deep); }
.chef-edit summary:hover .stift { opacity: 1; }
.chef-edit[open] summary { color: var(--green-deep); }
.chef-form { left: 0; right: auto; }
.chef-form input[name="chef_name"] {
  padding: 8px 10px; border: 2px solid var(--line); border-radius: 9px;
  font: inherit; font-size: 0.85rem; min-width: 220px; background: #fff; color: var(--ink);
}
/* Schichtzeilen wie in der Helferansicht, plus Ampel links + Sprungziel */
.admin-zuteilung .hzeile {
  align-items: start; border-left: 3px solid transparent; scroll-margin-top: 84px;
}
.admin-zuteilung .hzeile.hz-voll { border-left-color: var(--green); }
.admin-zuteilung .hzeile.hz-teil { border-left-color: var(--gold); }
.admin-zuteilung .hzeile.hz-leer { border-left-color: var(--red); }
.admin-zuteilung .hzeile:target { background: #fff6dd; }
.admin-zuteilung .karte-info { padding-bottom: 12px; }
.admin-zuteilung .zliste { margin-top: 7px; }
.meta2.niemand { font-style: italic; }
.admin-zuteilung .zplus summary {
  width: 104px; height: 40px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  border: 1.5px solid var(--green-deep); border-radius: 8px; background: var(--card);
  color: var(--green-deep); font-size: 0.85rem; font-weight: 700;
}
.admin-zuteilung .zplus summary:hover,
.admin-zuteilung .zplus[open] summary { background: var(--green-deep); color: #fff; }
.stepper { display: inline-flex; align-items: center; gap: 3px; }
.stepper form { margin: 0; display: inline-flex; }
.step {
  width: 19px; height: 19px; border-radius: 6px; padding: 0;
  border: 1.5px solid var(--line); background: #fff; color: var(--ink-soft);
  font-size: 0.85rem; font-weight: 800; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
}
.step:hover:not(:disabled) { border-color: var(--green); color: var(--green-deep); }
.step:disabled { opacity: 0.35; cursor: default; }
.soll-zahl { min-width: 1.3em; text-align: center; color: var(--ink); font-variant-numeric: tabular-nums; }
.zliste {
  margin: 0; padding: 0; list-style: none;
  columns: 2 210px; column-gap: 22px;
}
.zliste li {
  display: flex; align-items: center; gap: 7px;
  padding: 3px 6px; border-radius: 8px;
  break-inside: avoid; font-size: 0.86rem; font-weight: 600;
  background: #e9f5ed;
}
.zliste li + li { margin-top: 2px; }
.zliste li.wartend { background: #fff6dd; }
.zl-status { flex-shrink: 0; width: 16px; text-align: center; color: var(--green-deep); font-weight: 800; }
.zliste li.wartend .zl-status { color: #8a6d00; }
.zl-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--green-deep); }
.zliste li.wartend .zl-name { color: #8a6d00; }
.zl-aktionen { display: inline-flex; gap: 4px; flex-shrink: 0; opacity: 0.75; }
.zliste li:hover .zl-aktionen { opacity: 1; }
.pchip {
  display: inline-flex; align-items: center; gap: 5px;
  border-radius: 999px; padding: 4px 6px 4px 12px;
  font-size: 0.82rem; font-weight: 700;
}
.pchip.ok { background: #e2f2e7; color: var(--green-deep); }
.pchip.wartend { background: #fff6dd; color: #8a6d00; border: 1.5px dashed var(--gold); }
.pchip .pill-form { display: inline-flex; }
.pill-weg {
  width: 20px; height: 20px; border-radius: 50%; border: none;
  background: rgba(20, 35, 26, 0.08); color: var(--ink-soft);
  font-size: 0.85rem; line-height: 1; padding: 0;
}
.pill-weg:hover { background: var(--red); color: #fff; }
.pill-info {
  width: 20px; height: 20px; border-radius: 50%; border: none;
  background: rgba(20, 35, 26, 0.08); color: var(--ink-soft);
  font-size: 0.72rem; font-weight: 800; font-style: italic; font-family: Georgia, serif;
  line-height: 1; padding: 0;
}
.pill-info:hover { background: var(--green); color: #fff; }
.pill-zurueck {
  width: 20px; height: 20px; border-radius: 50%; border: none;
  background: rgba(20, 35, 26, 0.08); font-size: 0.7rem; line-height: 1; padding: 0;
}
.pill-zurueck:hover { background: var(--gold); }

/* Helferkarte (Modal) */
dialog.helfer-dialog {
  border: none; border-radius: 16px; padding: 24px;
  width: min(92vw, 420px); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
  max-height: calc(100dvh - 32px); overflow-y: auto; overscroll-behavior: contain;
}
dialog.helfer-dialog::backdrop { background: rgba(11, 61, 34, 0.6); }
.helfer-dialog h2 { margin: 0 0 2px; color: var(--green-ink); font-size: 1.3rem; }
.hd-ruf { margin: 0 0 12px; color: var(--ink-soft); font-size: 0.88rem; font-style: italic; }
.hd-tab { width: 100%; border-collapse: collapse; font-size: 0.88rem; margin-top: 8px; }
.hd-tab th {
  text-align: left; padding: 6px 12px 6px 0; vertical-align: top; white-space: nowrap;
  color: var(--ink-soft); font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.06em;
}
.hd-tab td { padding: 6px 0; }
.hd-tab a { color: var(--green-deep); }
.hd-sub {
  margin: 18px 0 6px; font-size: 0.74rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-soft);
}
.hd-schichten { margin: 0; padding: 0; list-style: none; font-size: 0.86rem; }
.hd-schichten li { padding: 5px 0; border-bottom: 1px dashed var(--line); }
.hd-schichten li:last-child { border-bottom: none; }
.hd-schichten b { color: var(--green-deep); }
.hd-schliessen { margin-top: 16px; text-align: right; }
.td-close {
  padding: 10px 18px; border-radius: 10px;
  border: 2px solid var(--line); background: none; font-weight: 700; color: var(--ink-soft);
}
.td-close:hover { border-color: var(--green); color: var(--green-deep); }
.zplus { position: relative; }
.zplus summary {
  list-style: none; cursor: pointer; white-space: nowrap;
  border: 1.5px solid var(--line); background: var(--card); border-radius: 10px;
  padding: 8px 14px; font-size: 0.82rem; font-weight: 700; color: var(--ink);
}
.zplus summary::-webkit-details-marker { display: none; }
.zplus summary:hover { border-color: var(--green); color: var(--green-deep); }
.zplus[open] summary { border-color: var(--green); color: var(--green-deep); }
.zplus-form {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 5;
  display: flex; gap: 6px; align-items: center;
  background: var(--card); border: 1.5px solid var(--line); border-radius: 12px;
  padding: 10px; box-shadow: 0 10px 26px rgba(20, 35, 26, 0.18);
}
.zplus-form select {
  padding: 8px 10px; border: 2px solid var(--line); border-radius: 9px;
  font: inherit; min-width: 160px; background: #fff; color: var(--ink);
}
option.opt-belegt { color: var(--red); font-weight: 700; }
@media (max-width: 760px) {
  .zmeta { margin-left: 0; }
  .admin-zuteilung .hzeile { grid-template-columns: 1fr; }
  .admin-zuteilung .tun { justify-self: start; }
  .admin-zuteilung .zplus-form { position: static; box-shadow: none; border: none; padding: 8px 0 0; }
}

/* ===== Druckansicht ===== */
@media print {
  .app-head, .flash { display: none; }
  body { background: #fff; }
  .admin-table { font-size: 0.75rem; }
}

/* ===== Schmale Bildschirme ===== */
@media (max-width: 520px) {
  .brandrow { justify-content: center; }
  .form-row { grid-template-columns: 1fr; }
  .srow-top { flex-wrap: wrap; }
  .admin-page.breit { overflow-x: auto; }
}

/* === generierte Zeitstrahl-Positionen === */
/* sl-N = left N%, sw-N = width N% — genutzt von .seg und .tick */
.hbtn .btn-eintragen:not(.gesperrt), .hbtn .btn-austragen { width: auto; padding: 10px 18px; }
.sl-0 { left: 0%; }
.sl-1 { left: 1%; }
.sl-2 { left: 2%; }
.sl-3 { left: 3%; }
.sl-4 { left: 4%; }
.sl-5 { left: 5%; }
.sl-6 { left: 6%; }
.sl-7 { left: 7%; }
.sl-8 { left: 8%; }
.sl-9 { left: 9%; }
.sl-10 { left: 10%; }
.sl-11 { left: 11%; }
.sl-12 { left: 12%; }
.sl-13 { left: 13%; }
.sl-14 { left: 14%; }
.sl-15 { left: 15%; }
.sl-16 { left: 16%; }
.sl-17 { left: 17%; }
.sl-18 { left: 18%; }
.sl-19 { left: 19%; }
.sl-20 { left: 20%; }
.sl-21 { left: 21%; }
.sl-22 { left: 22%; }
.sl-23 { left: 23%; }
.sl-24 { left: 24%; }
.sl-25 { left: 25%; }
.sl-26 { left: 26%; }
.sl-27 { left: 27%; }
.sl-28 { left: 28%; }
.sl-29 { left: 29%; }
.sl-30 { left: 30%; }
.sl-31 { left: 31%; }
.sl-32 { left: 32%; }
.sl-33 { left: 33%; }
.sl-34 { left: 34%; }
.sl-35 { left: 35%; }
.sl-36 { left: 36%; }
.sl-37 { left: 37%; }
.sl-38 { left: 38%; }
.sl-39 { left: 39%; }
.sl-40 { left: 40%; }
.sl-41 { left: 41%; }
.sl-42 { left: 42%; }
.sl-43 { left: 43%; }
.sl-44 { left: 44%; }
.sl-45 { left: 45%; }
.sl-46 { left: 46%; }
.sl-47 { left: 47%; }
.sl-48 { left: 48%; }
.sl-49 { left: 49%; }
.sl-50 { left: 50%; }
.sl-51 { left: 51%; }
.sl-52 { left: 52%; }
.sl-53 { left: 53%; }
.sl-54 { left: 54%; }
.sl-55 { left: 55%; }
.sl-56 { left: 56%; }
.sl-57 { left: 57%; }
.sl-58 { left: 58%; }
.sl-59 { left: 59%; }
.sl-60 { left: 60%; }
.sl-61 { left: 61%; }
.sl-62 { left: 62%; }
.sl-63 { left: 63%; }
.sl-64 { left: 64%; }
.sl-65 { left: 65%; }
.sl-66 { left: 66%; }
.sl-67 { left: 67%; }
.sl-68 { left: 68%; }
.sl-69 { left: 69%; }
.sl-70 { left: 70%; }
.sl-71 { left: 71%; }
.sl-72 { left: 72%; }
.sl-73 { left: 73%; }
.sl-74 { left: 74%; }
.sl-75 { left: 75%; }
.sl-76 { left: 76%; }
.sl-77 { left: 77%; }
.sl-78 { left: 78%; }
.sl-79 { left: 79%; }
.sl-80 { left: 80%; }
.sl-81 { left: 81%; }
.sl-82 { left: 82%; }
.sl-83 { left: 83%; }
.sl-84 { left: 84%; }
.sl-85 { left: 85%; }
.sl-86 { left: 86%; }
.sl-87 { left: 87%; }
.sl-88 { left: 88%; }
.sl-89 { left: 89%; }
.sl-90 { left: 90%; }
.sl-91 { left: 91%; }
.sl-92 { left: 92%; }
.sl-93 { left: 93%; }
.sl-94 { left: 94%; }
.sl-95 { left: 95%; }
.sl-96 { left: 96%; }
.sl-97 { left: 97%; }
.sl-98 { left: 98%; }
.sl-99 { left: 99%; }
.sl-100 { left: 100%; }
.sw-3 { width: 3%; }
.sw-4 { width: 4%; }
.sw-5 { width: 5%; }
.sw-6 { width: 6%; }
.sw-7 { width: 7%; }
.sw-8 { width: 8%; }
.sw-9 { width: 9%; }
.sw-10 { width: 10%; }
.sw-11 { width: 11%; }
.sw-12 { width: 12%; }
.sw-13 { width: 13%; }
.sw-14 { width: 14%; }
.sw-15 { width: 15%; }
.sw-16 { width: 16%; }
.sw-17 { width: 17%; }
.sw-18 { width: 18%; }
.sw-19 { width: 19%; }
.sw-20 { width: 20%; }
.sw-21 { width: 21%; }
.sw-22 { width: 22%; }
.sw-23 { width: 23%; }
.sw-24 { width: 24%; }
.sw-25 { width: 25%; }
.sw-26 { width: 26%; }
.sw-27 { width: 27%; }
.sw-28 { width: 28%; }
.sw-29 { width: 29%; }
.sw-30 { width: 30%; }
.sw-31 { width: 31%; }
.sw-32 { width: 32%; }
.sw-33 { width: 33%; }
.sw-34 { width: 34%; }
.sw-35 { width: 35%; }
.sw-36 { width: 36%; }
.sw-37 { width: 37%; }
.sw-38 { width: 38%; }
.sw-39 { width: 39%; }
.sw-40 { width: 40%; }
.sw-41 { width: 41%; }
.sw-42 { width: 42%; }
.sw-43 { width: 43%; }
.sw-44 { width: 44%; }
.sw-45 { width: 45%; }
.sw-46 { width: 46%; }
.sw-47 { width: 47%; }
.sw-48 { width: 48%; }
.sw-49 { width: 49%; }
.sw-50 { width: 50%; }
.sw-51 { width: 51%; }
.sw-52 { width: 52%; }
.sw-53 { width: 53%; }
.sw-54 { width: 54%; }
.sw-55 { width: 55%; }
.sw-56 { width: 56%; }
.sw-57 { width: 57%; }
.sw-58 { width: 58%; }
.sw-59 { width: 59%; }
.sw-60 { width: 60%; }
.sw-61 { width: 61%; }
.sw-62 { width: 62%; }
.sw-63 { width: 63%; }
.sw-64 { width: 64%; }
.sw-65 { width: 65%; }
.sw-66 { width: 66%; }
.sw-67 { width: 67%; }
.sw-68 { width: 68%; }
.sw-69 { width: 69%; }
.sw-70 { width: 70%; }
.sw-71 { width: 71%; }
.sw-72 { width: 72%; }
.sw-73 { width: 73%; }
.sw-74 { width: 74%; }
.sw-75 { width: 75%; }
.sw-76 { width: 76%; }
.sw-77 { width: 77%; }
.sw-78 { width: 78%; }
.sw-79 { width: 79%; }
.sw-80 { width: 80%; }
.sw-81 { width: 81%; }
.sw-82 { width: 82%; }
.sw-83 { width: 83%; }
.sw-84 { width: 84%; }
.sw-85 { width: 85%; }
.sw-86 { width: 86%; }
.sw-87 { width: 87%; }
.sw-88 { width: 88%; }
.sw-89 { width: 89%; }
.sw-90 { width: 90%; }
.sw-91 { width: 91%; }
.sw-92 { width: 92%; }
.sw-93 { width: 93%; }
.sw-94 { width: 94%; }
.sw-95 { width: 95%; }
.sw-96 { width: 96%; }
.sw-97 { width: 97%; }
.sw-98 { width: 98%; }
.sw-99 { width: 99%; }
.sw-100 { width: 100%; }

/* ---- Orga-Bereich: Tabs, Beleg-Upload ---- */
.headlink.aktiv { background: var(--green-deep); color: #fff; }

.dropzone {
  border: 2px dashed var(--green);
  border-radius: 14px;
  background: var(--card);
  padding: 26px 18px;
  text-align: center;
  cursor: pointer;
  margin-bottom: 16px;
}
.dropzone:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.dropzone.dz-aktiv { background: #eaf6ee; border-color: var(--green-deep); }
.dz-text { margin: 0; color: var(--ink-soft); line-height: 1.5; }
.dz-text b { color: var(--green-deep); }
.dz-vorschau { max-width: 100%; max-height: 260px; border-radius: 10px; margin-top: 4px; }
.dz-name { margin: 8px 0 0; font-size: 0.85rem; color: var(--ink-soft); word-break: break-all; }

.beleg-listenkopf { margin-top: 30px; }
.beleg-total { margin: 0; color: var(--ink-soft); }
.beleg-thumb { width: 64px; height: 64px; object-fit: cover; border-radius: 8px; display: block; }
.beleg-pdf {
  display: inline-block; padding: 20px 12px; border-radius: 8px;
  background: var(--paper); border: 1px solid var(--line);
  font-weight: 800; color: var(--green-deep); font-size: 0.8rem;
}

/* OK-Mitglieder: dreispaltiges Erfassungsformular */
.form-row.drei { grid-template-columns: 1fr 1fr 1fr; }
@media (max-width: 700px) { .form-row.drei { grid-template-columns: 1fr; } }

/* OK-Mitglieder: Ressort-Tags */
.ressort-zelle { min-width: 300px; width: 40%; }
.ressort-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 6px; }
.ressort-tag {
  display: inline-block; padding: 2px 9px; border-radius: 999px;
  background: var(--green); color: #fff;
  font-size: 0.72rem; font-weight: 700; white-space: nowrap;
}
/* Ressort-Feld füllt die Spalte — bei vier, fünf Ressorts wurde der Text
   sonst schon nach «Bands / Marketing /» abgeschnitten */
.ressort-zelle .tel-form { width: 100%; }
.form-page .ressort-input { flex: 1; width: auto; min-width: 240px; }
/* Schmale Fenster/Tablets: lieber etwas kürzer als die Tabelle querscrollen */
@media (max-width: 950px) {
  .ressort-zelle { min-width: 190px; }
  .form-page .ressort-input { min-width: 150px; }
}

/* OK-Mitglieder: Name direkt bearbeiten */
.name-zelle { min-width: 210px; }
.form-page .name-input { width: 100px; }

/* OK-Mitglieder: Erfassung unterhalb der Liste */
.ok-neu-titel { margin: 30px 0 8px; }

/* Helferessen: Erinnerung an die Reminder-SMS */
.badge.warn { background: #fff3cf; color: #8a6d00; }

/* Plan: Bearbeiten-Modus (Zeiten, neue Schichten, Ressort umbenennen) */
.bearb-zeile {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
  padding: 8px 12px; margin: 4px 0;
  background: #fff8e6; border-left: 3px solid var(--gold); border-radius: 0 10px 10px 0;
}
.bearb-zeile .zplus-form {
  /* .zplus-form ist sonst ein absolutes Popup — hier normal im Fluss zeigen */
  position: static; box-shadow: none; border: none; background: none; padding: 0;
  margin: 0; display: flex; gap: 6px; align-items: center; flex-wrap: wrap;
}
.bearb-zeile input[type="time"] { width: 105px; margin: 0; padding: 6px 8px; }
.bearb-zeile input[name="name"] { margin: 0; padding: 6px 10px; max-width: 260px; }
.bedarf-eingabe { width: 64px; margin: 0; padding: 6px 8px; }
.ersatz-wahl { display: flex; gap: 4px; align-items: center; font-size: 0.85rem; white-space: nowrap; }
.ersatz-wahl input { margin: 0; width: auto; }
.bearb-neu { margin-top: 8px; }

/* Suchfeld im Listenkopf — hohe Spezifität, damit die globalen
   Formular-Regeln (.form-page input) es nicht aufblasen */
.form-page .listenkopf .listen-suche {
  flex: 1 1 200px; max-width: 320px; width: auto;
  margin: 0; padding: 8px 14px; height: auto;
  border: 1.5px solid var(--line); border-radius: 10px;
  font-size: 0.9rem; line-height: 1.3; background: #fff;
}
.form-page .listenkopf .listen-suche:focus { border-color: var(--green); outline: none; }

/* Gästeliste: eingecheckte Zeilen grün hinterlegt, kompakte Inline-Felder */
.gast-drin td { background: #eaf6ee; }
.form-page .gast-name { width: 180px; }
.form-page .gast-anzahl { width: 58px; }
.form-page .gast-notiz { width: 380px; max-width: 45vw; }
.beleg-total .gruen { color: var(--green-deep); }

/* Sponsoren: Zeile als kleines Formular-Raster im Excel-Stil */
.sponsor-tabelle td { vertical-align: top; }
.sp-zelle { min-width: 130px; }
.sp-zelle-firma { min-width: 210px; }
.sp-zelle-geld { min-width: 240px; }
.form-page .sp-geld { max-width: 110px; }
.sp-zelle form { margin: 0; display: contents; }
.form-page .sp-feld {
  display: block; width: 100%; margin: 0 0 6px;
  padding: 7px 10px; font-size: 0.85rem;
  border: 1.5px solid var(--line); border-radius: 8px; background: #fff;
}
.form-page .sp-feld:last-child { margin-bottom: 0; }
.form-page .sp-feld:focus { border-color: var(--green); outline: none; }
.form-page .sp-firma { font-weight: 800; }
.form-page .sp-geld { font-variant-numeric: tabular-nums; }
.form-page select.sp-feld { appearance: auto; }
.form-page .sp-status.st-bezahlt { background: #e2f2e7; border-color: #bfdfca; }
.form-page .sp-status.st-bestaetigt { background: #fff3cf; border-color: #ecd990; }
.form-page .sp-status.st-abgesagt { background: #f0f0f0; color: var(--ink-soft); }
.sp-aktionen { white-space: nowrap; }
.sp-aktionen .inline-form, .sp-aktionen form { display: inline-block; margin: 0 0 6px; }
.tel-ok-sichtbar {
  background: var(--green); color: #fff; border: none;
  padding: 7px 12px; border-radius: 8px; font-weight: 700;
  display: block; margin-bottom: 6px; width: 100%;
}
.tel-ok-sichtbar:hover { background: var(--green-deep); }
.sp-aktionen .danger.small { width: 100%; }

/* Spesen: aufklappbare Karte pro OK-Mitglied */
.spesen-karte {
  background: var(--card); border: 1px solid var(--line); border-radius: 14px;
  margin: 0 0 12px; overflow: hidden;
}
.spesen-karte summary {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 12px 16px; cursor: pointer; list-style: none; font-size: 1rem;
}
.spesen-karte summary::-webkit-details-marker { display: none; }
.spesen-karte summary .pfeil { margin-left: auto; transition: transform 0.15s; color: var(--ink-soft); }
.spesen-karte[open] summary .pfeil { transform: rotate(180deg); }
.spesen-karte summary:hover { background: #f7faf7; }
.sk-meta { color: var(--ink-soft); font-size: 0.82rem; }
.sk-koerper { padding: 0 16px 14px; }
.sk-iban {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 0 0 10px; font-size: 0.85rem; color: var(--ink-soft);
}
.sk-export { margin-left: auto; }

/* Spesen: Stufe «ausbezahlt» + Gruppen-Aktionen */
.badge.fertig { background: var(--green-deep); color: #fff; }
.sk-aktionen { display: flex; gap: 8px; flex-wrap: wrap; margin-left: auto; align-items: center; }
button.small.gold { background: var(--gold); color: var(--gold-ink); border: none; font-weight: 800; }
button.small.gold:hover { background: #ddaa00; }

/* Spesen: Kopfleiste der Karte — IBAN links, Aktionen rechts in einer Zeile */
.sk-leiste {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; flex-wrap: wrap; margin: 0 0 10px;
}
.sk-leiste .sk-iban { margin: 0; }
.sk-leiste .sk-aktionen { margin-left: auto; }

/* Sponsoren: kurzes Aufblitzen nach dem automatischen Speichern */
.form-page .sp-feld.autosave-ok {
  border-color: var(--green); background: #eaf6ee;
  transition: background 0.4s, border-color 0.4s;
}

/* Admin-Listen: die volle Breite neben der Sidebar nutzen */
.form-page.admin-page.breit { max-width: 1280px; }

/* ==== Mobile-Checkup: Admin-Listen auf dem Handy kompakt statt Querscrollen ==== */
@media (max-width: 700px) {
  /* Helferliste: E-Mail, Shirt und letzter Login ausblenden — Name,
     Telefon und Aktionen reichen zum schnellen Nachsehen */
  .helfer-tabelle th:nth-child(3), .helfer-tabelle td:nth-child(3),
  .helfer-tabelle th:nth-child(4), .helfer-tabelle td:nth-child(4),
  .helfer-tabelle th:nth-child(5), .helfer-tabelle td:nth-child(5) { display: none; }
  .form-page .tel-input { width: 90px; }
  .ressort-zelle { min-width: 0; width: auto; }
  .form-page .ressort-input { min-width: 120px; }
  .admin-table th, .admin-table td { padding: 6px; }
  .form-page.admin-page { padding-left: 10px; padding-right: 10px; }

  /* Sponsoren: Zeilen werden gestapelte Karten */
  .sponsor-tabelle, .sponsor-tabelle tbody { display: block; }
  .sponsor-tabelle tr { display: block; padding: 12px 14px; }
  .sponsor-tabelle tr:first-child { display: none; }  /* Kopfzeile */
  .sponsor-tabelle td {
    display: block; width: auto; max-width: none; min-width: 0;
    padding: 0; border: 0;
  }
  .sponsor-tabelle .sp-feld { margin-bottom: 6px; }
  .form-page .sp-geld { max-width: none; }
  .sp-aktionen { padding-top: 4px; }
  .sp-aktionen .danger.small { width: auto; }

  /* Gästeliste: Eingabefelder umbrechen statt hinausschieben */
  .gaeste-tabelle .tel-form { flex-wrap: wrap; }
  .form-page .gast-name, .form-page .gast-notiz { width: 100%; }
  .form-page .gast-anzahl { width: 70px; }

  /* Spesen: Datum-Spalte weglassen, kleinere Vorschau */
  .spesen-karte .admin-table th:nth-child(2),
  .spesen-karte .admin-table td:nth-child(2) { display: none; }
  .beleg-thumb { width: 44px; height: 44px; }
  .sk-koerper { padding: 0 10px 12px; }
}

/* Sponsoren als auf-/zuklappbare Karten */
.sponsor-karte summary b { font-size: 0.95rem; }
.sponsor-karte summary .sp-status-badge { margin-left: auto; }
.sponsor-karte summary .pfeil { margin-left: 0; }
.sp-raster {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 10px 12px;
}
.sp-raster .sp-feld { margin: 0; }
.sp-label {
  display: block; font-size: 0.72rem; font-weight: 700;
  color: var(--ink-soft); margin: 0 0 3px; letter-spacing: 0.02em;
}
.sp-fuss {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-top: 12px;
}
.sp-fuss form { margin: 0; }
.feld-hinweis { font-size: 0.75rem; color: var(--ink-soft); }
button.danger.mini {
  background: none; color: var(--red); border: 1.5px solid var(--red);
  padding: 3px 10px; font-size: 0.75rem; border-radius: 7px; font-weight: 700;
}
button.danger.mini:hover { background: var(--red); color: #fff; }

/* Sponsoren-Status «offen»/«angefragt» unterscheidbar */
.badge.info { background: #e3edf7; color: #23527c; }
.form-page .sp-status.st-angefragt { background: #e3edf7; border-color: #c4d7ea; }

/* Bestätigungs-Modal (frag-nach) */
.frage-dialog {
  border: 0; border-radius: 16px; padding: 22px 24px;
  width: min(340px, calc(100vw - 40px)); text-align: center;
}
.frage-dialog::backdrop { background: rgba(0, 0, 0, 0.45); }
.frage-dialog h2 { margin: 0 0 8px; color: var(--green-ink); }
.frage-dialog p { margin: 0 0 16px; color: var(--ink-soft); font-size: 0.92rem; line-height: 1.45; }
.frage-knoepfe { display: flex; gap: 10px; justify-content: center; }
.fd-abbrechen {
  background: none; border: 2px solid var(--line); color: var(--ink-soft);
  padding: 10px 18px; border-radius: 10px; font-weight: 700;
}
.fd-abbrechen:hover { border-color: var(--ink-soft); }
.frage-knoepfe .fd-ok { margin: 0; padding: 10px 18px; border-radius: 10px; }

/* Sponsoren-Archiv «Letztes Jahr» */
.archiv-karte { margin-top: 26px; background: #fbfbf9; }
.archiv-karte summary b { color: var(--ink-soft); }

/* Gästeliste: Teil-Check-in — teilweise angekommene Gruppen gelb */
.gast-teil td { background: #fff8e6; }
.gast-checkin { white-space: nowrap; }
.gast-checkin .inline-form { display: inline-block; margin: 0 4px 0 0; }
.gast-minus { padding: 7px 10px; }

/* Gästeliste-Tablet: grosse Tippflächen fürs Eingangs-Team */
.tablet-seite .admin-table td { padding: 12px 10px; font-size: 0.95rem; }
.tablet-knopf { padding: 12px 18px !important; font-size: 0.95rem !important; }
.tablet-zaehler { font-variant-numeric: tabular-nums; }

/* Abendkasse-Gäste: gelblich und am Listenende */
.gast-abendkasse td { background: #fdf4dd; }
.gast-abendkasse td:first-child { border-left: 3px solid var(--gold); }

/* Helferliste: Bearbeiten-Modal — liegt ausserhalb von .form-page, darum
   braucht es die Formular-Styles hier nochmals gescoped */
.helfer-edit-dialog {
  border: none;
  border-radius: 16px;
  padding: 22px 24px;
  width: min(92vw, 460px);
  /* Inhalt scrollt IM Dialog und wird an den runden Ecken sauber abgeschnitten */
  max-height: calc(100dvh - 28px);
  overflow-y: auto;
  overflow-x: hidden;
}
.helfer-edit-dialog::backdrop { background: rgba(0, 0, 0, 0.45); }
.helfer-edit-dialog h2 { margin: 0 0 4px; color: var(--green-ink, #1b4332); }
.helfer-edit-dialog label {
  display: block;
  font-weight: 700;
  font-size: 0.82rem;
  margin: 12px 0 4px;
}
.helfer-edit-dialog input, .helfer-edit-dialog select, .helfer-edit-dialog textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 11px 12px;
  border: 2px solid var(--line);
  border-radius: 10px;
  font: inherit;
  background: #fff;
  color: var(--ink);
}
.helfer-edit-dialog .form-actions { display: flex; gap: 10px; align-items: center; }
.helfer-edit-dialog .btn-cancel {
  border: none;
  background: #eceae2;
  color: var(--ink-soft);
  padding: 12px 22px;
  border-radius: 10px;
  font-weight: 800;
  margin-top: 16px;
  cursor: pointer;
}
.he-loeschen-form {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px dashed var(--line, #ddd);
  text-align: right;
}

/* System → Logs: Terminal-Fenster */
.log-karte { grid-column: 1 / -1; }
.log-filter { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 10px 0; }
.log-chip {
  border: 1px solid #d8d4c6;
  background: var(--card, #fff);
  border-radius: 999px;
  padding: 5px 12px;
  font-size: 0.8rem;
  font-weight: 700;
  color: #55604f;
  cursor: pointer;
}
.log-chip.aktiv { background: var(--green-deep); border-color: var(--green-deep); color: #fff; }
.log-trenner { width: 1px; height: 20px; background: #d8d4c6; margin: 0 4px; }
.log-filter input {
  flex: 1;
  min-width: 140px;
  padding: 6px 12px;
  border: 1px solid #d8d4c6;
  border-radius: 999px;
  font-size: 0.85rem;
}
.log-export { padding: 5px 12px !important; font-size: 0.8rem !important; }
.log-terminal {
  background: #10201a;
  color: #cfe6d5;
  border-radius: 12px;
  padding: 12px 14px;
  height: 420px;
  overflow-y: auto;
  font-family: Consolas, "Cascadia Mono", monospace;
  font-size: 0.8rem;
  line-height: 1.5;
}
.log-zeile { display: grid; grid-template-columns: 105px 130px 190px 1fr; gap: 10px; padding: 2px 0; }
.log-zeile .log-zeit { color: #7fa88c; white-space: nowrap; }
.log-zeile .log-wer { color: #e8d48a; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.log-zeile .log-ereignis { color: #8fd1a8; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.log-zeile .log-detail { color: #cfe6d5; word-break: break-word; }
.log-zeile.stufe-loeschung .log-ereignis, .log-zeile.stufe-loeschung .log-detail { color: #ff9d9d; }
.log-zeile.stufe-fehler .log-ereignis, .log-zeile.stufe-fehler .log-detail { color: #ffd166; }
.log-zeile.stufe-warnung .log-ereignis { color: #ffb84d; }
.log-leer { color: #7fa88c; padding: 8px 0; }
#log-mehr { margin-top: 10px; }
@media (max-width: 700px) {
  .log-zeile { grid-template-columns: 90px 1fr; }
  .log-zeile .log-ereignis { grid-column: 1; }
  .log-zeile .log-detail { grid-column: 2; }
}

/* Eingangstablet: Offline-Statusbalken */
.eingang-status {
  position: sticky;
  top: 0;
  z-index: 30;
  text-align: center;
  padding: 10px 14px;
  font-weight: 700;
  font-size: 0.9rem;
}
.eingang-status.wartend { background: #f3b400; color: #3a2c00; }
.eingang-status.ok { background: #dff3e3; color: #0b3d22; }

/* Eingangstablet: Tab-Leiste Gäste / Helfer / Counter */
.tablet-tabs { display: flex; gap: 4px; }
.tablet-tabs .headlink { padding: 9px 16px; border-radius: 999px; }
.tablet-tabs .headlink.aktiv { background: var(--green-deep); opacity: 1; }

/* Eingangstablet: Gelände-Counter */
.counter-seite { text-align: center; }
.counter-anzeige { display: flex; flex-direction: column; align-items: center; gap: 4px; margin: 18px 0 26px; }
.counter-wert {
  font-size: clamp(4rem, 18vw, 7rem);
  font-weight: 800;
  line-height: 1;
  color: var(--green-deep);
  font-variant-numeric: tabular-nums;
}
.counter-stand { color: var(--muted, #667); font-size: 0.95rem; }
.counter-seite form { max-width: 340px; margin: 0 auto; text-align: left; }
.counter-seite input[type="number"] { font-size: 1.4rem; text-align: center; }
.counter-seite .form-actions button { width: 100%; }

/* Eingangstablet: Abmelde-Schutz — «abmelden» eintippen */
#abmelde-dialog input {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  margin: 0 0 16px;
  border: 1px solid var(--line, #ccc);
  border-radius: 10px;
  font-size: 1rem;
  text-align: center;
}
#abmelde-dialog .fd-ok:disabled { opacity: 0.45; cursor: not-allowed; }

/* Spesen: kleiner Zurück-Knopf neben dem Bestätigt-Badge */
.beleg-reopen-form { display: inline-block; margin: 0; vertical-align: middle; }
.beleg-reopen {
  padding: 3px 9px !important; /* globale Button-Regel übersteuern */
  font-size: 0.72rem !important;
  background: none;
  color: var(--green-deep);
  border: 1px solid var(--green);
  border-radius: 999px;
  margin-left: 6px;
  vertical-align: middle;
}
.beleg-reopen:hover { background: var(--green); color: #fff; }

/* System-Dashboard: Kennzahl-Kacheln, Karten-Raster, Countdown */
.countdown-badge {
  background: var(--green-deep);
  color: #fff;
  border-radius: 999px;
  padding: 8px 16px;
  font-weight: 800;
  font-size: 0.92rem;
  white-space: nowrap;
}
.kennzahlen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
  margin: 14px 0 20px;
}
.kennzahl {
  display: block;
  background: var(--card, #fff);
  border: 1px solid #e3e0d4;
  border-radius: 12px;
  padding: 12px 14px;
  text-decoration: none;
  color: inherit;
}
.kennzahl:hover { border-color: var(--green); }
.kennzahl b {
  display: block;
  font-size: 1.55rem;
  line-height: 1.15;
  color: var(--green-deep);
  font-variant-numeric: tabular-nums;
}
.kennzahl span { font-size: 0.78rem; font-weight: 700; color: #55604f; }
.kennzahl small { display: block; font-size: 0.72rem; color: #8a927f; margin-top: 2px; }
.kennzahl-rot b { color: var(--red); }
.sys-raster {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-items: start;
}
.sys-karte {
  background: var(--card, #fff);
  border: 1px solid #e3e0d4;
  border-radius: 14px;
  padding: 16px 18px;
}
.sys-karte > h2:first-child { margin-top: 0; }
.sys-karte .sys-abschnitt { margin-top: 26px; }
.sys-karte.danger-zone { grid-column: 1 / -1; }
@media (max-width: 900px) {
  .sys-raster { grid-template-columns: 1fr; }
  .kennzahlen { grid-template-columns: repeat(2, 1fr); }
}

/* Übersicht: kleines graues Datum neben dem Tagesnamen */
.tag-datum { font-size: 0.75rem; color: #9aa295; font-weight: 400; margin-left: 6px; white-space: nowrap; }

/* Urls/Links-Seite: Adress-Zeilen mit Kopier-Knopf + Zugangs-Formulare */
.link-zeile { display: flex; gap: 8px; align-items: center; margin: 6px 0 4px; }
.link-zeile input {
  flex: 1;
  min-width: 0;
  background: #f4f2ea;
  border: 1px solid #ddd9cb;
  border-radius: 10px;
  padding: 9px 12px;
  font-size: 0.9rem;
}
.link-zeile .kopieren { white-space: nowrap; }
.pw-zeile { display: flex; gap: 6px; align-items: center; }
.pw-zeile input { flex: 1; min-width: 0; }
.pw-zeigen {
  flex: 0 0 auto;
  border: 1px solid var(--line, #ccc);
  background: var(--card, #fff);
  border-radius: 10px;
  padding: 8px 10px;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
}
.pw-zeigen:hover { border-color: var(--green); }

/* Orga-Startseite: vier grosse Kacheln zur Schnellnavigation */
.start-kacheln {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin-top: 18px;
}
.start-kachel {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 36px 10px;
  background: var(--card, #fff);
  border: 2px solid var(--green);
  border-radius: 16px;
  font-weight: 800;
  font-size: 1.05rem;
  color: var(--green-deep);
  text-decoration: none;
  text-align: center;
}
.start-kachel:hover, .start-kachel:focus-visible { background: var(--green); color: #fff; }
.start-kachel .sk-icon { font-size: 2.1rem; line-height: 1; }

/* Spesen-Karte: ausstehender Betrag deutlich, ausbezahlter gedämpft */
.sk-ausstehend { color: var(--green-deep); }
.sk-bezahlt { opacity: 0.55; }

/* Spesen: Beleg-Lightbox (Inline-Vorschau statt neuer Tab) */
.beleg-dialog {
  border: none;
  border-radius: 16px;
  padding: 0;
  width: min(92vw, 1000px);
  height: min(90vh, 820px);
  display: none;
  flex-direction: column;
  overflow: hidden;
  background: #fff;
}
.beleg-dialog[open] { display: flex; }
.beleg-dialog::backdrop { background: rgba(0, 0, 0, 0.6); }
.bd-kopf {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid #e5e3dc;
  flex: 0 0 auto;
}
.bd-info { font-size: 0.88rem; font-weight: 700; color: var(--green-ink, #1b4332); }
.bd-knoepfe { display: flex; align-items: center; gap: 12px; }
.bd-link { font-size: 0.82rem; color: var(--green-deep); white-space: nowrap; }
.bd-zu {
  border: none; background: none; cursor: pointer;
  font-size: 1.2rem; line-height: 1; padding: 4px 8px; color: #555;
}
.bd-inhalt {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 0;
  padding: 10px;
  background: #f2f0ea;
}
.bd-inhalt img {
  flex: 1;
  min-width: 0;
  max-height: 100%;
  object-fit: contain;
}
.bd-inhalt iframe {
  flex: 1;
  min-width: 0;
  height: 100%;
  border: none;
  background: #fff;
}
.bd-pfeil {
  flex: 0 0 auto;
  border: none;
  background: #fff;
  border-radius: 999px;
  width: 40px; height: 40px;
  font-size: 1.4rem; line-height: 1;
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
  color: var(--green-deep);
}
.bd-pfeil:hover { background: var(--green); color: #fff; }
@media (max-width: 700px) {
  .beleg-dialog { width: 96vw; height: 92vh; }
  .bd-link { display: none; }
}

/* ===== «App installieren»-Hinweis (pwa-install.js) ===== */
.pwa-banner {
  position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 60;
  background: var(--green-deep, #0b3d22); color: #fff;
  border-radius: 14px; padding: 14px 16px;
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
}
.pwa-banner-text { flex: 1 1 220px; font-size: 0.9rem; line-height: 1.45; }
.pwa-banner-knoepfe { display: flex; gap: 8px; margin-left: auto; }
.pwa-banner-install {
  background: var(--gold, #f3b400); color: #3a2c00; border: 0;
  border-radius: 9px; padding: 10px 16px; font-weight: 800; font-size: 0.9rem;
}
.pwa-banner-spaeter {
  background: transparent; color: #fff; border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 9px; padding: 10px 14px; font-weight: 600; font-size: 0.9rem;
  opacity: 0.9;
}

/* ===== OK-Portal: Meine Todos ===== */
.sk-badge {
  display: inline-block; min-width: 24px; text-align: center;
  background: var(--gold); color: var(--gold-ink);
  border-radius: 999px; padding: 2px 8px; margin-left: 6px;
  font-size: 0.8rem; font-weight: 800; vertical-align: 2px;
}
.ok-todo-gruppe { margin-top: 22px; }
.ok-todo-titel {
  display: flex; align-items: center; gap: 10px;
  font-size: 1.15rem; color: var(--green-ink); margin: 0 0 8px;
}
.ok-todo-anzahl {
  font-family: var(--body, system-ui); text-transform: none; letter-spacing: 0;
  font-size: 0.75rem; font-weight: 700; color: var(--gold-ink);
  background: var(--gold-soft, #fdf4dd); border-radius: 999px; padding: 3px 10px;
}
.ok-todo-zeile {
  display: flex; align-items: center; gap: 12px;
  background: var(--card, #fff); border: 1.5px solid #c9cfc9; border-radius: 12px;
  padding: 12px 14px; margin-bottom: 8px;
  text-decoration: none; color: var(--ink, #14231a); font-weight: 600;
  box-shadow: 0 1px 3px rgba(20, 35, 26, 0.08);
}
.ok-todo-zeile:active { background: #f0f3f0; }
.ok-todo-status { flex-shrink: 0; font-size: 1rem; }
.ok-todo-text { flex: 1; min-width: 0; }
.ok-todo-zeile.st-done { opacity: 0.6; }
.ok-todo-zeile.st-done .ok-todo-text { text-decoration: line-through; font-weight: 500; }
.ok-todo-termin {
  flex-shrink: 0; background: #faeabb; color: #6b520e; border: 1px solid #ead8a9;
  border-radius: 999px; padding: 3px 9px; font-size: 0.72rem; font-weight: 700;
  white-space: nowrap; font-variant-numeric: tabular-nums;
}

/* System: Test-Mail-Formular */
.mail-test-form { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.mail-test-form input { flex: 1 1 220px; }
.mail-test-form button { white-space: nowrap; }

/* Meine Todos: aufklappbar + Status-Knopf */
.ok-todo-zeile { flex-wrap: wrap; cursor: pointer; }
.ok-todo-status {
  flex-shrink: 0; width: 36px; height: 36px; border-radius: 50%;
  border: 2px solid #c9cfc9; background: #fff; padding: 0;
  font-size: 0.95rem; line-height: 1; cursor: pointer;
}
.ok-todo-status:active { transform: scale(0.92); }
.ok-todo-zeile.st-started .ok-todo-status { background: var(--gold); border-color: var(--gold); }
.ok-todo-zeile.st-done .ok-todo-status { background: var(--green); border-color: var(--green); color: #fff; }
.ok-todo-pfeil {
  flex-shrink: 0; color: #9aa89e; font-size: 1.2rem; line-height: 1;
  transition: transform 0.15s ease;
}
.ok-todo-zeile.offen .ok-todo-pfeil { transform: rotate(90deg); }
.ok-todo-mehr {
  display: none; flex-basis: 100%;
  border-top: 1px solid var(--line); margin-top: 10px; padding-top: 10px;
}
.ok-todo-zeile.offen .ok-todo-mehr { display: block; }
.ok-todo-desc { margin: 0 0 8px; font-size: 0.88rem; font-weight: 400; color: var(--ink-soft); white-space: pre-line; }
.ok-todo-wer { margin: 0 0 8px; font-size: 0.8rem; font-weight: 600; color: var(--ink-soft); }
.ok-todo-link { color: var(--green-deep); font-weight: 700; font-size: 0.88rem; text-decoration: none; }

/* ===== OK-Portal: Hamburger-Menü (Handy) + Vollbild-Kacheln ===== */
.ok-menu-schalter, .ok-menu-burger, .ok-menu-zu, .ok-menu-abdunkeln { display: none; }

@media (max-width: 700px) {
  /* Top-Bar wird zur Schublade: Burger rechts im grünen Kopf */
  .ok-menu-burger {
    display: block; font-size: 1.5rem; line-height: 1; color: #fff;
    padding: 4px 8px; cursor: pointer; user-select: none;
    margin-left: auto; /* ganz nach rechts aussen */
  }
  .ok-kopf .brandrow { flex-wrap: nowrap; }
  .ok-kopf .headbtns {
    position: fixed; top: 0; right: 0; bottom: 0; z-index: 60;
    width: min(75vw, 300px);
    background: var(--green-deep);
    flex-direction: column; align-items: stretch; gap: 4px;
    padding: max(18px, env(safe-area-inset-top)) 18px 18px;
    transform: translateX(110%); transition: transform 0.2s ease;
    box-shadow: -6px 0 24px rgba(0, 0, 0, 0.3);
    overflow-y: auto;
  }
  .ok-menu-schalter:checked ~ .ok-kopf .headbtns { transform: translateX(0); }
  /* Bei offenem Menü muss der Kopf ÜBER die Abdunkelung (z 59) — sonst liegt
     sie unsichtbar auf der Schublade und schluckt jeden Tipp auf die Links */
  .ok-menu-schalter:checked ~ .ok-kopf { z-index: 70; }
  .ok-kopf .headlink { font-size: 1rem; padding: 12px 10px; border-radius: 9px; }
  .ok-kopf .headlink.aktiv { background: rgba(255, 255, 255, 0.14); opacity: 1; }
  .ok-kopf .headbtns form { display: flex; margin-top: auto; }
  .ok-kopf .headlink-btn { width: 100%; text-align: left; }
  .ok-menu-zu {
    display: block; align-self: flex-end; color: #fff; font-size: 1.7rem;
    line-height: 1; padding: 2px 8px; cursor: pointer;
  }
  .ok-menu-abdunkeln { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.45); z-index: 59; }
  .ok-menu-schalter:checked ~ .ok-menu-abdunkeln { display: block; }

  /* Startseite: alle Kacheln passen ohne Scrollen auf den Bildschirm.
     Feste Höhe statt Mindesthöhe — die Kacheln schrumpfen, statt unten
     rauszufallen (100vh als Rückfall für ältere Browser ohne dvh). */
  .ok-start {
    display: flex; flex-direction: column; box-sizing: border-box;
    height: calc(100vh - 60px - env(safe-area-inset-top));
    height: calc(100dvh - 60px - env(safe-area-inset-top));
    padding-bottom: 10px; overflow: hidden;
  }
  .ok-start h1 { margin: 4px 0 0; font-size: 1.5rem; }
  .ok-start .login-hint { margin: 2px 0 0; }
  .ok-start .start-kacheln {
    flex: 1; min-height: 0; margin-top: 8px; gap: 8px;
    grid-auto-rows: minmax(0, 1fr);
  }
  .ok-start .start-kachel {
    padding: 6px; gap: 4px; min-height: 0; overflow: hidden;
    font-size: 0.92rem;
  }
  .ok-start .sk-icon { font-size: 1.45rem; }
  .ok-start .sk-badge { font-size: 0.72rem; padding: 1px 7px; }
}

/* Belege: Tabelle scrollt statt abzuschneiden, Zeilen sind antippbar */
.tabellen-scroll { overflow-x: auto; }
.beleg-zeile { cursor: pointer; }
.beleg-zeile:active { background: #f0f3f0; }
@media (max-width: 700px) {
  .nur-breit { display: none; }
}
.beleg-edit-dialog .be-bild-wrap { margin-bottom: 12px; text-align: center; }
.beleg-edit-dialog #be-bild {
  max-width: 100%; max-height: 38vh; border-radius: 10px;
  border: 1px solid var(--line, #ddd);
}

/* Belege auf dem Handy: Zeilen werden zu Karten — nichts ragt mehr über den Rand */
@media (max-width: 700px) {
  .beleg-tabelle, .beleg-tabelle tbody { display: block; width: 100%; }
  .beleg-tabelle tr:first-child { display: none; } /* Kopfzeile weg */
  .beleg-tabelle .beleg-zeile {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr) auto;
    gap: 3px 12px; align-items: center;
    background: var(--card, #fff);
    border: 1.5px solid #c9cfc9; border-radius: 12px;
    padding: 10px 12px; margin-bottom: 8px;
    box-shadow: 0 1px 3px rgba(20, 35, 26, 0.08);
  }
  .beleg-tabelle .beleg-zeile td { display: block; padding: 0; border: none; min-width: 0; }
  .beleg-tabelle .beleg-zeile td:nth-child(1) { grid-column: 1; grid-row: 1 / span 3; }
  .beleg-tabelle .beleg-zeile .beleg-thumb { width: 56px; height: 56px; }
  .beleg-tabelle .beleg-zeile td:nth-child(3) { grid-column: 2; grid-row: 1; font-weight: 700; overflow-wrap: anywhere; }
  .beleg-tabelle .beleg-zeile td:nth-child(4) { grid-column: 3; grid-row: 1; text-align: right; font-weight: 700; }
  .beleg-tabelle .beleg-zeile td:nth-child(2) { grid-column: 2; grid-row: 2; font-size: 0.78rem; color: var(--ink-soft, #666); }
  .beleg-tabelle .beleg-zeile td:nth-child(6) { grid-column: 2; grid-row: 3; }
  .beleg-tabelle .beleg-zeile td:nth-child(7) { grid-column: 3; grid-row: 3; text-align: right; }
}

/* Beleg-Modal: gesperrte Felder klar ausgegraut, Status als Badge */
.beleg-edit-dialog input:disabled,
.beleg-edit-dialog textarea:disabled {
  background: #efefef; color: #8a8a8a; border-color: #ddd;
  -webkit-text-fill-color: #8a8a8a;
}
.beleg-edit-dialog [hidden] { display: none !important; }
.be-status-zeile { margin: 0 0 12px; text-align: center; }

/* Todo-Bearbeiten-Modal: Termin-Felder nebeneinander, Bearbeiten-Knopf */
.te-remind { display: flex; gap: 8px; }
.te-remind input { flex: 1; }
.ok-todo-edit {
  border: 1.5px solid var(--green); background: none; color: var(--green-deep);
  border-radius: 9px; padding: 8px 16px; font-weight: 700; font-size: 0.88rem;
  cursor: pointer;
}

/* Termin-entfernen-Knopf (×) neben Datum/Zeit */
.remind-weg {
  flex: 0 0 44px; border: 2px solid var(--line, #ddd); background: #fff;
  border-radius: 10px; font-size: 1.2rem; line-height: 1; color: #8a8a8a;
  cursor: pointer; padding: 0;
}
.remind-weg:active { background: #f3d4d4; color: var(--rot, #cf2e2e); }

/* Belege: Speichern-Knopf in voller Breite */
.beleg-form .form-actions button[type="submit"] { width: 100%; }

/* Gästeliste (OK): ✎-Knopf und Lösch-Form im Modal */
.gast-bearbeiten {
  border: 1.5px solid var(--line, #ddd); background: #fff; color: var(--green-deep);
  border-radius: 9px; width: 38px; height: 38px; padding: 0;
  font-size: 1rem; cursor: pointer;
}
.gast-bearbeiten:active { background: #e2f2e7; }
.ge-loeschen-form { margin-top: 14px; display: inline-block; }

/* Gast-Modal: eine Aktionszeile — Speichern, Abbrechen, Löschen */
.ge-aktionen { margin-top: 16px; }
.ge-aktionen button {
  flex: 1; min-width: 0;
  padding: 12px 8px !important; font-size: 0.9rem;
}
/* Die gelbe Submit-Regel der form-actions würde sonst das Gefahr-Rot überdecken */
.ge-aktionen button.danger { background: #cf2e2e; color: #fff; }

/* «Meldungen aufs Handy» in Meine Daten */
.push-box {
  margin-top: 26px; padding: 16px 18px; border: 1.5px solid var(--line);
  border-radius: 14px; background: #fff;
}
.push-box h2 { margin: 0 0 4px; font-size: 1.1rem; }
.push-box button { margin-top: 4px; }
.push-info { margin: 8px 0 10px; font-size: 0.9rem; color: #4a4a4a; }
.push-info.gut { color: var(--green); font-weight: 700; }
.push-info.schlecht { color: #cf2e2e; font-weight: 700; }

/* Kanalwahl in «Meine Daten» */
.kanal-titel { margin: 26px 0 2px; font-size: 1.1rem; }
.kanal-wahl { display: grid; gap: 8px; margin: 10px 0 4px; }
/* Auswahl-Karten (Push/Mail/SMS): Kästchen links in eigener Spalte, Text daneben —
   gewinnt gegen «.form-page label» (display:block), sonst rutscht der Text unters Kästchen */
.kanal-option, .form-page label.kanal-option {
  display: grid; grid-template-columns: 22px 1fr; column-gap: 12px; align-items: start;
  padding: 12px 14px; margin: 0;
  border: 1.5px solid var(--line); border-radius: 12px; background: #fff;
  font-weight: 700; font-size: 0.95rem; line-height: 1.35; cursor: pointer;
}
.kanal-option input { width: 22px; height: 22px; margin: 0; accent-color: var(--green); align-self: start; margin-top: 1px; }
.kanal-option > span { min-width: 0; }
.kanal-option .label-soft { display: block; font-weight: 400; font-size: 0.86rem; margin-top: 3px; color: var(--ink-soft); }
.kanal-option:has(input:checked) { border-color: var(--green); background: #f2fbf5; }

/* OK-Portal: Helferliste unter dem Erfassen-Formular (mit Live-Suche) */
.helfer-liste-box { margin-top: 30px; padding-top: 20px; border-top: 1.5px solid var(--line); }
.helfer-liste-box .listenkopf { margin-bottom: 16px; }
.helfer-liste-box h2 { margin: 0; font-size: 1.25rem; }
.hl-liste { display: flex; flex-direction: column; gap: 6px; }
.hl-zeile {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 9px 12px; background: #fff; border: 1.5px solid var(--line); border-radius: 10px;
}
.hl-zeile[hidden] { display: none; }
.hl-name { font-weight: 700; font-size: 0.95rem; flex: 1 1 45%; min-width: 0; }
.hl-tag {
  display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px;
  background: var(--green); color: #fff; font-size: 0.66rem; font-weight: 800;
  vertical-align: middle;
}
.hl-tel { color: var(--green-deep); font-weight: 600; font-size: 0.9rem; text-decoration: none; white-space: nowrap; }
.hl-tel:hover { text-decoration: underline; }
.hl-tel.leer { color: #9a9a9a; font-weight: 500; font-style: italic; }
.hl-extra { display: flex; gap: 5px; margin-left: auto; }
.hl-chip {
  padding: 2px 8px; border-radius: 999px; background: var(--paper);
  border: 1px solid var(--line); font-size: 0.72rem; font-weight: 700; color: #4a4a4a;
}
@media (max-width: 560px) {
  /* Kompakt bleiben: Name und Nummer nebeneinander, damit 60+ Zeilen
     nicht endlos scrollen — erst sehr enge Displays brechen um */
  .hl-zeile { padding: 8px 10px; gap: 8px; }
  .hl-name { flex: 1 1 auto; font-size: 0.9rem; }
  .hl-tel { font-size: 0.85rem; }
  .hl-extra { margin-left: 0; }
}

/* Konfetti bei erledigten Aufgaben — liegt über allem, fängt aber keine Klicks */
.konfetti-canvas {
  position: fixed; inset: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: 9999;
}

/* Sponsoren-Übernahme ohne Seitensprung: Sammelhinweis unter dem Text */
.uebernahme-bilanz {
  margin: 6px 0 12px; padding: 8px 12px; border-radius: 9px;
  background: #eaf6ee; border-left: 4px solid var(--green);
  font-size: 0.88rem; font-weight: 700; color: var(--green-deep);
}

/* System-Tab: lange Pfade dürfen kleiner und umbrechen */
.sysinfo b.klein { font-size: 0.78rem; word-break: break-all; text-align: right; }
.sysinfo b.rot { color: #cf2e2e; }

/* ==== System-Tab: ruhiges Raster ==== */
/* Die drei Wege (SMS, Mail, Push) stehen gleich hoch nebeneinander */
.kanal-raster {
  grid-column: 1 / -1;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; align-items: stretch;
}
.kanal-karte { display: flex; flex-direction: column; }
.kanal-kopf { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.kanal-kopf h2 { margin: 0; font-size: 1.15rem; }
.kanal-text { margin: 0 0 12px; font-size: 0.86rem; line-height: 1.5; color: var(--ink-soft); }
.kanal-test {
  margin-top: auto; padding-top: 12px; border-top: 1px dashed var(--line);
}
.kanal-label {
  display: block; font-size: 0.76rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.04em; color: var(--ink-soft); margin-bottom: 6px;
}
.form-page .test-form { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 0; }
.form-page .test-form input,
.form-page .test-form select { flex: 1 1 150px; min-width: 0; margin: 0; padding: 9px 11px; font-size: 0.88rem; }
.form-page .test-form button { flex: 0 0 auto; white-space: nowrap; }
.kanal-ok { margin: 12px 0 0; font-size: 0.82rem; color: var(--green-deep); font-weight: 700; }
.kanal-fehler { margin: 12px 0 6px; font-size: 0.82rem; color: #cf2e2e; font-weight: 700; }
.klein-tabelle { font-size: 0.78rem; }
.klein-tabelle th, .klein-tabelle td { padding: 5px 7px; }

/* Karten, die über die ganze Breite gehen */
.sys-karte.breit-karte, .sys-karte.log-karte { grid-column: 1 / -1; }
.sysinfo { max-width: none; }

@media (max-width: 1000px) {
  .kanal-raster { grid-template-columns: 1fr; }
}

/* ==== Urls / Links: eine Karte pro Zugang, alle gleich gebaut ==== */
.link-raster {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
  gap: 16px; align-items: stretch;
}
.link-karte { display: flex; flex-direction: column; }
.link-kopf { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.link-kopf h2 { margin: 0; font-size: 1.2rem; }
.link-icon { font-size: 1.35rem; line-height: 1; }
.link-zweck { margin: 0 0 10px; font-size: 0.86rem; line-height: 1.5; color: var(--ink-soft); }
.link-hinweis { margin: 10px 0 0; font-size: 0.8rem; color: #8a8a8a; }
.link-zugang {
  margin-top: auto; padding-top: 12px; border-top: 1px dashed var(--line);
}
.link-zugang-titel {
  font-size: 0.76rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.04em; color: var(--ink-soft); margin-bottom: 8px;
}
.link-zugang-titel .label-soft { text-transform: none; letter-spacing: 0; margin-left: 6px; }
.zugang-raster { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; align-items: end; }
.zugang-raster label { font-size: 0.8rem; }
.form-page .zugang-raster input { margin: 0; padding: 9px 11px; font-size: 0.9rem; }
.zugang-raster button { grid-column: 1 / -1; justify-self: start; }
@media (max-width: 480px) { .zugang-raster { grid-template-columns: 1fr; } }

/* ==== OK-Portal: Einkaufsliste ==== */
.form-page .ek-neu { display: flex; gap: 8px; align-items: stretch; margin: 6px 0 16px; }
.form-page .ek-neu input { margin: 0; flex: 1 1 auto; min-width: 0; }
.form-page .ek-neu button {
  flex: 0 0 56px; padding: 0; font-size: 1.6rem; line-height: 1;
  background: var(--gold); color: var(--gold-ink); border: none;
  border-radius: 10px; font-weight: 800; cursor: pointer;
}
.ek-zeile { cursor: default; }
.ek-zeile .ok-todo-status { font-size: 1.1rem; font-weight: 800; }
.ek-wer {
  flex-shrink: 0; font-size: 0.74rem; font-weight: 700; white-space: nowrap;
  color: var(--green-deep); background: #eaf6ee; border-radius: 999px; padding: 2px 9px;
}
.ek-zeile.st-done .ek-wer { background: transparent; color: #8a8a8a; font-weight: 600; padding: 0; }
.ek-weg-form { margin: 0; flex-shrink: 0; }
.ek-weg {
  border: 0; background: transparent; color: #b8b8b8; font-size: 1.3rem; line-height: 1;
  padding: 2px 6px; cursor: pointer;
}
.ek-weg:hover { color: #cf2e2e; }
.ek-aufraeumen { margin-top: 14px; }
@media (max-width: 480px) {
  .ek-wer { font-size: 0.7rem; padding: 1px 7px; }
}

/* Erfassen-Knopf unter den Listen (öffnet das Modal) */
.neu-knopf-zeile { margin-top: 18px; }
.neu-knopf-zeile button { width: 100%; max-width: 420px; margin-top: 0; cursor: pointer; }

/* ==== Bands: Admin-Karten ==== */
.band-eintrag.gesperrt summary b { color: #9a9a9a; text-decoration: line-through; }
.band-link-zeile { margin: 6px 0 14px; padding-bottom: 12px; border-bottom: 1px dashed var(--line); }
.band-link-zeile .link-zeile { margin: 4px 0 8px; }
.band-qr-knopf { text-decoration: none; white-space: nowrap; display: inline-block; }
.band-aktionen { display: flex; gap: 8px; flex-wrap: wrap; }
.band-aktionen form { margin: 0; }
.form-page .band-notiz { width: 100%; margin: 4px 0 8px; font-size: 0.9rem; }
.band-fuss { display: flex; gap: 10px; align-items: center; }
.band-fuss .danger-text { margin-left: auto; }
.danger-text { color: #cf2e2e; }
.band-neu { margin-bottom: 22px; }
.band-neu input { flex: 1 1 240px; }

/* ==== Bands: die Seite, die die Band sieht ==== */
.band-seite .login-logo { margin-bottom: 14px; }
.band-karte {
  width: min(560px, calc(100% - 24px)); margin: 0 auto 40px; background: #fff;
  border-radius: 22px; padding: 22px 20px 18px; box-shadow: 0 12px 40px rgba(0, 40, 15, 0.28);
}
.band-kopf { text-align: center; margin-bottom: 14px; }
.band-kopf h1 { margin: 0 0 12px; font-size: 2.1rem; line-height: 1.05; color: var(--green-deep); }
.band-ticket {
  display: inline-block; min-width: 70%; padding: 10px 18px 12px; border-radius: 14px;
  background: var(--gold); color: #2b2100; box-shadow: 0 4px 14px rgba(232, 184, 0, 0.35);
}
.band-ticket-label { display: block; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.12em;
  text-transform: uppercase; opacity: 0.75; }
.band-ticket b { display: block; font-size: 1.35rem; line-height: 1.2; }
.band-ticket-stage { display: block; margin-top: 3px; font-size: 0.82rem; font-weight: 700; opacity: 0.85; }
.band-notfall {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; padding: 6px 14px;
  border-radius: 999px; background: #fdecec; color: #9b1c1c; font-weight: 700; font-size: 0.85rem;
  text-decoration: none; border: 1.5px solid #f1b8b8;
}
.band-notfall b { font-size: 1rem; }

/* Kennzahlen-Kacheln */
.band-kacheln { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px; margin: 14px 0 6px; }
.band-kachel { background: var(--paper); border: 1px solid var(--line); border-radius: 12px; padding: 9px 8px; text-align: center; }
.band-kachel span { display: block; font-size: 0.66rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-soft); }
.band-kachel b { display: block; margin-top: 3px; font-size: 1.15rem; color: var(--green-deep); font-variant-numeric: tabular-nums; }
.band-kachel-show { background: #eaf6ee; border-color: #bfe0cb; }
.band-kachel-show b { font-size: 1rem; }

/* Abschnitte als Karten */
.band-box { margin-top: 10px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.band-box h2 { margin: 0 0 6px; font-size: 0.86rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--green-deep); }
.band-box h2 small { text-transform: none; letter-spacing: 0; font-weight: 600; color: var(--ink-soft); margin-left: 6px; }
.band-box p { margin: 0; white-space: pre-line; font-size: 0.95rem; line-height: 1.55; color: #1f2a22; }
.band-box-leise { background: var(--paper); }
.band-knopf {
  display: block; margin-top: 10px; padding: 11px 14px; border-radius: 11px; text-align: center;
  background: var(--green); color: #fff; font-weight: 800; font-size: 0.95rem; text-decoration: none;
}
.band-knopf:active { background: var(--green-deep); }

/* Running Order als Zeitleiste */
.band-zeitleiste { list-style: none; margin: 4px 0 0; padding: 0; position: relative; }
.band-zeitleiste::before { content: ""; position: absolute; left: 104px; top: 6px; bottom: 6px; width: 2px; background: var(--line); }
.band-zeitleiste li { display: flex; align-items: baseline; gap: 12px; padding: 4px 0; position: relative; }
.band-zeitleiste li::after { content: ""; position: absolute; left: 99px; top: 11px; width: 8px; height: 8px; border-radius: 50%; background: #b9c4bb; border: 2px solid #fff; }
.ro-zeit { flex: 0 0 94px; white-space: nowrap; font-size: 0.82rem; font-weight: 700; color: var(--ink-soft); font-variant-numeric: tabular-nums; text-align: right; }
.ro-was { flex: 1; font-size: 0.95rem; padding-left: 8px; }
.band-zeitleiste li.ich { background: #eaf6ee; border-radius: 10px; margin: 2px -6px; padding: 6px 6px; }
.band-zeitleiste li.ich::after { background: var(--green); width: 10px; height: 10px; left: 104px; top: 12px; }
.band-zeitleiste li.ich .ro-zeit, .band-zeitleiste li.ich .ro-was { color: var(--green-deep); font-weight: 800; }
.band-zeitleiste li.ich em { font-style: normal; font-size: 0.68rem; background: var(--green); color: #fff; border-radius: 999px; padding: 1px 7px; margin-left: 6px; vertical-align: middle; }

/* Kontakt */
.band-kontakt-zeile { display: flex; align-items: center; gap: 12px; }
.band-avatar { flex: none; width: 44px; height: 44px; border-radius: 50%; background: var(--green); color: #fff;
  display: grid; place-items: center; font-weight: 900; font-size: 1.2rem; }
.band-kontakt-zeile b { display: block; font-size: 1.05rem; }
.band-kontakt-zeile span:not(.band-avatar) { font-size: 0.88rem; color: var(--ink-soft); }

/* Dokumente als Zeilen-Knöpfe */
.band-dokumente { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.band-dok { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 10px;
  background: var(--paper); border: 1px solid var(--line); text-decoration: none; color: inherit; }
.band-dok span { font-size: 1.1rem; }
.band-dok b { flex: 1; min-width: 0; font-size: 0.92rem; color: var(--green-deep); overflow-wrap: anywhere; }
.band-dok small { color: var(--ink-soft); white-space: nowrap; }
.band-dok:active { background: #eaf6ee; }

.band-hinweis { margin: 16px 0 0; text-align: center; font-size: 0.76rem; color: #8a8a8a; }
@media (max-width: 420px) { .band-kopf h1 { font-size: 1.75rem; } .band-ticket { min-width: 100%; } }

/* Admin: Abschnitte und Dokumente */
/* Band-Ablauf: eine Zeile pro Punkt, Titel links, Feld rechts — von oben nach unten wie der Tag */
.band-ablauf { display: grid; grid-template-columns: 230px 1fr; gap: 8px 14px; align-items: start; margin-top: 10px; }
.band-ablauf .sp-label { margin: 0; padding-top: 9px; line-height: 1.3; }
.band-ablauf .sp-label .label-soft { display: block; font-weight: 500; }
.band-ablauf .band-notiz, .form-page .band-ablauf .sp-feld { margin: 0; }
.form-page .band-ablauf .sp-feld { max-width: 260px; }
.stage-zeit { display: flex; align-items: center; gap: 8px; }
.form-page .stage-zeit .sp-feld { max-width: 110px; }
.stage-bis { color: var(--ink-soft); font-weight: 700; }
.form-page .stage-zeit .stage-dauer { max-width: 120px; margin-left: 10px; background: var(--paper); color: var(--ink-soft); font-weight: 700; }
/* Running Order für alle Bands: Zeilen von / bis / Punkt */
.ablauf-kopf, .ablauf-zeile { display: grid; grid-template-columns: 86px 86px 1fr 34px; gap: 6px; align-items: center; }
.ablauf-kopf span { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-soft); }
.ablauf-zeile { margin-top: 6px; }
.form-page .ablauf-zeile .sp-feld { margin: 0; }
.ablauf-zeile .ek-weg { justify-self: center; }
.btn-download.hell.ablauf-pdf { padding: 7px 13px; font-size: 0.8rem; border-radius: 8px; white-space: nowrap; }
.form-page .ablauf-zeile .ablauf-band { background: #eaf6ee; border-color: #bfe0cb; color: var(--green-deep); font-weight: 700; }
.band-dok-bereich { margin: 12px 0 6px; padding-top: 10px; border-top: 1px dashed var(--line); }
.band-dok-liste { list-style: none; margin: 4px 0 8px; padding: 0; }
.band-dok-liste li { display: flex; align-items: center; gap: 8px; padding: 3px 0; font-size: 0.88rem; }
.band-dok-liste a { color: var(--green-deep); font-weight: 600; text-decoration: none; }
.band-dok-liste form { margin: 0; }
.band-dok-form { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 0; }
.band-dok-form input[type=file] { flex: 1 1 220px; font-size: 0.85rem; }
@media (max-width: 700px) {
  .band-ablauf { grid-template-columns: 1fr; gap: 2px 0; }
  .band-ablauf .sp-label { padding-top: 8px; }
  .form-page .band-ablauf .sp-feld { max-width: none; }
  .ablauf-kopf, .ablauf-zeile { grid-template-columns: 70px 70px 1fr 30px; }
}
.band-import input[type=file] { flex: 1 1 260px; font-size: 0.88rem; }
.band-import-titel { margin: 22px 0 4px; font-size: 1rem; color: var(--green-ink); }
.band-karte-allg { margin-top: 14px; }
.band-karte-liste { margin-top: 0; }
.band-karte-liste .sk-koerper { padding-top: 4px; }
.band-karte-liste .sponsoren-liste .spesen-karte { margin-bottom: 8px; }
.band-karte-allg .sk-koerper > .login-hint:first-child { margin-top: 0; }
.band-maps { display: inline-block; margin-top: 6px; padding: 9px 14px; border-radius: 10px;
  background: var(--green); color: #fff; font-weight: 800; font-size: 0.9rem; text-decoration: none; }
.band-maps:active { background: var(--green-deep); }
.band-downloads { margin-top: 14px; }
.auto-status { font-size: 0.82rem; color: var(--ink-soft); margin-left: 6px; }
.auto-status.ok { color: var(--green-deep); font-weight: 700; }
.auto-status.fehler { color: #9b1c1c; font-weight: 700; }

/* Belege mit mehreren Fotos: Auswahl-Galerie in der Dropzone, Zähler auf der Vorschau,
   Fotos untereinander im Dialog, mehrere Vorschaubilder im Admin */
.dz-galerie { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 4px; }
.dz-kachel { position: relative; width: 96px; height: 96px; border-radius: 10px; overflow: hidden;
  background: var(--paper); border: 1px solid var(--line); display: grid; place-items: center; }
.dz-kachel img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dz-kachel .dz-nr { position: absolute; left: 5px; bottom: 5px; background: rgba(0,0,0,0.55); color: #fff;
  font-size: 0.7rem; font-weight: 800; border-radius: 999px; padding: 1px 7px; }
.dz-kachel .dz-weg { position: absolute; top: 3px; right: 3px; width: 22px; height: 22px; border-radius: 50%;
  border: none; background: rgba(0,0,0,0.6); color: #fff; font-size: 0.95rem; line-height: 1; padding: 0; cursor: pointer; margin: 0; }
.beleg-thumb-wrap { position: relative; display: inline-block; }
.beleg-anzahl { position: absolute; right: -6px; top: -6px; background: var(--green); color: #fff;
  font-size: 0.68rem; font-weight: 800; border-radius: 999px; padding: 1px 6px; border: 2px solid #fff; }
.be-galerie { display: flex; flex-direction: column; gap: 10px; align-items: center; }
.be-foto { position: relative; max-width: 100%; }
.be-foto img { max-width: 100%; max-height: 38vh; border-radius: 10px; border: 1px solid var(--line, #ddd); display: block; }
.be-foto-nr { position: absolute; left: 8px; top: 8px; background: rgba(0,0,0,0.55); color: #fff;
  font-size: 0.72rem; font-weight: 800; border-radius: 999px; padding: 2px 8px; }
.be-foto-weg { position: absolute; right: 6px; top: 6px; margin: 0; }
.be-foto-weg .ek-weg { background: rgba(255,255,255,0.9); border-radius: 50%; width: 26px; height: 26px; }
.be-dazu { margin-top: 10px; }
.be-dazu-knopf { cursor: pointer; display: inline-block; }
.beleg-thumbs { display: flex; gap: 4px; flex-wrap: wrap; max-width: 140px; }
.beleg-thumbs .beleg-vorschau:nth-child(n+2) .beleg-thumb { width: 44px; height: 44px; }
.beleg-thumbs .beleg-vorschau:nth-child(n+2) .beleg-pdf { padding: 12px 8px; font-size: 0.7rem; }

/* ==== Einsatzplan kompakt (Admin-Zuteilung und Helfer-Schichtplan) ==== */
.ep { --ep-ok: #1f5238; --ep-ok-bg: #d6e9dc; --ep-wait: #7a4d06; --ep-wait-bg: #f6e2b6;
  --ep-ersatz: #674b94; --ep-line: #dbdfd6; --ep-line-2: #edf0ea; --ep-ink-2: #5a6560; --ep-ink-3: #8d958f; }
.ep-top { padding: 12px 16px 9px; border-bottom: 1px solid var(--ep-line); margin-bottom: 12px; }
.ep-top-row { display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap; }
.ep-tag { display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap; }
.ep-tagwahl { margin: 0; }
.ep-tagwahl .tag-select { margin: 0; }
.ep-day { margin: 0; font-size: 1.55rem; line-height: 1; color: var(--green-ink); }
.ep-day small { display: block; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-weight: 500; font-size: 0.76rem; letter-spacing: 0; text-transform: none; color: var(--ep-ink-2); margin-bottom: 4px; }
.ep-tally { margin-left: auto; font-size: 0.82rem; color: var(--ep-ink-2); white-space: nowrap; }
.ep-tally b { font-size: 1.05rem; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; }
.ep-tally .w { color: var(--ep-wait); font-weight: 700; }
.ep-tally .r { color: var(--red); font-weight: 700; }
.ep-controls { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.ep-chip { font: inherit; font-size: 0.78rem; background: transparent; border: 1px solid var(--ep-line); color: var(--ep-ink-2);
  border-radius: 99px; padding: 3px 11px; cursor: pointer; text-decoration: none; line-height: 1.4; margin: 0; }
.ep-chip:hover { border-color: #b7beb3; color: var(--ink); }
.ep-chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.ep-chip-edit { margin-left: auto; }

/* Jeder Posten eine eigene Karte mit Luft dazwischen — so bleibt die Liste gut lesbar */
.ep-liste { margin: 16px 16px 24px; display: flex; flex-direction: column; gap: 10px; }
.ep-posten { background: var(--card); border: 1px solid var(--ep-line); border-radius: 10px;
  box-shadow: 0 1px 3px rgba(20, 35, 26, 0.05); }
/* kein overflow:hidden — sonst wird der «+ Helfer»-Picker an der Kartenkante abgeschnitten;
   die runden Ecken bekommen Kopf und letzte Zeile deshalb selbst */
.ep-head { border-radius: 9px 9px 0 0; }
.ep-posten:not([open]) .ep-head { border-radius: 9px; }
.ep-zeilen > .ep-zeile:last-child, .ep-zeilen > .ep-bearb-neu:last-child { border-radius: 0 0 9px 9px; }
.ep-zeile:has(> .ep-picker:not([hidden])) { z-index: 5; }
.ep-head { display: flex; align-items: center; gap: 9px; padding: 13px 14px; cursor: pointer; list-style: none; background: #f6f8f4; }
.ep-posten[open] .ep-head { border-bottom: 1px solid var(--ep-line-2); }
.ep-head::-webkit-details-marker { display: none; }
.ep-head:hover { background: #f0f3ee; }
.ep-caret { width: 8px; height: 8px; flex: none; border-right: 1.7px solid var(--ep-ink-3); border-bottom: 1.7px solid var(--ep-ink-3);
  transform: rotate(45deg) translate(-2px, -2px); transition: transform .16s ease; }
.ep-posten:not([open]) .ep-caret { transform: rotate(-45deg); }
.ep-head h2 { margin: 0; font-size: 0.95rem; font-weight: 700; letter-spacing: -0.01em; line-height: 1.2; color: var(--ink); }
.ep-chef { font-size: 0.78rem; color: var(--ep-ink-2); }
.ep-rechts { margin-left: auto; display: flex; align-items: center; gap: 9px; white-space: nowrap; }
.ep-rechts .pfeil { display: none; }
.ep-quote { font-size: 0.95rem; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--ep-ink-2); }
.ep-quote b { color: var(--ink); }
.ep-warn { font-size: 0.75rem; color: var(--ep-wait); font-weight: 700; }
.ep-mein { font-size: 0.75rem; color: var(--ep-ok); font-weight: 700; }
.ep-info { margin: 0; padding: 6px 12px 4px; font-size: 0.78rem; color: var(--ep-ink-2); }

.ep-zeile { display: flex; align-items: center; gap: 10px; padding: 5px 12px; border-top: 1px solid var(--ep-line-2);
  position: relative; min-height: 38px; flex-wrap: wrap; }
/* Ohne farbigen Balken links — der Zustand steht ohnehin in den Chips und Zahlen */
.ep-zeile.ep-hidden { display: none; }
.ep-zeile:hover { background: #fbfcfa; }
.ep-zeile:target { background: #fff6dd; }
.ep-zeit { font-weight: 800; font-size: 0.95rem; font-variant-numeric: tabular-nums; width: 118px; flex: none; color: var(--ink); line-height: 1.15; }
.ep-zeit.aus { color: var(--ep-ink-3); font-weight: 600; }
.ep-zeit .e { display: block; font-size: 0.66rem; font-weight: 700; color: var(--ep-ersatz); letter-spacing: 0.06em; text-transform: uppercase; }
.ep-namen { display: flex; flex-wrap: wrap; align-items: center; gap: 3px 5px; flex: 1; min-width: 0; }
.ep-person { display: inline-flex; align-items: center; gap: 2px; padding: 1px 4px 1px 7px; border-radius: 5px; font-size: 0.86rem; font-weight: 600; white-space: nowrap; max-width: 100%; }
.ep-person.ok { background: var(--ep-ok-bg); color: var(--ep-ok); }
.ep-person.wait { background: var(--ep-wait-bg); color: var(--ep-wait); }
.ep-person.neutral { background: #fff; color: #1c1c1c; padding-right: 7px; box-shadow: inset 0 0 0 1px var(--ep-line); }
.ep-person.ich { background: var(--gold); color: var(--gold-ink); font-weight: 800; padding-right: 7px; }
.ep-person .nm { background: none; border: 0; padding: 0; margin: 0; font: inherit; color: inherit; cursor: pointer;
  overflow: hidden; text-overflow: ellipsis; text-decoration: none; }
.ep-person button.nm:hover { text-decoration: underline; }
.ep-mini-form { display: inline-flex; margin: 0; }
.ep-mini { width: 19px; height: 19px; border-radius: 4px; border: 0; background: transparent; cursor: pointer; display: grid; place-items: center;
  color: currentColor; opacity: .55; padding: 0; margin: 0; flex: none; }
.ep-mini svg { width: 12px; height: 12px; stroke-width: 2.4; }
.ep-mini:hover { opacity: 1; background: #fff; }
.ep-person.wait .ep-mini { opacity: .85; }
.ep-person.ok .ep-mini { opacity: 0; transition: opacity .12s; }
.ep-person.ok:hover .ep-mini, .ep-person.ok:focus-within .ep-mini { opacity: .6; }
.ep-leer { font-size: 0.78rem; color: var(--ep-ink-3); }
.ep-frei { font-size: 0.78rem; color: var(--ep-ink-2); font-variant-numeric: tabular-nums; }
.ep-zeigen { font: inherit; font-size: 0.78rem; font-weight: 600; color: #3f4a45; background: transparent; border: 1px solid transparent;
  border-radius: 99px; padding: 1px 9px 1px 7px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; margin: 0; }
.ep-zeigen:hover { background: var(--ep-ok-bg); color: var(--ep-ok); border-color: #cbdfd2; }
.ep-zeigen .c { width: 6px; height: 6px; flex: none; border-right: 1.7px solid currentColor; border-bottom: 1.7px solid currentColor;
  transform: rotate(-45deg) translate(-1px, -1px); transition: transform .15s ease; }
.ep-zeigen[aria-expanded="true"] .c { transform: rotate(45deg) translate(-1px, -1px); }
.ep-ok-namen { display: contents; }
.ep-ok-namen[hidden] { display: none; }
.ep-add { font: inherit; font-size: 0.78rem; color: var(--ep-ink-3); background: transparent; border: 1px dashed #c6ccc1;
  border-radius: 99px; padding: 1px 9px; cursor: pointer; white-space: nowrap; margin: 0; }
.ep-add:hover, .ep-add[aria-expanded="true"] { border-color: var(--ep-ok); color: var(--ep-ok); background: var(--ep-ok-bg); border-style: solid; }
.frei-n { font-variant-numeric: tabular-nums; }
.ep-cap { display: flex; align-items: center; gap: 6px; flex: none; }
.ep-cap form { margin: 0; display: flex; align-items: center; gap: 6px; }
.ep-cap label { font-size: 0.72rem; color: var(--ep-ink-3); }
.form-page .ep-cap input, .ep-cap input { width: 46px; height: 27px; text-align: center; font-weight: 800; font-size: 0.9rem;
  font-variant-numeric: tabular-nums; color: var(--ink); border: 1px solid var(--ep-line); border-radius: 4px; background: #fff; padding: 0; margin: 0; }
.ep-cap input:hover { border-color: var(--ep-ink-3); }
.ep-cap input:focus { outline: 2px solid var(--ep-ok); outline-offset: -1px; border-color: var(--ep-ok); }
.ep-cap input::-webkit-outer-spin-button, .ep-cap input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.ep-cap input[type=number] { -moz-appearance: textfield; }
.ep-notiz { flex-basis: 100%; margin: 0 0 3px 128px; font-size: 0.76rem; color: var(--ep-ink-2); }
.ep-tun { flex: none; display: flex; align-items: center; }
.ep-tun form { margin: 0; }
.ep-tun .btn2 { width: 96px; height: 34px; font-size: 0.8rem; }
.ep-tun .frist-hinweis { font-size: 0.74rem; color: var(--ep-ink-3); max-width: 150px; text-align: right; }

.ep-bearb { flex-basis: 100%; display: flex; gap: 8px 14px; flex-wrap: wrap; align-items: center; padding: 4px 0 6px; }
.ep-bearb .zplus-form {
  /* .zplus-form ist sonst ein absolutes Popup — im Bearbeiten-Modus normal in der Zeile zeigen */
  position: static; box-shadow: none; border: none; background: none; padding: 0;
  margin: 0; display: flex; gap: 6px; align-items: center; flex-wrap: wrap;
}
.ep-bearb input[type="time"] { width: 105px; margin: 0; padding: 5px 8px; }
.ep-bearb input[name="name"] { margin: 0; padding: 5px 10px; max-width: 260px; }
.ep-bearb .small { margin: 0; }
.ep-zeile .ep-bearb { margin-left: 128px; padding: 2px 0 6px; }
.ep-bearb .zplus-form input, .ep-bearb .zplus-form select { margin: 0; width: auto; }
.ep-bearb form.frag-nach { margin: 0; }
.ep-bearb-ressort, .ep-bearb-neu { padding: 8px 12px; border-top: 1px solid var(--ep-line-2); background: #fbfcfa; }
.ep-bearb-neu .bedarf-eingabe { width: 60px; }

.ep-picker { position: absolute; z-index: 20; right: 12px; top: 100%; margin-top: -2px; width: 260px; border: 1px solid var(--ep-line);
  border-radius: 6px; background: #fff; padding: 8px; box-shadow: 0 6px 20px rgba(27, 35, 31, .13); }
.ep-picker input { width: 100%; font: inherit; font-size: 0.86rem; padding: 5px 8px; border: 1px solid var(--ep-line); border-radius: 4px; margin: 0 0 6px; }
.ep-picker input:focus { outline: 2px solid var(--ep-ok); outline-offset: -1px; border-color: var(--ep-ok); }
.ep-picker ul { list-style: none; margin: 0; padding: 0; max-height: 190px; overflow: auto; }
.ep-picker li button { width: 100%; text-align: left; font: inherit; font-size: 0.86rem; background: none; border: 0; padding: 4px 7px;
  border-radius: 4px; cursor: pointer; display: flex; justify-content: space-between; gap: 8px; margin: 0; color: var(--ink); }
.ep-picker li button:hover { background: var(--ep-ok-bg); color: var(--ep-ok); }
.ep-picker li small { color: var(--ep-ink-3); }
.ep-picker li button.konflikt { color: var(--ep-wait); }
.ep-picker li button.konflikt small { color: var(--ep-wait); }
.ep-picker .none { font-size: 0.78rem; color: var(--ep-ink-3); padding: 4px 7px; }

@media (max-width: 620px) {
  .ep-top { padding: 10px 12px 8px; }
  .ep-day { font-size: 1.35rem; }
  .ep-tally { margin-left: 0; white-space: normal; }
  .ep-chip-edit { margin-left: 0; }
  .ep-liste { margin: 0 8px 24px; }
  .ep-zeile { padding: 7px 10px; }
  .ep-zeit { width: 100px; }
  .ep-namen { flex-basis: 100%; order: 4; }
  .ep-cap { margin-left: auto; }
  .ep-tun { margin-left: auto; }
  .ep-person.ok .ep-mini { opacity: .6; }
  .ep-notiz { margin-left: 0; }
  .ep-zeile .ep-bearb { margin-left: 0; }
  .ep-picker { right: 8px; left: 8px; width: auto; }
}
@media (prefers-reduced-motion: reduce) { .ep * { transition: none !important; } }
.ep-tally .ok { color: var(--ep-ok); font-weight: 700; }
.ep .deintag { margin-bottom: 18px; }
.ep .ep-top + .ep-liste, .ep .ep-top + .notice { margin-top: 4px; }

/* «Dein Tag» kompakt: weniger Innenabstand, flacher Zeitstrahl, Einsätze als eine Zeile */
.ep .deintag { padding: 9px 14px 10px; border-radius: 12px; }
.ep .deintag-kopf h2 { margin: 0 0 6px; font-size: 0.92rem; }
.ep .zeitstrahl { height: 20px; }
.ep .seg { font-size: 0.7rem; padding: 0 6px; }
.ep .zeitticks { height: 13px; margin-top: 3px; }
.ep .tick { font-size: 0.62rem; }
.deintag-liste { list-style: none; margin: 6px 0 0; padding: 0; }
.deintag-liste li { display: flex; align-items: center; gap: 10px; padding: 4px 0; font-size: 0.84rem; border-top: 1px dashed var(--line); }
.deintag-liste li:first-child { border-top: 0; }
.dl-zeit { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; min-width: 92px; }
.dl-zeit small { color: #6b3fc9; font-weight: 600; font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.06em; }
.dl-was { flex: 1; min-width: 0; }
.deintag-liste .badge { font-size: 0.68rem; }
/* Der Tag steht schon im Dropdown — die Überschrift bleibt nur für Screenreader */
.ep-day.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ep-top-row { align-items: center; }
/* Bearbeiten-Modus: erst der Stift, die Formulare erscheinen pro Schicht / Ressort auf Klick */
.ep-stift { width: 28px; height: 27px; border-radius: 6px; border: 1px solid var(--ep-line); background: #fff; color: var(--ep-ink-2);
  font-size: 0.85rem; cursor: pointer; padding: 0; margin: 0; flex: none; display: grid; place-items: center; }
.ep-stift:hover { border-color: var(--green); color: var(--green-deep); }
.ep-stift[aria-expanded="true"] { background: var(--green); border-color: var(--green); color: #fff; }
.ep-bearb[hidden] { display: none; }
/* Zebra: jede zweite Schichtzeile leicht grau, damit die Liste besser lesbar ist */
.ep-zeilen > .ep-zeile:nth-child(odd) { background: #eceeea; }   /* erste Zeile unter dem weissen Kopf grau */
.ep-zeilen > .ep-zeile:nth-child(odd):hover { background: #e3e6e1; }
.ep-zeilen > .ep-zeile:nth-child(even):hover { background: #fbfcfa; }
/* Posten-Kopf weiss statt grau — nur eine feine Linie trennt ihn von den Zeilen */
.ep-head { background: #fff; }
.ep-head:hover { background: #fafbf9; }
.ep-posten[open] .ep-head { border-bottom: 1px solid var(--ep-line); }
.ep-person.ep-haken { padding: 1px 9px; font-size: 0.9rem; }
/* «Alle aufklappen» direkt über der Posten-Liste statt im Kopf */
.ep-controls-liste { margin: 0 16px 8px; justify-content: flex-end; }
.ep-controls-liste + .ep-liste { margin-top: 0; }
@media (max-width: 620px) { .ep-controls-liste { margin: 0 8px 8px; } }
/* Plätze ohne Bearbeiten-Modus nur als Zahl */
.ep-cap-wert { display: inline-flex; align-items: center; gap: 6px; }
.ep-cap-wert b { min-width: 46px; text-align: center; font-size: 0.9rem; font-variant-numeric: tabular-nums; color: var(--ink); }
/* Helferessen: Bericht zum Kopieren */
.essen-bericht { margin: 14px 0 18px; }
.form-page .essen-bericht-text, .essen-bericht-text { width: 100%; font-family: ui-monospace, Consolas, monospace; font-size: 0.82rem;
  line-height: 1.5; background: var(--paper); margin: 4px 0 8px; }
.essen-reset { margin-top: 16px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.kanal-guthaben { margin: -2px 0 10px; font-size: 0.86rem; color: var(--ink); }
.kanal-guthaben b { color: var(--green-deep); font-variant-numeric: tabular-nums; }
.kanal-guthaben.leise { color: var(--ink-soft); }

/* Posten im Helferportal ausblenden (Kopf der Posten-Karte) */
.ep-portal { display: inline-flex; margin: 0; }
.ep-portal label { display: inline-flex; align-items: center; gap: 5px; font-size: 0.75rem; color: var(--ep-ink-2);
  font-weight: 500; cursor: pointer; white-space: nowrap; }
.ep-portal input { margin: 0; width: 14px; height: 14px; accent-color: var(--green); cursor: pointer; }
.ep-versteckt { font-size: 0.72rem; color: var(--ep-ink-2); border: 1px solid var(--ep-line); border-radius: 999px;
  padding: 1px 8px; background: #fff; }

/* Dienstleistungen / Material (Admin-Tab «Ablauf / Material») */
.material-neu-knopf { margin: 0; }
dialog.material-dialog { width: min(94vw, 560px); }
.material-dialog form { margin: 14px 0 0; }
.mt-liste { display: grid; grid-template-columns: 150px 1fr; gap: 10px 14px; align-items: center; }
.mt-liste label { margin: 0; font-size: 0.85rem; font-weight: 700; }
.mt-liste input, .mt-liste select { margin: 0; width: 100%; }
@media (max-width: 520px) {
  .mt-liste { grid-template-columns: 1fr; gap: 4px; }
  .mt-liste label { margin-top: 8px; }
}
.material-dialog .dialog-knoepfe button[type="submit"] {
  background: var(--gold); color: var(--gold-ink); border: none;
  padding: 10px 18px; border-radius: 10px; font-weight: 800;
}
.material-dialog .dialog-knoepfe button[type="submit"]:hover { background: #ddaa00; }
.material-dialog .dialog-knoepfe [data-dialog-zu] {
  padding: 10px 18px; border-radius: 10px; border: 2px solid var(--line);
  background: none; font-weight: 700; color: var(--ink-soft);
}
.material-dialog .dialog-knoepfe [data-dialog-zu]:hover { border-color: var(--green); color: var(--green-deep); }
.material-gruppe { margin-bottom: 14px; border-color: #c9d1c6; }
.material-gruppe > summary { background: #edf1ec; }
.material-gruppe > summary b { font-size: 1.02rem; color: var(--green-ink); }
.material-gruppe > summary:hover { background: #e4eae3; }
.material-gruppe[open] > summary { border-bottom: 1px solid #c9d1c6; }
.material-gruppe > .sk-koerper { background: #f4f6f3; padding: 10px 12px 12px; }
.material-gruppe .material-karte {
  margin: 8px 0 0; border: 1px solid #c9d1c6; border-radius: 10px;
  box-shadow: 0 1px 2px rgba(20, 35, 26, 0.08);
}
.material-gruppe .material-karte:first-child { margin-top: 0; }
.material-karte > summary { padding: 10px 14px; }
.material-karte > summary b { color: var(--ink); font-size: 0.98rem; }
.material-karte > summary:hover { background: #f2f7f3; }
.material-karte summary .mt-lieferant { font-size: 0.84rem; color: #3f4a45; font-weight: 500; }
.material-karte .badge.offen { background: #f6e2b6; color: #6f4608; }
.material-karte .badge.info { background: #d4e3f3; color: #1c4a78; }
.material-karte .badge.ok { background: #d6e9dc; color: #1f5238; }
.material-karte .sk-koerper { border-top: 1px solid #e3e8e0; padding-top: 12px; }
.mt-offen { color: #8a6d00; }
.sp-raster .sp-breit { grid-column: 1 / -1; }
.sp-status.st-bestellt { background: #e3edf7; color: #23527c; }
.sp-status.st-erledigt { background: #e2f2e7; color: var(--green-deep); }

/* Material: Einträge auf den eigenen Namen (OK-Portal) */
.material-karte summary .mt-verant-anzeige { font-size: 0.74rem; font-weight: 700; color: var(--ink-soft);
  border: 1px solid var(--line); border-radius: 999px; padding: 1px 8px; margin-left: auto; }
.material-karte summary .mt-verant-anzeige + .sp-status-badge { margin-left: 0; }
.material-karte summary .mt-verant-anzeige.ich { background: #d6e9dc; border-color: #b8d6c3; color: #1f5238; }
.material-gruppe .material-karte.mt-meins { border-left: 4px solid var(--green); }
#f-meine[aria-pressed="true"] { background: var(--green-deep); color: #fff; border-color: var(--green-deep); }

/* Material als Tabelle (Excel-artig): Zellen direkt editierbar */
.mt-tabelle-wrap { overflow-x: auto; border: 1px solid #c9d1c6; border-radius: 10px; background: #fff;
  box-shadow: 0 1px 3px rgba(20, 35, 26, 0.06); }
.mt-tabelle { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 0.86rem; }
.mt-tabelle th {
  text-align: left; padding: 7px 9px; font-size: 0.7rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.05em; color: var(--ink-soft); background: #e9ede7; border-bottom: 2px solid #c9d1c6;
  border-right: 1px solid #d8ded5; white-space: nowrap;
}
.mt-tabelle th:last-child { border-right: 0; }
.mt-tabelle td { padding: 0; border-bottom: 1px solid #e3e8e0; border-right: 1px solid #e3e8e0; vertical-align: middle; }
.mt-tabelle td:last-child { border-right: 0; }
.mt-tabelle tbody tr:last-child td { border-bottom: 0; }
.mt-tabelle tbody tr:nth-child(4n+3) td { background: #f6f8f4; }
.mt-tabelle tbody tr:hover td { background: #eef4ee; }
.mt-tabelle tr.mt-meins td.c-bez { box-shadow: inset 4px 0 0 var(--green); }
.mt-tabelle td .sp-feld,
.form-page .mt-tabelle td input, .form-page .mt-tabelle td select {
  width: 100%; margin: 0; padding: 8px 9px; border: 0; border-radius: 0; background: transparent;
  font: inherit; font-size: 0.86rem; color: var(--ink); min-height: 36px;
}
.form-page .mt-tabelle td input:focus, .form-page .mt-tabelle td select:focus {
  outline: 2px solid var(--green); outline-offset: -2px; background: #fff;
}
.form-page .mt-tabelle td.c-bez input { font-weight: 700; }
.form-page .mt-tabelle td select.ich { color: var(--green-deep); font-weight: 700; }
.form-page .mt-tabelle td select.sp-status { font-weight: 700; }
.form-page .mt-tabelle td select.sp-status.st-offen { background: #f6e2b6; color: #6f4608; }
.form-page .mt-tabelle td select.sp-status.st-bestellt { background: #d4e3f3; color: #1c4a78; }
.form-page .mt-tabelle td select.sp-status.st-erledigt { background: #d6e9dc; color: #1f5238; }
.mt-tabelle th.c-bez { width: 200px; }
.mt-tabelle th.c-lief { width: 150px; }
.mt-tabelle th.c-kontakt { width: 170px; }
.mt-tabelle th.c-menge { width: 80px; }
.mt-tabelle th.c-termin { width: 150px; }
.mt-tabelle th.c-verant { width: 120px; }
.mt-tabelle th.c-status { width: 105px; }
.mt-tabelle th.c-kat { width: 245px; }
.form-page .mt-tabelle td.c-kat select { font-weight: 700; color: var(--green-ink); }
.mt-tabelle th.c-weg, .mt-tabelle td.c-weg { width: 34px; text-align: center; }
.mt-tabelle td.c-weg form { margin: 0; }
.mt-weg { width: 26px; height: 26px; border-radius: 6px; border: 1px solid var(--line); background: #fff;
  color: var(--ink-soft); font: inherit; font-size: 1rem; line-height: 1; padding: 0; cursor: pointer; }
.mt-weg:hover { border-color: var(--red); color: var(--red); }
.mt-tabelle-hinweis { margin: 6px 2px 0; }
.form-page .sp-feld.autosave-ok { box-shadow: inset 0 0 0 2px var(--green); }

/* Kompakte Material-Tabelle: Details per Stift in einer Zeile darunter */
.mt-kompakt th.c-bez { width: auto; }
.mt-kompakt th.c-verant { width: 150px; }
.mt-kompakt th.c-status { width: 115px; }
.mt-kompakt th.c-stift, .mt-kompakt td.c-stift { width: 40px; text-align: center; }
.mt-kompakt td.c-stift .mt-stift { margin: 0 auto; display: inline-flex; align-items: center; justify-content: center; }
.mt-stift.voll { border-color: var(--green); color: var(--green-deep); }
.mt-stift[aria-expanded="true"] { background: var(--green); border-color: var(--green); color: #fff; }
.mt-tabelle tr.mt-detail td { background: #f1f4ef; padding: 10px 12px 12px 14px; box-shadow: inset 0 3px 0 #dfe6dc; }
.mt-tabelle tr.mt-detail[hidden] { display: none; }
.mt-tabelle tr.material-karte[hidden] + tr.mt-detail { display: none; }
.mt-liste-detail { grid-template-columns: 140px 1fr; gap: 6px 12px; max-width: 620px; }
.mt-liste-detail label { font-size: 0.76rem; color: var(--ink-soft); }
.form-page .mt-tabelle tr.mt-detail td input, .form-page .mt-tabelle tr.mt-detail td select {
  padding: 6px 9px; border: 1px solid var(--line); border-radius: 7px; background: #fff; min-height: 0; font-size: 0.85rem;
}
.form-page .mt-tabelle tr.mt-detail td input:focus, .form-page .mt-tabelle tr.mt-detail td select:focus { outline: 2px solid var(--green); outline-offset: -1px; }
.form-page .mt-tabelle tr.mt-detail td input.autosave-ok { box-shadow: inset 0 0 0 2px var(--green); }
@media (max-width: 720px) { .mt-liste-detail { grid-template-columns: 1fr; gap: 3px; } .mt-liste-detail label { margin-top: 6px; } }
.mt-stift svg { width: 16px; height: 16px; display: block; }

/* Schichtplan (Admin) als Tabelle pro Ressort: Zeit | Helfer | Plätze | Auge */
.ep-tabelle-wrap { overflow: visible; }
.ep-tabelle { min-width: 0; border-radius: 0 0 9px 9px; }
.ep-tabelle th.c-zeit { width: 130px; }
.ep-tabelle th.c-cap { width: 90px; }
.ep-tabelle th.c-stift, .ep-tabelle td.c-stift { width: 44px; text-align: center; }
.ep-tabelle th:first-child { border-radius: 0; }
.ep-tabelle tr.ep-zeile { display: table-row; padding: 0; border: 0; }
.ep-tabelle tr.ep-zeile.ep-hidden { display: none; }
.ep-tabelle tr.ep-zeile.ep-hidden + tr.mt-detail { display: none; }
.ep-tabelle td { padding: 6px 10px; vertical-align: middle; }
.ep-tabelle td.c-helfer { position: relative; }
.ep-tabelle td:has(> .ep-picker:not([hidden])) { z-index: 5; }
.ep-tabelle td.c-helfer .ep-picker { right: 10px; top: calc(100% - 4px); }
.ep-tabelle td .ep-namen { display: flex; flex-wrap: wrap; align-items: center; gap: 3px 5px; }
.ep-tabelle td .ep-cap { justify-content: center; }
.ep-tabelle td .ep-cap-wert b { font-size: 0.95rem; }
.ep-tabelle tr.ep-zeile:target td { background: #fff6dd; }
.ep-tabelle tbody tr.ep-zeile:hover td { background: #eef4ee; }
.ep-tabelle tr.mt-detail td { padding: 8px 12px 10px 14px; }
.ep-tabelle tr.mt-detail .ep-notiz { margin: 0 0 6px; }
.ep-tabelle tr.mt-detail .ep-bearb { padding: 0; }
.ep-tabelle tbody tr:last-child td:first-child { border-radius: 0 0 9px 0; }
.ep-tabelle td.c-stift .mt-stift { margin: 0 auto; display: inline-flex; align-items: center; justify-content: center; }
.ep-zeilen.ep-tabelle-wrap { border-radius: 0 0 9px 9px; }
.ep-bearb-neu { border-top: 1px solid var(--ep-line-2); }
.ep-tabelle .ep-zeit { font-weight: 600; }
.ep-tabelle .ep-notiz-zelle { margin: 0 0 3px; font-size: 0.74rem; }
.ep-auge svg { width: 16px; height: 16px; display: block; }
.ep-auge[aria-expanded="true"] { background: var(--green); border-color: var(--green); color: #fff; }
.ep-tabelle td.c-stift .ep-auge { margin: 0 auto; display: inline-flex; align-items: center; justify-content: center; }
.mt-tabelle tr.material-karte { cursor: pointer; }
.mt-tabelle td.c-bez .mt-name { display: block; padding: 8px 9px; font-weight: 700; min-height: 36px; box-sizing: border-box; }

/* Helfer-Schichtplan: Namen erst per Auge, Knopf bleibt rechts */
.plan-main .ep-namen[hidden] { display: none; }
.plan-main .ep-tun { margin-left: auto; gap: 8px; }
.plan-main .ep-tun .ep-auge { width: 34px; height: 34px; flex: none; }

/* Helfer-Schichtplan: kein Zebra-Grau, dafür eine echte Tabelle mit dunklen Linien */
.plan-main:not(.admin-zuteilung) .ep-posten[open] .ep-head { border-bottom: 1.5px solid #1c1c1c; }
.plan-main:not(.admin-zuteilung) .ep-zeilen { padding: 0; }
.plan-main:not(.admin-zuteilung) .ep-zeilen > .ep-zeile,
.plan-main:not(.admin-zuteilung) .ep-zeilen > .ep-zeile:nth-child(odd) {
  background: #fff; border: 0; border-top: 1.5px solid #1c1c1c; border-radius: 0; padding: 7px 0 7px 12px;
}
.plan-main:not(.admin-zuteilung) .ep-zeilen > .ep-zeile:first-child { border-top: 0; }
.plan-main:not(.admin-zuteilung) .ep-zeilen > .ep-zeile:hover,
.plan-main:not(.admin-zuteilung) .ep-zeilen > .ep-zeile:nth-child(odd):hover { background: #fbfcfa; }
.plan-main:not(.admin-zuteilung) .ep-zeilen > .ep-zeile:last-child { border-radius: 0 0 9px 9px; }
/* Zeile als Raster: links Zeit / Namen / Notiz untereinander, rechts die Aktions-Zelle
   über die ganze Zeilenhöhe mit senkrechter Linie */
.plan-main:not(.admin-zuteilung) .ep-zeile {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "zeit tun" "namen tun" "notiz tun";
  grid-template-rows: minmax(0, 1fr) auto auto;   /* Extra-Höhe geht an die Zeit-Zeile — die Zeit steht mittig */
  align-items: center; column-gap: 10px; row-gap: 4px;
}
.plan-main:not(.admin-zuteilung) .ep-zeit { grid-area: zeit; width: auto; align-self: center; }
.plan-main:not(.admin-zuteilung) .ep-namen { grid-area: namen; padding-right: 12px; }
.plan-main:not(.admin-zuteilung) .ep-notiz { grid-area: notiz; margin: 0; padding-right: 12px; }
.plan-main:not(.admin-zuteilung) .ep-tun {
  grid-area: tun; align-self: stretch; display: flex; align-items: center;
  padding: 7px 12px 7px 10px; margin: -7px 0 -7px 0;
}
.plan-main:not(.admin-zuteilung) .ep-zeilen > .ep-zeile:last-child { border-bottom: 1.5px solid #1c1c1c; }
.deintag-liste .badge { font-weight: 600; }

/* Helfer-Schichtplan: Tag-Auswahl über die ganze Breite */
.plan-main:not(.admin-zuteilung) .ep-top-row,
.plan-main:not(.admin-zuteilung) .ep-tag,
.plan-main:not(.admin-zuteilung) .ep-tagwahl { width: 100%; flex: 1 1 100%; }
.plan-main:not(.admin-zuteilung) .ep-tagwahl .tag-select { max-width: none; }

/* Tages-Freigabe: Haken mit Zähler, wenn die Person am selben Tag mehrere offene Anfragen hat */
.ep-mini.ep-mini-tag { width: auto; padding: 0 5px 0 3px; display: inline-flex; align-items: center; gap: 2px;
  opacity: .85; border: 1px solid currentColor; }
.ep-mini.ep-mini-tag b { font-size: 0.68rem; font-weight: 800; line-height: 1; }

/* Übersicht «Zu bestätigen»: Schichten einer Person am selben Tag als Liste in einer Zeile */
.zb-schichten { list-style: none; margin: 0; padding: 0; }
.zb-schichten li { display: flex; align-items: center; gap: 6px; padding: 1px 0; white-space: nowrap; }
.zb-schichten .zb-einzeln { margin: 0; display: inline-flex; }
.zb-x { width: 20px; height: 20px; border-radius: 5px; border: 1px solid var(--line); background: #fff;
  color: var(--ink-soft); font: inherit; font-size: 0.9rem; line-height: 1; padding: 0; cursor: pointer; }
.zb-x:hover { border-color: var(--red); color: var(--red); }

/* Admin-Übersicht: Belegungs-Heatmap */
.hm { --hm-gruen: #17743f; --hm-gruen-dunkel: #0e5b30; --hm-gruen-tief: #0a4726; --hm-gruen-bg: #dcecdf; --hm-gruen-rand: #b9d8c1;
  --hm-gold: #f0b429; --hm-gold-bg: #fbf0d6; --hm-gold-text: #7a5406; --hm-rot: #a32a2a; --hm-rot-bg: #f7e2e2; --hm-rot-rand: #e8c6c6;
  --hm-violett: #6f42c1; --hm-violett-bg: #efe9fb; --hm-linie: #dcdcd6; --hm-flaeche: #ececea; --hm-leise: #6b6b64;
  --hm-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; }
.hm-tage { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 12px; }
.hm-tag-btn { font: inherit; font-size: 0.86rem; padding: 6px 13px; border: 1px solid var(--hm-linie); background: #fff;
  border-radius: 4px; cursor: pointer; color: var(--hm-gruen-dunkel); }
.hm-tag-btn:hover { border-color: var(--hm-gruen); background: var(--hm-gruen-bg); }
.hm-tag-btn[aria-selected="true"] { background: var(--hm-gruen); border-color: var(--hm-gruen); color: #fff; }
.hm-tag-btn .hm-luecke { font-family: var(--hm-mono); font-size: 0.78rem; color: var(--hm-rot); margin-left: 6px; }
.hm-tag-btn[aria-selected="true"] .hm-luecke { color: var(--hm-gold); }
.hm-karte { background: #fff; border: 1px solid var(--hm-linie); border-radius: 4px; padding: 4px; }
.hm-scroller { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.hm-matrix { border-collapse: separate; border-spacing: 3px; width: 100%; min-width: 540px; }
.hm-matrix th { font-weight: 600; font-size: 0.72rem; letter-spacing: 0.07em; text-transform: uppercase; color: var(--hm-leise);
  text-align: center; padding: 8px 4px; white-space: nowrap; background: var(--hm-flaeche); border-radius: 4px; }
.hm-matrix th.hm-ressort-kopf { text-align: left; padding-left: 12px; color: var(--hm-gruen-dunkel); }
.hm-matrix th .hm-ersatz-kopf { color: var(--hm-violett); }
.hm-matrix td { padding: 0; }
.hm-matrix td.hm-ressort { font-size: 0.88rem; font-weight: 600; text-align: left; white-space: nowrap; padding: 0 10px 0 12px; }
.hm-zelle { border: 1px solid transparent; border-radius: 4px; padding: 8px 4px; text-align: center;
  font: inherit; width: 100%; position: relative; background: transparent; }
.hm-zelle:focus-visible { outline: 2px solid var(--hm-gruen); outline-offset: 2px; }
.hm-zelle { padding: 6px 6px 7px; text-align: left; vertical-align: top; min-height: 44px; }
.hm-zelle .hm-zahl { font-family: var(--hm-mono); font-size: 0.9rem; font-weight: 700; display: block; line-height: 1.2; }
.hm-zelle .hm-zahl small { font-size: 0.66rem; font-weight: 500; opacity: 0.75; }
.hm-namen { display: flex; flex-direction: column; gap: 3px; }
.hm-name { display: flex; align-items: center; justify-content: flex-start; gap: 6px; font-size: 0.78rem; line-height: 1.25;
  padding: 2px 6px; border-radius: 4px; background: rgba(255, 255, 255, 0.7); color: var(--ink); font-weight: 600; }
.hm-name.wait { background: #fff; box-shadow: inset 0 0 0 1px #e6cf98; color: #6f4608; }
.hm-name.ok::before { content: "✓"; color: var(--hm-gruen); font-weight: 800; margin-right: 2px; }
.hm-ok { flex: none; margin-left: auto; width: 22px; height: 22px; border-radius: 5px; border: 1px solid var(--hm-gruen); background: #fff;
  color: var(--hm-gruen); font: inherit; font-size: 0.85rem; font-weight: 800; line-height: 1; padding: 0; cursor: pointer; }
.hm-ok:hover { background: var(--hm-gruen); color: #fff; }
.hm-ok:disabled { opacity: 0.5; cursor: default; }
.hm-matrix td { vertical-align: top; }
.hm-zelle.z-leer, .hm-muster.z-leer { background: var(--hm-rot-bg); border-color: var(--hm-rot-rand); color: var(--hm-rot); }
.hm-zelle.z-teil, .hm-muster.z-teil { background: var(--hm-gold-bg); border-color: #eddcae; color: var(--hm-gold-text); }
.hm-zelle.z-voll, .hm-muster.z-voll { background: var(--hm-gruen-bg); border-color: var(--hm-gruen-rand); color: var(--hm-gruen-tief); }
.hm-zelle.z-kein { background: #fbfbf9; border-color: var(--hm-linie); color: #b8b8b0; cursor: default; }
.hm-zelle.z-wartet { background-image: repeating-linear-gradient(45deg, transparent 0 5px, rgba(240, 180, 41, 0.55) 5px 10px); }
.hm-zelle.aktiv { outline: 2px solid var(--hm-gruen); outline-offset: 1px; }
.hm-zelle:hover:not(.z-kein) { filter: brightness(0.96); }
.hm-punkt { position: absolute; top: -3px; right: -3px; width: 7px; height: 7px; border-radius: 50%; background: var(--hm-gold); border: 1px solid #d09b14; }
.hm-matrix tr.hm-summe td { background: transparent; font-family: var(--hm-mono); font-size: 0.78rem; color: var(--hm-leise); text-align: center; padding-top: 8px; }
.hm-matrix tr.hm-summe td.hm-ressort { font-family: inherit; font-size: 0.78rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--hm-gruen-dunkel); text-align: left; }
.hm-fehlt { color: var(--hm-rot); }
.hm-legende { display: flex; gap: 16px; flex-wrap: wrap; font-size: 0.8rem; color: var(--hm-leise); margin-top: 12px; }
.hm-legende span { display: flex; align-items: center; gap: 7px; }
.hm-muster { width: 18px; height: 12px; border-radius: 2px; display: inline-block; border: 1px solid var(--hm-linie); }
.hm-muster.z-wartet-muster { background: repeating-linear-gradient(45deg, #fff 0 4px, var(--hm-gold) 4px 8px); border-color: #eddcae; }
.hm-muster.z-ersatz { background: var(--hm-violett-bg); border-color: #ddd0f5; }
.hm-frei { display: block; border: 1px dashed rgba(0, 0, 0, 0.28); border-radius: 4px; padding: 2px 6px; font-size: 0.74rem;
  line-height: 1.25; color: inherit; opacity: 0.75; text-decoration: none; background: rgba(255, 255, 255, 0.45); }
.hm-frei:hover { opacity: 1; border-style: solid; background: #fff; color: var(--hm-gruen-dunkel); }
.hm-zelle { overflow: visible; }

/* Heatmap, neutrale Variante: Zellen grau, Farbe tragen nur die Helfer-Boxen
   (gelb = wartet auf Freigabe, grün = bestätigt), freie Plätze als graue Boxen */
.hm-zelle.z-leer, .hm-zelle.z-teil, .hm-zelle.z-voll { background: #f3f4f1; border-color: #dcdcd6; color: var(--ink); }
.hm-zelle.z-wartet { background-image: none; }
.hm-zelle .hm-punkt { display: none; }
.hm-name { font-weight: 600; }
.hm-name.wait { background: #fbf0d6; box-shadow: inset 0 0 0 1px #e6cf98; color: #7a5406; }
.hm-name.ok { background: #dcecdf; box-shadow: inset 0 0 0 1px #b9d8c1; color: #0a4726; }
.hm-name.ok::before { color: #17743f; }
.hm-frei { border: 1px solid #d3d4cf; background: #e6e7e3; color: #6b6b64; opacity: 1; }
.hm-frei:hover { background: #fff; border-color: var(--hm-gruen); color: var(--hm-gruen-dunkel); }
.hm-muster.z-leer { background: #e6e7e3; border-color: #d3d4cf; }
.hm-muster.z-teil { background: #fbf0d6; border-color: #e6cf98; }
.hm-muster.z-voll { background: #dcecdf; border-color: #b9d8c1; }

/* Alle Zellen einer Ressort-Zeile gleich hoch: Zelle füllt die Tabellenzeile aus
   (1px-Höhe auf der Zeile ist der Trick, damit height:100% in Tabellenzellen greift) */
.hm-matrix td .hm-zelle { box-sizing: border-box; display: flex; flex-direction: column; }

/* Ressort-Spalte als eigene Box in Zeilenhöhe — die Zuordnung zu den Zellen ist so klar */
.hm-matrix tbody tr:not(.hm-summe) td.hm-ressort { background: #f3f4f1; border: 1px solid #dcdcd6; border-radius: 4px;
  padding: 8px 10px 8px 12px; vertical-align: top; }
.hm-matrix tr.hm-summe td.hm-ressort { background: transparent; border: 0; }

/* Heatmap: Tages-Slider ‹ Tag › */
.hm-tage { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; background: #fff; border: 1px solid var(--hm-linie);
  border-radius: 6px; padding: 6px; }
.hm-pfeil { flex: none; width: 40px; height: 40px; border-radius: 6px; border: 1px solid var(--hm-linie); background: #fff;
  color: var(--hm-gruen-dunkel); font: inherit; font-size: 1.5rem; line-height: 1; cursor: pointer; }
.hm-pfeil:hover { background: var(--hm-gruen); border-color: var(--hm-gruen); color: #fff; }
.hm-slider-mitte { flex: 1; min-width: 0; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.hm-slider-titel { font-size: 1.05rem; font-weight: 700; color: var(--hm-gruen-dunkel); white-space: nowrap; }
.hm-slider-titel .hm-luecke { font-family: var(--hm-mono); font-size: 0.78rem; font-weight: 600; color: var(--hm-rot); margin-left: 6px; }
.hm-slider-titel .hm-komplett { font-family: var(--hm-mono); font-size: 0.78rem; font-weight: 600; color: var(--hm-gruen); margin-left: 6px; }
.hm-slider-datum { font-family: var(--hm-mono); font-size: 0.78rem; color: var(--hm-leise); }
.hm-punkte { display: flex; gap: 6px; margin-top: 3px; }
.hm-punkt-btn { width: 9px; height: 9px; border-radius: 50%; border: 1px solid var(--hm-linie); background: #e6e7e3; padding: 0; cursor: pointer; }
.hm-punkt-btn.aktiv { background: var(--hm-gruen); border-color: var(--hm-gruen); }
.hm-punkt-btn:hover { border-color: var(--hm-gruen); }
.hm-ok.hm-ok-tag { width: auto; padding: 0 5px 0 4px; display: inline-flex; align-items: center; gap: 2px; }
.hm-ok.hm-ok-tag b { font-size: 0.66rem; font-weight: 800; }

/* Heatmap: Helfer-Picker in der Zelle */
body > .hm-picker { position: absolute; z-index: 50; margin: 0; box-sizing: border-box; box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18); }
.hm-frei.aktiv { background: #fff; border-color: var(--hm-gruen); color: var(--hm-gruen-dunkel); }

/* Material-Tabelle auf dem Handy: alles auf eine Bildschirmbreite, kein seitliches Scrollen */
@media (max-width: 720px) {
  .mt-tabelle { min-width: 0; }
  .mt-tabelle td.c-bez .mt-name { white-space: normal; padding: 7px 6px; font-size: 0.88rem; line-height: 1.25; }
  .mt-kompakt th.c-status { width: 98px; }
  .form-page .mt-tabelle td select.sp-status { padding: 6px 4px; font-size: 0.78rem; }
  .mt-kompakt th.c-stift, .mt-kompakt td.c-stift { width: 36px; }
  .mt-tabelle th.c-weg, .mt-tabelle td.c-weg { width: 30px; }
  .mt-tabelle th { padding: 6px 6px; font-size: 0.66rem; }
}

/* Meine Daten: zweite IBAN */
.iban2-dazu { margin: 4px 0 14px; }
.iban2-teil #iban2-weg { margin: 2px 0 14px; }
.iban2-hinweis { margin: 4px 0 8px; }
/* Belege: auf welches Konto geht die Rückzahlung */
.beleg-konto { color: var(--ink-soft); }
.beleg-konto-badge { margin-left: 6px; font-size: 0.72rem; vertical-align: middle; }

/* OK → Helfer: Check-in Kontrolle — Knopf unter «+ Helfer erfassen», einzeilig */
.neu-knopf-zeile:has(.ci-knopf) { flex-direction: column; align-items: flex-start; gap: 10px; }
.ci-knopf { white-space: nowrap; }
.ci-knopf-zahl { display: inline-block; margin-left: 8px; padding: 1px 8px; border-radius: 999px;
  background: var(--green); color: #fff; font-size: 0.8rem; font-weight: 700; }
dialog.checkin-dialog { width: min(94vw, 640px); }
.ci-kopf { position: sticky; top: 0; background: #fff; padding-bottom: 6px; }
.ci-kopf .listen-suche { width: 100%; box-sizing: border-box; margin: 6px 0 6px; }
.ci-bilanz { margin: 0 0 6px; }
.ci-filter { display: flex; align-items: center; gap: 8px; font-size: 0.9rem; font-weight: 600; margin: 0 0 4px; }
.ci-filter input { width: 18px; height: 18px; margin: 0; accent-color: var(--green); }
.ci-liste { max-height: 58vh; overflow: auto; display: flex; flex-direction: column; gap: 6px; padding: 2px 0; }
.ci-zeile { display: flex; align-items: center; gap: 10px; padding: 8px 10px; background: #fff;
  border: 1.5px solid var(--line); border-radius: 10px; }
.ci-auge { width: 34px; height: 34px; flex: none; margin-left: auto; }
.ci-einsaetze[hidden] { display: none; }
.ci-zeile[hidden] { display: none; }
.ci-zeile.ci-da { background: #f2fbf5; border-color: var(--green); }
.ci-status { flex: none; width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center;
  justify-content: center; font-weight: 800; background: #ececec; color: #888; }
.ci-da .ci-status { background: var(--green); color: #fff; }
.ci-text { flex: 1 1 auto; min-width: 0; }
.ci-name { font-weight: 700; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ci-einsaetze { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 3px; font-size: 0.8rem; color: var(--ink-soft); }
.ci-einsatz.wartet { color: #8a6a1a; font-style: italic; }
.ci-einsatz[hidden] { display: none; }

/* Check-in Kontrolle: Aktualisieren-Knopf mit drehendem Pfeil beim Laden */
.ci-aktionen { display: flex; gap: 10px; flex-wrap: wrap; }
.ci-aktionen button { margin-top: 0; }
#ci-neu { display: inline-flex; align-items: center; gap: 8px; background: var(--green); color: #fff; border-color: var(--green); }
#ci-neu:hover { background: var(--green-deep); border-color: var(--green-deep); }
.ci-neu-pfeil { display: inline-block; font-size: 1.15em; line-height: 1; }
#ci-neu.laedt .ci-neu-pfeil { animation: ci-drehen 0.8s linear infinite; }
@keyframes ci-drehen { to { transform: rotate(360deg); } }

/* Admin → Archiv: Jahresbuch erzeugen und ablegen */
.archiv-neu { margin: 6px 0 26px; padding: 14px 16px 6px; border: 1.5px solid var(--line); border-radius: 12px; background: #fff; }
.archiv-neu h2, .archiv-liste h2 { margin: 0 0 8px; font-size: 1.15rem; }
.archiv-form { display: grid; gap: 8px; }
.archiv-form .form-actions { margin-top: 6px; }
.archiv-laeuft { color: var(--green-deep); font-weight: 600; }
.archiv-aktionen { display: flex; gap: 8px; align-items: center; }
.archiv-aktionen .inline-form { margin: 0; }
.archiv-aktionen .btn-download { padding: 6px 10px; font-size: 0.85rem; white-space: nowrap; }
.archiv-liste td { vertical-align: middle; }

/* Admin-Startseite: Kacheln zu allen Bereichen, gruppiert wie das Menü */
.admin-start .as-kopf { margin-bottom: 6px; }
.admin-start .as-kopf .login-hint { margin: 2px 0 0; }
.as-gruppe { margin: 22px 0 0; }
.as-gruppe h2 { margin: 0 0 10px; font-size: 1.05rem; color: var(--green-deep); letter-spacing: 0.04em; }
.as-kacheln { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.as-kachel {
  position: relative; display: flex; align-items: center; gap: 12px;
  padding: 14px 14px; background: #fff; border: 2px solid var(--green); border-radius: 14px;
  color: var(--green-deep); text-decoration: none; min-height: 64px;
}
.as-kachel:hover, .as-kachel:focus-visible { background: var(--green); color: #fff; }
.as-kachel:hover .as-sub, .as-kachel:focus-visible .as-sub { color: #e6f4ea; }
.as-kachel .as-icon { flex: none; width: 52px; height: 52px; display: block; object-fit: contain; }
.as-kachel .as-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.as-kachel .as-titel { font-weight: 800; font-size: 1.02rem; line-height: 1.2; }
.as-kachel .as-sub { font-size: 0.82rem; font-weight: 500; color: var(--ink-soft); line-height: 1.25; }
.as-kachel .as-badge {
  position: absolute; top: -9px; right: 10px; padding: 2px 9px; border-radius: 999px;
  background: var(--gold, #e8b800); color: #1c1c1c; font-size: 0.74rem; font-weight: 800; white-space: nowrap;
}
.as-kachel.as-warn { border-color: var(--gold, #e8b800); }
@media (max-width: 720px) {
  .as-kacheln { grid-template-columns: 1fr 1fr; gap: 8px; }
  .as-kachel { padding: 10px 10px; gap: 8px; min-height: 58px; }
  .as-kachel .as-icon { width: 40px; height: 40px; }
  .as-kachel .as-titel { font-size: 0.92rem; }
  .as-kachel .as-sub { font-size: 0.74rem; }
}

/* Admin → Spesen: Beleg-Dialog */
.ab-form .mt-liste textarea { margin: 0; width: 100%; box-sizing: border-box; min-height: 64px; }
.ab-datei-zeile { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-width: 0; }
.ab-datei-zeile[hidden] { display: none; }
.mt-liste label.ab-datei-knopf {
  display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 9px;
  border: 1.5px solid var(--green); background: #fff; color: var(--green-deep);
  font-size: 0.85rem; font-weight: 700; cursor: pointer; white-space: nowrap; margin: 0;
}
.mt-liste label.ab-datei-knopf:hover { background: var(--green); color: #fff; }
.ab-datei-name { font-size: 0.82rem; color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis; }
.ab-datei-name.hat-datei { color: var(--green-deep); font-weight: 600; }

/* Sponsoren: Notizen über die ganze Kartenbreite */
.sp-raster .sp-notizen { margin: 0; width: 100%; box-sizing: border-box; min-height: 52px; resize: vertical; font: inherit; }
.mt-liste textarea { margin: 0; width: 100%; box-sizing: border-box; font: inherit; }

/* System: Admin-Anmeldungen (aktive Sitzungen + Verlauf mit IP) */
#admin-anmeldungen h3 { margin: 14px 0 4px; font-size: 0.95rem; }
#admin-anmeldungen h3:first-of-type { margin-top: 10px; }
.al-scroll { overflow-x: auto; }
.al-tabelle { width: 100%; border-collapse: collapse; font-size: 0.84rem; margin: 2px 0 6px; }
.al-tabelle th { text-align: left; font-weight: 600; color: var(--ink-soft); padding: 4px 10px 4px 0; border-bottom: 1px solid #e3e0d4; white-space: nowrap; }
.al-tabelle td { padding: 6px 10px 6px 0; border-bottom: 1px solid #efede4; vertical-align: top; white-space: nowrap; }
.al-tabelle tr:last-child td { border-bottom: none; }
.al-tabelle .al-ip { font-family: ui-monospace, Consolas, monospace; font-size: 0.8rem; font-variant-numeric: tabular-nums; }
.al-ich td { background: #f1f7ee; }
.al-badge { display: inline-block; font-size: 0.68rem; font-weight: 700; color: #fff; background: var(--green); border-radius: 999px; padding: 1px 7px; margin-left: 4px; vertical-align: middle; font-family: inherit; }
.al-fehler td { color: #a33a2a; }


/* System → Danger Zone: Hinweis auf ungesichtete Drehbuch-Fotos */
.nj-warnung { background: #fff6d6; border: 1px solid #f3b400; border-radius: 10px; padding: 10px 14px; font-size: 0.86rem; color: #3d2e00; margin: 0 0 14px; }
.nj-warnung a { color: inherit; font-weight: 700; white-space: nowrap; }

/* ===== Helferplan: Tagesleiste (Pillen) + «Deine Einsätze» ===== */
.tagleiste {
  display: flex; gap: 8px; overflow-x: auto; padding: 18px 16px; scroll-padding: 0 16px;
  /* dunkleres Band, damit sich die Tagesauswahl als eigener Absatz vom Inhalt abhebt */
  background: #dfe3dd; border-bottom: 1px solid #c9cfc8; margin-bottom: 6px;
  scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.tagleiste::-webkit-scrollbar { display: none; }
.tagpille {
  flex: none; scroll-snap-align: center; display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 14px; border-radius: 999px; border: 1.5px solid #cfd6d0; background: #fff;
  color: var(--ink); text-decoration: none; font-size: 0.88rem; font-weight: 700; white-space: nowrap;
  line-height: 1.1; -webkit-tap-highlight-color: transparent; transition: background 0.2s, color 0.2s, border-color 0.2s;
}
/* Art und Tag in derselben Schrift — nur ein Punkt trennt sie */
.tagpille small { font: inherit; color: inherit; }
.tagpille small::after { content: "·"; margin-left: 7px; opacity: 0.55; }
.tagpille:hover { border-color: var(--green); }
.tagpille.aktiv { background: var(--green); border-color: var(--green); color: #fff; }
.tagpille:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
#plan-tag { transition: opacity 0.2s; }
#plan-tag.laedt { opacity: 0.45; pointer-events: none; }

.ds-karte { margin: 12px 16px 14px; background: #fff; border: 1px solid #dde2dd; border-radius: 12px; padding: 0 18px; }
.ds-kopf { display: flex; align-items: center; gap: 12px; padding: 12px 0; cursor: pointer; list-style: none; }
.ds-kopf::-webkit-details-marker { display: none; }
.ds-kopf-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ds-titel { font-size: 1.06rem; font-weight: 700; color: var(--ink); line-height: 1.2; }
.ds-total { flex: none; white-space: nowrap; }
.ds-pfeil { flex: none; width: 9px; height: 9px; margin: -4px 4px 0 2px; border-right: 2px solid #5a665e; border-bottom: 2px solid #5a665e; transform: rotate(45deg); transition: transform 0.2s; }
.ds-karte[open] .ds-pfeil { transform: rotate(-135deg); margin-top: 4px; }
.ds-karte[open] { padding-bottom: 4px; }
.ds-kopf:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; border-radius: 8px; }
.ds-total { font-size: 0.8rem; color: #5d6861; }
.ds-zeile {
  display: flex; align-items: flex-start; gap: 16px; padding: 10px 0; border-top: 1px solid #eceeea;
  text-decoration: none; color: var(--ink); font-size: 0.94rem;
}
.ds-zeile:hover .ds-tag { color: var(--green); }
.ds-tag { width: 112px; flex: none; display: flex; align-items: flex-start; gap: 8px; font-weight: 600; color: #3d4a41; line-height: 1.2; }
.ds-tag small { display: block; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #8a938c; margin-top: 1px; }
.ds-tag > span { white-space: nowrap; }
.ds-punkt { width: 6px; height: 6px; border-radius: 3px; background: transparent; flex: none; margin-top: 6px; }
.ds-zeile.aktiv .ds-tag { font-weight: 800; color: var(--green); }
.ds-zeile.aktiv .ds-punkt { background: var(--green); }
.ds-schichten { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
/* Festes Raster: Zeit | Ressort | Status — der Status steht immer rechts in seiner Spalte,
   lange Texte brechen in ihrer eigenen Spalte um statt die Zeile zu verschieben */
.ds-schicht { display: grid; grid-template-columns: 104px minmax(0, 1fr) auto; align-items: start; column-gap: 10px; }
.ds-schicht > b { font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.3; }
.ds-was { min-width: 0; line-height: 1.3; overflow-wrap: anywhere; }
.ds-schicht .badge { justify-self: end; white-space: nowrap; }
.ds-kurz { display: none; font-size: 0.9rem; line-height: 1; }
.ds-legende { display: none; }
.ds-keine { margin: 0; padding: 10px 0 12px; border-top: 1px solid #eceeea; font-size: 0.88rem; color: #5d6861; }
@media (max-width: 620px) {
  .tagleiste { padding: 16px 8px; scroll-padding: 0 8px; }
  .ds-karte { margin: 10px 8px 12px; padding: 0 14px; }
  .ds-total { font-size: 0.76rem; }
  .ds-zeile { gap: 10px; font-size: 0.9rem; }
  .ds-tag { width: 84px; }
  .ds-schicht { grid-template-columns: 88px minmax(0, 1fr) 30px; column-gap: 8px; }
  /* Handy: Status nur als Zeichen in fester Spalte, die Legende unten erklärt es */
  .ds-lang { display: none; }
  .ds-kurz { display: inline; }
  .ds-schicht .badge { justify-self: center; min-width: 28px; text-align: center; padding-left: 0; padding-right: 0; }
  .ds-legende { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 0; padding: 8px 0 10px; border-top: 1px solid #eceeea; font-size: 0.76rem; color: #5d6861; }
  .ds-legende .badge { min-width: 24px; text-align: center; }
  .ds-legende .badge.offen { margin-left: 8px; }
}

/* Admin-Schichtplan: Namen immer sichtbar und untereinander — eine Person pro Zeile */
.ep-tabelle td.c-helfer .ep-namen { flex-direction: column; align-items: flex-start; gap: 4px; }
.ep-tabelle td.c-helfer .ep-add { margin-top: 2px; }
/* leere Schicht: der Knopf «+ Helfer (n frei)» sagt schon alles — spart eine Zeile */
.ep-tabelle td.c-helfer .ep-leer { display: none; }

/* Material-Liste: Abschnitte je Kategorie mit Titelzeile */
.mt-tabelle .mt-gruppe-kopf th {
  text-align: left; padding: 9px 10px 7px; background: #dfe8e0; color: var(--green-ink);
  border-top: 2px solid #b9cbbd; border-bottom: 1px solid #c4d3c7; font-weight: 800; font-size: 0.86rem;
  letter-spacing: 0.02em; text-transform: none;
}
.mt-tabelle .mt-gruppe-kopf:first-of-type th { border-top: none; }
.mt-gruppe-zahl { margin-left: 8px; font-weight: 600; font-size: 0.76rem; color: var(--ink-soft); }
/* Suche: Abschnittstitel ohne sichtbaren Treffer ausblenden */
.mt-gruppe-kopf:not(:has(+ tbody .material-karte:not([hidden]))) { display: none; }

/* Bands: Ablagefläche für Dokumente (Drag & Drop oder Klick) */
.band-dok-form .band-ablage {
  flex: 1 1 100%; margin: 0; display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap;
  min-height: 74px; padding: 14px 16px; border: 2px dashed #b9c4bc; border-radius: 12px; background: #fafcf9;
  color: var(--ink-soft); font-size: 0.88rem; font-weight: 500; text-align: center; cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.band-ablage b { color: var(--green-deep); }
.band-ablage-symbol { font-size: 1.3rem; line-height: 1; color: var(--green); }
.band-ablage:hover { border-color: var(--green); }
.band-ablage.drueber { border-color: var(--green); border-style: solid; background: #e7f4ea; color: var(--green-deep); }
.band-ablage-laedt { display: none; font-weight: 700; color: var(--green-deep); }
.band-ablage.laedt { pointer-events: none; opacity: 0.75; }
.band-ablage.laedt .band-ablage-text, .band-ablage.laedt .band-ablage-symbol { display: none; }
.band-ablage.laedt .band-ablage-laedt { display: inline; }
/* mit JS: Dateiauswahl unsichtbar in der Fläche, kein eigener Hochladen-Knopf */
.band-dok-form.mit-js .band-ablage input[type=file] { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.band-dok-form.mit-js .band-ablage-knopf { display: none; }
.band-dok-form.mit-js .band-ablage { position: relative; }
.band-dok-form:not(.mit-js) .band-ablage input[type=file] { flex: 1 1 100%; margin-top: 6px; }

/* Urls / Links: Lampen / Geräte (ESP32 & Co.) */
.link-zeile .geraete-code { font-size: 1.15rem; font-weight: 800; letter-spacing: 0.14em; color: var(--green-deep); }
.link-zeile form { margin: 0; }
.geraete-tabelle { width: 100%; border-collapse: collapse; font-size: 0.84rem; margin-top: 4px; }
.geraete-tabelle th { text-align: left; font-weight: 600; color: var(--ink-soft); padding: 4px 8px 4px 0; border-bottom: 1px solid #e3e0d4; white-space: nowrap; }
.geraete-tabelle td { padding: 6px 8px 6px 0; border-bottom: 1px solid #efede4; vertical-align: middle; }
.geraete-tabelle tr:last-child td { border-bottom: none; }
.geraete-tabelle small { color: var(--ink-soft); }
.geraete-tabelle .mono { font-family: ui-monospace, Consolas, monospace; font-size: 0.78rem; }
.geraete-tabelle form { margin: 0; }
.geraete-tabelle .rot { color: #a33a2a; }
.geraete-anleitung { margin-top: 12px; font-size: 0.86rem; }
.geraete-anleitung summary { cursor: pointer; font-weight: 600; color: var(--green-deep); }
.geraete-anleitung pre { margin: 6px 0 10px; padding: 10px 12px; background: #f4f6f3; border: 1px solid var(--line); border-radius: 8px; font-size: 0.74rem; line-height: 1.45; overflow-x: auto; }
.geraete-anleitung code { background: #f4f6f3; padding: 1px 5px; border-radius: 4px; }

/* OK-Portal → Meine Pendenzen: «+ Pendenz erfassen» im Gruppentitel */
.ok-todo-titel .ok-todo-neu { margin-left: auto; font-family: var(--body, system-ui); text-transform: none; letter-spacing: 0; }

/* Meine Pendenzen: Kopf mit Erfassen-Knopf, überfällige markiert */
.ok-pendenzen-kopf { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.ok-pendenzen-kopf h1 { margin: 0; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ok-pendenzen-kopf + .ok-todo-gruppe { margin-top: 14px; }
.ok-todo-zeile.ueberfaellig .ok-todo-termin { background: #fdecea; color: var(--red); }

/* Meine Pendenzen: Zeile ist klickbar (öffnet das Modal), Notiz als kleine zweite Zeile */
.ok-todo-zeile[data-kind="pre"] { cursor: pointer; }
.ok-todo-zeile[data-kind="pre"]:hover { border-color: var(--green); }
.ok-todo-zeile[data-kind="pre"]:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.ok-todo-notiz { display: block; margin-top: 2px; font-size: 0.78rem; font-weight: 400; color: var(--ink-soft);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-decoration: none; }