/* ============================================================
   Wochenplaner — Konzept 2 «Regel-Cockpit»
   Graf Hauswartungen · Blau #69B1E2/#3F6A88/#203544, Grün #96C11F

   UX-Idee: Man pflegt REGELN (links, dunkles Kontrollpult),
   die Woche wird daraus GENERIERT (rechts, helles Board).
   Kein Zeitraster — Tage sind sortierte Kartenstapel.
   ============================================================ */

:root {
  --ink: #203544;
  --ink-2: #2A4255;
  --ink-3: #35495A;
  --ink-line: #3D566B;
  --ink-text: #EDF3F7;
  --ink-soft: #9FB4C2;
  --ink-dim: #6E8698;
  --bg: #EEF2F5;
  --card: #FFFFFF;
  --text: #203544;
  --text-soft: #5E7385;
  --line: #D9E2E9;
  --blue: #69B1E2;
  --blue-deep: #3F6A88;
  --blue-tint: #DCEDF8;
  --green: #96C11F;
  --green-dark: #5A7413;
  --green-tint: #EAF2D2;
  --amber: #C97B1F;
  --amber-tint: #FBEFDC;
  --red: #B5402A;
  --radius: 10px;
  --radius-sm: 6px;
  --sans: "Schibsted Grotesk", sans-serif;
  --mono: "Spline Sans Mono", monospace;
  --shadow: 0 1px 2px rgba(32,53,68,.07), 0 6px 18px rgba(32,53,68,.08);
  font-size: 15px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: var(--sans);
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

h1, h2, h3 { letter-spacing: -0.015em; }

/* ---------------------------------------------------- Topbar */

.topbar {
  display: flex;
  align-items: center;
  gap: 20px;
  background: #fff;
  border-bottom: 1px solid var(--line);
  padding: 0 18px 0 0;
  flex: none;
  z-index: 40;
}

.back-hub {
  display: flex;
  align-items: center;
  align-self: stretch;
  padding: 0 16px;
  color: var(--text-soft);
  text-decoration: none;
  font-size: 1.1rem;
  border-right: 1px solid var(--line);
  transition: all .12s;
}
.back-hub:hover { color: var(--blue-deep); background: var(--bg); }

.brand { display: flex; align-items: center; gap: 12px; padding: 12px 0; }
.brand-mark {
  width: 38px; height: 38px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--blue) 0%, var(--blue-deep) 60%, var(--ink) 100%);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 1.2rem;
  flex: none;
  position: relative;
  overflow: hidden;
}
.brand-mark::after {
  content: "";
  position: absolute;
  right: -6px; bottom: -6px;
  width: 17px; height: 17px;
  border-radius: 50%;
  background: var(--green);
}
.brand h1 { font-size: 1.05rem; font-weight: 800; line-height: 1; }
.brand-sub { font-size: .66rem; letter-spacing: .06em; text-transform: uppercase; color: var(--text-soft); margin-top: 3px; }

.kw-nav {
  display: flex;
  align-items: center;
  gap: 2px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 99px;
  padding: 3px;
}
.kw-nav button {
  width: 32px; height: 32px;
  border: none;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(32,53,68,.12);
  cursor: pointer;
  font-size: .95rem;
  color: var(--blue-deep);
  font-family: inherit;
  transition: all .12s;
}
.kw-nav button:hover { background: var(--blue-tint); }
.kw-readout { text-align: center; padding: 0 14px; min-width: 118px; }
.kw-readout b { display: block; font-size: .95rem; font-weight: 800; line-height: 1.1; }
.kw-readout span { font-size: .62rem; color: var(--text-soft); font-family: var(--mono); }
.kw-nav .parity {
  font-size: .6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  border-radius: 99px;
  padding: 6px 11px;
  margin: 0 4px 0 2px;
  background: var(--blue-tint);
  color: var(--blue-deep);
  white-space: nowrap;
}
.kw-nav .parity.gerade { background: var(--green-tint); color: var(--green-dark); }

.ma-filter {
  display: flex;
  gap: 0;
  border: 1px solid var(--line);
  border-radius: 99px;
  overflow: hidden;
  background: #fff;
}
.ma-filter button {
  font-family: inherit;
  font-weight: 600;
  font-size: .74rem;
  padding: 8px 14px;
  border: none;
  border-right: 1px solid var(--line);
  background: transparent;
  color: var(--text-soft);
  cursor: pointer;
  transition: all .12s;
  white-space: nowrap;
}
.ma-filter button:last-child { border-right: none; }
.ma-filter button:hover { color: var(--text); background: var(--bg); }
.ma-filter button.active { background: var(--ink); color: #fff; }

.topbar-actions { display: flex; gap: 8px; margin-left: auto; align-items: center; }

/* ---------------------------------------------------- Workspace */

.workspace {
  flex: 1;
  display: flex;
  min-height: 0;
}

/* ---------------------------------------------------- Rail: Regel-Bibliothek */

.rail {
  width: 390px;
  flex: none;
  background: var(--ink);
  color: var(--ink-text);
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.rail-head {
  padding: 20px 20px 14px;
  border-bottom: 1px solid var(--ink-line);
}
.rail-head h2 {
  font-size: 1.15rem;
  font-weight: 800;
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.rail-count {
  font-family: var(--mono);
  font-size: .66rem;
  font-weight: 500;
  color: var(--green);
}
.rail-claim {
  margin-top: 6px;
  font-size: .78rem;
  line-height: 1.45;
  color: var(--ink-soft);
}
.rail-head input[type=search] {
  margin-top: 14px;
  width: 100%;
  font-family: inherit;
  font-size: .84rem;
  color: var(--ink-text);
  background: var(--ink-2);
  border: 1px solid var(--ink-line);
  border-radius: var(--radius-sm);
  padding: 9px 12px;
}
.rail-head input[type=search]::placeholder { color: var(--ink-dim); }
.rail-head input[type=search]:focus { outline: none; border-color: var(--blue); }

.rail-filters { display: flex; gap: 6px; margin-top: 10px; flex-wrap: wrap; }
.rail-filters button {
  font-family: inherit;
  font-size: .66rem;
  font-weight: 600;
  letter-spacing: .03em;
  padding: 5px 11px;
  border-radius: 99px;
  border: 1px solid var(--ink-line);
  background: transparent;
  color: var(--ink-soft);
  cursor: pointer;
  transition: all .12s;
}
.rail-filters button:hover { color: var(--ink-text); border-color: var(--ink-soft); }
.rail-filters button.active { background: var(--green); border-color: var(--green); color: var(--ink); font-weight: 700; }

.rail-list { flex: 1; overflow-y: auto; padding: 10px 12px 24px; }
.rail-empty { padding: 24px 10px; font-size: .8rem; color: var(--ink-dim); text-align: center; }

.serie {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 10px 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  border: 1px solid transparent;
  transition: background .12s, border-color .12s;
}
.serie:hover { background: var(--ink-2); }
.serie.selected {
  background: var(--ink-2);
  border-color: var(--green);
}
.serie.ended { opacity: .45; }

.s-dot {
  width: 10px; height: 10px;
  border-radius: 3px;
  background: var(--c, var(--blue));
  flex: none;
  margin-top: 5px;
}
.s-main { flex: 1; min-width: 0; }
.s-main b {
  display: block;
  font-size: .86rem;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.s-meta {
  display: block;
  font-family: var(--mono);
  font-size: .62rem;
  color: var(--ink-soft);
  margin-top: 2px;
}
.s-rhythm {
  display: inline-block;
  font-size: .58rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  border-radius: 99px;
  padding: 2px 8px;
  margin-top: 5px;
}
.s-rhythm.gerade { background: rgba(150,193,31,.18); color: #C4E16A; }
.s-rhythm.ungerade { background: rgba(105,177,226,.16); color: #9FCEF0; }
.s-rhythm.weekly { background: rgba(255,255,255,.12); color: var(--ink-text); }
.s-rhythm.once { background: rgba(255,255,255,.07); color: var(--ink-soft); }

.s-badges {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  flex: none;
  padding-top: 2px;
}
.b-week { color: var(--green); font-size: .7rem; line-height: 1; }
.b-exc {
  font-size: .58rem;
  font-weight: 700;
  color: #F0C36D;
  background: rgba(201,123,31,.18);
  border-radius: 99px;
  padding: 2px 7px;
  white-space: nowrap;
}
.b-cancelled {
  font-size: .58rem;
  font-weight: 700;
  color: var(--ink-soft);
  text-decoration: line-through;
}
.b-ended {
  font-family: var(--mono);
  font-size: .56rem;
  color: var(--ink-dim);
  white-space: nowrap;
}

/* ---------------------------------------------------- Inline-Editor */

.editor {
  margin: 2px 4px 10px 24px;
  padding: 14px;
  background: var(--ink-2);
  border: 1px solid var(--ink-line);
  border-radius: var(--radius-sm);
  animation: rise .18s ease both;
}
.ed-note { font-size: .72rem; color: var(--ink-soft); line-height: 1.4; margin: 6px 0; }

.ed-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px 10px;
}
.ed-grid .span2 { grid-column: span 2; }
.ed-grid label.hidden { display: none; }

.editor label, .modal label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: .62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--ink-soft);
}
.modal label { color: var(--text-soft); }
.editor label small, .modal label small { font-weight: 500; text-transform: none; letter-spacing: 0; }

.editor input, .editor select {
  font-family: inherit;
  font-size: .82rem;
  color: var(--ink-text);
  background: var(--ink);
  border: 1px solid var(--ink-line);
  border-radius: var(--radius-sm);
  padding: 7px 9px;
}
.editor input:focus, .editor select:focus { outline: none; border-color: var(--blue); }

.ed-scope { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.ed-scope label {
  flex-direction: row;
  align-items: flex-start;
  gap: 7px;
  font-size: .74rem;
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0;
  color: var(--ink-text);
  border: 1px solid var(--ink-line);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  cursor: pointer;
  accent-color: var(--green);
}
.ed-scope label:has(input:checked) { border-color: var(--green); background: rgba(150,193,31,.08); }
.ed-scope label.disabled { opacity: .45; cursor: not-allowed; }
.ed-scope small { display: block; font-weight: 500; font-size: .62rem; color: var(--ink-soft); }

.ed-actions { display: flex; gap: 7px; margin-top: 13px; flex-wrap: wrap; }

.ed-customer { margin-top: 13px; border-top: 1px solid var(--ink-line); padding-top: 11px; }
.ed-customer summary {
  font-size: .72rem;
  font-weight: 700;
  color: var(--ink-soft);
  cursor: pointer;
  margin-bottom: 10px;
}
.ed-customer summary:hover { color: var(--ink-text); }

/* ---------------------------------------------------- Preview (Board) */

.preview {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}

.preview-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  padding: 18px 24px 12px;
  flex: none;
}
.preview-head h2 { font-size: 1.25rem; font-weight: 800; }
.preview-sub { font-size: .76rem; color: var(--text-soft); margin-top: 3px; }
.preview-sub b { color: var(--green-dark); }

.toggle-sa {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .72rem;
  font-weight: 600;
  color: var(--text-soft);
  cursor: pointer;
  user-select: none;
}
.toggle-sa .switch {
  width: 36px; height: 20px;
  border-radius: 99px;
  background: #C8D4DD;
  position: relative;
  transition: background .15s;
}
.toggle-sa .switch::after {
  content: "";
  position: absolute;
  top: 3px; left: 3px;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(32,53,68,.25);
  transition: transform .15s ease;
}
.toggle-sa.on .switch { background: var(--green); }
.toggle-sa.on .switch::after { transform: translateX(16px); }

.week-board {
  flex: 1;
  display: grid;
  gap: 12px;
  padding: 0 24px 20px;
  overflow: auto;
  align-items: stretch;
  min-height: 0;
}

.day-col {
  display: flex;
  flex-direction: column;
  min-width: 0;
  border-radius: var(--radius);
  background: rgba(255,255,255,.55);
  border: 1px solid var(--line);
  min-height: 0;
}
.day-col.is-holiday {
  background: repeating-linear-gradient(-45deg, rgba(105,177,226,.1) 0 8px, rgba(255,255,255,.4) 8px 16px);
}
.day-col.drop-hover {
  border-color: var(--green);
  box-shadow: inset 0 0 0 1px var(--green);
  background: rgba(150,193,31,.07);
}

.day-head {
  padding: 11px 12px 9px;
  border-bottom: 1px solid var(--line);
  flex: none;
}
.dh-row { display: flex; align-items: baseline; justify-content: space-between; }
.dh-row b { font-size: .9rem; font-weight: 800; }
.dh-date { font-family: var(--mono); font-size: .62rem; color: var(--text-soft); }
.dh-cap { margin-top: 5px; }
.dh-cap span { font-family: var(--mono); font-size: .6rem; color: var(--text-soft); }
.cap-bar {
  height: 4px;
  border-radius: 99px;
  background: #DDE6EC;
  margin-top: 4px;
  overflow: hidden;
  position: relative;
}
.cap-bar i {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--w, 0%);
  border-radius: 99px;
  background: linear-gradient(90deg, var(--blue), var(--green));
}
.dh-holiday {
  display: inline-block;
  margin-top: 5px;
  font-size: .64rem;
  font-weight: 700;
  color: var(--blue-deep);
  background: var(--blue-tint);
  border-radius: 99px;
  padding: 3px 9px;
}
.dh-vac {
  display: inline-block;
  margin: 5px 4px 0 0;
  font-size: .6rem;
  font-weight: 700;
  color: var(--green-dark);
  background: var(--green-tint);
  border-radius: 99px;
  padding: 2px 8px;
}

.day-cards {
  flex: 1;
  overflow-y: auto;
  padding: 9px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-height: 0;
}

.day-blocked {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--blue-deep);
  opacity: .6;
  padding: 30px 10px;
}
.day-empty {
  border: 1.5px dashed #C8D4DD;
  border-radius: var(--radius-sm);
  text-align: center;
  font-size: .76rem;
  font-weight: 600;
  color: var(--text-soft);
  padding: 16px 8px;
  cursor: pointer;
  transition: all .12s;
}
.day-empty:hover { border-color: var(--green); color: var(--green-dark); background: rgba(150,193,31,.05); }

/* ---------------------------------------------------- Karten */

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-left: 4px solid var(--c, var(--blue-deep));
  border-radius: var(--radius-sm);
  box-shadow: 0 1px 2px rgba(32,53,68,.06);
  padding: 8px 10px;
  cursor: pointer;
  transition: box-shadow .12s ease, transform .12s ease, border-color .12s;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  flex: none;
}
.card:hover {
  transform: translateY(-1px);
  box-shadow: 0 5px 16px rgba(32,53,68,.16);
}
.card.hl {
  border-color: var(--green);
  border-left-color: var(--c, var(--green));
  box-shadow: 0 0 0 2px var(--green), 0 5px 16px rgba(32,53,68,.14);
}
.card.exc { background: linear-gradient(0deg, var(--amber-tint), var(--amber-tint)), var(--card); }

.c-time {
  font-family: var(--mono);
  font-size: .64rem;
  font-weight: 600;
  color: var(--text-soft);
  display: flex;
  justify-content: space-between;
}
.c-time em { font-style: normal; color: var(--green-dark); }
.c-title {
  font-size: .84rem;
  font-weight: 700;
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.c-sub {
  font-size: .68rem;
  color: var(--text-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.c-tags { display: flex; gap: 5px; margin-top: 5px; flex-wrap: wrap; align-items: center; }
.c-tags span { font-size: .6rem; font-weight: 700; border-radius: 99px; padding: 1px 7px; }
.t-ma { background: var(--bg); color: var(--text-soft); border: 1px solid var(--line); }
.t-key { background: var(--green-tint); color: var(--green-dark); }
.t-exc { background: var(--amber-tint); color: var(--amber); }

.card.cancelled {
  border-left-color: #C8D4DD;
  background: repeating-linear-gradient(-45deg, #F4F2EC 0 6px, #fff 6px 12px);
}
.card.cancelled .c-title { text-decoration: line-through; color: var(--text-soft); }
.c-cancel-note { font-size: .62rem; color: var(--text-soft); margin-top: 2px; }

/* ---------------------------------------------------- Drag */

.drag-ghost {
  position: fixed;
  z-index: 300;
  pointer-events: none;
  opacity: .92;
  box-shadow: 0 14px 34px rgba(32,53,68,.3);
  transform: rotate(1.5deg);
}
.drag-source { opacity: .35; }

/* ---------------------------------------------------- Scope-Popover */

.scope-popover {
  position: fixed;
  z-index: 400;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 18px 50px rgba(32,53,68,.28);
  padding: 14px;
  width: 280px;
  animation: rise .15s ease both;
}
.scope-popover .sp-title { font-weight: 800; font-size: .9rem; }
.scope-popover .sp-sub { font-size: .74rem; color: var(--text-soft); margin: 2px 0 12px; }
.scope-popover button {
  display: block;
  width: 100%;
  text-align: left;
  font-family: inherit;
  font-weight: 700;
  font-size: .84rem;
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  margin-top: 6px;
  cursor: pointer;
  border: 1px solid var(--line);
  background: #fff;
  transition: all .12s;
}
.scope-popover button small { display: block; font-weight: 500; font-size: .68rem; color: var(--text-soft); }
.scope-popover .sp-week { border-color: var(--blue); }
.scope-popover .sp-week:hover { background: var(--blue-tint); }
.scope-popover .sp-rule { border-color: var(--green); }
.scope-popover .sp-rule:hover { background: var(--green-tint); }
.scope-popover .sp-cancel { border: none; color: var(--text-soft); font-weight: 600; text-align: center; }

/* ---------------------------------------------------- Modal */

.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 350;
  background: rgba(32,53,68,.42);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fade .15s ease both;
}
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

.modal {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 30px 80px rgba(32,53,68,.35);
  padding: 26px 28px;
  width: min(560px, calc(100vw - 40px));
  max-height: calc(100vh - 60px);
  overflow-y: auto;
  animation: rise .2s ease both;
}
.modal h3 { font-size: 1.25rem; font-weight: 800; margin-bottom: 3px; }
.modal .modal-sub { font-size: .8rem; color: var(--text-soft); margin-bottom: 14px; }
.modal .ed-grid { margin-top: 6px; }
.modal input, .modal select {
  font-family: inherit;
  font-size: .88rem;
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  background: #fff;
}
.modal input:focus, .modal select:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px var(--blue-tint);
}
.modal h4.list-title {
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--text-soft);
  margin: 18px 0 8px;
}
.modal .ed-actions { justify-content: flex-end; margin-top: 18px; }

.conflict-hint {
  min-height: 0;
  margin-top: 10px;
  font-size: .78rem;
  font-weight: 600;
  color: var(--amber);
  background: var(--amber-tint);
  border-radius: var(--radius-sm);
  padding: 0 12px;
  max-height: 0;
  overflow: hidden;
  transition: all .15s;
}
.conflict-hint.show { padding: 9px 12px; max-height: 80px; }

.vac-list { list-style: none; max-height: 180px; overflow-y: auto; }
.vac-list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: .82rem;
  padding: 7px 6px;
  border-bottom: 1px solid var(--line);
}
.vac-list li.empty { color: var(--text-soft); border: none; }
.vac-remove { border: none; background: none; color: var(--text-soft); font-size: 1.1rem; cursor: pointer; }
.vac-remove:hover { color: var(--red); }

/* ---------------------------------------------------- Handy-Drawer */

.phone-drawer {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  z-index: 200;
  display: flex;
}
.phone-drawer[hidden] { display: none; }
.phone-drawer-inner {
  background: var(--ink);
  padding: 26px 28px 20px;
  box-shadow: -12px 0 44px rgba(32,53,68,.4);
  animation: slide-in .22s ease both;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}
@keyframes slide-in { from { transform: translateX(100%); } to { transform: none; } }

.drawer-close {
  align-self: flex-end;
  background: none;
  border: none;
  color: var(--ink-soft);
  font-size: 1.7rem;
  cursor: pointer;
  line-height: 1;
}
.drawer-close:hover { color: #fff; }
.drawer-kicker {
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .16em;
  color: var(--green);
  margin-bottom: 14px;
}

.phone {
  width: 320px;
  border: 8px solid #0F1B23;
  border-radius: 38px;
  background: #fff;
  overflow: hidden;
  flex: none;
  box-shadow: 0 24px 60px rgba(0,0,0,.45);
}
.phone-notch { height: 22px; display: flex; justify-content: center; align-items: center; background: #fff; }
.phone-notch::after { content: ""; width: 86px; height: 7px; background: #0F1B23; border-radius: 99px; }
.phone-screen {
  height: 580px;
  overflow-y: auto;
  background: #F4F6F8;
  display: flex;
  flex-direction: column;
}

.p-head { background: var(--ink); color: #fff; padding: 12px 16px; }
.p-head small { display: block; font-size: .6rem; text-transform: uppercase; letter-spacing: .14em; color: var(--blue); }
.p-head b { font-size: 1.2rem; font-weight: 800; }
.p-head span { display: block; font-size: .68rem; color: var(--ink-soft); margin-top: 1px; }

.p-chips { display: flex; gap: 4px; padding: 9px 12px; background: var(--ink); border-radius: 0 0 16px 16px; }
.p-chips button {
  flex: 1;
  border: none;
  background: rgba(255,255,255,.08);
  border-radius: 8px;
  padding: 6px 0;
  cursor: pointer;
  font-family: inherit;
  font-size: .6rem;
  font-weight: 700;
  line-height: 1.5;
  color: #C7D5DF;
}
.p-chips button.active { background: var(--green); color: #fff; }

.p-list { padding: 12px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.p-card {
  background: #fff;
  border: 1px solid var(--line);
  border-left: 4px solid var(--c, var(--blue-deep));
  border-radius: 10px;
  padding: 10px 12px;
  display: flex;
  gap: 12px;
  box-shadow: 0 1px 3px rgba(32,53,68,.07);
}
.p-time { font-family: var(--mono); font-weight: 700; font-size: .9rem; flex: none; }
.p-time small { display: block; font-weight: 400; font-size: .62rem; color: var(--text-soft); }
.p-card b { display: block; font-size: .84rem; }
.p-card span { display: block; font-size: .7rem; color: var(--text-soft); margin-top: 1px; }
.p-card .p-key { color: var(--green-dark); margin-top: 4px; }
.p-empty { text-align: center; color: var(--text-soft); font-size: .8rem; padding: 44px 18px; line-height: 1.7; }
.p-empty b { font-size: 1.15rem; color: var(--blue-deep); }

.p-foot {
  border-top: 1px solid var(--line);
  background: #fff;
  padding: 9px 16px;
  display: flex;
  justify-content: space-between;
  font-size: .72rem;
  font-weight: 600;
  color: var(--text-soft);
}
.p-foot b { color: var(--green-dark); }

/* ---------------------------------------------------- Buttons */

.btn-primary, .btn-ghost, .btn-reset, .btn-danger {
  font-family: inherit;
  font-weight: 700;
  font-size: .76rem;
  border-radius: 99px;
  padding: 9px 16px;
  cursor: pointer;
  transition: all .12s;
}
.btn-primary { background: var(--green); border: 1px solid var(--green); color: #fff; }
.btn-primary:hover { background: var(--green-dark); border-color: var(--green-dark); }
.btn-ghost { background: transparent; border: 1px solid var(--line); color: var(--blue-deep); }
.topbar .btn-ghost { background: #fff; }
.btn-ghost:hover { border-color: var(--blue); }
.editor .btn-ghost { border-color: var(--ink-line); color: var(--ink-text); }
.editor .btn-ghost:hover { border-color: var(--blue); color: var(--blue); }
.btn-ghost small, .btn-danger small { font-weight: 500; opacity: .75; }
.btn-danger { background: transparent; border: 1px solid rgba(181,64,42,.55); color: #E08A77; }
.btn-danger:hover { border-color: var(--red); background: rgba(181,64,42,.12); }
.btn-reset { background: transparent; border: 1px dashed #C8D4DD; color: var(--text-soft); font-weight: 600; }
.btn-reset:hover { border-color: var(--text-soft); color: var(--text); }

/* ---------------------------------------------------- Sonstiges */

.colophon {
  border-top: 1px solid var(--line);
  padding: 10px 20px;
  display: flex;
  justify-content: space-between;
  font-size: .68rem;
  color: var(--text-soft);
  background: #fff;
  flex: none;
}

.toast {
  position: fixed;
  left: 50%;
  bottom: 50px;
  transform: translate(-50%, 16px);
  z-index: 500;
  background: var(--ink);
  color: #fff;
  font-size: .82rem;
  font-weight: 600;
  border-radius: 99px;
  padding: 11px 22px;
  box-shadow: 0 10px 30px rgba(32,53,68,.3);
  opacity: 0;
  transition: all .25s ease;
  pointer-events: none;
  max-width: min(560px, 90vw);
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

@keyframes rise {
  from { opacity: 0; transform: translateY(7px); }
  to { opacity: 1; transform: none; }
}

@media (max-width: 1100px) {
  .rail { width: 320px; }
  .brand-sub { display: none; }
}