/* =====================================================================
   imker-welt.de — Reader-Tools (Rechner, Converter, Quiz, Lookups)
   Design „Goldene Stunde". Akzent pro Silo über Wrapper-Klasse
   (.iwt.silo-gold|.silo-green|.silo-terracotta). Vanilla, kein Framework.
   Logik: assets/tools.js · Registry/Render: inc/tools.php
   ===================================================================== */

.iwt{
  --h:#E0A200;--bx:#B26B12;--md:#7A9A5B;--cr:#FBF6EA;--sd:#EADFC6;
  --ik:#2E2A20;--bk:#6B4F2A;--po:#D9743A;
  --ac:var(--h);            /* Silo-Akzent, von Wrapper-Klasse überschrieben */
  --acd:#9C5C0E;            /* textsicherer „deep"-Akzent (AA auf hell), je Silo überschrieben */
  --ok:#4f8a3d;--warn:#C9870F;--bad:#C0492B;
  font-family:inherit;color:var(--ik);line-height:1.6;
  border:1px solid var(--sd);border-radius:18px;background:#fff;
  padding:22px 24px 24px;margin:36px 0;position:relative;
  box-shadow:0 6px 22px rgba(46,42,32,.07);
}
.iwt.silo-gold{--ac:#E0A200;--acd:#9C5C0E}
.iwt.silo-green{--ac:#6f9152;--acd:#4F6B36}
.iwt.silo-terracotta{--ac:#D9743A;--acd:#A14A23}
.iwt *{box-sizing:border-box}
.iwt button{font-family:inherit}

/* ---- Kopf -------------------------------------------------------- */
.iwt__head{display:flex;gap:14px;align-items:flex-start;margin-bottom:6px}
.iwt__ico{flex:0 0 auto;width:44px;height:44px;border-radius:12px;display:flex;
  align-items:center;justify-content:center;font-size:1.5rem;line-height:1;
  background:var(--cr);border:1px solid var(--sd)}
.iwt__ttl{margin:0;font-size:1.3rem;line-height:1.2;font-weight:800;letter-spacing:-.01em}
.iwt__ey{display:block;font-size:.72rem;font-weight:800;letter-spacing:.08em;
  text-transform:uppercase;color:var(--acd);margin:0 0 2px}
.iwt__sub{margin:.5em 0 0;color:var(--bk);font-size:.97rem}
.iwt__body{margin-top:18px}

/* ---- Formfelder -------------------------------------------------- */
.iwt-grid{display:grid;gap:14px}
.iwt-grid.cols2{grid-template-columns:1fr 1fr}
@media(max-width:520px){.iwt-grid.cols2{grid-template-columns:1fr}}
.iwt-f{display:flex;flex-direction:column;gap:6px}
.iwt-f>label,.iwt-lbl{font-size:.86rem;font-weight:700;color:var(--bk)}
.iwt-f .hint{font-size:.78rem;color:#6b6052;font-weight:400}
.iwt input[type=number],.iwt input[type=text],.iwt select{
  width:100%;padding:11px 13px;border:1.5px solid var(--sd);border-radius:11px;
  font-size:1rem;background:var(--cr);color:var(--ik);-webkit-appearance:none;appearance:none}
.iwt select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%236B4F2A' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;padding-right:34px}
.iwt input:focus,.iwt select:focus{outline:none;border-color:var(--ac);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--ac) 22%,transparent)}
.iwt-suffix{position:relative}
.iwt-suffix>span{position:absolute;right:13px;top:50%;transform:translateY(-50%);
  color:#6b6052;font-size:.9rem;pointer-events:none}

/* ---- Segmentierte Auswahl / Chips ------------------------------- */
.iwt-seg{display:flex;flex-wrap:wrap;gap:8px}
.iwt-seg button,.iwt-opt{
  border:1.5px solid var(--sd);background:var(--cr);color:var(--bk);
  border-radius:999px;padding:9px 15px;font-size:.92rem;font-weight:700;cursor:pointer;
  transition:.15s;line-height:1.1}
.iwt-seg button:hover,.iwt-opt:hover{border-color:var(--ac)}
.iwt-seg button[aria-pressed=true],.iwt-opt.is-on{
  background:var(--ac);border-color:var(--ac);color:#fff}
.iwt.silo-gold .iwt-seg button[aria-pressed=true],
.iwt.silo-gold .iwt-opt.is-on{color:#3a2d05}
.iwt.silo-green .iwt-seg button[aria-pressed=true],.iwt.silo-green .iwt-opt.is-on,
.iwt.silo-terracotta .iwt-seg button[aria-pressed=true],.iwt.silo-terracotta .iwt-opt.is-on{
  background:var(--acd);border-color:var(--acd)}

/* ---- Buttons ----------------------------------------------------- */
.iwt-btn{display:inline-flex;align-items:center;gap:8px;border:0;cursor:pointer;
  background:var(--ac);color:#fff;font-weight:800;font-size:.98rem;
  padding:12px 20px;border-radius:12px;transition:.15s;box-shadow:0 4px 12px rgba(46,42,32,.14)}
.iwt.silo-gold .iwt-btn{color:#3a2d05}
.iwt.silo-green .iwt-btn,.iwt.silo-terracotta .iwt-btn{background:var(--acd)}
.iwt-btn:hover{filter:brightness(1.05);transform:translateY(-1px)}
.iwt-btn.ghost{background:transparent;color:var(--bk);box-shadow:none;
  border:1.5px solid var(--sd);padding:10px 16px}
.iwt-btn.ghost:hover{border-color:var(--ac);color:var(--ik)}
.iwt-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:16px}

/* ---- Ergebnis-Karte --------------------------------------------- */
.iwt-out{margin-top:18px;border:1px solid var(--sd);border-left:5px solid var(--ac);
  background:var(--cr);border-radius:14px;padding:16px 18px;animation:iwtin .25s ease}
@keyframes iwtin{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.iwt-out[hidden]{display:none}
.iwt-out .big{font-size:2rem;font-weight:800;line-height:1.05;color:var(--ik)}
.iwt-out .big small{font-size:1rem;font-weight:700;color:var(--bk)}
.iwt-out .lead{font-weight:700;margin:0 0 6px}
.iwt-out p{margin:.5em 0}
.iwt-out ul{margin:.4em 0;padding-left:1.2em}
.iwt-out li{margin:.3em 0}
.iwt-kv{display:flex;justify-content:space-between;gap:12px;padding:7px 0;
  border-bottom:1px dashed var(--sd);font-size:.97rem}
.iwt-kv:last-child{border-bottom:0}
.iwt-kv b{color:var(--bk)}
.iwt-tot{display:flex;justify-content:space-between;gap:12px;margin-top:10px;
  padding-top:10px;border-top:2px solid var(--sd);font-size:1.1rem;font-weight:800}

/* ---- Ampel ------------------------------------------------------- */
.iwt-amp{border-left-width:6px!important}
.iwt-amp.ok{border-left-color:var(--ok)!important;background:#F1F6EC}
.iwt-amp.warn{border-left-color:var(--warn)!important;background:#FBF1DD}
.iwt-amp.bad{border-left-color:var(--bad)!important;background:#FBE9E4}
.iwt-badge{display:inline-block;font-size:.72rem;font-weight:800;text-transform:uppercase;
  letter-spacing:.06em;padding:3px 10px;border-radius:999px;color:#fff;margin-bottom:8px}
.iwt-badge.ok{background:var(--ok)}.iwt-badge.warn{background:var(--warn)}.iwt-badge.bad{background:var(--bad)}

/* ---- Balken (z.B. MGO-Stufe) ------------------------------------ */
.iwt-bar{height:12px;border-radius:999px;background:var(--sd);overflow:hidden;margin:10px 0}
.iwt-bar>i{display:block;height:100%;border-radius:999px;
  background:linear-gradient(90deg,#E9C35A,var(--ac));transition:width .4s ease}

/* ---- Ergebnis-Kacheln (Finder/Pflanzen) ------------------------- */
.iwt-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;margin-top:6px}
.iwt-card{border:1px solid var(--sd);border-radius:13px;padding:13px 14px;background:#fff}
.iwt-card h4{margin:0 0 4px;font-size:1rem}
.iwt-card p{margin:0;font-size:.85rem;color:var(--bk)}
.iwt-card .tag{display:inline-block;font-size:.7rem;font-weight:700;color:var(--acd);
  background:var(--cr);border:1px solid var(--sd);border-radius:999px;padding:2px 8px;margin:6px 6px 0 0}
.iwt-card a{color:var(--acd);font-weight:700;font-size:.85rem;text-decoration:none}

/* ---- Fragebogen / Steps ----------------------------------------- */
.iwt-q{margin:0 0 16px}
.iwt-q .qn{font-weight:700;margin:0 0 9px}
.iwt-toggle{display:flex;gap:8px}
.iwt-row{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center;
  padding:11px 0;border-bottom:1px dashed var(--sd)}
.iwt-row:last-of-type{border-bottom:0}
.iwt-row .rl{flex:1 1 230px;font-weight:600}
.iwt-check{display:flex;gap:10px;align-items:flex-start;padding:9px 0;cursor:pointer}
.iwt-check input{margin-top:3px;width:18px;height:18px;accent-color:var(--ac);flex:0 0 auto}
.iwt-check span{font-size:.96rem}

/* ---- Hinweis / Disclaimer --------------------------------------- */
.iwt-note{font-size:.85rem;color:var(--bk);background:var(--cr);border:1px solid var(--sd);
  border-radius:11px;padding:10px 13px;margin-top:16px}
.iwt-disc{font-size:.8rem;color:#6b6052;margin-top:14px;display:flex;gap:8px}
.iwt-disc::before{content:"⚖";flex:0 0 auto}
.iwt-disc.med::before{content:"⚕"}
.iwt-fallback{font-size:.9rem;color:#6b6052}
.iwt a.iwt-link{color:var(--acd);font-weight:700}

/* ---- Tabelle (Lookup) ------------------------------------------- */
.iwt-tl{width:100%;border-collapse:collapse;font-size:.95rem;margin-top:6px}
.iwt-tl th,.iwt-tl td{text-align:left;padding:9px 10px;border-bottom:1px solid var(--sd);vertical-align:top}
.iwt-tl th{color:var(--bk);font-weight:700;background:var(--cr)}

/* =====================================================================
   /tools/ Übersichtsseite
   ===================================================================== */
.iwt-hub{margin:8px 0 40px}
.iwt-hub__intro{font-size:1.08rem;color:var(--bk);max-width:760px}
.iwt-hub__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(255px,1fr));gap:18px;margin-top:26px}
.iwt-tile{display:flex;flex-direction:column;gap:8px;text-decoration:none;color:inherit;
  border:1px solid #EADFC6;border-radius:16px;padding:18px 18px 20px;background:#fff;
  box-shadow:0 4px 16px rgba(46,42,32,.06);transition:.18s;position:relative;overflow:hidden}
.iwt-tile::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:var(--tc,#E0A200)}
.iwt-tile.silo-gold{--tc:#E0A200}.iwt-tile.silo-green{--tc:#7A9A5B}.iwt-tile.silo-terracotta{--tc:#D9743A}
.iwt-tile:hover{transform:translateY(-3px);box-shadow:0 12px 28px rgba(46,42,32,.12);border-color:var(--tc)}
.iwt-tile__ico{font-size:1.7rem;line-height:1}
.iwt-tile__name{font-size:1.08rem;font-weight:800;margin:2px 0 0;letter-spacing:-.01em}
.iwt-tile__sub{font-size:.9rem;color:#6B4F2A;margin:0;flex:1}
.iwt-tile__tag{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;
  color:var(--tc)}
.iwt-hub__sec{margin:38px 0 14px;font-size:1.35rem}

/* ---- Print: nur das Tool, Layout aufgeräumt --------------------- */
/* JS (iwtPrintOnly) blendet beim Klick auf „Drucken" alles außer dem Tool aus und
   setzt <html class="iwt-printing">. Diese Regeln räumen den Druck zusätzlich auf. */
@media print{
  .iwt{box-shadow:none;border:1px solid #ccc;break-inside:avoid}
  .iwt-actions,.iwt-btn,.iwt-seg button:not([aria-pressed=true]){display:none!important}
  html.iwt-printing,html.iwt-printing body{margin:0!important;padding:0!important;background:#fff!important}
  html.iwt-printing .iwt{margin:0!important;border:none}
}