body{--wp-dichte:1.07}
body.density-xs{--wp-dichte:.85}
body.density-sm{--wp-dichte:.925}
body.density-lg{--wp-dichte:1.15}
.wp-skaliert{
font-size:var(--fs-title);
--sp-1:calc(4px * var(--wp-dichte)); --sp-2:calc(8px * var(--wp-dichte));
--sp-3:calc(12px * var(--wp-dichte)); --sp-4:calc(16px * var(--wp-dichte));
--sp-5:calc(24px * var(--wp-dichte)); --sp-6:calc(32px * var(--wp-dichte));

--fs-xs:var(--fs-sm); --fs-sm:calc(11px * var(--wp-dichte));
--fs-base:calc(12px * var(--wp-dichte)); --fs-md:calc(13px * var(--wp-dichte));
--fs-lg:calc(14px * var(--wp-dichte)); --fs-title:calc(16px * var(--wp-dichte));
--fs-hero:calc(18px * var(--wp-dichte));
--r-md:calc(8px * var(--wp-dichte)); --r-lg:calc(14px * var(--wp-dichte));
--r-xl:calc(16px * var(--wp-dichte)); --r-2xl:calc(16px * var(--wp-dichte));
--ico:calc(16px * var(--wp-dichte)); --ico-lg:calc(20px * var(--wp-dichte));
--tap:calc(48px * var(--wp-dichte));
--kopf-h:calc(44px * var(--wp-dichte)); --zeile-h:calc(40px * var(--wp-dichte));
--reiter-h:calc(36px * var(--wp-dichte)); --werkzeuge-h:calc(44px * var(--wp-dichte));
--feld-h:calc(32px * var(--wp-dichte));
--t-titel:var(--fs-title); --t-text:var(--fs-lg); --t-neben:var(--fs-base);
--feld-fs:var(--t-text); --wp-eingabe-fs:calc(16px * var(--wp-dichte));
--kachel-pad:calc(6px * var(--wp-dichte)) calc(10px * var(--wp-dichte));
--kachel-pad-flach:var(--sp-1) calc(2px * var(--wp-dichte));
--kachel-luecke:calc(6px * var(--wp-dichte)); --kachel-luecke-innen:var(--sp-1);
--kachel-min-h:var(--tap); --kachel-knopf-h:var(--feld-h);
--kachel-feld-h:calc(var(--kachel-knopf-h) * 1.5);
--kachel-titel-fs:var(--t-neben); --kachel-wert-fs:var(--t-text); --kachel-sub-fs:var(--t-neben);
--gruppe-pad:var(--sp-2) var(--sp-3) var(--sp-3);
--chip-h:calc(20px * var(--wp-dichte)); --chip-pad:0 var(--sp-2); --chip-fs:var(--fs-base);
--popover-min-w:calc(200px * var(--wp-dichte)); --popover-fs:var(--fs-md);
--popover-eintrag-h:var(--feld-h); --popover-eintrag-pad:var(--sp-2) var(--sp-3);
--popover-gruppe-pad:var(--sp-2) var(--sp-3) calc(2px * var(--wp-dichte));
--pilot-knopf:calc(30px * var(--wp-dichte)); --symbolknopf:var(--pilot-knopf);
}


@media not (pointer:coarse){ body:not(.monteur-mode.mobile-ui) .wp-skaliert{ --pille-h:var(--feld-h); --pille-pad:0 var(--sp-3); } }
@media (pointer:coarse){
.wp-skaliert{
--tap:max(44px, calc(48px * var(--wp-dichte)));
--kopf-h:var(--tap); --zeile-h:var(--tap); --reiter-h:var(--tap);
--werkzeuge-h:var(--tap); --feld-h:var(--tap);
--feld-fs:max(16px, var(--t-text)); --pilot-knopf:max(44px, calc(44px * var(--wp-dichte)));
--popover-eintrag-h:var(--tap); --popover-fs:var(--fs-lg);
--popover-min-w:calc(220px * var(--wp-dichte));
--popover-eintrag-pad:calc(11px * var(--wp-dichte)) calc(14px * var(--wp-dichte));
}
}

body.monteur-mode .wp-skaliert{--tap:max(44px, calc(48px * var(--wp-dichte)))}
body.monteur-mode.mobile-ui .wp-skaliert{
--tap:max(44px, calc(48px * var(--wp-dichte)));

--fs-xs:max(12px, calc(10px * var(--wp-dichte))); --fs-sm:max(12px, calc(11px * var(--wp-dichte)));
--fs-base:max(12px, calc(12px * var(--wp-dichte))); --fs-md:max(12px, calc(13px * var(--wp-dichte)));
--fs-lg:max(12px, calc(14px * var(--wp-dichte)));
--t-neben:max(12px, var(--fs-base));
--ico:calc(20px * var(--wp-dichte)); --ico-lg:calc(24px * var(--wp-dichte));
--kopf-h:max(44px, calc(56px * var(--wp-dichte))); --zeile-h:var(--kopf-h);
--reiter-h:var(--tap); --werkzeuge-h:var(--kopf-h); --feld-h:max(44px, calc(44px * var(--wp-dichte)));
--feld-fs:max(16px, var(--t-text)); --pilot-knopf:max(44px, calc(44px * var(--wp-dichte)));
--symbolknopf:calc(38px * var(--wp-dichte));
--kachel-pad:var(--sp-2) var(--sp-3); --kachel-pad-flach:var(--sp-1) 0;
--kachel-luecke:var(--sp-2); --kachel-luecke-innen:calc(6px * var(--wp-dichte));
--kachel-min-h:var(--tap); --kachel-knopf-h:var(--tap);
--kachel-feld-h:calc(64px * var(--wp-dichte));
--gruppe-pad:var(--sp-2) var(--sp-3);
--chip-h:calc(24px * var(--wp-dichte)); --chip-fs:var(--t-neben);
--popover-min-w:calc(220px * var(--wp-dichte)); --popover-eintrag-h:var(--tap);
--popover-eintrag-pad:0 var(--sp-4);
}



:is(.wp-kopf, .wp-werkzeuge){--feld-h:calc(32px * var(--wp-dichte))}
.wp-werkzeuge{--werkzeuge-h:calc(var(--feld-h) + 2 * var(--sp-2))}
@media (pointer:coarse){:is(.wp-kopf, .wp-werkzeuge){--feld-h:max(44px, calc(48px * var(--wp-dichte)))}}
body.monteur-mode.mobile-ui :is(.wp-kopf, .wp-werkzeuge){--feld-h:max(44px, calc(44px * var(--wp-dichte)))}
body.monteur-mode.mobile-ui .wp-werkzeuge{--werkzeuge-h:calc(var(--feld-h) + 2 * var(--sp-2))}


#add-dialog.wp-skaliert > .dialog > h3{padding-right:calc(36px * var(--wp-dichte));margin-bottom:var(--sp-3)}
#add-dialog.wp-skaliert .dactions{gap:var(--sp-2)}
#add-dialog.wp-skaliert .info{margin-bottom:var(--sp-2)}
.wp-skaliert .wp-icon-btn{width:var(--symbolknopf);height:var(--symbolknopf)}
.wp-skaliert :is(.wp-popover-eintrag, .wp-sheet-menue > button) > svg{width:var(--ico);height:var(--ico)}



:where(body.wp-feldgeraet) :is(#add-dialog.wp-skaliert, .ef) :is(input:not([type=checkbox],[type=radio]),select,textarea,.wp-wahlfeld-knopf){font-size:max(16px,var(--wp-eingabe-fs));min-height:var(--feld-h)}
body.monteur-mode.mobile-ui :is(#add-dialog.wp-skaliert, .ef) :is(input:not([type=checkbox],[type=radio]),select,textarea,.wp-wahlfeld-knopf){font-size:max(16px,var(--wp-eingabe-fs));min-height:var(--feld-h)}


#add-info .wp-kachel-symbol, #add-info .wp-flach-symbol{font-size:var(--fs-sm)}