/* 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 {
  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; 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.7rem; font-weight: 800; 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-family: ui-monospace, Consolas, monospace;
  font-size: 0.68rem; font-weight: 700; color: var(--green-deep);
}
.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; }
.aktionen-zelle { display: flex; gap: 6px; }
.aktionen-zelle form { margin: 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; }
.kanal-option {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px;
  border: 1.5px solid var(--line); border-radius: 12px; background: #fff;
  font-weight: 600; cursor: pointer;
}
.kanal-option input { width: 20px; height: 20px; margin: 0; accent-color: var(--green); }
.kanal-option .label-soft { display: block; font-weight: 400; }
.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; }