/* Projektstand Kranz & Frey
   Bewusst nur ein helles Theme. Formensprache: weiche Bubbles und Pills,
   Farbtöne als sehr helle Tönungen der Palette, keine Verläufe. */
:root {
  color-scheme: light;
  --bg: #F7F8F6;
  --paper: #FFFFFF;
  --ink: #15191E;
  --ink-2: #353C46;
  --muted: #5B6470;
  --faint: #9AA1AA;
  --line: #E2E5E8;
  --line-2: #C8CDD3;
  --hover: #EFF1EE;
  --kobalt: #2F54C8;
  --red: #C62F38;
  --moss: #3E7B4F;
  /* Tönungen */
  --tint: #F1F3F0;
  --tint-2: #E8EBE6;
  --kobalt-t: #EAEFFB;
  --red-t: #FBECED;
  --moss-t: #E7F1EA;
  /* Radien */
  --r-l: 20px;
  --r-m: 14px;
  --r-s: 10px;
  --r-pill: 999px;
  --shadow-soft: 0 1px 2px rgba(21, 25, 30, .04), 0 6px 20px rgba(21, 25, 30, .05);
  --fs-s: 13px; --fs-m: 15px; --fs-l: 18px; --fs-xl: 24px;
  --font-sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", monospace;
}
* { box-sizing: border-box; }
html { background: var(--bg); }
html, body { margin: 0; }
body { background: var(--bg); color: var(--ink); font: 400 var(--fs-m)/1.5 var(--font-sans); -webkit-text-size-adjust: 100%; font-variant-numeric: tabular-nums; }
.wrap { max-width: 880px; margin: 0 auto; padding: 36px 20px 48px; overflow-wrap: anywhere; }
@media (max-width: 480px) { .wrap { padding: 22px 14px 40px; } }
:focus-visible { outline: 2px solid var(--kobalt); outline-offset: 2px; border-radius: 4px; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
button:disabled { cursor: default; opacity: .5; }
.mono { font-family: var(--font-mono); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.state { padding: 32px 0; color: var(--muted); }

/* Pills */
.pill { display: inline-flex; align-items: center; gap: 5px; padding: 1px 10px; border-radius: var(--r-pill); background: var(--tint); color: var(--ink-2); font-size: var(--fs-s); line-height: 1.55; white-space: nowrap; }
.pill.ok { background: var(--moss-t); color: var(--moss); }
.pill.run { background: var(--kobalt-t); color: var(--kobalt); }
.pill.bad { background: var(--red-t); color: var(--red); font-weight: 500; }

/* Schaltflächen */
.lnk { background: none; border: 0; padding: 0; color: var(--kobalt); font-size: var(--fs-s); line-height: 1.5; }
.lnk:hover:not(:disabled) { text-decoration: underline; text-underline-offset: 2px; }
.lnk.danger { color: var(--red); }
.btn { border: 1px solid var(--line-2); background: var(--paper); border-radius: var(--r-pill); padding: 5px 16px; font-size: var(--fs-s); min-height: 34px; }
.btn:hover:not(:disabled) { border-color: var(--muted); }
.btn.primary { background: var(--kobalt); border-color: var(--kobalt); color: var(--paper); font-weight: 500; }
.btn.primary:hover:not(:disabled) { border-color: #2748B0; background: #2748B0; }
.btn.big { font-size: var(--fs-m); padding: 8px 22px; min-height: 42px; }
input[type="text"], input[type="search"], input[type="date"], textarea, select {
  background: var(--paper); border: 1px solid var(--line-2); border-radius: var(--r-s); padding: 5px 11px; min-height: 34px; width: 100%; font-size: var(--fs-m);
}
input[type="search"] { border-radius: var(--r-pill); padding: 5px 14px; }
input:focus-visible, textarea:focus-visible, select:focus-visible { outline-offset: 0; border-color: var(--kobalt); }
textarea { resize: vertical; min-height: 64px; }
.w-auto { width: auto; }
.check { display: inline-flex; gap: 7px; align-items: center; cursor: pointer; user-select: none; }

/* Runde Checkbox (auch für „Erledigte zeigen“) */
input[type="checkbox"] {
  -webkit-appearance: none; appearance: none; flex: none;
  width: 18px; height: 18px; margin: 0; border: 1.5px solid var(--line-2); border-radius: 50%;
  background: var(--paper) center / 11px 11px no-repeat; cursor: pointer; vertical-align: middle;
}
input[type="checkbox"]:hover:not(:disabled) { border-color: var(--moss); }
input[type="checkbox"]:checked {
  border-color: var(--moss); background-color: var(--moss);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.3l2.3 2.3 4.7-5' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
input[type="checkbox"]:disabled { cursor: default; opacity: .55; }
input[type="checkbox"]:focus-visible { outline-offset: 2px; border-radius: 50%; }
input[type="radio"] { accent-color: var(--kobalt); margin: 0; }

/* Kopf */
.top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; }
.top h1 { font-size: var(--fs-xl); font-weight: 600; letter-spacing: -.015em; line-height: 1.2; margin: 0; }
.top h1 span { font-weight: 400; color: var(--muted); }
.tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; font-size: var(--fs-s); color: var(--muted); }
.tools input[type="search"] { width: 200px; font-size: var(--fs-s); min-height: 32px; }
@media (max-width: 480px) { .tools { width: 100%; } .tools input[type="search"] { width: auto; flex: 1 1 140px; } }
.status { margin: 14px 0 0; font-size: var(--fs-s); color: var(--muted); display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; }
.status .n { font-family: var(--font-mono); color: var(--ink); }
.status .late, .status .late .n { color: var(--red); font-weight: 500; }
.status .pill.late { background: var(--red-t); }
.stale { margin: 10px 0 0; }

/* Lauf-Details */
.run { margin-top: 10px; }
.run-body { margin-top: 8px; padding: 12px 16px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-m); font-size: var(--fs-s); color: var(--muted); max-width: 680px; }
.run-body dl { display: grid; grid-template-columns: 11em minmax(0, 1fr); gap: 4px 12px; margin: 0; }
.run-body dt { color: var(--ink-2); }
.run-body dd { margin: 0; }
.run-body ul { margin: 0; padding-left: 16px; }
.run-body .runs { list-style: none; padding: 0; font-family: var(--font-mono); font-size: 12px; line-height: 1.7; }
@media (max-width: 480px) { .run-body dl { grid-template-columns: minmax(0, 1fr); gap: 0; } .run-body dd { margin-bottom: 6px; } }

/* Hinweise */
.banner { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: baseline; justify-content: space-between; font-size: var(--fs-s); padding: 9px 16px; margin-top: 14px; background: var(--tint); border-radius: var(--r-m); color: var(--ink-2); }
.banner.err { color: var(--red); background: var(--red-t); }

/* Gruppen und Kunden */
.grp { margin-top: 34px; }
.grp-h { margin: 0 0 10px 6px; font-size: var(--fs-s); font-weight: 500; color: var(--muted); letter-spacing: .02em; }
.klist { display: grid; gap: 10px; }
.k { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-l); }
.k.open { border-color: var(--line-2); box-shadow: var(--shadow-soft); }
.k-h { margin: 0; font: inherit; }
.k-btn { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 24px; width: 100%; text-align: left; background: none; border: 0; border-radius: var(--r-l); padding: 16px 18px; color: inherit; }
.k-btn:hover { background: var(--hover); }
.k.open .k-btn:hover { background: var(--paper); }
.k-btn:focus-visible { outline-offset: -2px; }
.k-main { display: block; min-width: 0; }
.k-name { display: block; font-size: var(--fs-l); font-weight: 500; line-height: 1.3; letter-spacing: -.005em; }
.k-proj { font-size: var(--fs-m); font-weight: 400; color: var(--muted); }
.k-lage { display: block; margin-top: 3px; color: var(--muted); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.k.open .k-lage { display: none; }
.k-fig { display: flex; align-items: center; gap: 8px; padding-top: 1px; font-family: var(--font-mono); font-size: var(--fs-s); color: var(--muted); white-space: nowrap; }
.k-n { display: inline-flex; align-items: baseline; gap: 5px; padding: 2px 11px; border-radius: var(--r-pill); background: var(--kobalt-t); color: var(--kobalt); }
.k-n b { font-size: var(--fs-m); font-weight: 500; }
.k-n.zero { background: var(--tint); color: var(--faint); }
.k-due { min-width: 6.2em; text-align: center; padding: 2px 11px; border-radius: var(--r-pill); background: var(--tint); color: var(--ink-2); }
.k-due.none { color: var(--faint); }
.k-due.late { background: var(--red-t); color: var(--red); font-weight: 500; }
.chev { display: inline-block; width: 7px; height: 7px; border-right: 1.5px solid var(--muted); border-bottom: 1.5px solid var(--muted); transform: translateY(-3px) rotate(45deg); margin-left: 4px; }
.k.open .chev, [aria-expanded="true"] > .chev { transform: translateY(1px) rotate(-135deg); }
@media (max-width: 600px) {
  .k-btn { grid-template-columns: minmax(0, 1fr); padding: 14px 14px; }
  .k-fig { justify-content: flex-start; }
  .k-due { min-width: 0; }
}
.grp.partner .k { background: transparent; border-style: dashed; }
.grp.partner .k.open { background: var(--paper); border-style: solid; }
.grp.partner .k-name { font-size: var(--fs-m); color: var(--ink-2); }
.grp.partner .k-lage { -webkit-line-clamp: 1; }
.grp.partner .k-n b { font-size: var(--fs-s); }
.dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--kobalt); vertical-align: 2px; margin-left: 8px; }
.aside .dot { margin-left: 0; vertical-align: 1px; }

/* Detail */
.k-body { padding: 0 18px 24px; }
@media (max-width: 600px) { .k-body { padding: 0 10px 20px; } }
.p-block + .p-block { margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--line); }
.p-h { margin: 6px 0 0; font-size: var(--fs-m); font-weight: 600; }
.abw { margin: 6px 0 0; font-size: var(--fs-s); color: var(--muted); display: flex; align-items: center; gap: 8px; }
.abw .lnk { font-weight: 500; display: inline-flex; align-items: baseline; gap: 2px; padding: 2px 12px; border-radius: var(--r-pill); background: var(--red-t); color: var(--red); }
.abw .lnk .chev { border-color: var(--red); }
.abw .lnk:hover:not(:disabled) { text-decoration: none; }
.abw-list { margin: 10px 0 4px; }
.cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px 28px; margin-top: 16px; }
@media (min-width: 720px) { .cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.col-h, .sec-h { margin: 0 0 8px 4px; font-size: var(--fs-s); font-weight: 600; color: var(--ink); display: flex; gap: 8px; align-items: center; }
.col-h .c, .sec-h .c { font-family: var(--font-mono); font-weight: 400; color: var(--muted); background: var(--tint); border-radius: var(--r-pill); padding: 0 8px; font-size: 12px; line-height: 1.6; }

/* Einträge als Bubbles */
.list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.it { --it-bg: var(--tint); background: var(--it-bg); border: 1px solid transparent; border-radius: var(--r-m); padding: 0 12px; }
.it.ex { --it-bg: #EDF0EB; }
.it-row { position: relative; display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; gap: 0 10px; align-items: start; padding: 9px 0; }
.it-row input[type="checkbox"] { margin: 2px 0 0; }
.bul { width: 18px; height: 18px; margin-top: 2px; display: flex; align-items: center; justify-content: center; }
.bul::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--line-2); }
.it-t { background: none; border: 0; padding: 0; text-align: left; color: inherit; font: inherit; line-height: 1.5; cursor: pointer; }
.it-t:hover .tx { text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; }
.q { display: inline-block; font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--kobalt); background: var(--kobalt-t); border-radius: var(--r-pill); padding: 0 8px; margin-right: 6px; line-height: 1.7; vertical-align: 1px; }
.q.new { color: var(--moss); background: var(--moss-t); }
.it.done { --it-bg: var(--paper); border-color: var(--line); }
.it.done .tx { color: var(--muted); text-decoration: line-through; text-decoration-color: var(--line-2); }
.it.done .q { color: var(--faint); background: var(--tint); }
.it.gone { opacity: .55; --it-bg: var(--paper); border: 1px dashed var(--line-2); }
.it.gone .tx { text-decoration: line-through; }
.aside { position: relative; display: flex; align-items: center; gap: 8px; padding-top: 1px; font-family: var(--font-mono); font-size: var(--fs-s); color: var(--muted); white-space: nowrap; }
.due { padding: 0 9px; border-radius: var(--r-pill); background: var(--paper); line-height: 1.7; font-size: 12px; }
.it.done .due, .it.gone .due { background: var(--tint); }
.due.late { background: var(--red-t); color: var(--red); font-weight: 500; }
.ib { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border: 1px solid var(--line-2); border-radius: 50%; background: var(--paper); font: 500 11px/1 var(--font-mono); color: var(--muted); cursor: pointer; user-select: none; }
.ib:hover, .it.ex .ib { border-color: var(--kobalt); color: var(--kobalt); }
.hov { position: absolute; right: 100%; top: 0; padding: 0 10px 0 12px; background: var(--it-bg); font-family: var(--font-sans); visibility: hidden; }
.it:hover .hov, .it-row:focus-within .hov { visibility: visible; }
@media (hover: none) { .hov { display: none; } }
.xd { margin: 0 0 12px 30px; padding: 10px 0 2px; font-size: var(--fs-s); color: var(--muted); border-top: 1px dotted var(--line-2); }
.xd dl { display: grid; grid-template-columns: 7.5em minmax(0, 1fr); gap: 3px 12px; margin: 0; }
.xd dt { color: var(--ink-2); }
.xd dd { margin: 0; }
.xd ul { margin: 0; padding-left: 16px; }
.xd .acts { margin-top: 10px; display: flex; gap: 14px; flex-wrap: wrap; align-items: baseline; }
@media (max-width: 480px) { .xd { margin-left: 0; } .xd dl { grid-template-columns: minmax(0, 1fr); gap: 0; } .xd dd { margin-bottom: 4px; } }
.empty { padding: 9px 14px; color: var(--muted); font-size: var(--fs-s); border: 1px dashed var(--line-2); border-radius: var(--r-m); }

/* Kommentare als Sprechblasen */
.note { margin-top: 10px; max-width: 92%; padding: 8px 13px 9px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-m) var(--r-m) var(--r-m) 4px; }
.note.mine { margin-left: auto; background: var(--kobalt-t); border-color: transparent; border-radius: var(--r-m) var(--r-m) 4px var(--r-m); }
.note .who { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; font-family: var(--font-mono); font-size: 12px; }
.note .txt { color: var(--ink); font-size: var(--fs-m); margin-top: 2px; white-space: pre-wrap; }
.res { color: var(--moss); }
.confirm { display: inline-flex; gap: 8px; align-items: baseline; }

/* Hinzufügen */
.addline { margin-top: 16px; }
.addline .lnk { padding: 4px 14px; border-radius: var(--r-pill); background: var(--kobalt-t); }
.addline .lnk:hover:not(:disabled) { text-decoration: none; background: #DFE7FA; }
.form { margin-top: 14px; padding: 14px 16px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-m); display: grid; gap: 12px; max-width: 580px; }
.xd .form { margin-top: 10px; }
.form .lbl { display: block; font-size: var(--fs-s); color: var(--muted); margin-bottom: 3px; }
.form .row { display: flex; flex-wrap: wrap; gap: 10px 20px; align-items: flex-end; }
.form .err { color: var(--red); font-size: var(--fs-s); }
.form .btns { display: flex; gap: 8px; flex-wrap: wrap; }
.seg { display: inline-flex; padding: 3px; gap: 2px; background: var(--tint); border-radius: var(--r-pill); }
.seg button { border: 0; background: transparent; padding: 3px 14px; font-size: var(--fs-s); min-height: 28px; border-radius: var(--r-pill); }
.seg button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
fieldset.plain { border: 0; margin: 0; padding: 0; display: flex; gap: 16px; flex-wrap: wrap; font-size: var(--fs-s); }

/* Mehr */
.more { margin-top: 20px; }
.more-btn { background: var(--tint); border: 0; border-radius: var(--r-pill); padding: 4px 14px; color: var(--ink-2); font-size: var(--fs-s); display: inline-flex; flex-wrap: wrap; gap: 4px 8px; align-items: baseline; text-align: left; }
.more-btn:hover { background: var(--tint-2); }
.more-btn .mt { font-weight: 600; }
.more-btn .ms { color: var(--muted); }
.more-body { margin-top: 8px; padding-top: 4px; }
.sec { margin-top: 20px; }
.lage { margin: 0; color: var(--ink-2); max-width: 70ch; padding: 10px 14px; background: var(--tint); border-radius: var(--r-m); }
.src { font-family: var(--font-mono); font-size: 12px; color: var(--muted); }
.changes { margin: 0; padding: 6px 0 0 20px; color: var(--ink-2); }
.changes li { margin: 3px 0; }
.pmeta { margin: 16px 0 0; padding: 0 4px; font-family: var(--font-mono); font-size: 12px; color: var(--muted); line-height: 1.6; }

/* Anmeldung und Zugriff */
.gate { max-width: 540px; margin: 10vh auto 0; padding: 30px 28px 28px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-l); box-shadow: var(--shadow-soft); }
@media (max-width: 480px) { .gate { margin-top: 4vh; padding: 24px 18px 22px; } }
.gate-h { font-size: var(--fs-xl); font-weight: 600; letter-spacing: -.015em; line-height: 1.2; margin: 0; }
.gate-h span { font-weight: 400; color: var(--muted); }
.gate-t { margin: 14px 0 0; color: var(--ink); font-size: var(--fs-l); line-height: 1.4; }
.gate-s { margin: 8px 0 0; color: var(--muted); }
.gate-a { margin-top: 22px; display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.gate .banner { margin-top: 18px; }
.idline { margin-top: 18px; padding: 10px 14px; background: var(--kobalt-t); border-radius: var(--r-m); display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; font-size: var(--fs-s); color: var(--muted); }
.idline .mono { color: var(--ink); user-select: all; font-size: var(--fs-s); }
.gate ~ .foot { max-width: 540px; margin: 18px auto 0; padding: 0 6px; }

/* Fuß */
.foot { margin-top: 56px; font-size: var(--fs-s); color: var(--muted); display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }
.foot .mono { color: var(--ink-2); }
.foot .sep { color: var(--faint); }

@media (prefers-reduced-motion: no-preference) {
  .k-btn, .lnk, .btn, .ib, .more-btn, input[type="checkbox"] { transition: background-color .12s ease, border-color .12s ease, color .12s ease; }
  .chev { transition: transform .15s ease; }
}