/* ==========================================================================
   420help.de — Ergänzung für die Antragswege-Seiten
   Nur auf /antragswege/, /aufstocker/, /sozialamt/, /haertefall-sgb-xii/
   eingebunden. Nutzt ausschließlich die Farbtoken aus style.css.
   ========================================================================== */

/* ---------- Schienen-Kennzeichnung ---------- */
.lane{position:relative; overflow:hidden}
.lane::before{content:""; position:absolute; inset:0 auto 0 0; width:4px}
.lane--a::before{background:linear-gradient(180deg,var(--green-600),var(--lime))}
.lane--b::before{background:linear-gradient(180deg,var(--violet),var(--violet-800))}
.lane--c::before{background:linear-gradient(180deg,#c8901f,var(--amber-line))}
.lane-tag{font-size:.74rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; margin-bottom:.5rem}
.lane--a .lane-tag{color:var(--green-700)}
.lane--b .lane-tag{color:var(--violet-text)}
.lane--c .lane-tag{color:var(--amber-ink)}

/* ---------- Entscheidungsbaum ---------- */
.tree{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-xl);
  box-shadow:var(--shadow); padding:clamp(1.2rem,1rem + 1vw,2rem); margin:1.6rem 0;
}
.tree-progress{
  display:flex; align-items:center; gap:.6rem; font-size:.8rem; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase; color:var(--text-3); margin-bottom:1rem;
}
.tree-bar{flex:1; height:5px; border-radius:3px; background:var(--line-2); overflow:hidden}
.tree-bar i{
  display:block; height:100%; width:0;
  background:linear-gradient(90deg,var(--green-600),var(--violet));
  transition:width .3s cubic-bezier(.22,.8,.3,1);
}
.tree-q{font-size:clamp(1.12rem,1rem + .6vw,1.42rem); font-weight:750; letter-spacing:-.015em; color:var(--heading); margin:0 0 .35rem}
.tree-hint{color:var(--text-2); font-size:.94rem; margin:0 0 1.1rem}
.tree-hint:empty{display:none; margin:0}

.tree-options{display:grid; gap:.6rem; margin:0; padding:0; list-style:none}
.tree-options li{margin:0}
.tree-opt{
  display:flex; align-items:flex-start; gap:.8rem; width:100%; text-align:left;
  padding:.9rem 1.05rem; border:1px solid var(--line); border-radius:var(--radius);
  background:var(--bg-soft); cursor:pointer; font:inherit; color:var(--text);
  transition:border-color .16s ease, background .16s ease, transform .12s ease;
}
.tree-opt:hover{border-color:var(--green-500); background:var(--green-050); transform:translateY(-1px)}
.tree-opt b{display:block; font-weight:700; color:var(--heading); font-size:1rem}
.tree-opt span{display:block; color:var(--text-2); font-size:.9rem; margin-top:.12rem}
.tree-opt::before{
  content:""; flex:0 0 auto; width:20px; height:20px; margin-top:2px; border-radius:50%;
  border:2px solid var(--green-600); background:var(--surface);
}
.tree-opt:hover::before{background:var(--green-fill-600); box-shadow:inset 0 0 0 3px var(--surface)}

.tree-nav{display:flex; flex-wrap:wrap; gap:.6rem; margin-top:1.2rem; padding-top:1rem; border-top:1px solid var(--line-2)}
.tree-back{
  background:none; border:0; padding:.4rem .2rem; font:inherit; font-size:.92rem; font-weight:650;
  color:var(--text-2); cursor:pointer; text-decoration:underline; text-underline-offset:.2em;
}
.tree-back:hover{color:var(--green-700)}
.tree-back[hidden]{display:none}
.tree-path{margin-left:auto; font-size:.84rem; color:var(--text-3); align-self:center; text-align:right}

/* Ergebnis */
.tree-result{border-radius:var(--radius-l); padding:1.2rem 1.35rem; border:1px solid var(--line); background:var(--bg-soft)}
.tree-result h3{margin:0 0 .1rem; font-size:clamp(1.12rem,1rem + .5vw,1.35rem)}
.tree-result .res-where{font-size:.82rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--text-3); margin:0 0 .5rem}
.tree-result p{color:var(--text-2); font-size:.97rem}
.tree-result>*:last-child{margin-bottom:0}
.tree-result--a{background:var(--green-050); border-color:var(--green-100)}
.tree-result--b{background:var(--violet-050); border-color:var(--violet-line)}
.tree-result--c{background:var(--amber-bg); border-color:var(--amber-line)}
.tree-result--info{background:var(--blue-bg); border-color:var(--blue-line)}
.res-law{
  display:inline-block; font-family:var(--ff-mono); font-size:.88rem; font-weight:600;
  background:var(--surface); border:1px solid var(--line); border-radius:6px; padding:.16em .5em; margin-bottom:.7rem;
}
.res-actions{display:flex; flex-wrap:wrap; gap:.6rem; margin-top:1rem}

.tree-fallback{margin-top:1rem}
.js .tree-fallback{display:none}
.tree-app{display:none}
.js .tree-app{display:block}

/* ---------- Rechner ---------- */
.calc{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-xl);
  box-shadow:var(--shadow); padding:clamp(1.2rem,1rem + 1vw,2rem); margin:1.6rem 0;
}
.calc-grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem 1.2rem}
@media (max-width:640px){ .calc-grid{grid-template-columns:1fr} }
.calc-field{display:flex; flex-direction:column; gap:.3rem; min-width:0}
.calc-field label{font-weight:650; font-size:.94rem; color:var(--heading)}
.calc-field .fh{font-size:.83rem; color:var(--text-3); line-height:1.45}
.calc-input{display:flex; align-items:center; gap:.5rem; border:1px solid var(--line); border-radius:var(--radius-s); background:var(--bg-soft); padding:0 .8rem; min-height:48px}
.calc-input:focus-within{border-color:var(--green-500); box-shadow:0 0 0 3px rgba(44,138,97,.14)}
.calc-input input, .calc-input select{
  flex:1; min-width:0; border:0; background:transparent; font:inherit; font-size:1rem;
  color:var(--text); padding:.55rem 0; -moz-appearance:textfield;
}
.calc-input input:focus, .calc-input select:focus{outline:none}
.calc-input input::-webkit-outer-spin-button,
.calc-input input::-webkit-inner-spin-button{-webkit-appearance:none; margin:0}
.calc-input .unit{color:var(--text-3); font-size:.95rem; flex:0 0 auto}
.calc-actions{display:flex; flex-wrap:wrap; gap:.7rem; margin-top:1.3rem}

.calc-out{margin-top:1.4rem; border-top:1px solid var(--line-2); padding-top:1.3rem}
.calc-out[hidden]{display:none}
.calc-verdict{border-radius:var(--radius-l); padding:1.15rem 1.3rem; border:1px solid var(--line); margin-bottom:1.1rem}
.calc-verdict h3{margin:0 0 .3rem; font-size:1.12rem}
.calc-verdict p{margin:0; font-size:.97rem; color:var(--text-2)}
.calc-verdict p+p{margin-top:.5rem}
.calc-verdict--yes{background:var(--green-050); border-color:var(--green-100)}
.calc-verdict--yes h3{color:var(--green-800)}
.calc-verdict--already{background:var(--blue-bg); border-color:var(--blue-line)}
.calc-verdict--already h3{color:var(--blue-ink)}
.calc-verdict--no{background:var(--amber-bg); border-color:var(--amber-line)}
.calc-verdict--no h3{color:var(--amber-ink)}

.calc-rows{list-style:none; margin:0; padding:0; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; background:var(--surface)}
.calc-rows li{display:flex; gap:1rem; align-items:baseline; justify-content:space-between; margin:0; padding:.62rem 1rem; border-bottom:1px solid var(--line-2); font-size:.95rem}
.calc-rows li:last-child{border-bottom:0}
.calc-rows .lbl{color:var(--text-2); min-width:0}
.calc-rows .val{font-family:var(--ff-mono); font-weight:600; color:var(--heading); white-space:nowrap; flex:0 0 auto}
.calc-rows li.is-sum{background:var(--bg-soft); font-weight:700}
.calc-rows li.is-sum .lbl{color:var(--heading)}
.calc-rows li.is-key{background:var(--green-050)}
.calc-rows li.is-key .val{color:var(--green-800)}

.calc-note{font-size:.86rem; color:var(--text-3); margin:.9rem 0 0}
.calc-error{color:var(--red-ink); background:var(--red-bg); border:1px solid var(--red-line); border-radius:var(--radius-s); padding:.7rem .9rem; font-size:.92rem; margin-top:1rem}
.calc-error[hidden]{display:none}

/* Kinderzeilen */
.kids{display:grid; gap:.5rem; margin-top:.2rem}
.kid-row{display:flex; gap:.5rem; align-items:center}
.kid-row .calc-input{flex:1}
.kid-del{
  flex:0 0 auto; width:40px; height:40px; border-radius:10px; border:1px solid var(--line);
  background:var(--surface); cursor:pointer; color:var(--text-2); font-size:1.1rem; line-height:1;
}
.kid-del:hover{border-color:var(--red-line); color:var(--red-ink); background:var(--red-bg)}
.kid-add{
  align-self:flex-start; background:none; border:0; padding:.3rem .2rem; font:inherit; font-size:.9rem;
  font-weight:650; color:var(--green-700); cursor:pointer; text-decoration:underline; text-underline-offset:.2em;
}
.kid-add:hover{color:var(--green-600)}

/* ---------- Kleinkram ---------- */
.ampel{display:inline-flex; align-items:center; gap:.4rem; white-space:nowrap; font-weight:650; font-size:.9rem}
.ampel::before{content:""; width:9px; height:9px; border-radius:50%; flex:0 0 auto}
.ampel--gruen::before{background:var(--green-500)}
.ampel--gelb::before{background:#d9a021}
.ampel--rot::before{background:#b93838}
.tbl td .ampel{font-size:.86rem}

/* ==========================================================================
   Seite „Einfach erklärt" – größere Schrift, mehr Luft, ruhigere Struktur
   ========================================================================== */
.einfach{font-size:1.075rem; line-height:1.75}
.einfach p{margin-bottom:1.15em; max-width:62ch}
.einfach h2{margin-top:2.6rem}
.einfach h2:first-child{margin-top:0}
.einfach li{margin:.5em 0}
.einfach .checklist span{font-size:.97rem}
.einfach .card p{font-size:1rem}

/* Sprungmarken-Leiste oben */
.sprung{display:flex; flex-wrap:wrap; gap:.5rem; margin:0 0 2rem; padding:0; list-style:none}
.sprung li{margin:0}
.sprung a{
  display:inline-block; padding:.5rem .9rem; border-radius:999px;
  border:1px solid var(--line); background:var(--surface); font-size:.92rem; font-weight:600;
  color:var(--green-800); text-decoration:none;
}
.sprung a:hover{border-color:var(--green-500); background:var(--green-050); text-decoration:none}

/* Große nummerierte Antwortblöcke */
.frage{
  border:1px solid var(--line); border-radius:var(--radius-l); background:var(--surface);
  padding:clamp(1.1rem,.9rem + .8vw,1.6rem); margin:0 0 1rem;
}
.frage h3{font-size:clamp(1.08rem,1rem + .5vw,1.28rem); margin-bottom:.5rem}
.frage>*:last-child{margin-bottom:0}
.frage .antwort{font-size:1.05rem}
.frage .dazu{
  margin-top:.9rem; padding-top:.8rem; border-top:1px solid var(--line-2);
  font-size:.88rem; color:var(--text-3);
}
.frage .dazu a{color:var(--green-700)}

/* Wörterbuch */
.woerter{list-style:none; margin:0; padding:0; display:grid; gap:.55rem}
.woerter li{
  margin:0; padding:.8rem 1rem; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius-s);
}
.woerter b{display:block; color:var(--heading); font-size:1rem}
.woerter span{display:block; color:var(--text-2); font-size:.95rem; margin-top:.15rem}

/* Ampel-Zeile für die drei Wege */
.weg-liste{list-style:none; margin:0 0 1.4rem; padding:0; display:grid; gap:.7rem}
.weg-liste li{
  margin:0; display:flex; gap:.9rem; align-items:flex-start;
  padding:.9rem 1.05rem; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface);
}
.weg-liste .nr{
  flex:0 0 auto; width:30px; height:30px; border-radius:9px; color:#fff;
  display:grid; place-items:center; font-weight:750; font-size:.9rem;
  background:linear-gradient(140deg,var(--green-fill-800),var(--violet-800));
}
.weg-liste b{display:block; color:var(--heading)}
.weg-liste span{display:block; color:var(--text-2); font-size:.96rem}