:root {
  font-family: Arial, Helvetica, sans-serif;
  color: #2d2d2d;
  background: #f4f5f7;
  --h24-blue: #22386f;
  --h24-blue-dark: #182a58;
  --h24-orange: #f28c00;
  --h24-orange-dark: #d97900;
  --line: #dfe3e8;
  --muted: #727985;
}
* { box-sizing: border-box; }
body { margin: 0; background: #f4f5f7; }

.site-header { background: #fff; box-shadow: 0 2px 8px rgba(22,34,61,.08); }
.header-inner { max-width: 1180px; min-height: 82px; margin: 0 auto; padding: 0 20px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 24px; }
.brand { display: inline-flex; align-items: baseline; text-decoration: none; font-size: 34px; font-weight: 800; letter-spacing: -1.5px; line-height: 1; }
.brand-heima { color: var(--h24-blue); }
.brand-24 { color: var(--h24-orange); }
.app-name { color: #555e6c; font-size: 19px; font-weight: 600; padding-left: 22px; border-left: 1px solid #d7dbe2; }
.user-chip { color: var(--h24-blue); background: #eef1f7; border-radius: 999px; padding: 9px 14px; font-size: 14px; font-weight: 700; white-space: nowrap; }

.main-nav { background: var(--h24-blue); border-bottom: 4px solid var(--h24-orange); }
.nav-inner { max-width: 1180px; margin: 0 auto; padding: 0 14px; display: flex; align-items: stretch; }
.main-nav a { color: #fff; text-decoration: none; font-weight: 700; padding: 15px 18px; transition: background .15s ease; }
.main-nav a:hover { background: var(--h24-blue-dark); }
.main-nav .logout { margin-left: auto; font-weight: 600; }

.container { max-width: 1050px; margin: 0 auto; padding: 32px 20px 64px; }
h1 { margin: 0 0 20px; color: var(--h24-blue); font-size: 30px; line-height: 1.2; }
h2 { margin-top: 0; color: var(--h24-blue); }
.page-head { display:flex; align-items:center; justify-content:space-between; margin-bottom: 22px; }
.page-head h1 { margin-bottom: 5px; }
.date { font-size: 18px; color: var(--muted); }
.badge { background:#eef1f7; color:var(--h24-blue); padding:8px 12px; border-radius:999px; font-weight:700; }

.add-form { display:grid; grid-template-columns: 1fr auto; gap: 10px; margin-bottom: 18px; }
input { width:100%; border:1px solid #cbd1da; border-radius:5px; padding:13px 14px; font:inherit; background:#fff; color:#2d2d2d; outline:none; }
input:focus { border-color: var(--h24-blue); box-shadow:0 0 0 3px rgba(34,56,111,.12); }
button { border:1px solid #c8ced8; border-radius:5px; padding:10px 14px; background:#fff; color:#333; font:inherit; font-weight:600; cursor:pointer; }
button:hover { background:#f4f5f7; }
button.primary { border-color:var(--h24-orange); background:var(--h24-orange); color:#fff; font-weight:700; }
button.primary:hover { background:var(--h24-orange-dark); border-color:var(--h24-orange-dark); }
button.danger { color:#a32626; border-color:#e4bcbc; }

.list-card, .card, .login-card, .archive-list, .history-list { background:#fff; border:1px solid var(--line); border-radius:5px; box-shadow:0 2px 7px rgba(20,30,50,.05); overflow:hidden; }
.item-row { display:grid; grid-template-columns: 52px 1fr 44px; align-items:center; gap: 8px; min-height: 68px; padding: 8px 12px; border-bottom:1px solid #e8ebef; transition:background .15s ease; }
.item-row:last-child { border-bottom:none; }
.item-row:hover { background:#fafbfc; }
.item-text { font-size: 19px; line-height:1.4; word-break:break-word; }
.item-row.done { background:#f7f8f9; }
.item-row.done .item-text { text-decoration: line-through; color:#9399a2; }
.checkbox, .checkbox-static { width:36px; height:36px; border:2px solid var(--h24-blue); border-radius:4px; padding:0; display:flex; align-items:center; justify-content:center; font-size:25px; font-weight:800; color:#fff; background:#fff; }
.item-row.done .checkbox, .item-row.done .checkbox-static { background:var(--h24-blue); }
.checkbox:hover { background:#eef1f7; }
.item-row.done .checkbox:hover { background:var(--h24-blue-dark); }
.inline { display:inline; }

.actions { position:relative; }
.actions summary { list-style:none; cursor:pointer; font-size:28px; text-align:center; color:#6d7480; }
.actions summary::-webkit-details-marker { display:none; }
.actions-menu { position:absolute; right:0; top:36px; z-index:10; width:330px; padding:12px; background:#fff; border:1px solid #dfe3e8; border-radius:6px; box-shadow:0 8px 30px rgba(0,0,0,.14); }
.stack { display:grid; gap:12px; }
.stack label { display:grid; gap:6px; font-weight:600; }
.compact { margin-bottom:10px; }
.empty { padding: 30px; color:#7b8390; text-align:center; }

.login-card { max-width:430px; margin: 58px auto; padding:30px; border-top:4px solid var(--h24-orange); }
.login-card h1 { text-align:center; margin-bottom:26px; }
.archive-row { display:flex; justify-content:space-between; gap:20px; padding:18px 20px; border-bottom:1px solid #eceff3; text-decoration:none; color:inherit; }
.archive-row:last-child { border-bottom:none; }
.archive-row:hover { background:#f7f8fa; color:var(--h24-blue); }
.history-row { padding:16px 20px; border-bottom:1px solid #eceff3; line-height:1.45; }
.history-row:last-child { border-bottom:none; }
.history-meta { color:#6b7280; margin-bottom:6px; font-size:14px; }
.old { color:#9a3a3a; text-decoration:line-through; }
.two-col { display:grid; grid-template-columns: 340px 1fr; gap:20px; }
.card { padding:20px; overflow:visible; }
.checkline { display:flex !important; grid-template-columns:none; align-items:center; gap:8px; font-weight:normal !important; }
.checkline input { width:auto; }
.user-row { padding:14px 0; border-bottom:1px solid #eceff3; display:flex; justify-content:space-between; gap:15px; align-items:center; }
.user-actions { display:grid; gap:8px; justify-items:end; }
.password-form { display:flex; gap:6px; }
.password-form input { padding:8px 10px; }
.flash { padding:12px 14px; border-radius:5px; margin-bottom:16px; background:#eef1f5; border-left:4px solid #9aa3b2; }
.flash.error { background:#fdecec; color:#8a1f1f; border-left-color:#b63b3b; }
.flash.ok { background:#edf8ef; color:#276334; border-left-color:#3c8c50; }
small { color:#6d7480; }

@media (max-width: 720px) {
  .header-inner { min-height:70px; padding:0 14px; grid-template-columns:auto 1fr; gap:14px; }
  .brand { font-size:29px; }
  .app-name { font-size:16px; padding-left:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .user-chip { display:none; }
  .nav-inner { overflow-x:auto; padding:0; }
  .main-nav a { padding:13px 12px; white-space:nowrap; font-size:14px; }
  .main-nav .logout { margin-left:0; }
  .container { padding:22px 12px 40px; }
  .add-form { grid-template-columns:1fr; }
  .item-row { grid-template-columns:46px 1fr 34px; padding:7px 8px; }
  .item-text { font-size:18px; }
  .actions-menu { width:min(300px, 80vw); }
  .two-col { grid-template-columns:1fr; }
  .user-row { align-items:flex-start; flex-direction:column; }
  .user-actions { justify-items:start; width:100%; }
  .password-form { width:100%; }
}

/* Tagesliste: Nummerierung, Bearbeiten/Loeschen und Fortschritt */
.item-row { grid-template-columns: 38px 52px minmax(0, 1fr) 92px; }
.item-number { color: var(--muted); font-size: 17px; font-weight: 700; text-align: right; padding-right: 4px; }
.item-content { min-width: 0; }
.done-meta { margin-top: 5px; color: #77808c; font-size: 13px; text-decoration: none !important; }
.item-row.done .done-meta { text-decoration: none; }
.row-actions { display: flex; justify-content: flex-end; align-items: center; gap: 6px; }
.icon-btn { width: 38px; height: 38px; padding: 0; border: 1px solid #cbd1da; border-radius: 5px; background: #fff; color: var(--h24-blue); display: inline-flex; align-items: center; justify-content: center; font-size: 21px; line-height: 1; cursor: pointer; list-style: none; }
.icon-btn:hover { background: #eef1f7; }
.danger-icon { color: #a32626; border-color: #e2c0c0; font-size: 18px; }
.danger-icon:hover { background: #fff1f1; }
.edit-details { position: relative; }
.edit-details summary::-webkit-details-marker { display: none; }
.edit-popover { position: absolute; right: 0; top: 44px; z-index: 20; width: min(430px, 78vw); padding: 12px; background: #fff; border: 1px solid #dfe3e8; border-radius: 6px; box-shadow: 0 8px 30px rgba(0,0,0,.14); }
.progress-counter { margin-top: 16px; display: flex; justify-content: flex-end; align-items: baseline; gap: 8px; color: var(--muted); }
.progress-counter strong { color: var(--h24-blue); font-size: 26px; }
.progress-counter span { font-size: 15px; }

@media (max-width: 720px) {
  .item-row { grid-template-columns: 30px 46px minmax(0, 1fr) 82px; gap: 5px; }
  .item-number { font-size: 15px; }
  .icon-btn { width: 35px; height: 35px; }
  .done-meta { font-size: 12px; }
  .progress-counter { justify-content: center; }
}

/* Bearbeiten-Popup darf am unteren Listenrand nicht abgeschnitten werden. */
.list-card { overflow: visible; }
.item-row:nth-last-child(-n+2) .edit-popover {
  top: auto;
  bottom: 44px;
}