:root{
    --bg:#F5F6F3;
    --surface:#FFFFFF;
    --text:#1D2420;
    --text-soft:#5B655E;
    --accent:#2F5D50;
    --accent-soft:#E4ECE9;
    --tag:#7A6A53;
    --tag-soft:#EFEAE2;
    --border:#DDE1DA;
    --danger:#A34A3B;
    --warn:#9C6B2E;
  }
  *{box-sizing:border-box;}
  body{
    margin:0;
    background:var(--bg);
    color:var(--text);
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    -webkit-font-smoothing:antialiased;
  }
  .wrap{max-width:920px;margin:0 auto;padding:20px 16px 60px;}

  header{
    display:flex;
    align-items:baseline;
    justify-content:space-between;
    gap:12px;
    margin-bottom:18px;
    flex-wrap:wrap;
  }
  header h1{
    font-size:1.15rem;
    font-weight:650;
    margin:0;
    letter-spacing:-0.01em;
  }
  header .sub{
    font-size:0.8rem;
    color:var(--text-soft);
  }

  .totals{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
    margin-bottom:16px;
  }
  .total-card{
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:10px;
    padding:16px 16px;
  }
  .total-card .label{
    font-size:0.72rem;
    color:var(--text-soft);
    margin-bottom:6px;
  }
  .total-card .value{
    font-size:1.9rem;
    font-weight:700;
    font-variant-numeric:tabular-nums;
    color:var(--accent);
    line-height:1;
  }
  .total-card .value small{
    font-size:1rem;
    font-weight:500;
    color:var(--text-soft);
    margin-left:2px;
  }
  .total-card .sub-value{
    margin-top:6px;
    font-size:0.75rem;
    color:var(--text-soft);
  }
  .total-card.warn .value{color:var(--warn);}
  .total-card.warn .sub-value{color:var(--warn);}

  section{
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:10px;
    padding:16px;
    margin-bottom:16px;
  }
  section h2{
    font-size:0.85rem;
    font-weight:650;
    margin:0 0 12px;
  }
  section .hint{
    font-size:0.72rem;
    color:var(--text-soft);
    margin:-6px 0 12px;
  }

  .field{margin-bottom:12px;}
  .field label{
    display:block;
    font-size:0.75rem;
    color:var(--text-soft);
    margin-bottom:4px;
  }
  .field input, .field select{
    width:100%;
    padding:9px 10px;
    border:1px solid var(--border);
    border-radius:7px;
    font-size:0.92rem;
    background:#FCFCFB;
    color:var(--text);
    font-family:inherit;
  }
  .field input:focus, .field select:focus{
    outline:none;
    border-color:var(--accent);
  }
  .row2{display:grid;grid-template-columns:1fr 1fr;gap:10px;}

  button.primary{
    width:100%;
    padding:11px;
    background:var(--accent);
    color:#fff;
    border:none;
    border-radius:7px;
    font-size:0.92rem;
    font-weight:600;
    cursor:pointer;
  }
  button.primary:active{opacity:0.85;}
  button.primary:disabled{opacity:0.5;cursor:default;}
  button.secondary{
    width:100%;
    padding:10px;
    background:var(--accent-soft);
    color:var(--accent);
    border:none;
    border-radius:7px;
    font-size:0.85rem;
    font-weight:600;
    cursor:pointer;
  }

  .budget-current, .config-current{
    background:var(--accent-soft);
    border-radius:7px;
    padding:10px 12px;
    font-size:0.78rem;
    color:var(--text);
    margin-bottom:12px;
    line-height:1.5;
    word-break:break-all;
  }
  .budget-current strong{font-weight:700;}
  .budget-empty, .config-empty{
    font-size:0.78rem;
    color:var(--text-soft);
    margin-bottom:12px;
  }

  .filter-actions{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-top:2px;
  }
  .filter-actions button{
    background:none;
    border:none;
    color:var(--text-soft);
    font-size:0.78rem;
    cursor:pointer;
    text-decoration:underline;
    padding:4px 0;
  }

  .entries-header{
    display:flex;
    justify-content:space-between;
    align-items:baseline;
    margin-bottom:10px;
  }
  .entries-header h2{margin:0;}
  .entries-count{font-size:0.75rem;color:var(--text-soft);}

  .entry{
    border-top:1px solid var(--border);
    padding:12px 0;
    display:flex;
    justify-content:space-between;
    gap:10px;
  }
  .entry:first-child{border-top:none;}
  .entry .main{flex:1;min-width:0;}
  .entry .topic{
    font-size:0.92rem;
    font-weight:600;
    margin-bottom:3px;
    word-break:break-word;
  }
  .entry .meta{
    font-size:0.76rem;
    color:var(--text-soft);
    display:flex;
    flex-wrap:wrap;
    gap:6px;
    align-items:center;
  }
  .chip{
    background:var(--tag-soft);
    color:var(--tag);
    border-radius:5px;
    padding:2px 7px;
    font-size:0.72rem;
    font-weight:600;
  }
  .entry .right{
    text-align:right;
    display:flex;
    flex-direction:column;
    align-items:flex-end;
    gap:6px;
    flex-shrink:0;
  }
  .entry .duration{
    font-variant-numeric:tabular-nums;
    font-weight:700;
    font-size:0.92rem;
  }
  .entry .del{
    background:none;
    border:none;
    color:var(--danger);
    font-size:0.72rem;
    cursor:pointer;
    padding:0;
    opacity:0.7;
  }
  .entry .del:hover{opacity:1;}

  .empty{
    text-align:center;
    color:var(--text-soft);
    font-size:0.85rem;
    padding:24px 8px;
  }

  .status{
    font-size:0.75rem;
    color:var(--text-soft);
    text-align:center;
    margin-top:-4px;
    margin-bottom:14px;
    min-height:1em;
  }
  .status.error{color:var(--danger);}


  @media (min-width:680px){
    .grid-desktop{
      display:grid;
      grid-template-columns:300px 1fr;
      gap:16px;
      align-items:start;
    }
  }

  /* --- Ergänzungen für die eigene Homepage-Version --- */
  .hidden{display:none !important;}
  .mb{margin-bottom:14px;}
  h3{font-size:0.8rem;font-weight:650;margin:18px 0 10px;}
  code{background:var(--accent-soft);padding:1px 5px;border-radius:4px;font-size:0.85em;}
  a{color:var(--accent);}

  .card-narrow{
    max-width:440px;
    margin:48px auto;
    padding:24px 20px;
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:12px;
  }
  .card-narrow h1{font-size:1.1rem;margin:0 0 6px;}
  .card-narrow .hint{font-size:0.82rem;color:var(--text-soft);margin:0 0 16px;line-height:1.5;}
  .ok-text{color:var(--accent);font-weight:600;}

  .checklist{list-style:none;padding:0;margin:12px 0 16px;font-size:0.82rem;}
  .checklist li{padding:3px 0;}
  .checklist .ok{color:var(--accent);}
  .checklist .bad{color:var(--danger);}

  .linkbtn{
    background:none;border:none;color:var(--text-soft);
    font-size:0.8rem;text-decoration:underline;cursor:pointer;padding:4px 0;
  }

  .check{display:flex;gap:8px;align-items:center;font-size:0.8rem;color:var(--text-soft);margin:4px 0 12px;}
  .check input{width:auto;}

  .userlist{margin-bottom:6px;}
  .useritem{
    display:flex;justify-content:space-between;align-items:center;gap:10px;
    border-top:1px solid var(--border);padding:8px 0;font-size:0.85rem;
  }
  .useritem:first-child{border-top:none;}
  .useritem .name{word-break:break-word;}
  .useritem .name small{color:var(--text-soft);margin-left:4px;}
  .useritem button{
    background:none;border:none;color:var(--danger);font-size:0.72rem;cursor:pointer;padding:0;opacity:0.8;
  }
  .status.ok-msg{color:var(--accent);}
  .status.error{color:var(--danger);}

  /* --- Layout-Korrekturen --- */
  .row2 > *{min-width:0;}
  .field input,.field select{min-width:0;max-width:100%;}
  .status{margin-top:8px;margin-bottom:4px;}