/* W3 Strang D: Rechner-Bausteine (Kosten pro Stunde, Was bleibt netto?). Farben nur über die Variablen von basis.css
   (MediPersonal ohne Rot: --akzent ist dort Blau). Keine Inline-Stile. */
.w3d-rechner__raster{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:var(--luecke);align-items:start}
.w3d-rechner__eingaben{display:grid;align-content:start;gap:14px;padding:24px;border:1px solid var(--linie);border-radius:var(--radius);background:var(--grau2)}
.w3d-rechner__eingaben .feld{margin:0}
.w3d-rechner__eingaben label{display:block;margin-bottom:6px;font-size:var(--fliess);font-weight:700;color:var(--tinte);line-height:var(--fliess-z);--zeile:var(--fliess-z)}
.w3d-rechner__eingaben select,.w3d-rechner__eingaben input{width:100%;min-height:46px;padding:10px 12px;border:1px solid var(--linie2);border-radius:var(--radius-feld);background:#fff;font:inherit;font-size:var(--fliess);color:var(--tinte);line-height:var(--fliess-z);--zeile:var(--fliess-z)}
.w3d-rechner__eingaben select:focus,.w3d-rechner__eingaben input:focus{outline:2px solid var(--akzent);outline-offset:1px}
.w3d-rechner__eingaben .feld__hilfe{margin:6px 0 0;font-size:var(--klein);color:var(--text3);line-height:var(--klein-z);--zeile:var(--klein-z)}
.w3d-rechner__ergebnis{padding:24px;border:1px solid var(--linie);border-radius:var(--radius);background:#fff;box-shadow:var(--schatten)}
.w3d-rechner__ergebnis dl{margin:0}
.w3d-rechner__zeile{display:flex;justify-content:space-between;gap:16px;padding:10px 0;border-bottom:1px solid var(--linie);font-size:var(--fliess);line-height:var(--fliess-z);--zeile:var(--fliess-z)}
.w3d-rechner__zeile dt{color:var(--text2)}
.w3d-rechner__zeile dd{margin:0;font-variant-numeric:tabular-nums;color:var(--tinte);white-space:nowrap}
.w3d-rechner__zeile dd::before{content:"CHF ";color:var(--text3);font-size:var(--klein);line-height:var(--klein-z);--zeile:var(--klein-z)}
.w3d-rechner__zeile--stark dt,.w3d-rechner__zeile--stark dd{font-weight:700;color:var(--tinte)}
.w3d-rechner__zeile:last-child{border-bottom:0;padding-top:14px}
.w3d-rechner__zeile:last-child dd{font-size:var(--h2);line-height:var(--h2-z);line-height:var(--h2-z);--zeile:var(--h2-z)}
.w3d-rechner__woche{margin:8px 0 0;font-size:var(--fliess);color:var(--text2);line-height:var(--fliess-z);--zeile:var(--fliess-z)}
.w3d-rechner__woche strong{color:var(--tinte);font-variant-numeric:tabular-nums}
.w3d-rechner__warnung{display:flex;gap:8px;align-items:flex-start;margin:14px 0 0;padding:10px 14px;border-radius:var(--radius-feld);background:var(--akzent-zart);color:var(--akzent-text);font-size:var(--klein);line-height:var(--klein-z);--zeile:var(--klein-z)}
.w3d-rechner__warnung[hidden]{display:none}
.w3d-rechner__hinweis{margin:14px 0 0;font-size:var(--klein);line-height:var(--klein-z);color:var(--text2);--zeile:var(--klein-z)}
.w3d-rechner__quelle{margin:10px 0 0;font-size:var(--klein);line-height:var(--klein-z);color:var(--text3);--zeile:var(--klein-z)}
.w3d-rechner__quelle a{color:var(--text2)}
.w3d-rechner__knopf{margin:18px 0 0}
@media (max-width:860px){
  .w3d-rechner__raster{grid-template-columns:1fr}
  .w3d-rechner__eingaben,.w3d-rechner__ergebnis{padding:18px}
}
/* Korrektur Tor D-1 (T12, Massstab 3.8): Zeilen in ganzen Pixeln (vorher 1,55 und 1,5 der Schriftgrösse, 23,25 bzw. 19,5 px); das Eingabefeld
   streckt seine Zeilen nicht mehr auf die Höhe des Ergebnisses (Felder 113,89 px). Diese Datei lädt nach dem Hauptstil. */
@media (max-width:700px){ .w3d-rechner__hinweis{line-height:var(--zeile,20px)} }
/* Runde H3 (01.11.2026): Rechner MediPersonal nach Beruf (w3/d/rechner-mp.mjs), Gestaltung wie das freigegebene Beispiel Bern
   (data/vorschau-01-11/landingpage/quelltext/lp-neu.css, Abschnitt «3. Rechner»). Das Formular trägt weiter die Klasse w3d-rechner__eingaben
   (werkzeug/formulare-gleich.mjs erkennt den Rechner daran), darum hier mit .w3d-rmp überschrieben. Farben nur über Variablen. */
.w3d-rmp__raster{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:24px;align-items:start}
.w3d-rmp .w3d-rechner__eingaben,.w3d-rmp__ergebnis{display:block;background:#fff;border:1px solid var(--linie);border-radius:var(--radius);padding:28px 32px;box-shadow:var(--schatten)}
.w3d-rmp .feld{display:flex;flex-direction:column;gap:8px;margin:0 0 22px}
.w3d-rmp .w3d-rechner__eingaben label[for],.w3d-rmp legend{display:block;margin:0;font-size:var(--fliess);line-height:var(--fliess-z);font-weight:700;color:var(--tinte);padding:0;--zeile:var(--fliess-z)}
.w3d-rmp .w3d-rechner__eingaben select,.w3d-rmp .w3d-rechner__eingaben input[type=number]{width:100%;height:48px;min-height:48px;padding:0 14px;border:1px solid var(--linie2);border-radius:10px;background:#fff;font:inherit;font-size:var(--fliess);color:var(--tinte);line-height:var(--fliess-z);--zeile:var(--fliess-z)}
.w3d-rmp .w3d-rechner__eingaben select:focus,.w3d-rmp .w3d-rechner__eingaben input[type=number]:focus{outline:2px solid var(--akzent);outline-offset:1px;border-color:var(--akzent)}
.w3d-rmp .feld__hilfe{font-size:var(--klein);line-height:var(--klein-z);color:var(--text3);margin:0;--zeile:var(--klein-z)}
.w3d-rmp__ferien{border:0;margin:0;padding:0;min-width:0}
.w3d-rmp__wahl{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:8px 0}
.w3d-rmp__wahl label{position:relative;display:block;margin:0}
.w3d-rmp__wahl input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0}
.w3d-rmp__wahl span{display:flex;align-items:center;justify-content:center;height:44px;border:1px solid var(--linie2);border-radius:999px;font-size:var(--knopf-klein);font-weight:700;color:var(--tinte);cursor:pointer;background:#fff;line-height:var(--knopf-klein-z);--zeile:var(--knopf-klein-z)}
.w3d-rmp__wahl input:checked+span{border-color:var(--akzent);background:var(--akzent-zart,#EAF5FB);color:var(--akzent-text)}
.w3d-rmp__wahl input:focus-visible+span{outline:2px solid var(--akzent);outline-offset:2px}
.w3d-rmp__gross{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:4px 16px;margin:0 0 8px;padding-bottom:18px;border-bottom:1px solid var(--linie)}
.w3d-rmp__gross>span{font-size:var(--klein);font-weight:700;color:var(--text2);line-height:var(--klein-z);--zeile:var(--klein-z)}
.w3d-rmp__gross strong{font-size:var(--h2);line-height:var(--h2-z);font-weight:700;color:var(--tinte);letter-spacing:-.01em;font-variant-numeric:tabular-nums;--zeile:var(--h2-z)}
.w3d-rmp__gross strong span{font-size:inherit;color:inherit;font-weight:inherit}
.w3d-rmp__zeilen{margin:0}
.w3d-rmp__zeilen>div{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:7px 0;font-size:var(--klein);line-height:var(--klein-z);color:var(--text);--zeile:var(--klein-z)}
.w3d-rmp__zeilen dt,.w3d-rmp__zeilen dd{margin:0}
.w3d-rmp__zeilen dd{font-variant-numeric:tabular-nums;white-space:nowrap}
.w3d-rmp__zeilen>.w3d-rmp__summe{border-top:1px solid var(--linie);margin-top:4px;padding-top:10px;font-weight:700;color:var(--tinte)}
.w3d-rmp__warnung{display:flex;gap:10px;align-items:flex-start;margin:14px 0 0;padding:12px 14px;border-radius:10px;background:var(--akzent-zart,#EAF5FB);font-size:var(--klein);line-height:var(--klein-z);color:var(--tinte);--zeile:var(--klein-z)}
.w3d-rmp__warnung[hidden]{display:none}
.w3d-rmp__warnung .sym{flex:none;color:var(--akzent);margin-top:1px}
.w3d-rmp__hinweis{margin:16px 0 0;font-size:var(--klein);line-height:var(--klein-z);color:var(--text3);--zeile:var(--klein-z)}
.w3d-rmp__knopf{margin:18px 0 0}
.w3d-rmp__quelle{margin:16px 0 0;font-size:var(--klein);line-height:var(--klein-z);color:var(--text3);--zeile:var(--klein-z)}
.w3d-rmp__quelle a{color:inherit}
@media (max-width:960px){.w3d-rmp__raster{grid-template-columns:1fr}}
@media (max-width:700px){
  .w3d-rmp .w3d-rechner__eingaben,.w3d-rmp__ergebnis{padding:18px 16px}
  .w3d-rmp__raster{gap:12px}
  .w3d-rmp__gross strong{font-size:var(--h2);line-height:var(--h2-z);--zeile:var(--h2-z)}
  .w3d-rmp__zeilen>div{font-size:var(--klein);line-height:var(--klein-z);--zeile:var(--klein-z)}
  .w3d-rmp__knopf .knopf{width:100%}
}
/* Runde H3 (01.11.2026): Mindestlohn-Rechner iPersonal (w3/d/mindestlohn.mjs, skripte/w3-mindestlohn.js), gleiche ruhige Form wie der
   Rechner MediPersonal: links drei Auswahlfelder, rechts das Ergebnis; am Handy untereinander. Farben nur über Variablen (iPersonal: Rot sparsam,
   nur der Fokusrahmen über --akzent). */
.w3d-ml__raster{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:24px;align-items:start}
.w3d-ml .w3d-rechner__eingaben,.w3d-ml__ergebnis{display:block;background:#fff;border:1px solid var(--linie);border-radius:var(--radius);padding:28px 32px;box-shadow:var(--schatten)}
.w3d-ml .feld{display:flex;flex-direction:column;gap:8px;margin:0 0 22px}
.w3d-ml .feld:last-child{margin-bottom:0}
.w3d-ml .w3d-rechner__eingaben label[for]{display:block;margin:0;font-size:var(--fliess);line-height:var(--fliess-z);font-weight:700;color:var(--tinte);--zeile:var(--fliess-z)}
.w3d-ml .w3d-rechner__eingaben select{width:100%;height:48px;min-height:48px;padding:0 14px;border:1px solid var(--linie2);border-radius:10px;background:#fff;font:inherit;font-size:var(--fliess);color:var(--tinte);line-height:var(--fliess-z);--zeile:var(--fliess-z)}
.w3d-ml .w3d-rechner__eingaben select:focus{outline:2px solid var(--akzent);outline-offset:1px;border-color:var(--akzent)}
.w3d-ml__gross{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:4px 16px;margin:0;padding-bottom:12px}
.w3d-ml__gross>span{font-size:var(--klein);font-weight:700;color:var(--text2);line-height:var(--klein-z);--zeile:var(--klein-z)}
.w3d-ml__gross strong{font-size:var(--h2);line-height:var(--h2-z);font-weight:700;color:var(--tinte);letter-spacing:-.01em;font-variant-numeric:tabular-nums;white-space:nowrap;--zeile:var(--h2-z)}
.w3d-ml__stufe{margin:0 0 12px;padding-bottom:14px;border-bottom:1px solid var(--linie);font-size:var(--klein);line-height:var(--klein-z);color:var(--text);--zeile:var(--klein-z)}
.w3d-ml__liste{list-style:none;margin:0 0 12px;padding:0}
.w3d-ml__liste li{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:6px 0;font-size:var(--klein);line-height:var(--klein-z);color:var(--text);border-bottom:1px solid var(--linie);--zeile:var(--klein-z)}
.w3d-ml__liste b{font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--tinte)}
.w3d-ml__zusatz,.w3d-ml__kanton,.w3d-ml__hinweis{margin:10px 0 0;font-size:var(--klein);line-height:var(--klein-z);color:var(--text);--zeile:var(--klein-z)}
.w3d-ml__kanton,.w3d-ml__hinweis{padding:10px 14px;border-radius:10px;background:var(--grau)}
.w3d-ml__quelle{margin:12px 0 0;font-size:var(--klein);line-height:var(--klein-z);color:var(--text3);--zeile:var(--klein-z)}
.w3d-ml__quelle a,.w3d-ml__kanton a{color:inherit}
.w3d-ml__satz{margin:14px 0 0;padding-top:12px;border-top:1px solid var(--linie);font-size:var(--klein);line-height:var(--klein-z);font-weight:700;color:var(--tinte);--zeile:var(--klein-z)}
.w3d-ml__mehr{margin:14px 0 0}
.w3d-ml__leer{margin:0;font-size:var(--klein);color:var(--text2);line-height:var(--klein-z);--zeile:var(--klein-z)}
@media (max-width:960px){.w3d-ml__raster{grid-template-columns:1fr}}
@media (max-width:700px){
  .w3d-ml .w3d-rechner__eingaben,.w3d-ml__ergebnis{padding:18px 16px}
  .w3d-ml__raster{gap:12px}
  .w3d-ml__gross strong{font-size:var(--h2);line-height:var(--h2-z);--zeile:var(--h2-z)}
  .w3d-ml__liste li{flex-direction:column;gap:2px}
}
/* eigene Seite /mindestlohn-rechner/: Erklärung in vier Kärtchen, Branchenliste in zwei Spalten */
.w3d-ml-text__spalten{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 32px}
.w3d-ml-text__spalten h3{margin:0 0 6px;font-size:var(--fliess);line-height:var(--fliess-z);--zeile:var(--fliess-z)}
.w3d-ml-text__spalten p{margin:0;font-size:var(--fliess);line-height:var(--fliess-z);color:var(--text);--zeile:var(--fliess-z)}
.w3d-ml-text__branchen{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 32px}
.w3d-ml-text__branchen li{display:flex;flex-direction:column;gap:2px;padding:10px 0;border-bottom:1px solid var(--linie);font-size:var(--klein);line-height:var(--klein-z);--zeile:var(--klein-z)}
.w3d-ml-text__branchen span{font-size:var(--klein);line-height:var(--klein-z);color:var(--text3);--zeile:var(--klein-z)}
.w3d-ml-text__branchen a{color:inherit}
@media (max-width:860px){.w3d-ml-text__spalten,.w3d-ml-text__branchen{grid-template-columns:1fr}}