:root {
  --green: #2e7d32; --green-dark: #1b5e20; --bg: #f7faf5; --card: #ffffff;
  --text: #1d2a1d; --muted: #5d6b5d; --line: #e0e7df;
  --tox-keine: #2e7d32; --tox-gering: #9e9d24; --tox-vorsicht: #ef6c00; --tox-giftig: #c62828;
}
* { box-sizing: border-box; }
body { margin: 0; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--bg); color: var(--text); }
.topbar { position: sticky; top: 0; z-index: 10; display: flex; align-items: center;
  justify-content: space-between; gap: .5rem; padding: .6rem 1rem;
  background: var(--green); color: #fff; }
.topbar__title { font-size: 1.2rem; margin: 0; }
.topbar__ctx { background: rgba(255,255,255,.18); color: #fff; border: 0; border-radius: 999px;
  padding: .4rem .8rem; font-size: .85rem; cursor: pointer; }
.app { max-width: 720px; margin: 0 auto; padding: 1rem; }
.badge { display:inline-block; padding:.15rem .5rem; border-radius:999px; font-size:.75rem; color:#fff; }
.tox-keine{background:var(--tox-keine);} .tox-gering{background:var(--tox-gering);}
.tox-vorsicht{background:var(--tox-vorsicht);} .tox-giftig{background:var(--tox-giftig);}
.badge--pending{background:var(--tox-vorsicht);}
.badge--failed{background:var(--tox-giftig);}
.monthbar{display:flex; gap:2px;}
.monthbar__cell{flex:1; text-align:center; font-size:.7rem; padding:.25rem 0; border-radius:3px;
  background:var(--line); color:var(--muted);}
.monthbar__cell.is-on{background:var(--green); color:#fff;}
.monthbar__cell.is-now{outline:2px solid var(--green-dark);}
.disclaimer{background:var(--card); border:1px solid var(--line); border-radius:12px; padding:1.2rem;}
.disclaimer h2{margin-top:0; color:var(--tox-vorsicht);}
.btn{border:0; border-radius:8px; padding:.55rem 1rem; font-size:1rem; cursor:pointer;}
.btn--primary{background:var(--green); color:#fff;}
.btn--ghost{background:transparent; color:var(--green); border:1px solid var(--green);}
.btn--danger{background:var(--tox-giftig); color:#fff;}
.filters{display:flex; flex-wrap:wrap; gap:.5rem; align-items:center; margin-bottom:.75rem;}
.filters__sel,.filters__search{padding:.45rem .6rem; border:1px solid var(--line); border-radius:8px; font-size:.95rem;}
.filters__search{flex:1; min-width:140px;}
.filters__check{font-size:.9rem; color:var(--muted); display:flex; align-items:center; gap:.3rem;}
.list__info{color:var(--muted); font-size:.9rem; margin:.25rem 0 .75rem;}
.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:.75rem;}
.card{display:flex; flex-direction:column; background:var(--card); border:1px solid var(--line);
  border-radius:12px; overflow:hidden; text-decoration:none; color:inherit;}
.card__img{width:100%; height:130px; object-fit:cover;}
.card__body{padding:.6rem .7rem;}
.card__head{display:flex; justify-content:space-between; align-items:center; gap:.4rem;}
.card__name{font-weight:600;}
.card__latin{font-style:italic; color:var(--muted); font-size:.85rem;}
.card__parts{margin-top:.35rem; font-size:.9rem;}
.empty{color:var(--muted);}
.list__add{display:inline-block; margin-top:1rem;}
.back{display:inline-block; margin-bottom:.5rem; color:var(--green); text-decoration:none;}
.detail__title{display:flex; align-items:center; gap:.6rem;}
.detail__title h2{margin:.2rem 0;}
.detail__latin{font-style:italic; color:var(--muted);}
.detail__syn{font-size:.85rem; color:var(--muted); margin-bottom:.5rem;}
/* Bildergalerie Detailseite (REQ-007) */
.gal{margin:.75rem 0;}
.gal__img{display:block; width:100%; max-height:300px; object-fit:cover; border-radius:12px;
  background:var(--line); cursor:zoom-in;}
.gal__cap{font-size:.75rem; color:var(--muted); margin-top:.25rem;}
.gal__thumbs{display:flex; gap:.4rem; margin-top:.5rem; overflow-x:auto; padding-bottom:.2rem;}
.gal__thumb{flex:0 0 auto; padding:0; border:2px solid transparent; border-radius:8px;
  background:none; cursor:pointer; line-height:0;}
.gal__thumb img{width:66px; height:52px; object-fit:cover; border-radius:6px; display:block;}
.gal__thumb.is-on{border-color:var(--green);}

/* Vollbild-Lightbox */
.lb{position:fixed; inset:0; z-index:100; background:rgba(0,0,0,.9);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.6rem;
  padding:1rem; cursor:zoom-out;}
.lb__img{max-width:100%; max-height:82vh; object-fit:contain; border-radius:6px;}
.lb__cap{color:#e8f0e6; font-size:.85rem; text-align:center; max-width:40rem;}
.lb__close{position:absolute; top:.6rem; right:.8rem; width:2.4rem; height:2.4rem;
  border:0; border-radius:999px; background:rgba(255,255,255,.15); color:#fff;
  font-size:1.2rem; cursor:pointer;}
.lb__nav{position:absolute; top:50%; transform:translateY(-50%); width:2.8rem; height:3.4rem;
  border:0; border-radius:8px; background:rgba(255,255,255,.15); color:#fff;
  font-size:2rem; line-height:1; cursor:pointer;}
.lb__nav--prev{left:.4rem;} .lb__nav--next{right:.4rem;}
.sec{background:var(--card); border:1px solid var(--line); border-radius:10px; padding:.7rem .9rem; margin:.6rem 0;}
.sec__h{margin:.1rem 0 .4rem; font-size:1rem; color:var(--green-dark);}
.partrow{padding:.4rem 0; border-bottom:1px solid var(--line);}
.partrow:last-child{border-bottom:0;}
.partrow__head{font-weight:600; margin-bottom:.25rem;}
.partrow__notes{font-size:.85rem; color:var(--muted); margin-top:.25rem;}
.confusion{padding:.5rem .6rem; border-radius:8px; margin:.35rem 0; font-size:.9rem;}
.confusion--low{background:#fff8e1;}
.confusion--high{background:#ffebee; border:1px solid var(--tox-giftig);}
.detail__edit{margin-top:1rem;}
.fld{display:block; margin:.6rem 0;}
.fld__lbl{display:block; font-size:.85rem; color:var(--muted); margin-bottom:.2rem;}
.fld__in{width:100%; padding:.5rem .6rem; border:1px solid var(--line); border-radius:8px; font-size:.95rem; font-family:inherit;}
.row2{display:grid; grid-template-columns:1fr 1fr; gap:.6rem;}
.part-ed{background:var(--card); border:1px solid var(--line); border-radius:8px; padding:.5rem; margin:.4rem 0;}
.months-grid{display:grid; grid-template-columns:repeat(6,1fr); gap:3px; margin:.4rem 0;}
.mcell{padding:.3rem 0; border:1px solid var(--line); background:#fff; border-radius:5px; font-size:.75rem; cursor:pointer;}
.mcell.is-on{background:var(--green); color:#fff; border-color:var(--green);}
.btn.mini{padding:.35rem .7rem; font-size:.85rem;}
/* Editor: Bildverwaltung (REQ-007) */
.imgs-ed{margin-top:.3rem;}
.imgs-ed__empty{color:var(--muted); font-size:.9rem; padding:.4rem 0;}
.imgs-ed__add{display:flex; flex-wrap:wrap; align-items:center; gap:.6rem; margin-top:.5rem;}
.imgs-ed__add input[type=file]{display:none;}
.imgs-ed__url{display:flex; gap:.4rem; flex:1; min-width:14rem;}
.img-ed{display:grid; grid-template-columns:76px 1fr; gap:.6rem; align-items:start;
  background:var(--card); border:1px solid var(--line); border-radius:8px;
  padding:.5rem; margin:.4rem 0;}
.img-ed.is-main{border-color:var(--green); box-shadow:0 0 0 1px var(--green) inset;}
.img-ed__thumb{width:76px; height:60px; object-fit:cover; border-radius:6px; background:var(--line);}
.img-ed__fields{display:flex; flex-direction:column; gap:.4rem;}
.img-ed__actions{grid-column:1 / -1; display:flex; flex-wrap:wrap; gap:.4rem;}
.img-ed__actions .btn[disabled]{opacity:.4; cursor:default;}
.editor__sync{margin:.2rem 0 .8rem; font-size:.85rem; color:var(--tox-vorsicht);}
.editor__sync--failed{color:var(--tox-giftig);}
.editor__actions{display:flex; gap:.6rem; margin-top:1rem;}
.editor__io{display:flex; gap:.6rem; margin-top:1.5rem; padding-top:1rem; border-top:1px solid var(--line);}
.editor__io input[type=file]{display:none;}
.chips{display:flex; flex-wrap:wrap; gap:.3rem; margin-top:.35rem;}
.chip{display:inline-block; padding:.15rem .5rem; border-radius:999px; font-size:.75rem;
  background:var(--line); color:var(--text);}
.tagsel{display:flex; flex-wrap:wrap; gap:.3rem; margin:.3rem 0;}
.tagsel__opt{padding:.2rem .6rem; border:1px solid var(--line); border-radius:999px;
  background:#fff; font-size:.8rem; cursor:pointer;}
.tagsel__opt.is-on{background:var(--green); color:#fff; border-color:var(--green);}
.tabs{display:flex; gap:.25rem; max-width:720px; margin:0 auto; padding:.4rem 1rem 0;}
.tabs__link{flex:1; text-align:center; padding:.55rem .5rem; text-decoration:none;
  color:var(--muted); font-weight:600; border-bottom:3px solid transparent; border-radius:8px 8px 0 0;}
.tabs__link.is-active{color:var(--green-dark); border-bottom-color:var(--green);}
.tabs__link:hover{background:rgba(46,125,50,.06);}
.methods__title{margin:.4rem 0;}
.methods__intro{color:var(--muted); font-size:.9rem; margin:.25rem 0 1rem;}
.method{background:var(--card); border:1px solid var(--line); border-radius:10px; margin:.5rem 0; overflow:hidden;}
.method__toggle{width:100%; text-align:left; background:transparent; border:0; cursor:pointer;
  padding:.7rem .9rem; font-size:1rem; font-weight:600; color:var(--green-dark);}
.method__toggle::after{content:"▸"; float:right; transition:transform .15s;}
.method.is-open .method__toggle::after{transform:rotate(90deg);}
.method__body{display:none; padding:0 .9rem .6rem;}
.method.is-open .method__body{display:block;}
.method__sec{margin:.5rem 0;}
.method__h{margin:.3rem 0 .15rem; font-size:.95rem;}
.method__sec p{margin:.15rem 0; font-size:.92rem; line-height:1.45;}
.method-link{display:inline-block; margin-top:.4rem; color:var(--green); text-decoration:none; font-size:.9rem;}
.method-link:hover{text-decoration:underline;}

/* Kontroll-Leiste */
.controls{max-width:720px; margin:0 auto; padding:.6rem 1rem 0;
  display:flex; flex-direction:column; gap:.6rem;}
.controls[hidden]{display:none;}
.controls__row{display:flex; align-items:center; gap:.5rem; flex-wrap:wrap;}
.controls__row--end{justify-content:flex-end;}
.controls__lbl{min-width:6.5rem; color:var(--muted); font-size:.9rem;}
.controls__sel,.controls__in{flex:1; min-width:8rem; padding:.55rem .6rem;
  border:1px solid var(--line); border-radius:8px; font-size:1rem;}
.controls__loc{white-space:nowrap;}
.controls__status{color:var(--muted); font-size:.85rem;}

/* Responsive / Mobile — greift auf schmalen Viewports ODER auf Touch-Geräten
   (pointer: coarse). Letzteres ist nötig, weil manche Handys (z. B. Pixel 10
   in Chrome) eine grosse CSS-Breite melden und sonst die Desktop-Spalten zeigen. */
@media (max-width: 768px), (pointer: coarse) {
  html{font-size:19px;}
  .topbar__title{font-size:1.15rem;}
  .topbar__ctx{font-size:.95rem; padding:.5rem .8rem;}
  .app{padding:.8rem;}
  .grid{grid-template-columns:1fr;}
  .card__img{height:200px;}
  .card__name{font-size:1.1rem;}
  .card__latin{font-size:.95rem;}
  .card__parts{font-size:1rem;}
  .sec__h{font-size:1.1rem;}
  .sec p, .sec li, .partrow__head{font-size:1rem;}
  .tabs__link{padding:.8rem .5rem; font-size:1.1rem;}
  .filters{flex-direction:column; align-items:stretch;}
  .filters__sel,.filters__search{width:100%; font-size:1rem;}
  .btn{padding:.7rem 1rem; font-size:1rem;}
  .mcell{padding:.5rem 0;}
  .tagsel__opt{padding:.4rem .7rem; font-size:.95rem;}
  .controls__lbl{min-width:100%;}
  .gal__img{max-height:260px;}
  .gal__thumb img{width:80px; height:62px;}
  .img-ed{grid-template-columns:64px 1fr;}
  .img-ed__thumb{width:64px; height:52px;}
  .lb__nav{width:3.2rem; height:4rem;}
}

/* Nur echte grosse Touch-Tablets (Querformat) bekommen zwei Spalten;
   Telefone (auch solche mit grosser CSS-Breite) bleiben einspaltig. */
@media (pointer: coarse) and (min-width: 900px) {
  .grid{grid-template-columns:repeat(2, 1fr);}
}

.dosage__row{margin:.2rem 0; font-size:.95rem;}
.dosage__hint{margin-top:.4rem; font-size:.8rem; color:var(--muted); font-style:italic;}

.banner{border-radius:10px; padding:.6rem .8rem; margin:.6rem 0; font-size:.9rem;}
.banner--info{background:#e8f0fe; border:1px solid #90b4f0;}
.banner--warn{background:#fff8e1; border:1px solid var(--tox-vorsicht);}
.banner strong{display:block; margin-bottom:.2rem;}
.banner .btn{margin-top:.4rem;}

/* Konto-Block in der Kontroll-Leiste */
.controls__auth{display:flex; flex-direction:column; gap:.4rem;}
.controls__authrow{display:flex; gap:.4rem; flex-wrap:wrap;}
.controls__authrow .controls__in{flex:1; min-width:9rem;}
.controls__perms{color:var(--muted); font-size:.85rem;}
.controls__authmsg{font-size:.85rem;}
.controls__authmsg--err{color:var(--tox-giftig);}

/* Kontenverwaltung */
.accounts__msg{color:var(--tox-giftig); font-size:.9rem; margin:.3rem 0;}
.account{border:1px solid var(--line); border-radius:.6rem; padding:.6rem .7rem; margin:.5rem 0;
  display:flex; flex-direction:column; gap:.45rem;}
.account--pending{border-left:4px solid var(--tox-vorsicht);}
.account--disabled{border-left:4px solid var(--tox-giftig); opacity:.75;}
.account--active{border-left:4px solid var(--tox-keine);}
.account__head{display:flex; align-items:center; gap:.5rem; flex-wrap:wrap;}
.account__mail{color:var(--muted); font-size:.88rem;}
.account__perms{display:flex; gap:.35rem; flex-wrap:wrap;}
.account__actions{display:flex; gap:.4rem;}

/* Änderungshistorie auf der Detailseite */
.revisions{display:flex; flex-direction:column; gap:.35rem; margin-top:.5rem;}
.revision{display:flex; gap:.5rem; flex-wrap:wrap; font-size:.88rem;
  border-bottom:1px solid var(--line); padding-bottom:.3rem;}
.revision__at{color:var(--muted);}
.revision__who{font-weight:600;}
.revision__fields{color:var(--muted);}
.muted{color:var(--muted);}