/* WunderZwerg - Werkzeuge, nur unter /werkzeuge/ geladen */

.nm-werkzeugliste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); gap: var(--nm-abstand-4); }
.nm-werkzeugliste li { --k: var(--nm-farbe-wachstum); position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--nm-abstand-2) var(--nm-abstand-4); align-items: center; padding: var(--nm-abstand-5); border-radius: var(--nm-rundung-karte); background: color-mix(in oklab, var(--k) var(--nm-mix), var(--nm-farbe-karte)); transition: background 0.15s ease; }
.nm-werkzeugliste li:hover { background: color-mix(in oklab, var(--k) var(--nm-mix-stark), var(--nm-farbe-karte)); }
.nm-werkzeugliste .nm-symbol { width: 2.75rem; height: 2.75rem; padding: 0.6rem; border-radius: 50%; background: var(--k); color: var(--nm-farbe-karte); }
.nm-werkzeugliste h2, .nm-werkzeugliste h3 { font-size: var(--nm-groesse-3); }
.nm-werkzeugliste a { text-decoration: none; }
.nm-werkzeugliste a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.nm-werkzeugliste li:hover a { text-decoration: underline; }
.nm-werkzeugliste p { grid-column: 1 / -1; color: var(--nm-farbe-text-leise); font-size: var(--nm-groesse-1); }
.nm-werkzeugliste--klein { gap: var(--nm-abstand-3); }
.nm-werkzeugliste--klein li { padding: var(--nm-abstand-3) var(--nm-abstand-4); border-radius: var(--nm-rundung-kachel); }
.nm-werkzeugliste--klein .nm-symbol { width: 2.25rem; height: 2.25rem; padding: 0.45rem; }
.nm-werkzeugliste--klein h3 { font-size: var(--nm-groesse-2); }

.nm-werkzeug { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: var(--nm-abstand-6) var(--nm-abstand-8); align-items: start; }
.nm-werkzeug__formular { display: flex; flex-direction: column; gap: var(--nm-abstand-5); padding: var(--nm-abstand-5); border-radius: var(--nm-rundung-karte); background: var(--nm-farbe-karte); border: var(--nm-linie) solid var(--nm-farbe-linie); box-shadow: inset 0 5px 0 var(--nm-farbe-wasser); }
.nm-werkzeug__formular .nm-button { align-self: flex-start; }
.nm-werkzeug__ergebnis { display: flex; flex-direction: column; gap: var(--nm-abstand-4); padding: var(--nm-abstand-5); border-radius: var(--nm-rundung-karte); background: var(--nm-farbe-karte); border: var(--nm-linie) solid var(--nm-farbe-linie); box-shadow: inset 0 5px 0 var(--nm-farbe-wachstum); scroll-margin-top: var(--nm-abstand-6); min-width: 0; }
.nm-werkzeug__ergebnis > h2 { font-size: var(--nm-groesse-4); }
@media (max-width: 960px) { .nm-werkzeug { grid-template-columns: minmax(0, 1fr); } }

.nm-auswahlliste { list-style: none; margin: var(--nm-abstand-2) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 var(--nm-abstand-4); }
.nm-auswahlliste a { display: inline-flex; align-items: center; min-height: var(--nm-ziel-min); }

.nm-balkentabelle td:last-child { width: 45%; }
.nm-balken { display: block; height: 10px; min-width: 2px; border-radius: 0 var(--nm-rundung-klein) var(--nm-rundung-klein) 0; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.nm-balken--sonne { background: var(--nm-farbe-waerme); }
.nm-balken--wasser { background: var(--nm-farbe-wasser); }

.nm-schritte { margin: 0; padding-left: 1.4em; display: flex; flex-direction: column; gap: var(--nm-abstand-4); }
.nm-schritte li::marker { font-family: var(--nm-schrift-ueberschrift); color: var(--nm-farbe-akzent); }
.nm-schritte h3 { font-size: var(--nm-groesse-2); font-weight: var(--nm-gewicht-stark); margin-bottom: var(--nm-abstand-1); }
.nm-schritte p { color: var(--nm-farbe-text-leise); }