:root{
    --paper:#f4f6f6;
    --paper-raised:#ffffff;
    --ink:#1b2624;
    --ink-soft:#5c6b69;
    --line:#d9e2e1;
    --accent:#0f3d3d;
    --accent-soft:#dce8e7;
    --herb:#3c7a6e;
    --herb-soft:#dcece6;
    --danger:#b3403a;
    --shadow: 0 1px 2px rgba(15,30,29,.06), 0 4px 14px rgba(15,30,29,.05);
    color-scheme: light;
  }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      --paper:#101615;
      --paper-raised:#182220;
      --ink:#e7efed;
      --ink-soft:#9db0ac;
      --line:#2a3835;
      --accent:#4fa39a;
      --accent-soft:#1c3634;
      --herb:#5fb3a3;
      --herb-soft:#1a322c;
      --danger:#e2857e;
      --shadow: 0 1px 2px rgba(0,0,0,.3), 0 4px 18px rgba(0,0,0,.35);
      color-scheme: dark;
    }
  }
  :root[data-theme="dark"]{
    --paper:#101615;
    --paper-raised:#182220;
    --ink:#e7efed;
    --ink-soft:#9db0ac;
    --line:#2a3835;
    --accent:#4fa39a;
    --accent-soft:#1c3634;
    --herb:#5fb3a3;
    --herb-soft:#1a322c;
    --danger:#e2857e;
    --shadow: 0 1px 2px rgba(0,0,0,.3), 0 4px 18px rgba(0,0,0,.35);
    color-scheme: dark;
  }

  *{box-sizing:border-box;}
  body{
    background:var(--paper);
    color:var(--ink);
    font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
    padding:0 16px;
    padding-block: 28px 48px;
    max-width:1180px;
    margin:0 auto;
  }
  h1,h2,h3{font-family:'Fraunces',Georgia,serif; text-wrap:balance; margin:0;}
  .num, input[type="number"], .qty{font-family:'JetBrains Mono',ui-monospace,monospace; font-variant-numeric:tabular-nums;}

  header.page{
    display:flex; flex-wrap:wrap; gap:12px 24px; align-items:baseline; justify-content:space-between;
    padding-block:20px 8px; border-bottom:1px solid var(--line); margin-bottom:24px;
  }
  header.page .titles{display:flex; flex-direction:column; gap:4px;}
  header.page h1{font-size:clamp(28px,4vw,38px); font-weight:600; letter-spacing:-.01em;}
  header.page .sub{color:var(--ink-soft); font-size:14px;}
  .week-nav{display:flex; align-items:center; gap:10px;}
  .week-nav button{
    border:1px solid var(--line); background:var(--paper-raised); color:var(--ink);
    border-radius:8px; width:34px; height:34px; font-size:16px; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
  }
  .week-nav button:hover{border-color:var(--accent); color:var(--accent);}
  .today-btn{
    width:auto !important; height:34px; padding:0 14px;
    font-family:'Inter',sans-serif; font-size:12px; font-weight:600;
    color:var(--accent); border-color:var(--accent) !important; background:var(--accent-soft) !important;
  }
  .today-btn:hover{background:var(--accent) !important; color:#fff;}
  .week-label{font-family:'JetBrains Mono',monospace; font-size:13px; color:var(--ink-soft); min-width:150px; text-align:center;}
  .save-state{font-size:12px; color:var(--ink-soft); display:flex; align-items:center; gap:6px; min-height:16px;}
  .dot{width:6px; height:6px; border-radius:50%; background:var(--herb);}
  .dot.pending{background:var(--accent); animation:pulse 1.1s infinite;}
  @keyframes pulse{0%,100%{opacity:1;}50%{opacity:.35;}}

  .assist-actions{display:flex; align-items:center; gap:8px; flex-wrap:wrap;}
  .assist-btn{
    width:auto !important; height:34px; padding:0 14px;
    font-family:'Inter',sans-serif; font-size:12px; font-weight:600;
    display:flex; align-items:center; gap:6px; white-space:nowrap;
  }
  .ideas-btn{
    color:#fff; border-color:var(--accent) !important; background:var(--accent) !important;
    padding:0 16px 0 12px; box-shadow:var(--shadow);
  }
  .ideas-btn:hover{background:var(--herb) !important; border-color:var(--herb) !important;}
  .ideas-btn svg{width:16px; height:16px; flex-shrink:0;}

  .clear-week-btn{
    color:var(--ink-soft); border-color:var(--line) !important; background:var(--paper-raised) !important;
  }
  .clear-week-btn:hover{border-color:var(--danger) !important; color:var(--danger);}
  .clear-week-btn svg{width:15px; height:15px; flex-shrink:0;}

  .confirm-overlay{
    position:fixed; inset:0; background:rgba(20,17,13,.4); z-index:70;
    display:flex; align-items:center; justify-content:center; padding:20px;
  }
  .confirm-overlay[hidden]{display:none;}
  .confirm-modal{
    background:var(--paper-raised); border:1px solid var(--line); border-radius:16px;
    box-shadow:var(--shadow); padding:22px; max-width:380px; width:100%;
  }
  .confirm-modal h2{font-size:17px; font-weight:600; margin-bottom:8px;}
  .confirm-modal .sub{font-size:13px; color:var(--ink-soft); margin-bottom:18px; line-height:1.4;}
  .confirm-actions{display:flex; gap:8px;}
  .confirm-actions button{
    flex:1; border-radius:8px; padding:9px 14px; font-size:13px; cursor:pointer; border:1px solid var(--line);
  }
  .confirm-cancel{background:none; color:var(--ink-soft);}
  .confirm-cancel:hover{border-color:var(--accent); color:var(--accent);}
  .confirm-danger{background:var(--danger); border-color:var(--danger) !important; color:#fff;}
  .confirm-danger:hover{opacity:.9;}

  .ideas-overlay{
    position:fixed; inset:0; background:rgba(20,17,13,.4); z-index:50;
    display:flex; align-items:center; justify-content:center; padding:20px;
  }
  .ideas-overlay[hidden]{display:none;}
  .ideas-overlay.drag-active{background:transparent; pointer-events:none;}
  .ideas-overlay.drag-active .ideas-modal{opacity:0; pointer-events:none;}
  .ideas-modal{
    background:var(--paper-raised); border:1px solid var(--line); border-radius:16px;
    box-shadow:var(--shadow); padding:22px; max-width:520px; width:100%;
    max-height:calc(100vh - 40px); overflow-y:auto;
  }
  .ideas-modal h2{font-size:18px; font-weight:600; margin-bottom:4px;}
  .ideas-modal .sub{font-size:12.5px; color:var(--ink-soft); margin-bottom:16px;}
  .ideas-list{display:flex; flex-direction:column; gap:8px; margin-bottom:16px;}
  .idea-card{
    display:flex; align-items:center; gap:10px;
    background:var(--paper); border:1px solid var(--line); border-radius:10px;
    padding:10px 12px; cursor:grab; touch-action:none; user-select:none; -webkit-user-select:none;
  }
  .idea-card:hover{border-color:var(--accent);}
  .idea-card .meta{flex:1; min-width:0; display:flex; flex-direction:column; gap:2px;}
  .idea-card .name{font-family:'Fraunces',serif; font-weight:500; font-size:14px;}
  .idea-card .hint{font-size:11px; color:var(--ink-soft);}
  .ideas-actions{display:flex; gap:8px;}
  .ideas-refresh{
    border:1px solid var(--line); background:none; color:var(--herb); cursor:pointer;
    font-size:13px; padding:8px 16px; border-radius:8px; flex-shrink:0;
  }
  .ideas-refresh:hover{border-color:var(--herb); background:var(--accent-soft);}
  .ideas-close{
    border:1px solid var(--line); background:none; color:var(--ink-soft); cursor:pointer;
    font-size:13px; padding:8px 16px; border-radius:8px; flex:1;
  }
  .ideas-close:hover{border-color:var(--accent); color:var(--accent);}

  main.layout{
    display:grid;
    grid-template-columns: minmax(0,1fr) minmax(260px,420px);
    gap:24px;
    align-items:start;
  }
  @media (max-width:900px){
    main.layout{grid-template-columns:1fr; gap:14px;}
    /* Reihenfolge mobil: saisonales Obst/Gemüse ganz oben, dann die
       Gerichtbibliothek, dann erst die Wochentage (siehe order:-1 auf
       aside.library weiter unten). */
    .season-strip{order:-2;}
  }

  .days-col{display:flex; flex-direction:column; gap:14px; min-width:0; grid-column:1;}
  .days{display:flex; flex-direction:column; gap:10px;}

  .season-strip{
    display:flex; align-items:baseline; gap:8px; flex-wrap:wrap;
    font-size:12px; color:var(--ink-soft); padding:2px 2px 4px;
    grid-column:1;
  }
  .season-strip .label{
    text-transform:uppercase; letter-spacing:.06em; font-size:10px; color:var(--herb); font-weight:600; flex-shrink:0;
  }
  .season-strip .items{font-size:12.5px;}

  .day-card{
    background:var(--paper-raised);
    border:1px solid var(--line);
    border-radius:12px;
    box-shadow:var(--shadow);
    overflow:hidden;
  }
  .day-head{
    display:flex; align-items:center; gap:10px;
    padding:9px 14px;
    cursor:pointer;
    user-select:none;
  }
  .day-name{
    font-family:'Fraunces',serif; font-weight:600; font-size:15px;
    min-width:82px; line-height:1.2;
  }
  .day-date{font-size:11px; color:var(--ink-soft); font-family:'JetBrains Mono',monospace; font-weight:400;}
  .day-dish{
    flex:1; min-width:0;
    font-size:13.5px;
    line-height:1.25;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
    overflow:hidden;
  }
  .day-dish.empty{color:var(--ink-soft); font-style:italic; -webkit-line-clamp:1;}
  .status-pill{
    font-size:10.5px; padding:3px 8px; border-radius:99px; border:1px solid var(--line);
    color:var(--ink-soft); white-space:nowrap; flex-shrink:0; align-self:flex-start;
  }
  .chevron{color:var(--ink-soft); font-size:13px; transition:transform .15s; flex-shrink:0; align-self:flex-start;}
  .day-card.open .chevron{transform:rotate(90deg);}

  .day-body{
    padding:2px 18px 18px;
    border-top:1px solid var(--line);
    display:flex; flex-direction:column; gap:16px;
  }
  .day-card:not(.open) .day-body{display:none;}

  label.field-label{
    font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-soft);
    display:block; margin-bottom:6px; margin-top:14px;
  }
  input[type="text"], input[type="number"], textarea, select{
    font-family:inherit; font-size:14px; color:var(--ink);
    background:var(--paper); border:1px solid var(--line); border-radius:8px;
    padding:8px 10px; width:100%;
  }
  input[type="text"]:focus, input[type="number"]:focus, textarea:focus, select:focus{
    outline:none; border-color:var(--accent);
  }
  textarea{resize:vertical; min-height:52px;}
  .dish-input{font-size:16px; font-family:'Fraunces',serif; font-weight:500;}
  .dish-row{display:flex; align-items:stretch; gap:6px;}
  .dish-row .dish-input{flex:1; min-width:0;}

  /* Bewusst NICHT absolut positioniert: .day-card hat overflow:hidden
     (fuer die abgerundeten Ecken), das wuerde eine absolut positionierte
     Liste am Kartenrand abschneiden, sobald sie ueber die Karte hinausragt.
     Stattdessen wird die Liste inline direkt unter dem Eingabefeld
     eingefuegt und schiebt den restlichen Karteninhalt nach unten. */
  .dish-suggest{
    margin-top:6px;
    background:var(--paper-raised); border:1px solid var(--line); border-radius:10px;
    box-shadow:var(--shadow); overflow:hidden;
  }
  .dish-suggest[hidden]{display:none;}
  .dish-suggest-item{
    display:flex; align-items:center; justify-content:space-between; gap:10px;
    padding:9px 12px; cursor:pointer; font-size:13.5px; border-bottom:1px solid var(--line);
  }
  .dish-suggest-item:last-child{border-bottom:none;}
  .dish-suggest-item:hover, .dish-suggest-item.active{background:var(--accent-soft);}
  .dish-suggest-item .name{font-family:'Fraunces',serif; font-weight:500; flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
  .dish-suggest-item .count{font-size:11px; color:var(--ink-soft); flex-shrink:0;}
  .clear-day-btn{
    border:1px solid var(--line); background:none; color:var(--ink-soft); cursor:pointer; font-size:15px;
    width:38px; border-radius:8px; flex-shrink:0;
  }
  .clear-day-btn:hover{background:var(--accent-soft); color:var(--danger); border-color:var(--accent-soft);}
  .cat-select{max-width:220px; font-size:13px; padding:7px 8px; margin-top:8px;}

  .cat-multi{display:flex; flex-wrap:wrap; gap:6px;}
  .cat-chip-toggle{
    border:1px solid var(--line); background:var(--paper); color:var(--ink-soft);
    font-family:'Inter',sans-serif; font-size:12px; padding:6px 12px; border-radius:99px;
    cursor:pointer; user-select:none;
  }
  .cat-chip-toggle:hover{border-color:var(--herb);}
  .cat-chip-toggle.active{
    background:var(--herb-soft); border-color:var(--herb); color:var(--herb); font-weight:600;
  }

  .servings-row{
    display:flex; align-items:center; gap:10px; margin-top:8px;
  }
  .servings-row .servings-label{font-size:12px; color:var(--ink-soft); flex-shrink:0;}
  .servings-control{
    display:flex; align-items:center; gap:0; border:1px solid var(--line); border-radius:8px; overflow:hidden; flex-shrink:0;
  }
  .servings-control button{
    border:none; background:var(--paper); color:var(--ink); cursor:pointer;
    width:28px; height:28px; font-size:15px; line-height:1; display:flex; align-items:center; justify-content:center;
  }
  .servings-control button:hover{background:var(--accent-soft); color:var(--accent);}
  .servings-control .servings-num{
    width:34px; text-align:center; font-size:13px; color:var(--ink);
  }
  .servings-hint{font-size:11px; color:var(--ink-soft); font-style:italic;}

  .collapse-section{margin-top:14px;}
  .collapse-head{
    display:flex; align-items:center; gap:8px; cursor:pointer; user-select:none;
    padding:2px 0;
  }
  .collapse-head .field-label{margin:0;}
  .collapse-head .collapse-count{font-size:11px; color:var(--ink-soft); font-weight:400; text-transform:none; letter-spacing:0;}
  .collapse-chevron{color:var(--ink-soft); font-size:11px; transition:transform .15s; flex-shrink:0;}
  .collapse-section.open .collapse-chevron{transform:rotate(90deg);}
  .collapse-body{display:none; padding-top:8px;}
  .collapse-section.open .collapse-body{display:block;}

  .steps-input{white-space:pre-wrap;}
  .steps-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px;}
  .steps-list li{
    display:flex; gap:10px; font-size:13.5px; line-height:1.45;
  }
  .steps-list .step-num{
    flex-shrink:0; width:22px; height:22px; border-radius:50%;
    background:var(--accent-soft); color:var(--accent); font-family:'JetBrains Mono',monospace;
    font-size:11px; font-weight:600; display:flex; align-items:center; justify-content:center;
  }
  .steps-empty{font-size:12.5px; color:var(--ink-soft); font-style:italic;}
  .steps-edit-btn{
    align-self:flex-start; margin-top:8px;
    border:1px dashed var(--line); background:none; color:var(--ink-soft);
    font-size:12px; padding:6px 12px; border-radius:8px; cursor:pointer;
  }
  .steps-edit-btn:hover{border-color:var(--accent); color:var(--accent);}

  .ing-table{display:flex; flex-direction:column; gap:6px;}
  .ing-row{display:grid; grid-template-columns:1fr 72px 78px 30px; gap:6px; align-items:center;}
  .ing-row input{font-size:13px; padding:7px 8px;}
  .ing-remove{
    border:none; background:none; color:var(--ink-soft); cursor:pointer; font-size:15px;
    width:28px; height:28px; border-radius:6px;
  }
  .ing-remove:hover{background:var(--accent-soft); color:var(--danger);}
  .add-ing{
    align-self:flex-start; margin-top:4px;
    border:1px dashed var(--line); background:none; color:var(--ink-soft);
    font-size:12px; padding:6px 12px; border-radius:8px; cursor:pointer;
  }
  .add-ing:hover{border-color:var(--accent); color:var(--accent);}

  .day-card.drag-over{border-color:var(--accent); box-shadow:0 0 0 2px var(--accent-soft), var(--shadow);}

  aside.library{
    background:var(--paper-raised); border:1px solid var(--line); border-radius:14px;
    box-shadow:var(--shadow); padding:16px; position:sticky; top:16px;
    max-height:calc(100vh - 32px); display:flex; flex-direction:column;
  }
  aside.library h2{font-size:16px; font-weight:600; margin-bottom:2px;}
  aside.library .sub{font-size:11px; color:var(--ink-soft); margin-bottom:12px;}
  .library-head{display:flex; flex-direction:column; margin-bottom:4px; cursor:default;} /* Desktop: Ueberschrift sichtbar, aber ohne Klapp-Button */
  .library-toggle{display:none;}
  .library-body{display:flex; flex-direction:column; min-height:0; flex:1;}

  /* Mobile (<=900px): Bibliothek wandert vor die Tage, aber hinter das
     saisonale Obst/Gemüse (order:-2 auf .season-strip), und ist
     standardmaessig eingeklappt, damit die Wochentage sofort komplett
     sichtbar sind und man beim Ziehen eines Gerichts nicht erst an der
     Bibliothek vorbeischeiben muss. */
  @media (max-width:900px){
    aside.library{
      position:static; max-height:none; padding:0; border:none; box-shadow:none; background:none;
      order:-1; /* vor .days-col, siehe main.layout order weiter unten */
    }
    .library-head{
      display:flex; align-items:center; justify-content:space-between; gap:10px; cursor:pointer;
      background:var(--paper-raised); border:1px solid var(--line); border-radius:12px;
      box-shadow:var(--shadow); padding:12px 14px;
    }
    aside.library h2{font-size:15px;}
    .library-toggle{
      display:flex; align-items:center; justify-content:center; flex-shrink:0;
      border:1px solid var(--line); background:var(--paper); color:var(--ink-soft);
      width:32px; height:32px; border-radius:8px; cursor:pointer;
    }
    .library-toggle .chevron{transition:transform .15s;}
    aside.library.open .library-toggle .chevron{transform:rotate(90deg);}
    .library-body{
      display:none; margin-top:10px;
      background:var(--paper-raised); border:1px solid var(--line); border-radius:12px;
      box-shadow:var(--shadow); padding:14px; max-height:60vh;
    }
    aside.library.open .library-body{display:flex;}
  }
  .lib-search{margin-bottom:12px; flex-shrink:0;}
  .lib-search input{font-size:13px; padding:8px 10px;}
  .lib-import-btn{width:100%; margin-bottom:12px; padding:8px 10px; font-size:13px; font-weight:600; border:1px dashed var(--accent); background:none; color:var(--accent); border-radius:8px; cursor:pointer; flex-shrink:0;}
  .lib-import-btn:hover{background:var(--accent-soft);}
  .lib-import-note{margin-top:8px; font-size:12.5px; color:var(--ink-soft);}
  .lib-import-note.warn{color:#9a5b00;}
  .lib-import-note a{color:var(--accent);}
  .lib-import-status{margin-top:10px; font-size:13px; color:var(--ink-soft);}
  .lib-import-status.error{color:#a33;}
  .import-tabs{display:flex; gap:6px; margin-bottom:14px; flex-wrap:wrap;}
  .import-tab{padding:6px 12px; font-size:13px; border:1px solid var(--line); background:none; color:var(--ink-soft); border-radius:999px; cursor:pointer;}
  .import-tab.active{border-color:var(--accent); color:var(--accent); background:var(--accent-soft); font-weight:600;}
  .import-panel[hidden]{display:none;}
  .lib-scroll{
    overflow-y:scroll; flex:1; min-height:0;
    scrollbar-width:auto; scrollbar-color:var(--ink-soft) transparent;
  }
  .lib-scroll::-webkit-scrollbar{width:22px;}
  .lib-scroll::-webkit-scrollbar-track{background:transparent;}
  .lib-scroll::-webkit-scrollbar-thumb{
    background:var(--ink-soft); border-radius:8px;
    border:6px solid transparent; background-clip:padding-box;
  }
  .lib-scroll::-webkit-scrollbar-thumb:hover{background:var(--accent);}
  .lib-empty{font-size:13px; color:var(--ink-soft); font-style:italic; padding:6px 2px;}
  .lib-group{margin-bottom:14px;}
  .lib-group:last-child{margin-bottom:0;}
  .lib-group-head{
    display:flex; align-items:center; gap:6px; cursor:pointer; user-select:none;
    margin-bottom:6px; padding-left:2px;
  }
  .lib-group-head h3{
    font-size:17px; text-transform:uppercase; letter-spacing:.06em; color:var(--herb);
    font-weight:700; margin:0; flex:1;
  }
  .lib-group-chevron{color:var(--herb); font-size:13px; transition:transform .15s; flex-shrink:0;}
  .lib-group.open .lib-group-chevron{transform:rotate(90deg);}
  .lib-group-count{font-size:12px; color:var(--ink-soft); font-weight:400;}
  .lib-list{display:flex; flex-direction:column; gap:6px; display:none;}
  .lib-group.open .lib-list{display:flex;}
  .lib-chip{
    display:flex; align-items:center; gap:8px;
    background:var(--paper); border:1px solid var(--line); border-radius:10px;
    padding:8px 8px 8px 10px; cursor:grab;
    touch-action:none; user-select:none; -webkit-user-select:none;
  }
  .lib-chip:hover{border-color:var(--accent);}
  .lib-chip:active{cursor:grabbing;}
  .lib-chip.dragging{opacity:.4;}
  .lib-chip .meta{flex:1; min-width:0; display:flex; flex-direction:column; gap:1px;}
  .lib-chip .name{font-family:'Fraunces',serif; font-weight:500; font-size:15px; line-height:1.3; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;}
  .lib-chip .count{font-size:11px; color:var(--ink-soft); white-space:nowrap;}
  .lib-chip .lib-edit{
    border:none; background:none; color:var(--ink-soft); cursor:pointer; font-size:12px;
    width:22px; height:22px; border-radius:6px; flex-shrink:0;
  }
  .lib-chip .lib-edit:hover{background:var(--accent-soft); color:var(--accent);}
  .lib-chip .lib-remove{
    border:none; background:none; color:var(--ink-soft); cursor:pointer; font-size:14px;
    width:22px; height:22px; border-radius:6px; flex-shrink:0;
  }
  .lib-chip .lib-remove:hover{background:var(--accent-soft); color:var(--danger);}

  .save-lib-btn{
    display:block; margin-top:6px; border:1px solid var(--line); background:var(--paper);
    color:var(--herb); cursor:pointer; font-size:12px; padding:7px 12px; border-radius:8px;
    width:100%;
  }
  .save-lib-btn:hover{border-color:var(--herb); background:var(--accent-soft);}
  .save-lib-btn.saved{color:var(--accent); border-color:var(--accent);}

  .lib-edit-overlay{
    position:fixed; inset:0; background:rgba(20,17,13,.4); z-index:60;
    display:flex; align-items:center; justify-content:center; padding:20px;
  }
  .lib-edit-overlay[hidden]{display:none;}
  .lib-edit-modal{
    background:var(--paper-raised); border:1px solid var(--line); border-radius:16px;
    box-shadow:var(--shadow); padding:22px; max-width:480px; width:100%;
    max-height:calc(100vh - 40px); overflow-y:auto;
  }
  .lib-edit-modal h2{font-size:18px; font-weight:600; margin-bottom:14px;}
  .lib-edit-modal .field-label{margin-top:14px;}
  .lib-edit-modal .field-label:first-of-type{margin-top:0;}
  .lib-edit-actions{display:flex; gap:8px; margin-top:18px;}
  .lib-edit-actions button{
    flex:1; border-radius:8px; padding:9px 14px; font-size:13px; cursor:pointer;
  }
  .lib-edit-save{border:1px solid var(--herb); background:var(--herb); color:#fff;}
  .lib-edit-save:hover{opacity:.9;}
  .lib-edit-cancel{border:1px solid var(--line); background:none; color:var(--ink-soft);}
  .lib-edit-cancel:hover{border-color:var(--accent); color:var(--accent);}

  aside.shopping{
    background:var(--paper-raised); border:1px solid var(--line); border-radius:14px;
    box-shadow:var(--shadow); padding:18px; margin-top:14px;
  }
  aside.shopping h2{font-size:19px; font-weight:600; margin-bottom:2px;}
  aside.shopping .sub{font-size:12px; color:var(--ink-soft); margin-bottom:14px;}
  .shopping-head{
    display:flex; align-items:flex-start; justify-content:space-between; gap:12px; flex-wrap:wrap;
  }
  .copy-bring-btn{
    flex-shrink:0; display:flex; align-items:center; gap:6px; white-space:nowrap;
    border:1px solid var(--herb); background:var(--herb-soft); color:var(--herb);
    font-family:'Inter',sans-serif; font-size:12px; font-weight:600;
    padding:7px 12px; border-radius:8px; cursor:pointer;
  }
  .copy-bring-btn:hover{background:var(--herb); color:#fff;}
  .copy-bring-btn.copied{border-color:var(--accent); background:var(--accent); color:#fff;}
  .copy-bring-btn svg{width:15px; height:15px; flex-shrink:0;}
  .shop-empty{font-size:13px; color:var(--ink-soft); font-style:italic; padding:12px 0;}
  .shop-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(220px,1fr));
    gap:0 28px;
  }
  .shop-cat{margin-bottom:16px;}
  .shop-cat:last-child{margin-bottom:0;}

  /* Feste 2-Spalten-Anordnung: links "Obst & Gemüse" oben, darunter
     gestapelt "Milchprodukte & Eier" und "Vorrat & Trocken"; rechts
     daneben "Sonstiges" - damit bleibt die Liste so kompakt wie möglich,
     statt dass jede Kategorie ihre eigene Zeile/Spalte im auto-fit-Grid
     bekommt. Andere Kategorien (Fleisch & Fisch, Gewürze & Kräuter, falls
     vorhanden) laufen mit grid-column:1/-1 normal darunter weiter. */
  /* Feste 2-Spalten-Anordnung fuer die vier Standard-Kategorien: eigener
     Sub-Grid-Container (siehe .shop-fixed-block), unabhaengig davon, ob
     "Jede Woche" oder weitere Kategorien (Fleisch & Fisch, Gewuerze &
     Kraeuter) im aeusseren Grid davor/danach stehen - keine globalen
     grid-row-Nummern, die mit deren Position kollidieren koennten. */
  .shop-fixed-block{
    grid-column:1/-1;
    display:grid;
    grid-template-columns:minmax(180px,1fr) minmax(180px,1fr);
    grid-auto-rows:min-content;
    gap:0 28px;
    align-items:start;
  }
  .shop-cat-produce{grid-column:1; grid-row:1;}
  .shop-cat-dairy{grid-column:1; grid-row:2;}
  .shop-cat-pantry{grid-column:1; grid-row:3;}
  /* Spannt über alle drei Zeilen der linken Spalte (statt nur Zeile 1),
     damit eine lange Sonstiges-Liste nicht Zeile 1 aufblaeht und links
     darunter (unter "Obst & Gemüse") Leerraum entsteht, bevor
     "Milchprodukte & Eier" beginnt. */
  .shop-cat-extra{grid-column:2; grid-row:1/4;}
  /* Nicht fest platzierte Kategorien (z.B. Fleisch & Fisch, Gewürze &
     Kräuter) - eigene volle-Breite-Zeile im äußeren Grid. */
  .shop-cat-other{grid-column:1/-1;}
  /* Bei schmalen Bildschirmen faellt das feste 2-Spalten-Layout auf eine
     Spalte zurueck (alle vier Kategorien einfach untereinander in
     natuerlicher Reihenfolge) - zwei 180px-Spalten nebeneinander wuerden
     auf einem Handy-Bildschirm zu schmal bzw. unleserlich. */
  @media (max-width:480px){
    .shop-fixed-block{grid-template-columns:1fr;}
    .shop-cat-produce{grid-column:1; grid-row:1;}
    .shop-cat-dairy{grid-column:1; grid-row:2;}
    .shop-cat-pantry{grid-column:1; grid-row:3;}
    .shop-cat-extra{grid-column:1; grid-row:4/5;}
  }
  .shop-cat h3{
    font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--herb);
    font-family:'Inter',sans-serif; font-weight:600; margin-bottom:8px;
  }
  .shop-item{
    display:flex; align-items:center; justify-content:space-between; gap:6px;
    font-size:14px; padding:4px 0; border-bottom:1px solid var(--line);
  }
  .shop-item:last-child{border-bottom:none;}
  .shop-item .name{flex:1; min-width:0;}

  /* Mengenfeld: sieht wie ein normaler Text aus, bis man reinklickt (keine
     sichtbare Eingabefeld-Optik in der Alltagsansicht), damit die Liste
     nicht wie ein Formular aussieht, obwohl jede Menge editierbar ist. */
  .shop-amt-input{
    width:auto; max-width:120px; min-width:24px; flex:0 0 auto;
    background:none; border:1px solid transparent; border-radius:6px;
    color:var(--ink-soft); font-size:13px; text-align:right;
    padding:3px 6px; margin:0;
  }
  .shop-amt-input:hover{border-color:var(--line);}
  .shop-amt-input:focus{outline:none; border-color:var(--accent); background:var(--paper); color:var(--ink);}
  .shop-amt-input::placeholder{color:var(--ink-soft); opacity:.5;}

  .shop-item-remove{
    flex-shrink:0; border:none; background:none; color:var(--ink-soft); cursor:pointer;
    font-size:15px; width:22px; height:22px; border-radius:6px; line-height:1;
    display:flex; align-items:center; justify-content:center;
  }
  .shop-item-remove:hover{background:var(--accent-soft); color:var(--danger);}

  /* Jede-Woche-Liste: eigene Kategorie ganz oben in der Einkaufsliste, mit
     anklickbaren Chips statt Checkbox/Mengenfeld. Ein Klick nimmt den
     Artikel in die Einkaufsliste unten auf (dort automatisch kategorisiert);
     nochmal klicken nimmt ihn wieder raus. Nur aktive Chips wirken sich auf
     Liste und Export aus - inaktive sind nur als Vorschlag sichtbar. */
  .shop-cat-recurring{
    grid-column:1/-1;
    padding-bottom:12px; margin-bottom:6px;
    border-bottom:1px solid var(--line);
  }
  /* Chips fliessen wie Fließtext nebeneinander und brechen bei Bedarf um
     (statt gleich breiter Grid-Spalten) - passt sich so an unterschiedlich
     lange Artikelnamen an und bleibt kompakt. */
  .shop-cat-recurring .shop-recurring-list{
    display:flex; flex-wrap:wrap; gap:8px;
  }
  .shop-recurring-chip{
    font-family:'Inter',sans-serif; font-size:13px;
    border:1px solid var(--line); background:var(--paper); color:var(--ink-soft);
    padding:6px 12px; border-radius:99px; cursor:pointer; user-select:none;
  }
  .shop-recurring-chip:hover{border-color:var(--herb);}
  .shop-recurring-chip.active{
    background:var(--herb-soft); border-color:var(--herb); color:var(--herb); font-weight:600;
  }

  /* Sonstiges (freie Zusatzeinträge) ist eine ganz normale Kategorie-Spalte
     im Grid wie "Obst & Gemüse" oder "Vorrat & Trocken" - KEIN eigener
     volle-Breite-Block. Dadurch steht es je nach verfügbarer Breite z.B.
     direkt neben "Obst & Gemüse", statt eine eigene Zeile zu belegen; die
     Gesamtliste bleibt dadurch kompakter. In der DOM-Reihenfolge kommt der
     Block trotzdem immer zuletzt (siehe renderShoppingList()), sodass er
     bei der Sortierung im Grid an letzter Stelle einsortiert wird.
   */

  .recurring-manage-btn{border-color:var(--line) !important; background:var(--paper-raised) !important; color:var(--ink-soft) !important;}
  .recurring-manage-btn:hover{border-color:var(--herb) !important; color:var(--herb) !important; background:var(--herb-soft) !important;}
  .recurring-manage-row{
    display:flex; align-items:center; gap:8px;
    background:var(--paper); border:1px solid var(--line); border-radius:8px;
    padding:6px 6px 6px 10px;
  }
  .recurring-manage-row input[type="text"]{border:none; background:none; padding:2px 0; flex:1;}
  .recurring-manage-row input[type="text"]:focus{outline:none;}
  .recurring-manage-empty{font-size:12.5px; color:var(--ink-soft); font-style:italic; padding:4px 2px 10px;}

  /* Freie Zusatzeinträge (Sonstiges, nicht aus Rezepten): eigenes Textfeld
     statt <span> für den Namen, da der Name hier (anders als bei
     Rezept-Zutaten) frei editierbar sein muss. Die Menge daneben nutzt
     dasselbe .shop-amt-input wie die Rezept-Zutaten-Zeilen. */
  .shop-extra-input{
    flex:1; min-width:0; background:none; border:1px solid transparent; border-radius:6px;
    color:var(--ink); font-size:14px; padding:3px 6px; margin:0 -6px;
  }
  .shop-extra-input:hover{border-color:var(--line);}
  .shop-extra-input:focus{outline:none; border-color:var(--accent); background:var(--paper);}
  .shop-extra-add-row{padding:4px 0;}
  .shop-extra-add-input{
    width:100%; color:var(--ink-soft); font-style:italic; margin:0;
  }
  .shop-extra-add-input:focus{font-style:normal; color:var(--ink);}

  footer.hint{
    margin-top:22px; font-size:12px; color:var(--ink-soft); text-align:center;
  }